Flutterで起動時にflutter_native_splashでスプラッシュスクリーンを表示する方法

flutter

はじめに

Flutterを使用してアプリを開発する際、アプリの起動画面(通常はスプラッシュスクリーンと呼ばれる)に特定の画像を表示したいと思うことは多いでしょう。しかし、その実装方法については一見難しく見えるかもしれません。この記事では、Flutterでスプラッシュスクリーンを実装するための詳細な手順を紹介します。

OpenAIのGPT APIを使いこなす:効率的なAIアプリケーション開発への一歩

初めてのFlutter/Dartマルチプラットフォームアプリ開発チュートリアル
はじめに FlutterはGoogleが開発した、マルチプラットフォームのモバイルアプリ開発のフレームワークです。Flutterを使うと、AndroidとiOSの両方のプラットフォームで同時にアプリを開発することができます。 また、ブラウザ...

スプラッシュスクリーンとは何か?

スプラッシュスクリーンはアプリが起動するときに一時的に表示される画面で、ロゴやアニメーションを表示することが一般的です。アプリがバックグラウンドから再度開かれたときには通常表示されません。スプラッシュスクリーンはアプリのブランドを強化し、初期ロード時間をカバーする効果的な方法です。

Flutterでのスプラッシュスクリーンの実装

Flutterではflutter_native_splashというパッケージを使って簡単にスプラッシュスクリーンを設定することができます。これを利用すると、iOSとAndroidの両方でネイティブレベルのスプラッシュスクリーンを作成できます。

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.

まず、pubspec.yamlファイルにflutter_native_splashパッケージを追加します:

flutter pub add flutter_native_splash

または、下記をpubspec.yamlを下記のようにflutter_native_splashを追加しflutter pub getのコマンドを実行します

dependencies:
  flutter:
    sdk: flutter

dev_dependencies:
  flutter_native_splash: "^2.3.0"
  flutter_test:
    sdk: flutter

次に、pubspec.yamlに以下の設定を追加します。これにより、スプラッシュスクリーンの背景色と表示する画像を指定します。

flutter_native_splash: 
  color:"#42a5f5" 
  image:assets/splash.png
flutter pub getを実行してパッケージを取得した後、以下のコマンドを実行します。
flutter pub run flutter_native_splash:create
これにより、指定した画像と背景色を用いたスプラッシュスクリーンが生成され、iOSとAndroidの両方のプロジェクトに自動的に追加されます。
この状態でアプリを起動するとアプリ起動時にassets/splash.pngに指定した画像が表示されるようになります

まとめ

スプラッシュスクリーンは、アプリの最初の接触点であり、ユーザーに対する第一印象を形成する重要な要素です。この記事で紹介した方法を使えば、あなたのFlutterアプリに魅力的なスプラッシュスクリーンを簡単に追加することができます。是非、あなたのアプリで試してみてください。