Flutter image cache 2.1

  • What is image caching
  • Image
  • FadeInImage
  • CachedNetworkImage

What is image caching

Images are downloaded and cached locally when there is a network, locally cached images are used when there is a second startup, and placeholder images are used to display the current state when there is no network and no downloaded network local images are cached locally.

Image

Image parameters type instructions
src String Image Displays the Image path
width double Image width
height double Picture height
alignment AlignmentGeometry The relative position
fit BoxFit BoxFit. Cover equal proportion stretch until one side is filled with BoxFit. Cover equal proportion stretch until both sides are filled, at which point one side may be out of range BoxFit. Width fill boxFit.fitheight equal ratio stretch, height fill BoxFit.None does not stretch, out of range intercept boxFit.scaleDown only shrinks, equal ratio

Loading network images

 Image.network(
            "https://www.devio.org/img/avatar.png",
            width: 100,
            height: 100,),Copy the code

Setting resource images

                Image.asset(
                  "images/panda.jpeg",
                  width: 150,
                  height: 150,),Copy the code

Setting local Images

                Image.file(
                  new File(
                      "/data/user/0/com.example.flutter_app/cache/image_picker5478558919946394496.jpg"),
                  width: 100,
                  height: 100,),Copy the code

Effect:

FadeInImage

FadeInImage. MemoryNetwork () download the pictures to the local network, use transparent property kTransparentImage, from transparent to opaque animation display does not support. JPG images of attribute dependence of transparent: transparent_image: ^ 1.0.0

FadeInImage memoryNetwork parameters type instructions
placeholder Uint8List Placeholder that is displayed before the image is loaded
width double wide
height double high
alignment AlignmentGeometry The relative position
fit BoxFit BoxFit. Cover equal proportion stretch until one side is filled with BoxFit. Cover equal proportion stretch until both sides are filled, at which point one side may be out of range BoxFit. Width fill boxFit.fitheight equal ratio stretch, height fill BoxFit.None does not stretch, out of range intercept boxFit.scaleDown only shrinks, equal ratio 
 Container(
                  color: Colors.black,
                  child:  FadeInImage.memoryNetwork(
                    width: 200,
                    height: 200,
                    fit: BoxFit.none,
                    alignment: Alignment.centerRight,
                    // Load images from memory
                    placeholder: kTransparentImage, // Rely on transparent_image: ^1.0.0
                    image: 'https://www.devio.org/img/avatar.png',),),Copy the code

Fadeinimage.assetnetwork () downloads network images to the local site. Using local images as station bitmaps does not support. JPG images

FadeInImage assetNetwork parameters type instructions
placeholder String Placeholder that is displayed when the image is loaded before loading the local image
width double wide
height double high
alignment AlignmentGeometry The relative position
fit BoxFit BoxFit. Cover equal proportion stretch until one side is filled with BoxFit. Cover equal proportion stretch until both sides are filled, at which point one side may be out of range BoxFit. Width fill boxFit.fitheight equal ratio stretch, height fill BoxFit.None does not stretch, out of range intercept boxFit.scaleDown only shrinks, equal ratio 
FadeInImage.assetNetwork(
                  width: 140,
                  height: 100,
                  alignment: Alignment.bottomLeft,
                  fit: BoxFit.fill,
                  placeholder:
                      'images/panda.jpeg',
                  image: 'https://www.devio.org/img/avatar.png',),Copy the code

Effect:

CachedNetworkImage

Function Description: If there is a network: the downloaded image is cached to the local. When this function is opened for the second time, do not download the network image and use the cached local image. If there is no network and no cached local image, use the default image.

CachedNetworkImage parameters type instructions
memCacheWidth int Cache to local width
memCacheHeight int Cache to local high
placeholder PlaceholderWidgetBuilder Placeholder to display when the image is not loaded
imageUrl String Loading image Url
errorWidget LoadingErrorWidgetBuilder No network download image use the default image 
CachedNetworkImage(
                    memCacheWidth: 350./ / the cache wide
                    memCacheHeight: 200./ / the cache
                    placeholder: (context, url) {
                      return CircularProgressIndicator(
                        backgroundColor: Colors.greenAccent,
                        valueColor: AlwaysStoppedAnimation(Colors.red),
                      );
                    },
                    imageUrl:
                        "https://image.springup9.com/image/20200805/epcyoisqmm80000000.jpeg".// Use the default image when downloading pictures without network
                    errorWidget: (context, url, android) {
                      print('CachedNetworkImage${url}');
                      return Icon(Icons.android);
                    }),
Copy the code

Effect:

Check the default image of the errorWidget with the wrong image address:



The complete code

Chapter 1 :Flutter mobile camera, select the photo function to practice

Next Chapter :Flutter Night Mode and Font Settings (2.2)

Original is not easy, your praise and comment is the biggest encouragement and support for me!