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();
}