【Flutter開発】 導入メモ ~起動画面~

起動画面で利用すると便利なライブラリについてまとめる

• flutter_launcher_icons: ランチャー画面のアイコン
• flutter_native_splash: アプリ起動時のスプラッシュ画面

---

flutter_launcher_icons

https://pub.dev/packages/flutter_launcher_icons

事前準備

アイコン画像を用意し、assets/image/ フォルダ等に格納。 pubspec.yaml で参照できるようにしておく。

導入

dev_dependencies に追加したいので、　--dev をつける。

flutter pub add --dev flutter_launcher_icons

pubspec.yaml (ミニマム)

flutter_icons:
  android: true
  ios: true
  image_path: "assets/images/app_icon.png"

android:true: androidで有効にする場合に true ios:true: androidで有効にする場合に true image_path:　置き換えるアイコン画像を指定する

生成コマンド

flutter pub run flutter_launcher_icons

flutter_native_splash

https://pub.dev/packages/flutter_native_splash

事前準備

アイコン画像を用意し、assets/image/ フォルダ等に格納。 pubspec.yaml で参照できるようにしておく。

導入

flutter pub add flutter_native_splash

pubspec.yaml　(ミニマム)

flutter_native_splash:
  background_image: "assets/images/app_icon.png"

  android_12:
    image: "assets/images/app_icon.png"

生成コマンド

flutter pub run flutter_native_splash:create

オプション

標準では、最初の画面が描画されたタイミングで、スプラッシュ画面が終了する。 任意のタイミングまで表示させたい場合は、ソースコードで画面消去タイミングを指定する。

void main() {
  // スプラッシュ画面が自動で閉じないようにする
  WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);
}

// スプラッシュ画面を閉じる　(任意の箇所)
    FlutterNativeSplash.remove();

※ ソースコード上からの呼び出しがなければ、importが不要であるため、本パッケージは、dev_dependencies に記載して良い。