Flutter轮播图组件

轮播图我们采用的是第三方flutter_swiper来实现
我们在https://pub.dev/中搜索swiper

flutter_swiper是我们以前使用的，由于dart新特性空安全，我们添加flutter_swiper依赖然后下载使用时也会报错，让我们使用新版，即flutter_swiper_null_safety，使用方法和flutter_swiper一样，只是在添加依赖的语句发生改变。
地址如下：
flutter_swiper_null_safety地址
flutter_swiper地址
这里给出swiper中的一些属性

参数	默认值	描述
scrollDirection	Axis.horizontal	滚动方向，设置为Axis.vertical如果需要垂直滚动
loop	true	无限轮播模式开关
index	0	初始的时候下标位置
autoplay	false	自动播放开关.
onIndexChanged	void onIndexChanged(int index)	当用户手动拖拽或者自动播放引起下标改变的时候调用
onTap	void onTap(int index)	当用户点击某个轮播的时候调用
duration	300.0	动画时间，单位是毫秒
pagination	null	设置 new SwiperPagination() 展示默认分页指示器
control	null	设置 new SwiperControl() 展示默认分页按钮

1. 第一步还是在pubspec.yaml 中添加依赖语句

dependencies:
  flutter_swiper_null_safety: ^1.0.2

下面是在对应文件中使用时导入语句

import 'package:flutter_swiper_null_safety/flutter_swiper_null_safety.dart';

2. 使用时可以直接参考flutter_swiper中的例子进行修改
   flutter_swiper中的属性和方法也可以参考官方给出的文档https://pub.dev/packages/flutter_swiper进行查看，下面给出简单的示例

// ignore_for_file: prefer_const_constructors_in_immutables


import 'package:flutter/material.dart';
import 'package:flutter_swiper_null_safety/flutter_swiper_null_safety.dart';

class SwiperPage extends StatefulWidget {
  SwiperPage({Key? key}) : super(key: key);

  @override
  _SwiperPageState createState() => _SwiperPageState();
}

class _SwiperPageState extends State<SwiperPage> {
  List<Map> imgList = [
    {
      "url":"https://cdn.stocksnap.io/img-thumbs/280h/flower-bloom_0YEQU9SK3P.jpg"
    },
    {
      "url":"https://cdn.stocksnap.io/img-thumbs/960w/winter-sunshine_MYHYP62TQ2.jpg"
    },
    {
      "url":"https://cdn.stocksnap.io/img-thumbs/280h/PHKM6CXBLQ.jpg"
    },
    {
      "url":"https://cdn.stocksnap.io/img-thumbs/960w/flower-bouquet_X6UBKGVU0Z.jpg"
    }
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('轮播图组件演示'),
      ),
      body: Swiper(
        itemBuilder: (BuildContext context, int index) {
          return Image.network(
           imgList[index]["url"],
            fit: BoxFit.fill,
          );
        },
        itemCount: imgList.length,
        //控制轮播图左右箭头
        pagination: SwiperPagination(),
        //配置轮播图下部分页器
        control: SwiperControl(),
      ),
    );
  }
}

上面的轮播图不够美观，我们可以在轮播图外部嵌套Container等组件进行限制，确定大小

// ignore_for_file: prefer_const_constructors_in_immutables

import 'package:flutter/material.dart';
import 'package:flutter_swiper_null_safety/flutter_swiper_null_safety.dart';

class SwiperPage extends StatefulWidget {
  SwiperPage({Key? key}) : super(key: key);

  @override
  _SwiperPageState createState() => _SwiperPageState();
}

class _SwiperPageState extends State<SwiperPage> {
  List<Map> imgList = [
    {
      "url":
          "https://cdn.stocksnap.io/img-thumbs/280h/flower-bloom_0YEQU9SK3P.jpg"
    },
    {
      "url":
          "https://cdn.stocksnap.io/img-thumbs/960w/winter-sunshine_MYHYP62TQ2.jpg"
    },
    {"url": "https://cdn.stocksnap.io/img-thumbs/280h/PHKM6CXBLQ.jpg"},
    {
      "url":
          "https://cdn.stocksnap.io/img-thumbs/960w/flower-bouquet_X6UBKGVU0Z.jpg"
    }
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('轮播图组件演示'),
      ),
      body: Column(
        children: [
          Container(
              width: double.infinity,
              child: AspectRatio(
                aspectRatio: 16 / 9,
                child: Swiper(
                  itemBuilder: (BuildContext context, int index) {
                    return Image.network(
                      imgList[index]["url"],
                      fit: BoxFit.fill,
                    );
                  },
                  itemCount: imgList.length,
                  pagination: SwiperPagination(),
                  control: SwiperControl(),
                ),
              ))
        ],
      ),
    );
  }
}

如果需要设置自动轮播，点击路由等的话还是可以参考官方文档