Directory portal:A Guide to The Quick Start to Flutter

In Flutter, the path of the resource must be configured in the pubspec.yaml file in the root directory before the resource can be packaged and used.

Now, let’s see how to allocate resources.

1. Add an image resource file

1.1 Adding a Local Image Resource

Flutter: assets: // Import all resource files under the images folder in the root directoryCopy the code

⚠️ indent!

Resources in a local folder can be imported into the entire folder or only specified files.

Use:

Image.asset("images/pic.png")
Copy the code

1.2 Adding image resources from dependent plug-ins

1. Add dependent plug-ins

Add the dependent plug-in under the dependencies of the pubspec.yaml file.

Dependencies: flutter_gallery_assets: 0.1.6Copy the code

⚠️ indent!

2. Register resources in dependent plug-ins

Also add the image path of the dependency plugin to flutter under Assets in the pubspec.yaml file.

flutter:
    assets:
        - packages/flutter_gallery_assets/places/india_chennai_flower_market.png
Copy the code

Packages followed by the name of the plug-in, the image needs the full path in the plug-in package.

In this case, you can’t register a folder of images at once, only one image by one image added.

Use 3.

Child: image. asset(// Image path'places/india_chennai_flower_market.png', // package name package:'flutter_gallery_assets',),Copy the code

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

1.3 Resolution related resources

Flutter automatically selects image resources with the appropriate resolution based on the device resolution. However, resources must be added according to the following rules:

. /image.png .. / 1.0 x/image. PNG.. / 2.0 x/image. PNGCopy the code

Use:

AssetImage('.. /image.png')
Copy the code

Just use the default diagrams, and AssetImage automatically selects ICONS of the appropriate size based on device resolution.

2. Add font resources

Font resources are added in the following format, also in pubspec.yaml:

Family: Schyler fonts: // family: Schyler fonts: // family: Schyler fonts: Fonts/schyler-italic. TTF // Define the font style: Italic // The name of a set of fonts - family: Trajan Pro fonts: - asset: Fonts/trajanpro.ttf - asset fonts/ trajanpro_bold.ttf weight: 700 // 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: 600Copy the code

Use fonts:

TextStyle(// Font group name fontFamily:'Raleway',
    inherit: false, fontWeight: fontWeight. W500, color: Colors. White, textBaseline: TextBaseline.alphabetic, )Copy the code

Directory Portals: A Guide to The Quick Start To Flutter

How can I be found?

Portal:CoorChice homepage

Portal:Lot of CoorChice