You must master the method of adding resource files in Flutter

In Flutter, you need to configure the path of the resource in the pubspec. yaml file under the root directory before the resource can be packaged and used. Now, let's look at how to allocate resources.

1. Add a picture resource file

1.1 Add local picture resources

flutter:  
assets:
    //  Indicates the introduction of the  images  All resource files under the folder 
    - images/
    //  Add only  images/  Under  pci.png
    - images/pci.png

Pay attention to indentation! Resources in the local folder can choose to import the entire folder or only the specified files. Use: Image. asset ("images/pic. png")

1.2 Add Dependent Plug-in Picture Resources

1. Add dependent plug-ins

Add the dependency plug-in under dependencies in the pubspec. yaml file.

dependencies:
    flutter_gallery_assets: 0.1.6

Pay attention to indentation!

2. To register the resources in the dependency plug-in, you also need to add the picture path in the dependency plug-in under assets under flutter in pubspec. yaml file.

flutter:
  assets:
    - packages/flutter_gallery_assets/places/india_chennai_flower_market.png

packages is followed by the name of the plug-in, and the picture needs the full path in the plug-in package.

In this case, you can't register the pictures of one folder at a time, and you can only add one picture and one picture.

STEP 3 Use

child: Image.asset(
 //  Picture path 
 'places/india_chennai_flower_market.png',
 //  Package name 
 package: 'flutter_gallery_assets',
),

When using the third-party library resources, you need to add the package name.

1.3 Resolution-related resources

Flutter supports automatic selection of picture resources with appropriate resolution according to device resolution, but resources need to be added according to the following rules:

../image.png
../1.0x/image.png
../2.0x/image.png

Use:

AssetImage('../image.png')

Just use the default diagram, and AssetImage will automatically select the appropriate icon size according to the device resolution.

2. Add a font resource

The font resource is added in the following format, also in pubspec. yaml:

flutter:
  fonts:
   // 1 The name of the group font 
   - family: Schyler
    fonts:
     //  The font resource file of the package ha in the group, the first 1 Is the default font 
     - asset: fonts/Schyler-Regular.ttf
     - asset: fonts/Schyler-Italic.ttf
      //  That defines the font style
      style: italic
   // 1 The name of the group font 
   - family: Trajan Pro
    fonts:
     - asset: fonts/TrajanPro.ttf
     - asset: fonts/TrajanPro_Bold.ttf
      weight: 700
   // 1 The name of the group font 
   - family: Raleway
    fonts:
     - asset: packages/flutter_gallery_assets/fonts/raleway/Raleway-Regular.ttf
     - asset: packages/flutter_gallery_assets/fonts/raleway/Raleway-Medium.ttf
      weight: 500
     - asset: packages/flutter_gallery_assets/fonts/raleway/Raleway-SemiBold.ttf
      weight: 600

Use fonts:

TextStyle(
  //  Font group name 
  fontFamily: 'Raleway',
  inherit: false,
  fontSize: 24.0,
  //  According to  weight  Select a specific font 
  fontWeight: FontWeight.w500,
  color: Colors.white,
  textBaseline: TextBaseline.alphabetic,
 )