Flutter SDK--(cached_network_image usage details) Image local cache/network loading

 1.cached_network_image

is a pre-built component in Flutter for displaying web images in Flutter. It can display placeholders when network images are loaded, and cache them after the images are loaded. Similar to SDImage in OC.

2. Main attributes:

serial number	Attributes	annotation
1	imageUrl	Image URL to be displayed
2	placeholder	A placeholder displayed before the image is loaded, which can be an image URL or a Widget Widget
3	errorWidget	Widget displayed when image loading fails
4	fadeInDuration	The duration of the fade-in animation after the image is loaded, in milliseconds
5	fadeOutDuration	The duration of the fade-out animation when the image loads, in milliseconds
6	width	image width
7	height	image height
8	fit	Specify how the image fits into the parent container, including BoxFit.fill (fill the entire frame), BoxFit.contain (maintain the aspect ratio and maximize the use of the container), BoxFit.cover (maintain the aspect ratio and fill the entire container), etc.
9	alignment	Specifies the alignment of the image, which can be Alignment.center, Alignment.topCenter, etc.
10	repeat	If you need to display images repeatedly (such as tiling), you can set this property to ImageRepeat.repeat
11	imageBuilder	Image builder called before display
12	filterQuality	Filter quality, which will be applied when rendering the image
13	maxHeightDiskCache	The maximum height when setting the cache
14	maxWidthDiskCache	The maximum width when setting the cache

3. Cases using cached_network_image:

CachedNetworkImage(
  imageUrl: 'https://picsum.photos/250?image=9',
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
)
/*
imageUrl参数用于指定要加载的网络图片的URL；
placeholder参数用于指定加载图片时的占位符；
errorWidget则用于指定加载出错时的占位符。
*/

Note: When using cached_network_image, you need to rely on internet permissions, otherwise network images cannot be loaded normally. In addition, in order to make better use of the caching mechanism, we also need to call the following code when the application is initialized:

import 'package:flutter/material.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(),
    );
  }

  @override
  void initState() {
    super.initState();
//该代码用于在应用启动时初始化cached_network_image的下载回调，用于实现缓存功能
    CachedNetworkImageProvider().downloadImageCallback = (uri, headers) async {
      final response = await http.get(uri, headers: headers);
      return response.bodyBytes;
    };
  }
}

4. Clear image cache

//imageUrl参数指定需要清除缓存的图片地址
CachedNetworkImage.evict(imageUrl);