今回はFlutterでアプリを起動したときに表示されるSplash画面(Splash Screen)の、実装方法の解説になります。
画像の準備
スプラッシュ画面で表示するための画像を準備しましょう。
今回は下のようなPNG画像を準備しました。
この画像を使いSplash画面を実装していきます。
準備できたら使用するプロジェクトの中に適当なディレクトリを作成し、その中に入れておきましょう。
例としてこの記事ではassets/imagesの中に画像を保存します。
パッケージの導入
次にパッケージの導入をしていきましょう。
今回の画面作成にはflutter_native_splashというパッケージを使用します。
このパッケージを使用し作成するとiOS、Android両方でスプラッシュ画面が実装可能です。
パッケージの導入方法に関してはこちらに解説記事がありますので、よろしければ参考にしてください。
スプラッシュ画面の作成
パッケージの導入が完了したらスプラッシュ画面の作成をしていきます。
pubspec.yamlに以下のような文を加えます。
flutter_native_splash:
image: "assets/images/firstcat.png"
color: "b5ce7f"
私は下の画像のように配置しました。
imageは画像のパス、colorは16進数のカラーコードになります。
値やパスは自分のプロジェクトに合わせて、それぞれ変更してください。
その後、下記コマンドを作成プロジェクト内で順に実行します。
flutter pub get
flutter pub run flutter_native_splash:create
無事実装されました。
お疲れ様でした。
ここまでご覧戴き、ありがとうございました。
## iOSでスプラッシュ画面の不具合 iOSでスプラッシュ画面が更新されない、スプラッシュ画面が表示される前に白い画面が表示される、といったことが起こる場合があるようです。
その場合はflutter cleanを実行。
その後再度
flutter pub get
flutter pub run flutter_native_splash:create
を実行してみてください。
またそれでも解決しない場合はスタックオーバーフロースレッドを確認してみると良いようです。