“This is the ninth day of my participation in the Gwen Challenge.

1. The picture Image

The Image component (Image) is the component that displays the Image. The Image component has a variety of constructors: New Image: retrieves the Image from the ImageProvider. New image. asset: Loads the resource Image. New image. file: loads the local Image file. New Image.network: Add web images. New image. memory: Load Uint8List resource Image.Copy the code

2.image.network is a remote network image

class MyCont extends StatelessWidget { @override Widget build(BuildContext context) { return new Container( child: new Image.network( 'https://p.6463.com/360kuai/20210622/1624351047tit.png', alignment: Alignment. TopLeft,// topLeft corner centered fit: boxfit.cover,// possible clipping, fills the entire container. , width: 200.0,// height: 100.0,// height of container); }}Copy the code

3 Two methods of setting a circular Container Container

class MyCont extends StatelessWidget { @override Widget build(BuildContext context) { return new Container( width: 200.0,// Container width height: 200.0,// container height decoration: BoxDecoration(// First way to set circles // borderRadius: BorderRadius. All (Radius. Circular (100.0)), / / set the circular second way BorderRadius: BorderRadius. Circular (100.0), / / color color: Color.fromARGB(255, 192, 213, 1), ) ); }}Copy the code

4 Set the circle picture in the first way

class MyCont extends StatelessWidget { @override Widget build(BuildContext context) { return new Container( width: 200.0,// Container width height: 200.0,// container height decoration: BoxDecoration(// First way to set circles // borderRadius: BorderRadius. All (Radius. Circular (100.0)), / / set the circular second way BorderRadius: BorderRadius. Circular (100.0), / / set the circular image image: DecorationImage( image: NetworkImage("https://p.6463.com/360kuai/20210622/1624351047tit.png"), fit: BoxFit.cover ) ) ); }}Copy the code

5. The second way to set the circular image

class MyCont extends StatelessWidget { @override Widget build(BuildContext context) { return new Container( child: New ClipOval (child: Image.net work (' https://p.6463.com/360kuai/20210622/1624351047tit.png ', / / that the small image deformation height: 100.0, width: 100.0, fit: boxfit.cover,),); }}Copy the code

6. A way to introduce local images

Step 1: I'm going to create a folder under the root of my project and I'm going to put images in there and then I'm going to create a 2.0x folder, a 3.0x folder, a 4.0x folder under each of those 2.0, 3.0x,4.0x files and I'm going to put the images under 2.0, 3.0x,4.0x imagesCopy the code

Step 2: Flutter uses the pubspec.yaml file (located at the project root) to identify the asset required by the application. PNG -images /2.0x/bgg.png -images /3.0x/bgg.png -images /4.0x/bgg.pngCopy the code
Note: Since YAML files are strict about indentation, you must strictly indent assets with two Spaces per layer, where assets should be preceded by two Spaces. Note also that the Flutter run flutter framework has a buffer (memory) for loaded images. The default maximum cache is 1000 and maximum cache space is 100MCopy the code
class MyCont extends StatelessWidget { @override Widget build(BuildContext context) { return new Container( child: New ClipOval(Child: image. asset('images/bgg.png', // Make sure that the Image is not deformable height: 100.0, width: 100.0, fit: BoxFit.cover, ), ), ); }}Copy the code