记录flutter---Swiper轮播图

flutter的库是真的好用。。。无语，找了很多，都说的模糊不清，我这次直接提供接口，绝对复制就可使用，，点个赞赞吧，前端学flutter的兄弟们⚽️⚽️了

轮播图组件Swiper

要用这个组件需要再pub.dev/ 库中搜索相应的组件

1、flutter_swiper（报错，解决不了的那种）

flutter_swiper: ^1.1.6

这个库不知道咋地了，一直报错，无语了，作为一个新生，我是解决不了 我觉得是个bug。。。。就是空安全搞的鬼

2、flutter_swiper_null_safety

flutter_swiper_null_safety: ^1.0.2

使用这个库的时候，要注意给轮播图设置宽高，否则控制台会一直报

Null check operator used on a null value

我被这俩搞疯了。。。。。。。

3、具体代码（接口一年后到期）

import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:flutter_swiper_null_safety/flutter_swiper_null_safety.dart';
class homePage extends StatefulWidget {
  homePage({Key? key}) : super(key: key);

  @override
  State<homePage> createState() {
    return _homePageState();
  }
}

class _homePageState extends State<homePage> {
  String baseURL = "http://47.98.174.225/index.php/index/index";

  Future getData() async {
    var res;
    try {
      res = await Dio().post("$baseURL" + "/image");
      print(res.data is List);
    } catch (e) {
      print('异常信息:$e');
    }
    return res.data;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("商城"),
        ),
        body: ListView(
          children: [
            AspectRatio(
              aspectRatio: 16 / 9,
              child: Container(
                width: 200,
                height: 200,
                child: FutureBuilder(
                  future: getData(),
                  builder: (BuildContext context, AsyncSnapshot snapshot) {
                    print(snapshot.data is List);
                    // 请求已结束R
                    if (snapshot.connectionState == ConnectionState.done) {
                      if (snapshot.hasError) {
                        // 请求失败，显示错误
                        return Text("Error: ${snapshot.error}");
                      } else {
                        // 请求成功，显示数据
                        return Swiper(
                          itemBuilder: (BuildContext context, int index) {
                            // 配置图片地址
                            return new Image.network(
                              snapshot.data[index]["image_url"],
                              fit: BoxFit.fill,
                            );
                          },
                          // 配置图片数量
                          itemCount: snapshot.data.length,
                          autoplay: true,
                          //自动轮播
                          onIndexChanged: (index) {},
                          //引起下标变化的监听
                          onTap: (index) {
                            print(snapshot.data[index]["image_id"]);
                          },
                          //点击轮播时调用
                          duration: 1000,
                          //切换时的动画时间
                          autoplayDelay: 2000,
                          //自动播放间隔毫秒数.
                          autoplayDisableOnInteraction: false,
                          loop: true,
                          //是否无限轮播
                          scrollDirection: Axis.horizontal,
                          //滚动方向
                          index: 0,
                          //初始下标位置
                          scale: 0.6,
                          //轮播图之间的间距
                          viewportFraction: 0.8,
                          //当前视窗比例，小于1时就会在屏幕内，可以看见旁边的轮播图
                          // indicatorLayout: PageIndicatorLayout.COLOR,
                          pagination: new SwiperPagination(),
                          //底部指示器
                          // control: new SwiperControl(), //左右箭头
                        );
                      }
                    } else {
                      // 请求未结束，显示loading
                      return Center(
                        child: CircularProgressIndicator(),
                      );
                    }
                  },
                ),
              ),
            )
          ],
        ));
  }
}