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

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

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

flutter_launcher_icons

flutter_launcher_icons | Dart package

A package which simplifies the task of updating your Flutter app's launcher icon.

pub.dev

事前準備

アイコン画像を用意し、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

flutter_native_splash | Flutter package

Customize Flutter's default white native splash screen with background color and splash image. Supports dark mode, full screen, and more.

pub.dev

事前準備

アイコン画像を用意し、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 に記載して良い。

以上