In Flutter, the path of the resource needs to be configured in the file in the root directory before the resource can be packaged and used. Now, let’s see how to configure resources.
1. Add image resource file
1.1 Add local image resources
flutter:
assets:
// Indicates that all resource files are introduced in the images folder in the root directory - images/
// Add only images/ - images/
Pay attention to indentation! The resources in the local folder can be selected to import the entire folder, or only import the specified files. Use: ("images/")
1.2 Adding dependency plug-in image resources
1. Add dependency plugin
Add dependencies plug-in under dependencies in the file.
dependencies:
flutter_gallery_assets: 0.1.6
Pay attention to indentation!
2. Registering resources in the dependent plug-in also requires adding the image path in the dependent plug-in to be used under assets under flutter in the file.
flutter:
assets:
- packages/flutter_gallery_assets/places/india_chennai_flower_market.png
packages followed by the name of the plugin, and the image requires the full path in the plugin package.
In this case, you cannot register pictures in one folder at a time, you can only add one picture at a time.
3. Use
child: ( // Picture path 'places/india_chennai_flower_market.png', // Package name package: 'flutter_gallery_assets', ),
When using third-party library resources, you need to add a package name.
1.3 Resolution-related resources
Flutter supports automatically selecting image resources with the appropriate resolution based on the device resolution, but resources need to be added according to the following rules:
../ ../1.0x/ ../2.0x/
use:
AssetImage('../')
Just use the default image, AssetImage will automatically select the appropriate size icon according to the device resolution.
2. Add font resources
The format of adding font resources is as follows, also in:
flutter:
fonts:
// Name of a group of fonts - family: Schyler
fonts:
// The font resource file that is packaged in the group, the first one is the default font - asset: fonts/
- asset: fonts/
// Define the style of the font style: italic
// Name of a group of fonts - family: Trajan Pro
fonts:
- asset: fonts/
- asset: fonts/TrajanPro_Bold.ttf
weight: 700
// Name of a group of fonts - family: Raleway
fonts:
- asset: packages/flutter_gallery_assets/fonts/raleway/
- asset: packages/flutter_gallery_assets/fonts/raleway/
weight: 500
- asset: packages/flutter_gallery_assets/fonts/raleway/
weight: 600
Use fonts:
TextStyle( // Font group name fontFamily: 'Raleway', inherit: false, fontSize: 24.0, // Select specific fonts according to weight fontWeight: FontWeight.w500, color: , textBaseline: , )
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.