Flutterにリソースファイルを追加する

Flutter では、リソースをパッケージ化して使用できるように、ルート ディレクトリの pubspec.yaml ファイルでリソースのパスを構成する必要があります。

1. 画像リソースファイルを追加する

1.1 ローカル画像リソースの追加

# The following section is specific to Flutter packages.
flutter:
  assets:
    // 表示引入根目录下的 assets/images 文件夹下的所有资源文件
    - assets/images/
    // 只添加 assets/images/ 下的 mine.png
    - assets/images/mine.png

インデントに注目してください！ローカル フォルダー内のリソースの場合、フォルダー全体をインポートするか、指定したファイルのみをインポートするかを選択できます。
使用：Image.asset("assets/images/mine.png")

1.2 依存するプラグインイメージリソースの追加

1. 依存プラグインを追加する

pubspec.yaml ファイルの依存関係の下に依存プラグインを追加します。

dependencies:
    flutter_gallery_assets: 0.1.6

2. 依存プラグインにリソースを登録するには、pubspec.yaml ファイルの flutter の下のアセットの下に使用される依存プラグインのイメージ パスを追加する必要もあります。

flutter:
  assets:
    - packages/flutter_gallery_assets/places/india_chennai_flower_market.png

パッケージの後にはプラグインの名前が続き、イメージにはプラグイン パッケージ内のフルパスが必要です。
この場合、フォルダー内の写真を一度に登録することはできず、一度に 1 枚ずつしか追加できません。

3. 使用する

child: Image.asset(
 // 图片路径
 'places/india_chennai_flower_market.png',
 // 包名
 package: 'flutter_gallery_assets',
),

サードパーティのライブラリ リソースを使用する場合は、パッケージ名を追加する必要があります。

1.3 解像度関連のリソース

Flutter は、デバイスの解像度に基づいて適切な解像度の画像リソースを自動的に選択することをサポートしていますが、リソースは次のルールに従って追加する必要があります。

../image.png
../1.0x/image.png
../2.0x/image.png

使用

AssetImage('../image.png')

デフォルトの画像を使用するだけで、AssetImage はデバイスの解像度に基づいて適切なサイズのアイコンを自動的に選択します。

2. フォントリソースの追加

フォント リソースを追加する形式は次のとおりです (これも pubspec.yaml にあります)。

flutter:
  fonts:
   // 一组字体的名称
   - family: Schyler
    fonts:
     // 组内包哈的字体资源文件，第一个是默认字体
     - asset: assets/fonts/Schyler-Regular.ttf
     - asset: assets/fonts/Schyler-Italic.ttf
      // 定义该字体的style
      style: italic
   // 一组字体的名称
   - family: Trajan Pro
    fonts:
     - asset: assets/fonts/TrajanPro.ttf
     - asset: assets/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: 600

フォントを使用する

TextStyle(
  // 字体组名称
  fontFamily: 'Raleway',
  inherit: false,
  fontSize: 24.0,
  // 根据 weight 选择具体的字体
  fontWeight: FontWeight.w500,
  color: Colors.white,
  textBaseline: TextBaseline.alphabetic,
 )