You must master the method of adding resource files in Flutter
- 2021-11-02 02:53:14
- OfStack
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,
)