Flutterラーニングノート08-リソースと画像の追加

Flutterにはassetsを含めることができ、assetはプログラムインストールパッケージにパッケージされ、実行時にアクセスできます.一般的なタイプのassetには、JSONファイルなどの静的データ、プロファイル、アイコン、およびピクチャ(JPEG、WebP、GIF、animated WebP/GIF、PNG、BMP、WBMP)が含まれます.
assetsの指定
Flutterは、pubspec.yamlファイルを使用して、アプリケーションに必要なassetを識別します.

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

assetの宣言順序は重要ではありません.実際のディレクトリは任意のフォルダです.これらのファイルはasset bundleという特殊な場所に入れられ、実行時に読み取ることができます.
たとえば、ルートディレクトリには次のファイルがあります.

.../pubspec.yaml
.../graphics/my_icon.png
.../graphics/background.png
.../graphics/dark/background.png

pubspec.yamlは、

flutter:
  assets:
    - graphics/background.png

では、graphics/background.pngおよびgraphics/dark/background.pngはasset bundleに含まれる.前者はmain assetと考えられ、後者は変異体variantと考えられる.
次のように構成されている場合:

flutter:
  assets:
    - graphics/

では、graphics/my_icon.png、graphics/background.png、graphics/dark/background.pngはasset bundleに格納されます.
現在のデバイスの解像度に一致するピクチャを選択すると、Flutterはassetバリエーションを使用します.
assetsのロード
AssetBundleからassetにアクセスします.

loadStringメソッド文字列またはテキストtext

をロード

loadメソッドピクチャまたはバイナリファイル

をロードする
テキストassetsのロード
各FlutterアプリケーションにはrootBundleオブジェクトがあり、プライマリasset bundleにアクセスできます.package:flutter/services.dartのグローバル静的rootBundleオブジェクトを直接使用してassetをロードできます.
ただし、現在のBuildContextのAssetBundleを取得するには、DefaultAssetBundleを使用することが望ましい.この方法は、アプリケーションで構築されたデフォルトのasset bundleではなく、親widgetが実行時に置き換える異なるAssetBundleであり、シーンのローカライズやテストに役立ちます.通常、アプリケーションの実行時間からassetをDefaultAssetBundle.of()を使用してロードすることができる.
Widgetコンテキストの外、またはAssetBundleのハンドルが使用できない場合は、rootBundleを使用してassetを直接ロードできます.たとえば、次のようにします.

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

Future loadAsset() async {
  return await rootBundle.loadString('assets/config.json');
}

画像をロード
Flutterは、現在のデバイスの解像度に適した画像をロードすることができる.
解像度関連ピクチャassetsを宣言
AssetImageでは、論理要求assetを現在のデバイスのピクセルスケールに最も近いassetにマッピングする方法について説明します.このマッピングを機能させるには、特定のディレクトリ構造に基づいてassetを保存する必要があります.

…/image.png
…/Mx/image.png
…/Nx/image.png

ここで、MおよびNはデジタル識別子であり、その中に含まれる画像の解像度に対応し、すなわち、異なる画素デバイスのスケールのピクチャを指定し、主リソースのデフォルトは1.0倍の解像度ピクチャに対応する.

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

デバイス画素比1.8のデバイスでは、.../2.0x/my_icon.pngが選択される.2.7のデバイスピクセル比について、.../3.0x/my_icon.pngが選択される.
イメージコントロールでレンダリング画像の幅と高さを指定しない場合は、メインアセットと同じスクリーンスペースを使用しますが、解像度が高いだけです.すなわち、.../my_icon.pngがそうである場合、.../3.0x/my_icon.pngはそうであるべきであるが、幅および高さが指定されていない場合、それらはすべて(論理ピクセル単位で)レンダリングされる.
pubspec.yamlのassetセクションの各項目は、プライマリリソース項目を除く実際のファイルに対応する必要があります.プライマリリソースにリソースが欠けている場合は、解像度が低い順に選択されます.すなわち、1 xにない場合は2 x、2 xにない場合は3 xの順に選択されます.
画像をロード

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

デフォルトのasset bundleを使用してリソースをロードすると、内部で解像度が自動的に処理されます.
依存パッケージ内のリソース
リソースはpubspec.yamlで宣言されています.
依存パッケージの画像をロードするには、AssetImageにpackageパラメータを指定する必要があります.
アプリケーションは、次のディレクトリ構造を持つ「my_icons」というパッケージに依存するとします.

…/pubspec.yaml
…/icons/heart.png
…/icons/1.5x/heart.png
…/icons/2.0x/heart.png

次に画像をロードし、次の操作を行います.

AssetImage('icons/heart.png', package: 'my_icons')

パケットが使用する自体のリソースもpackageパラメータを加えて取得する必要があります.
リソースはlib/パッケージpubspec.yamlファイルで宣言されたリソースはpackageにパッケージされます.リソースがlib/フォルダに直接配置され、pubspec.yamlファイルで宣言されていない場合.では、アプリケーションは、自分のpubspec.yamlにどのリソースが含まれているかを指定する必要があります.たとえば、「fancy_background」というパッケージには、次のファイルが含まれます.

…/lib/backgrounds/background1.png
…/lib/backgrounds/background2.png
…/lib/backgrounds/background3.png

最初の画像を使用するには、pubspec.yamlで宣言する必要があります.

flutter:
  assets:
    - packages/fancy_backgrounds/backgrounds/background1.png

lib/は暗黙的であり、経路に含めるべきではない.
AndroidでFlutterのリソースを使用
Flutterにアイコンファイルがあります.

flutter:
  assets:
    - icons/heart.png

AndroidコードでFlutterのリソースを使用するには、FlutterViewからPluginRegistryを取得します.Registrarは、そのlookupKeyForAssetメソッドによってkeyを取得します.

// registrar   PluginRegistry.Registrar   
AssetManager assetManager = registrar.context().getAssets();
String key = registrar.lookupKeyForAsset("icons/heart.png");
AssetFileDescriptor fd = assetManager.openFd(key);

FlutterはAndroid/iOSリソースを使用してiconとsplashを変更
起動アイコンを置換するには、次の手順に従います.
Androidは/android/app/src/main/res/に画像を置き換えるだけでいいです.iOSから/ios/Runner/Assets.xcassets/AppIcon.appiconsetに置き換えてください.
Splashコンテンツを置換するには、次の手順に従います.
Androidは/android/app/src/main/res/drawable/launch_background.xmlファイルを修正しました.
iOSは、起動画面の中心に画像を追加し、/ios/Runner/Assets.xcassets/LaunchImage.imagesetに画像をドラッグしてimages LaunchImageと名付けます.png、[email protected]、[email protected].異なるファイル名を使用する場合は、同じディレクトリのContentsも更新する必要があります.jsonファイル.