[flutter]アプリ起動時にアニメーション画像を挿入する[スプラッシュ画面]

はじめに

こんにちは今回は、アプリ起動時にアニメーション画像を挿入する方法を共有します。
いわゆるスプラッシュ画面ですね。
これがこのflutter_native_splashを使用すると何とコードレスでスプラッシュ画面が実装できてしまうんです！（すごい）

具体的にはこんな感じですね。（gifの画質悪くてすみません。。）

手順

インポート

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_native_splash: ^2.3.1

公式ドキュメントにはdependencies:ではなく、dev_dependencies:に記載するように書かれておりました。

アセットを記載

プロジェクト配下にassetsディレクトリを作成します。（ディレクトリ名は何でも構いません。）
作成したディレクトリに画像をドロップアンドドラッグします。

pubspec.yamlに詳細を記載

pubspec.yaml

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_native_splash: ^2.3.1

flutter:

  uses-material-design: true
  assets:
    - assets/

flutter_native_splash:
  color: '#ffffff'
  image: 'assets/logo_new.png'
  fullscreen: true

dev_dependenciesの中に上記のように記載してください。

colorとimageはそれぞれ背景色と、指定したい画像を設定します。

fullscreenをtrueに指定すると通知バーの部分が非表示になります。