【flutter】アイコンの設定とスプラッシュ画面の設定

#R#*最新の環境にあわせての修正中のため、一部お見苦しいところがございます。

flutter でアプリのアイコンと、起動時のスプラッシュ画面の表示を行う方法を紹介します。おおまかに以下4つを行う必要があります。
① 画像を置く
② pubspec.yml の編集
③ flutter で add
④ dart で run

###title
画像を置く
###

今回は assets/img/ に icon.png と splash.png を配置します。

###center
(img://18/523s)

###title
pubspec.yml
###

pubspec.ymlを以下のような状態に変更します。大事な項目は下記の #*#"assets:" #*#"flutter_icons:" #*#"flutter_native_splash:" です。色見など細かいところは適宜編集してください。

###source
(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"

###title
スプラッシュ画面の作成
###

初回のみ add して
###command
flutter pub add flutter_native_splash      
###

実行
###command
//flutter pub run flutter_native_splash:create
dart run flutter_native_splash:create
###

###
よくあるミスの例としてターミナルに以下のようなエラーが出た場合は pubspec.yml の内容を見直して下さい。以下は画像ファイルがありませんという凡ミスの例です。

###error
Exception: Your `pubspec.yaml` file does not contain a `flutter_native_splash` section.
~~~
~~~
Failed to update packages.

###title
アイコンの作成

###
splash と同じく初回おっみ add して
###command
flutter pub add flutter_launcher_icons

###
実行
###command
// flutter pub run flutter_launcher_icons:main
// dart run flutter_launcher_icons:generate -o
flutter packages pub run flutter_launcher_icons:main

###title
今後変更するときは
###

icon.png, splash.png を差し替えたら 以下の run のコマンドを打つことで更新されます。

###command 
dart run flutter_native_splash:create
// dart run flutter_launcher_icons:generate -o
flutter pub run flutter_launcher_icons:main

###title
削除
###
###command
dart run flutter_native_splash:remove

###source

flutter clean  
flutter pub get
flutter pub run flutter_launcher_icons:main

flutter run

###source
flutter_icons:

android: true
    ios: true
    image_path: "assets/img/train_512.png"

###source
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"

wakatta 記法

このコンテンツを見る

【flutter】アイコンの設定と スプラッシュ画面の設定

【flutter】アイコンの設定とスプラッシュ画面の設定