flutter_native_splashでスプラッシュ画面(Splash Screen)を実装する

はじめに

👆splash screen系で一番有名なこのパッケージです。

動画での解説もありますが、ドキュメントのInstallingとやり方が違ったりして少し困惑したのでメモします。。。

画像を用意する

条件は以下の通り

・PNGで作る
・正方形で作る（一番ベーシックなやり方で実装するので）
・サイズは500 * 500（サイズは適当でOK）

作った画像はassets/img/splash.pngに保存

ちなみに私はKeynoteでアイコンを作成しました。

pubspec.yamlを編集

参考にしてる情報によって
dependenciesとdev_dependencies

どっちに書くかが分かれるところかと。。。

最初はdev_dependenciesに追加したのですが

You don't have an extension for debugging YAML. Should we find a YAML extension in the Marketplace?

VSCodeでこんなエラー？が発生したので、私はdependenciesにしました。

dependenciesとdev_dependenciesの違いについては下記を参考に！

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  flutter_native_splash: ^1.2.1

flutter_native_splash:
  color: "#F8E7F4"
  image: assets/img/splash.png
  android: true
  ios: true

image に画像を置いているディレクトリのパスを指定します。

colorに背景色（16進数カラーコード）を指定します。

私は動画を見ながら実装したのですが、

android: true
ios: true

これらのoptionが必要なのかは不明w。結局Web用のsplashも作成されてたし。。

Splash Screenを作成

下記コマンドを実行

$ flutter pub get  

$ flutter pub run flutter_native_splash:create
[Android] Creating splash images
[Android] Updating android/app/src/main/res/drawable/launch_background.xml with splash image path
[Android] Updating android/app/src/main/res/drawable-v21/launch_background.xml with splash image path
[Android] Updating styles.xml with full screen mode setting
[Android] Updating styles.xml with full screen mode setting
[iOS] Creating splash images
[iOS] Updating LaunchScreen.storyboard with width, and height
[iOS] Updating ios/Runner/Info.plist for status bar hidden/visible
[Web] Creating images
[Web] Creating images
[Web] Creating CSS
[Web] Updating index.html

Native splash complete. 👍
Now go finish building something awesome! 💪 You rock! 🤘🤩

これでSplash Screenが表示されるようになりました！
すご！

Splash Screenで使う画像のサイズを変更するには？

次は1000 * 1000で作成したします。

assets/img/splash.pngに大きくした画像を置き換えます。

置き換えたらまたターミナルからコマンド実行

$ flutter clean 

$ flutter pub get  

$ flutter pub run flutter_native_splash:create

これでSplash Screen真ん中に表示される画像が大きくなりました！！！