【flutter】アイコンの設定と スプラッシュ画面の設定
*最新の環境にあわせての修正中のため、一部お見苦しいところがございます。
flutter でアプリのアイコンと、起動時のスプラッシュ画面の表示を行う方法を紹介します。おおまかに以下4つを行う必要があります。
① 画像を置く
② pubspec.yml の編集
③ flutter で add
④ dart で run
画像を置く
今回は assets/img/ に icon.png と splash.png を配置します。
pubspec.yml
pubspec.ymlを以下のような状態に変更します。大事な項目は下記の assets: flutter_icons: flutter_native_splash: です。色見など細かいところは適宜編集してください。
pubspec.yml から一部抜粋
flutter:
uses-material-design: true
assets:
- assets/
- assets/img/
flutter_icons:
android: true
ios: true
image_path: "assets/img/icon.png"
flutter_native_splash:
color: "#e8d6c2"
image: "assets/img/splash.png"
color_dark: "#e8d6c2"
image_dark: "assets/img/splash.png"
android_gravity: center
fullscreen: true
android: true
ios: true
android_12:
icon_background_color: "#e8d6c2"
image: "assets/img/splash.png"
icon_background_color_dark: "#e8d6c2"
image_dark: "assets/img/splash.png"
スプラッシュ画面の作成
flutter pub add flutter_native_splash
//flutter pub run flutter_native_splash:create
dart run flutter_native_splash:create
よくあるミスの例としてターミナルに以下のようなエラーが出た場合は pubspec.yml の内容を見直して下さい。以下は画像ファイルがありませんという凡ミスの例です。
Exception: Your `pubspec.yaml` file does not contain a `flutter_native_splash` section.
~~~
~~~
Failed to update packages.
アイコンの作成
flutter pub add flutter_launcher_icons
// flutter pub run flutter_launcher_icons:main
// dart run flutter_launcher_icons:generate -o
flutter packages pub run flutter_launcher_icons:main
今後変更するときは
icon.png, splash.png を差し替えたら 以下の run のコマンドを打つことで更新されます。
dart run flutter_native_splash:create
// dart run flutter_launcher_icons:generate -o
flutter pub run flutter_launcher_icons:main
削除
dart run flutter_native_splash:remove
flutter clean
flutter pub get
flutter pub run flutter_launcher_icons:main
flutter run
flutter_icons:
android: true
ios: true
image_path: "assets/img/train_512.png"
flutter_icons:
android: "launcher_icon"
ios: true
image_path_ios: "assets/img/train_512.png"
image_path_android: "assets/img/train_512.png"
adaptive_icon_background: "#ffffff"
編集する
