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


Related articles: