The Image Widget based on Flutter control

1. Configuration pubspec. Yaml

  assets:
    - assets/assets_image.jpg
    - assets/check-circle.png
    - assets/image_appbar.jpg
Copy the code

2. Put the resource image into the package assets

• If the root directory does not have assets, create it
• Just copy in the image you need
• Please note that the indent of assets is 2 Spaces, and the picture is also 2 Spaces, otherwise the picture will not be displayed
• If the image does not display, you need to reinstall apK, hot loading will not update the image file

3. Image Loads the Image of Assets

  Image.asset("assets/assets_image.png"),
  Text(
    "Read from the project Assert directory",
    textAlign: TextAlign.center,
  ),
  Image(
    image: AssetImage("assets/assets_image.png"),
    width: 200,
    height: 130,
  ),
  Text(
    "AssetImage read",
    textAlign: TextAlign.center,
  ),

Copy the code

Image Load file Image

• You must have folder images to display

  Image.file(
    File('/sdcard/img.png'),
    width: 800,
    height: 80,
  ),
  Image(
    image: FileImage(File('/sdcard/img.png')),
  ),
  Text(
    "From file picture picture",
    textAlign: TextAlign.center,
  ),
Copy the code

Image Loads network images

  Image.network(imageUrl),
  Text(
    "Read network pictures",
    textAlign: TextAlign.center,
  ),
  Image(
    image: NetworkImage(imageUrl),
  ),
  Text(
    "Read network images with NetworkImage",
    textAlign: TextAlign.center,
  ),
Copy the code

Image Custom disassembled Image, display prototype Image head, rounded Image

  /// load rounded image
  CircleAvatar(
    backgroundColor: Colors.brown.shade800,
    child: Text("Rounded head."),
    backgroundImage: AssetImage("assets/assets_image.png"),
    radius: 50.0,
  ),
  Text(
    "Load rounded image",
    textAlign: TextAlign.center,
  ),
  ImageIcon(NetworkImage(imageUrl)),
  Text(
    "ImageIcon",
    textAlign: TextAlign.center,
  ),
  ClipRRect(
    child: Image.network(
      imageUrl,
      scale: 8.5,
      fit: BoxFit.cover,
    ),
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(20),
      topRight: Radius.circular(20),
    ),
  ),
  Text(
    "ClipRRect",
    textAlign: TextAlign.center,
  ),
  Container(
    width: 120,
    height: 60,
    decoration: BoxDecoration(
      shape: BoxShape.rectangle,
      borderRadius: BorderRadius.circular(10.0),
      image: DecorationImage(
          image: NetworkImage(imageUrl), fit: BoxFit.cover),
    ),
  ),
  Text(
    "BoxDecoration",
    textAlign: TextAlign.center,
  ),
  ClipOval(
    child: Image.network(
      imageUrl,
      scale: 8.5,
    ),
  ),
  Text(
    "ClipOval",
    textAlign: TextAlign.center,
  ),
Copy the code

The complete code

import 'dart:io';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class ImageExample extends StatefulWidget {
  @override
  State<StatefulWidget> createState(a) {
    returnImageExampleState(); }}class ImageExampleState extends State<ImageExample> {
  ImageInfo imageInfo;
  String imageUrl =
      'https://sf3-ttcdn-tos.pstatp.com/img/user-avatar/776eaf92140f6f8f3c3f39fb51de2cc4~300x300.image';

  @override
  void didChangeDependencies(a) {
    super.didChangeDependencies();

    /// picture loading listener processing
    Image.asset("assets/flutter-mark-square-64.png")
        .image
        .resolve(createLocalImageConfiguration(context))
        .addListener(
            ImageStreamListener((ImageInfo image, bool synchronousCall) {
          imageInfo = image;
        }, onError: (dynamic exception, StackTrace stackTrace) {}));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Image Widget"),
      ),
      body: CustomScrollView(
        slivers: <Widget>[
          SliverPadding(
            padding: const EdgeInsets.all(20.0),
            sliver: SliverList(
              delegate: SliverChildListDelegate(
                <Widget>[
                  Image.asset("assets/assets_image.jpg"),
                  Text(
                    "Read from the project Assert directory",
                    textAlign: TextAlign.center,
                  ),
                  Image(
                    image: AssetImage("assets/assets_image.jpg"),
                    width: 200,
                    height: 130,
                  ),
                  Text(
                    "AssetImage read",
                    textAlign: TextAlign.center,
                  ),
                  Image.file(
                    File('/sdcard/img.png'),
                    width: 800,
                    height: 80,
                  ),
                  Image(
                    image: FileImage(File('/sdcard/img.png')),
                  ),
                  Text(
                    "From file picture picture",
                    textAlign: TextAlign.center,
                  ),
                  Image.network(imageUrl),
                  Text(
                    "Read network pictures",
                    textAlign: TextAlign.center,
                  ),
                  Image(
                    image: NetworkImage(imageUrl),
                  ),
                  Text(
                    "Read network images with NetworkImage",
                    textAlign: TextAlign.center,
                  ),

                  /// load rounded image
                  CircleAvatar(
                    backgroundColor: Colors.brown.shade800,
                    child: Text("Rounded head."),
                    backgroundImage: AssetImage("assets/assets_image.png"),
                    radius: 50.0,
                  ),
                  Text(
                    "Load rounded image",
                    textAlign: TextAlign.center,
                  ),
                  ImageIcon(NetworkImage(imageUrl)),
                  Text(
                    "ImageIcon",
                    textAlign: TextAlign.center,
                  ),
                  ClipRRect(
                    child: Image.network(
                      imageUrl,
                      scale: 8.5,
                      fit: BoxFit.cover,
                    ),
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(20),
                      topRight: Radius.circular(20),
                    ),
                  ),
                  Text(
                    "ClipRRect",
                    textAlign: TextAlign.center,
                  ),
                  Container(
                    width: 120,
                    height: 60,
                    decoration: BoxDecoration(
                      shape: BoxShape.rectangle,
                      borderRadius: BorderRadius.circular(10.0),
                      image: DecorationImage(
                          image: NetworkImage(imageUrl), fit: BoxFit.cover),
                    ),
                  ),
                  Text(
                    "BoxDecoration",
                    textAlign: TextAlign.center,
                  ),
                  ClipOval(
                    child: Image.network(
                      imageUrl,
                      scale: 8.5,
                    ),
                  ),
                  Text(
                    "ClipOval", textAlign: TextAlign.center, ), ], ), ), ) ], ), ); }}Copy the code