Flutterの質問

アプリ起動時のスプラッシュスクリーンを変更したい

質問日時

2021年06月30日

a-sato

現在アプリを起動してロードが終わるまでの間、白一色のスプラッシュスクリーンが表示されるのですが、どうすれば変更できますか?

環境
Flutter 2.2.2
Android Studio 4.2.1

ベストアンサー

2021年06月30日

d-ok

flutter_native_splashを使って変更できます。

まず、pubspec.yamlのdev_dependencyにflutter_native_splashを追加して、pub getします。

dev_dependencies:
  flutter_native_splash: ^1.2.0 #2021/06/30の最新

続けてpubspec.yamlに内に設定を追記します。

flutter_native_splash:
  color: "#42a5f5" #背景色(必須)
  
  # 以下は任意項目です。

  #image: assets/splash.png #画像ファイル(pngファイルのみ)

  #color_dark: "#042a49" #ダークモード時の背景色
  #image_dark: assets/splash-invert.png #ダークモード時の画像

  # プラットフォームごとにスプラッシュスクリーンの有無を設定
  #android: false
  #ios: false
  #web: false

  # スプラッシュスクリーンの位置に関する項目
  #android_gravity: center #(詳細: https://developer.android.com/reference/android/view/Gravity)
  #ios_content_mode: center #(詳細: https://developer.apple.com/documentation/uikit/uiview/contentmode)
  #web_image_mode: center #(center、contain、stretch、coverから選択)

  # 通知バーを非表示にするにはfullscreenを設定します。webには通知バーがないので影響はありません。デフォルトはfalseです。
  # NOTE: androidと異なり、iOSはアプリのロード時に自動的に通知バーを表示しません。
  #       通知バーを表示するには、以下のコードをアプリに追記します。
  #       WidgetsFlutterBinding.ensureInitialized();
  #       SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom, SystemUiOverlay.top]);
  #fullscreen: true
  
  # info.plistファイルの名前を変更する場合は、以下の項目から設定出来ます。
  # 設定する場合は「#」のみ削除して、スペースは消さないようにして下さい。
  #info_plist_files:
  #  - 'ios/Runner/Info-Debug.plist'
  #  - 'ios/Runner/Info-Release.plist'

設定が完了したら以下のコマンドを実行するとスプラッシュスクリーンが設定されます。上記のコードをそのまま貼り付けると、スプラッシュスクリーンが水色に変更されるはずです。

flutter pub run flutter_native_splash:create

以下のように画像を追加することも出来ます。

スプラッシュスクリーンのサンプル

元に戻すには下記を実行します。

flutter pub run flutter_native_splash:remove
質問に回答する

1件の回答

ベストアンサー

2021年06月30日

d-ok

flutter_native_splashを使って変更できます。

まず、pubspec.yamlのdev_dependencyにflutter_native_splashを追加して、pub getします。

dev_dependencies:
  flutter_native_splash: ^1.2.0 #2021/06/30の最新

続けてpubspec.yamlに内に設定を追記します。

flutter_native_splash:
  color: "#42a5f5" #背景色(必須)
  
  # 以下は任意項目です。

  #image: assets/splash.png #画像ファイル(pngファイルのみ)

  #color_dark: "#042a49" #ダークモード時の背景色
  #image_dark: assets/splash-invert.png #ダークモード時の画像

  # プラットフォームごとにスプラッシュスクリーンの有無を設定
  #android: false
  #ios: false
  #web: false

  # スプラッシュスクリーンの位置に関する項目
  #android_gravity: center #(詳細: https://developer.android.com/reference/android/view/Gravity)
  #ios_content_mode: center #(詳細: https://developer.apple.com/documentation/uikit/uiview/contentmode)
  #web_image_mode: center #(center、contain、stretch、coverから選択)

  # 通知バーを非表示にするにはfullscreenを設定します。webには通知バーがないので影響はありません。デフォルトはfalseです。
  # NOTE: androidと異なり、iOSはアプリのロード時に自動的に通知バーを表示しません。
  #       通知バーを表示するには、以下のコードをアプリに追記します。
  #       WidgetsFlutterBinding.ensureInitialized();
  #       SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom, SystemUiOverlay.top]);
  #fullscreen: true
  
  # info.plistファイルの名前を変更する場合は、以下の項目から設定出来ます。
  # 設定する場合は「#」のみ削除して、スペースは消さないようにして下さい。
  #info_plist_files:
  #  - 'ios/Runner/Info-Debug.plist'
  #  - 'ios/Runner/Info-Release.plist'

設定が完了したら以下のコマンドを実行するとスプラッシュスクリーンが設定されます。上記のコードをそのまま貼り付けると、スプラッシュスクリーンが水色に変更されるはずです。

flutter pub run flutter_native_splash:create

以下のように画像を追加することも出来ます。

スプラッシュスクリーンのサンプル

元に戻すには下記を実行します。

flutter pub run flutter_native_splash:remove

関連した質問

soichiro1210 が9ヶ月前に投稿

質問日時 2023年07月31日

a-sato が2年前に投稿

質問日時 2021年07月01日

takumi が3年前に投稿

質問日時 2021年05月20日

a-sato が3年前に投稿

質問日時 2021年05月14日

takumi が3年前に投稿

質問日時 2021年05月14日

Flutterの質問一覧を見る

Flutterの記事

Flutterの記事一覧を見る
search