Flutter splash画面を簡単に実装できるパッケージ

今回はFlutterでスプラッシュスクリーンを実装する際に使える便利なパッケージを紹介します。

flutter_native_splashというパッケージです。
https://pub.dev/packages/flutter_native_splash

Android、iOS両方のネイティブスプラッシュスクリーンを簡単に設定でき、ロゴ、背景色、アニメーションなど、スプラッシュ画面の見た目を簡単にカスタマイズできます。
セットアップも簡単で設定ファイルを編集することで、ネイティブスプラッシュをすぐに適用できます。

以下で使い方を説明します。

1.依存関係を追加
pubspec.yamlファイルにflutter_native_splashを追加します。

dependencies:
  flutter:
    sdk: flutter
  flutter_native_splash: ^2.0.0  # バージョンは最新にしてください

2.設定を追加
flutter_native_splashの設定をpubspec.yamlに追加します。背景色や画像を設定できます。

flutter_native_splash:
  color: "#42a5f5"  # スプラッシュ画面の背景色
  image: assets/images/logo.png  # ロゴ画像指定
  android: true  # Androidで表示するかどうか
  ios: true  # iOSで表示するかどうか

3.スプラッシュ画面を生成
設定を追加したら、コマンドラインで次のコマンドを実行してスプラッシュ画面を生成します。

flutter pub get  # パッケージをインストール
flutter pub run flutter_native_splash:create  # スプラッシュ画面を生成

4.ビルド
スプラッシュ画面の設定が完了したら、アプリをビルドします。

flutter run  # アプリを実行

また、アプリの初期化中にスプラッシュスクリーンを残して表示しておきたい場合などにも対応できます。
より高度なカスタマイズ方法はパッケージのドキュメントを見てみてください。

タイトルとURLをコピーしました