flutter3.0学习笔记

项目资源管理

Preview
  • 项目资源管理
  • 包管理
  • 静态资源管理

项目资源管理

我们可以分为包管理和静态资源管理

包管理

包管理通常就是指公共的库、SDK、依赖包等,Flutter是通过配置文件pubspec.yaml(位于项目根目录)来管理第三方依赖包

name: learn_f3 #应用或包名称
description: A new Flutter project. #应用或包的描述、简介
publish_to: 'none' # 是否发布到pub.dev,不发发布none,发布删掉即可
version: 1.0.0+1 # 应用或包的版本号
environment:
  sdk: '>=2.18.0 <3.0.0'

dependencies: #应用或包依赖的其他包或插件
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  # 在此下面添加新依赖
  
dev_dependencies: # 开发环境依赖的工具包(而不是flutter应用本身依赖的包)
  flutter_test:
    sdk: flutter
  flutter_lints: ^2.0.0

flutter: # flutter相关的配置选项
  uses-material-design: true

下载包,在Android Studio的编辑器视图中查看pubspec.yaml时,单击右上角的 Pub get image.png

这会将依赖包安装到您的项目。我们可以在控制台中看到以下内容:

flutter packages get
Running "flutter packages get" in flutter_in_action...
Process finished with exit code 0

静态资源管理

Assets 是会打包到程序安装包中的,可在运行时访问。常见类型的 assets 包括静态数据(例如JSON文件)、配置文件、图标和图片等

 # 图片资源配置
   assets:
     - images/a_dot_burr.jpeg
     - images/a_dot_ham.jpeg

  #配置字体文件资源
   fonts:
     - family: Schyler
       fonts:
         - asset: fonts/Schyler-Regular.ttf
         - asset: fonts/Schyler-Italic.ttf
           style: italic
     - family: Trajan Pro
       fonts:
         - asset: fonts/TrajanPro.ttf
         - asset: fonts/TrajanPro_Bold.ttf
           weight: 700

  # For details regarding fonts from package dependencies,
  # see https://flutter.dev/custom-fonts/#from-packages

  1. 指定 assets
flutter:
  assets:
    - assets/my_icon.png
    - assets/background.png
  1. Asset 变体(variant)
flutter:
  assets:
    - graphics/background.png
  1. 加载 assets
  • 加载文本:
import 'dart:async' show Future;
import 'package:flutter/services.dart' show rootBundle;

Future<String> loadAsset() async {
  return await rootBundle.loadString('assets/config.json');
}
  • 加载图片:

(1)可以使用 AssetImage (opens new window)类。例如,我们可以从上面的asset声明中加载背景图片:

Widget build(BuildContext context) {
  return DecoratedBox(
    decoration: BoxDecoration(
      image: DecorationImage(
        image: AssetImage('graphics/background.png'),
      ),
    ),
  );
}

(2)注意,AssetImage 并非是一个widget, 它实际上是一个ImageProvider,有些时候你可能期望直接得到一个显示图片的widget,那么你可以使用Image.asset()方法,如:

Widget build(BuildContext context) {
  return Image.asset('graphics/background.png');
}

(3)依赖包中的资源图片

要加载依赖包中的图像,必须给AssetImage提供package参数。

AssetImage('icons/heart.png', package: 'my_icons')
//或者
Image.asset('icons/heart.png', package: 'my_icons')