[shutter] image component (cached_network_image network image caching plug-in)

One 、cached_network_image Network picture caching plug-in

---

Pictures loaded from the network , It can be cached , If you get the picture again, you can get the picture directly from the cache , similar Glide Three level cache mechanism in ;

Cached pictures can be used cached_network_image Plug-in implementation ;

install cached_network_image plug-in unit :

• Search plug-ins : stay https://pub.dev/packages Mid search cached_network_image plug-in unit ;
• Plug-in address : https://pub.dev/packages/cached_network_image
• Configuration plug-ins : stay pubspec.yaml Configure plug-ins in ;

dependencies:  cached_network_image: ^2.5.1

• Get plug-ins : Click on pubspec.yaml In the upper right corner of the middle Pub get Button , Get plug-ins ;
• Import header file :

import 'package:cached_network_image/cached_network_image.dart';

Two 、cached_network_image Load network pictures

---

cached_network_image Network picture caching plug-in , Provides a component for loading network pictures CachedNetworkImage , In this component, you can set the... Displayed in the process of loading pictures placeholder ;

Center(  //  Before the picture is loaded, it shows  placeholder ,  Display network pictures after loading   child: CachedNetworkImage(    //  Content displayed during loading network pictures  ,  The progress bar is displayed here     placeholder: (context, url)=>CircularProgressIndicator(),    //  Network picture address     imageUrl: "/img/cd/8dfd8275b7e578e58bf6d549cd96ba.jpg",  ),),

Running effect : The second picture shows the effect of this example ;

Network pictures used :

3、 ... and 、 Complete code example

---

Complete code example :

import 'package:flutter/material.dart';import 'dart:io';import 'package:path_provider/path_provider.dart';import 'package:transparent_image/transparent_image.dart';import 'package:cached_network_image/cached_network_image.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget { 
      // This widget is the root of your application.  @override  Widget build(BuildContext context) { 
        return MaterialApp(      title: 'Flutter Demo',      theme: ThemeData(        primarySwatch: Colors.blue,      ),      home: MyHomePage(title: 'Flutter Demo Home Page'),    );  }}class MyHomePage extends StatefulWidget { 
      MyHomePage({ 
    Key key, this.title}) : super(key: key);  final String title;  @override  _MyHomePageState createState() => _MyHomePageState();}class _MyHomePageState extends State<MyHomePage> { 
      int _counter = 0;  void _incrementCounter() { 
        setState(() { 
          _counter++;    });  }  /// SD  Card path   String sdPath;  @override  void initState() { 
        //  obtain  SD  Card path     getSdPath();  }  void getSdPath() async { 
        String path = (await getExternalStorageDirectory()).path;    setState(() { 
          sdPath = path;    });  }    @override  Widget build(BuildContext context) { 
        print("sdPath : $sdPath");        return Scaffold(      appBar: AppBar(        title: Text(widget.title),      ),      body: Center(        child: ListView(          children: [            Stack(              children: [                //  Progress bar                 Center(child: CircularProgressIndicator(),),                Center(                  //  The gradient appears when the network is loaded                   child: FadeInImage.memoryNetwork(                    // Placeholder                    placeholder: kTransparentImage,                    image: "https://img-blog.csdnimg.cn/2021032321394771.png",                  ),                )              ],            ),            Center(              //  Before the picture is loaded, it shows  placeholder ,  Display network pictures after loading               child: CachedNetworkImage(                //  Content displayed during loading network pictures  ,  The progress bar is displayed here                 placeholder: (context, url)=>CircularProgressIndicator(),                //  Network picture address                 imageUrl: "/img/cd/8dfd8275b7e578e58bf6d549cd96ba.jpg",              ),            ),            Stack(              children: [                //  Progress bar                 Center(child: CircularProgressIndicator(),),                Center(                  //  The gradient appears when the network is loaded                   child: FadeInImage.assetNetwork(                    // Placeholder                    placeholder: "images/waiting.gif",                    image: "https://img-blog.csdnimg.cn/2021032321394771.png",                  ),                )              ],            ),            //  Picture components  ,  Load a picture from the network             /*Image.network( //  Picture address  "https://img-blog.csdnimg.cn/2021032313493741.png", ),*/            /*Image( image: AssetImage("images/sidalin.png"), ),*/            //Image.asset('images/sidalin2.png', ),            ///  from  SD  Card loading picture             /*if(sdPath != null) Image.file( File('$sdPath/sidalin3.png'), width: 200, ),*/          ],        )      ),      floatingActionButton: FloatingActionButton(        onPressed: _incrementCounter,        tooltip: 'Increment',        child: Icon(Icons.add),      ), // This trailing comma makes auto-formatting nicer for build methods.    );  }}

Running effect :

Four 、 Related resources

---

Reference material :

• Flutter Official website : https://flutter.dev/
• Flutter Plug in download address : https://pub.dev/packages
• Flutter Developing documents : https://flutter.cn/docs ( Strongly recommend )
• official GitHub Address : https://github.com/flutter
• Flutter The Chinese community : https://flutter.cn/
• Flutter Practical tutorial : https://flutter.cn/docs/cookbook
• Flutter CodeLab : https://codelabs.flutter-io.cn/
• Dart Chinese document : https://dart.cn/
• Dart Developer website : https://api.dart.dev/
• Flutter Chinese net ( unofficial , The translation is very good ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
• Flutter Related issues : https://flutterchina.club/faq/ ( It is recommended to watch it at the introductory stage )
• GitHub Upper Flutter Open source examples : https://download.csdn.net/download/han1202012/15989510

Blog source download :

• GitHub Address : https://github.com/han1202012/flutter_image_widget ( Keep updating with the progress of the blog , There may not be the source code of this blog )

• Blog source snapshot : https://download.csdn.net/download/han1202012/16059814 ( The source code snapshot of this blog , You can find the source code of this blog )