[Flutter journey] package management and resource management

Environmental introduction and references

This example is used with VS Code on Linux 16.04.1-Ubuntu.

E-book of "actual combat of Flutter"
Fluent Chinese website

Package management

Use pubspec Yaml file management third-party dependency package, similar to Android gradle.

Parse pubspec Yaml file

# Application or package name
name: flutter_in_action
# Description and introduction of application or package
description: First Flutter application.
# Version number of the application or package
version: 1.0.0+1
# Other packages or components on which the application or package depends
dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^0.1.2
# The toolkit that the development environment depends on (not the package that the fluent application itself depends on)
dev_dependencies:
  flutter_test:
    sdk: flutter
# flutter related configuration options    
flutter:
  uses-material-design: true

Examples of relying on third-party packages

All in pubspec Add dependencies under dependencies in the yaml file.

Rely on Pub warehouse

Using Pub warehouse https://pub.dev/ Find the latest version number of the package and whether it supports fluent.

english_ The words bag contains thousands of commonly used English words and some practical functions.

Add dependency, english_words: ^4.0.0. After adding the dependency, save the file and start downloading the dependency. You can see the relevant information on the console
Import dependency, import 'package:english_words/english_words.dart';
Use english_words package
- final wordPair = new WordPair.random();

Dependent on local package

The method of adding dependency is:

dependencies:
	pkg1:
        path: ../../code/pkg1

The path can be relative or absolute.

Rely on Git

The method of adding dependency is:

If the package is located in the root directory of the warehouse

dependencies:
  pkg1:
    git:
      url: git://github.com/xxx/pkg1.git

If the package is not located in the root directory of the warehouse, you can use the path parameter to specify the relative location

dependencies:
  package1:
    git:
      url: git://github.com/flutter/packages.git
      path: packages/package1

resource management

In addition to the code, the App installation package also contains resources, that is, some configuration files, icons, pictures or animations.

Like package management, fluent uses pubspec Yaml file to manage the resources of the application. eg.

flutter:
  assets:
    - assets/my_icon.png
    - assets/background.png

Load assets

Applications can access their asset s through AssetBundle objects.

Load text

Load through the rootBundle object. eg.

import 'dart:async' show Future;
import 'package:flutter/services.dart' show rootBundle;

Future<String> loadAsset() async {
    return await rootBundle.loadString('assets/test.json');
}

Load through DefaultAssetBundle. eg.

DefaultAssetBundle.of(context).loadString("assets/test.json")

It should be noted that these two methods return the Future type, so they need to be used together with then:

Future<String> loadAsset() async {
    return await rootBundle.loadString('assets/test.json');
}
loadAsset().then((result) {
    print(result);
});
DefaultAssetBundle.of(context).loadString("assets/test.json").then((res) {
    print(res);
});

Load picture

AssetImage can map the request logic of the asset to the asset closest to the pixel scale of the current device. In order for the mapping to work, the asset must be saved according to a specific directory structure:

.../my_icon.png
.../2.0x/my_icon.png
.../3.0x/my_icon.png

//Load background picture:
Widget build(BuildContext context) {
  return new DecoratedBox(
    decoration: new BoxDecoration(
      image: new DecorationImage(
        image: new AssetImage('assets/test.png'), //AssetImage is not a widget, it is actually an ImageProvider
      ),
    ),
  );
}

//Directly get a widget displaying pictures:
Widget build(BuildContext context) {
  return Image.asset('assets/test.png');
}
//Image.asset('assets/test.png', fit:BoxFit.fill, width: 150, height: 150) sets the filling method and width and height

If you need to load the image in the dependent package, you need to provide the package parameter to AssetImage. eg.

new AssetImage('icons/heart.png', package: 'my_icons');
new Image.asset('icons/heart.png', package: 'my_icons');

The resource management of Flutter can only be used after the Flutter framework is running. Therefore, if you need to set the APP icon or add the startup diagram for the reference, you need to set it separately on a specific platform.

Android. The corresponding file is in Android / APP / SRC / main / androidmanifest xml

Set APP Icon

android:icon="@mipmap/ic_launcher">

Set APP startup diagram

<meta-data
    android:name="io.flutter.embedding.android.SplashScreenDrawable"
    android:resource="@drawable/launch_background"
    />

Added by mickro on Tue, 01 Feb 2022 15:06:06 +0200

Programming VIP