preface

This article will be the main picture loading, loading methods including local and network, at the same time, reference to the third party picture cache framework file, by the way, the introduction of the three-party framework

A github – like third-party repository address in Flutter

Demo address (contents in the loadImage folder, can replace the main comments try effect)

Local image loading

Local image loading. Before loading, introduce the image import and path configuration

Step 1: Create a directory for storing images and place them in the same directory as ios or Android, usually images or Assets

Step 2: Open the pubspec.yaml file, uncomment assets below, and import the path name in the following format (which can be captured by dragging and dropping to the terminal), as shown below.

If this fails, try clicking Pub get or Pub Upgrade at the top right of the pubSpec. yaml file contents

Load the local Image using image. asset, as shown below

/ / recommend
Image.asset("images/WechatIMG21002.jpeg")
// Load mode 2
Image(image: AssetImage('images/WechatIMG21002.jpeg'))
Copy the code

Load resource files in Android and ios

Just like normal local resource files, but first find their resource path location

Android: Android /app/ SRC /main/res

The ios resources: ios/Runner/Assets. Xcassets

Then configure it to the pubSpec.yaml file as shown below (as you might have guessed from the previous image).

It is then loaded using image.asset, as shown below

// Load android resource images
Image.asset("android/app/src/main/res/mipmap-mdpi/ic_launcher.png")
// Load an ios resource image
Image.asset("ios/Runner/Assets.xcassets/logo.imageset/logo.png")
Copy the code

Network image loading

Network image loading eliminates the loading step of local image and directly uses Image.network to load, as shown below

// Load mode 1
NetworkImage("FM = https://img0.baidu.com/it/u=2907855715, 3034528164 & 253 & FMT = auto&app = 138 & f = JPEG? W = 890 & h = 500")
// Load mode 2
Image.network("FM = https://img0.baidu.com/it/u=2907855715, 3034528164 & 253 & FMT = auto&app = 138 & f = JPEG? W = 890 & h = 500")
Copy the code

By the way, I would like to introduce FadeInImage, which is used to display network images in gradient mode. That is, after downloading, the image can be displayed in the gradient mode, so that the image display is not so abrupt.

FadeInImage.assetNetwork(
  placeholder: "images/WechatIMG21002.png"./ / the preview
  fit: BoxFit.fitWidth, // Adaptive width
  height: 140.// The height can be set
  image: "FM = https://img0.baidu.com/it/u=2907855715, 3034528164 & 253 & FMT = auto&app = 138 & f = JPEG? W = 890 & h = 500",),Copy the code

Tripartite installation and use of picture cache controls

We use the cached_network_image framework and use its import steps as an example

Run the following command to import, and the imported dependencies will be placed in pubspec.yaml

flutter pub add cached_network_image
Copy the code

The imported dependencies will also be placed in pubspec.yaml. You can change the version number you want in the pubspec.yaml file. If there is a runtime problem, you can update the environment by clicking Pub get or Pub Upgrade on the file

The dependencies in pubspec.yaml are shown below, and you can change the version number as appropriate, then click Pub Upgrade in the upper right corner

Dependencies: cached_network_image: ^ 3.2.0Copy the code

After importing into the project, the project file import is shown as follows (it is more convenient to import using the system prompt)

import 'package:cached_network_image/cached_network_image.dart';
Copy the code

Use as follows

CachedNetworkImage(
    imageUrl: "FM = https://img2.baidu.com/it/u=479460895, 312746087 & 253 & FMT = auto&app = 120 & f = JPEG? W = 889 & h = 500"
)
Copy the code

Note: If the project is running on an ios emulator or iPhone and the pod install command is stuck, if the pod itself is fine, open the podfile, remove the # from platform, and try again

The last

Here will be the import of three parties, fluter community address is also affixed, come to try to develop it

You can also test the demo, the effect is good