Flutter Image

Experiment with some common Image functions

The Image test

The third experiment of Flutter learning tested some common features of Image, including local loading of images, web loading of images and GIFs, gradual rendering of images, loading images from the web and caching them in memory.

The code address

Loading local images

Create folder images in the lib sibling directory and add the following lines to the pubspec.yaml file.

flutter:
  assets:
    - images/flutter.png
Copy the code

Get the picture with AssetImage

// Image from asserts
 Padding(
   padding: const EdgeInsets.fromLTRB(0.0, 20.0, 0.0, 0.0),
   child: new Image(
       image:new AssetImage('images/flutter.png'),
       width: 50,
       height: 50,
   ),
 ),
Copy the code
Load images according to web links
// Image from Internet Padding(Padding: const EdgeInsets. FromLTRB (0.0, 10.0, 0.0, 0.0), child: Image.network( 'https://github.com/draftbk/Blog_Resource/blob/master/Flutter/picture/day3/flutter.png?raw=true', scale: 4,),),Copy the code
Load from a network linkGIF

The ability to easily load giFs is a great feature, I found a Google GIF haha

// Gif from internet Padding( padding: Const EdgeInsets. FromLTRB (0.0, 0.0, 0.0, 0.0), child:Image.network( 'https://github.com/draftbk/Blog_Resource/blob/master/Flutter/gif/day3/google.gif?raw=true', scale: 4, ), ),Copy the code
FadeInImage

Add cached_network_image to pubspec.yaml

// FadeInImage Padding(Padding: const EdgeInsets. FromLTRB (0.0, 0.0, 0.0, 0.0), child: FadeInImage.memoryNetwork( width: 180, height: 180, placeholder: kTransparentImage, image: 'https://github.com/draftbk/Blog_Resource/blob/master/Flutter/picture/day3/flutter.png?raw=true', ), ),Copy the code
CachedNetworkImage (loading images from the network and caching them in memory)

Add cached_network_image to pubspec.yaml

// CachedNetworkImage Padding(Padding: const EdgeInsets. FromLTRB (0.0, 0.0, 0.0, 0.0), child: CachedNetworkImage( width: 100, height: 100, placeholder: CircularProgressIndicator(), imageUrl: 'https://github.com/draftbk/Blog_Resource/blob/master/Flutter/picture/day3/flutter.png?raw=true', ), ),Copy the code

Problems encountered

So keep a record of your problems.

Problem 1: When I load Gif and PNG using the following code, it does not display
// Gif from internet adding( padding: Const EdgeInsets. FromLTRB (0.0, 10.0, 0.0, 0.0), child:Image.network( 'https://github.com/draftbk/Blog_Resource/blob/master/Flutter/gif/day3/google.gif?raw=true', scale: 2, ), )Copy the code

Solution: Add? After the link. Raw =true

'https://github.com/draftbk/Blog_Resource/blob/master/Flutter/gif/day3/google.gif?raw=true',
Copy the code
Question 2: Do not know where assets folder is created and where pictures can be used

A review revealed that Flutter does not need assets. Instead, Flutter uses the pubspec.yaml file (located at the root of the project) to identify the assets required by the application. You can create a folder with another name to identify the assets path.

flutter:
  assets:
    - images/flutter.png
Copy the code
Question 3: Sometimes I do not know what version to import when importing package

Any lazy person

dependencies:
  flutter:
    sdk: flutter
  transparent_image: any
  cached_network_image: any
Copy the code
Problem 4: I didn’t set the width of the Container in the beginning, and the animation layout changed badly when loading the image.

Solution: Set width for Container

Widget buttonSection = Container(padding: const EdgeInsets. All (15.0), width: 1000,Copy the code

The path to Flutter learning

Github.com/draftbk/flu…