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

はじめに

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

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

初めてのFlutter/Dartマルチプラットフォームアプリ開発チュートリアル

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

nbaboston.net

2023.03.18

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

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

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 ...

pub.dev

まず、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 run flutter_native_splash:create

まとめ

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