flutter 轮播图动态加载网络图片

Swiper，网上很多列子只是加载固定的几张图，并且页面只有一个轮播图，在实际应用中，可能会遇到类似ins这种，加载列表，并且都是多图模式的情况。

需要添加依赖包
flukit: ^1.0.0
引用 import 'package:flukit/flukit.dart';

//这一坨放在自己想要显示轮播图的地方
AspectRatio(
        aspectRatio:1.0,// 16.0 / 9.0,
        child: Swiper(
          indicatorAlignment: AlignmentDirectional.topEnd,
          circular: true,
          autoStart:false,
          indicator: NumberSwiperIndicator(),//使用的官方的 分数下标
          children:AspecRaticImgs(pro.image),//这里是一个List<String>类型的参数，存放的图片Url列表
        ),
      );

//轮播图片

class NumberSwiperIndicator extends SwiperIndicator{
  @override
  Widget build(BuildContext context, int index, int itemCount) {
    if(itemCount>1){
    return Container(
      decoration: BoxDecoration(
          color: Colors.black45,
          borderRadius: BorderRadius.circular(20.0)
      ),
      margin: EdgeInsets.only(top: 10.0,right: 5.0),
      padding: EdgeInsets.symmetric(horizontal: 6.0,vertical: 2.0),
      child: Text("${++index}/$itemCount", style: TextStyle(color: SQColor.white, fontSize: 18.0)),
    );
  }else{
      return Container();
    }
  }
}

//这里我一开始用foreach循环，发现不行 会报错，说我add时用了空对象，头疼，与C#真的是大相径庭
List<Widget> AspecRaticImgs(List<String> imgUrl) {
  return imgUrl.map<Widget>((url){
    return  Image.network(
      url,
      height: 400,
      fit: BoxFit.cover,
    );
  }).toList();
}

List<Widget> AspecRaticImgs(List<String> imgUrl) {
  return imgUrl.map<Widget>((url){
    return  CachedNetworkImage(//这个加载更加舒服，当在加载中的时候，有一个加载进度
      imageUrl: url,
      height: 400,
      fit: BoxFit.cover,
      placeholder: CustomWidgets.loadingPlaceHolder,
      errorWidget: Image.asset('images/bg_gray.png',height: 400),
    );
  }).toList();
}