一、引入第三方依赖

flutter_swiper: ^1.1.6

Use this package as a library

Depend on it

Run this command:
With Flutter:

$ flutter pub add flutter_swiper

This will add a line like this to your package’s pubspec.yaml (and run an implicit flutter pub get):

dependencies: flutter_swiper: ^1.1.6

Alternatively, your editor might support or flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import ‘package:flutter_swiper/flutter_swiper.dart’;

二、使用组件

创建一个Swiper组件

// ignore_for_file: file_names
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
class Cate extends StatefulWidget {
  const Cate({ Key? key }) : super(key: key);
  @override
  _CateState createState() => _CateState();
}
class _CateState extends State<Cate> {
  List<Map> imgList = [
    {
      "url": "https://www.itying.com/images/flutter/1.png"
    },
    {
      "url": "https://www.itying.com/images/flutter/2.png"
    },
    {
      "url": "https://www.itying.com/images/flutter/3.png"
    },
    {
      "url": "https://www.itying.com/images/flutter/4.png"
    }
  ];
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      child: Swiper(
        itemBuilder: (BuildContext context,int index) => Image.network(imgList[index]["url"],fit: BoxFit.fill),
        itemCount: imgList.length,
        pagination: const SwiperPagination(),
        autoplay: true,
        control: SwiperControl( // 指示器
          iconNext: Icon(Icons.navigate_next).icon,
          iconPrevious: Icon(Icons.navigate_before).icon
        ),
      )
    );
  }
}

效果图：

三、Swiper的常见属性

Constructor （构造函数）

Basic

Pagination（分页器）

The pagination extends from SwiperPlugin,the SwiperPlugin provides extra ui for Swiper.Set new SwiperPagination() to show default pagination.

Control buttons（左右切换的按钮）

The control also extends from SwiperPlugin,set new SwiperControl() to show default control buttons.