Method of Dynamic Loading Network Pictures from flutter Carousel
- 2021-11-10 10:57:25
- OfStack
Flutter is Google's mobile UI framework, which can quickly build high-quality native user interfaces on iOS and Android. Flutter works with existing code 1. Flutter is being used by more and more developers and organizations around the world, and Flutter is completely free and open source.
Swiper, many examples on the Internet only load a few fixed pictures, and there is only one carousel picture on the page. In practical application, you may encounter the situation of loading lists like ins, and they are all in multi-picture mode.
Need to add dependency package
flukit: ^1.0.0
Quote import 'package:flukit/flukit.dart';
// This 1 Put it where you want to display the carousel
AspectRatio(
aspectRatio:1.0,// 16.0 / 9.0,
child: Swiper(
indicatorAlignment: AlignmentDirectional.topEnd,
circular: true,
autoStart:false,
indicator: NumberSwiperIndicator(),// Used by the official Fractional subscript
children:AspecRaticImgs(pro.image),// This is 1 A List<String> Parameters of type, stored pictures Url List
),
);
// Carousel picture
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();
}
}
}
// Here I 1 Start using foreach Loop, find no way Will report an error and say I add Empty objects, headaches, and C# It's really quite different
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(// This load is more comfortable, and when it is in load, there are 1 Load progress
imageUrl: url,
height: 400,
fit: BoxFit.cover,
placeholder: CustomWidgets.loadingPlaceHolder,
errorWidget: Image.asset('images/bg_gray.png',height: 400),
);
}).toList();
}
Summarize