[解決済み】Flutterアプリにスプラッシュスクリーンを追加する

質問

Flutterアプリにスプラッシュスクリーンを追加するにはどうしたらよいでしょうか？他のコンテンツよりも先にロードして表示する必要があります。現在、Scaffold(home:X)ウィジェットがロードされる前に短い色のフラッシュが表示されます。

どのように解決するのですか？

FlutterでSplashスクリーンを作る実際の方法について、もう少し光を当ててみたいと思います。

を少し辿ってみました。 ここで で、FlutterのSplash Screenについては、それほど悪い状況にはなっていないことがわかりました。

たぶんほとんどの開発者（私のように）は、Flutterにはデフォルトでスプラッシュスクリーンがないので、それについて何かする必要があると考えているのでしょう。スプラッシュスクリーンはありますが、白背景で、iOSやAndroidにはすでにデフォルトでスプラッシュスクリーンがあることを誰も理解できていません。

開発者がやるべきことは、ブランディング画像を適切な場所に配置することだけで、スプラッシュスクリーンはそれだけで動き始めます。

ここでは、その方法を順を追って説明します。

まずAndroidで (私の好きなプラットフォームだからです :) )

1. Flutterプロジェクトで"android"フォルダを探します。

2. app -> src -> main -> res フォルダーを参照し、ブランディング画像のすべてのバリエーションを対応するフォルダーに配置します。例えば

• 密度1の画像はmipmap-mdpiに配置する必要があります。
• 密度1.5の画像は、mipmap-hdpiに配置する必要があります。
• 密度 2 の画像は mipmap-xhdpi に配置する必要があります。
• 濃度3の画像は、mipmap-xxhdpiに配置する必要があります。
• 濃度4の画像は、mipmap-xxxhdpiに配置する必要があります。

androidフォルダにはデフォルトでdrawable-mdpi、drawable-hdpiなどはありませんが、必要であれば作成することができます。その事実のため、画像はmipmapフォルダに配置する必要があります。また、（Androidの）スプラッシュ画面に関するデフォルトのXMLコードは、@drawableリソースの代わりに@mipmapを使うことになっています（必要なら変更可能です）。

1. Android での最後のステップは、drawable/launch_background.xml ファイル内の XML コードの一部をアンコメントすることです。app -> src -> main -> res-> drawable にアクセスし、launch_background.xml を開いてください。このファイルの中で、Slash画面の背景が白である理由を確認できます。ステップ2で配置したブランディング画像を適用するには、launch_background.xml ファイル内の XML コードの一部をアンコメントする必要があります。変更後は、以下のようになります。

    <!--<item android:drawable="@android:color/white" />-->
   
    <item>
   
        <bitmap
            android:gravity="center"
            android:src="@mipmap/your_image_name" />
   
    </item>
   
   

白背景のXMLコードをコメントし、ミップマップ画像に関するコードをアンコメントしていることに注意してください。もし興味があれば、launch_background.xml ファイルが styles.xml ファイルで使用されていることに注意してください。

iOSの2つ目。

1. Flutterプロジェクトで"ios"フォルダを探します。

2. Runner -> Assets.xcassets -> LaunchImage.imagesetをブラウズします。LaunchImage.png、[email protected] 等があるはずです。ここで、これらの画像をあなたのブランディング画像のバリアントと置き換える必要があります。たとえば、以下のようになります。

• 密度 1 の画像は LaunchImage.png をオーバーライドする必要があります。
• 密度2の画像は、[email protected] を上書きする必要があります。
• 密度3の画像は、[email protected] を上書きする必要があります。
• 密度4の画像は、[email protected] を上書きする必要があります。

間違っていなければ、[email protected] はデフォルトでは存在しませんが、簡単に作成することができます。[email protected] が存在しない場合、画像と同じディレクトリにある Contents.json ファイルでも宣言する必要があります。変更後、私のContents.jsonファイルは以下のようになります。

{
  "images" : [
    {
      "idiom" : "universal",
      "filename" : "LaunchImage.png",
      "scale" : "1x"
    },
    {
      "idiom" : "universal",
      "filename" : "[email protected]",
      "scale" : "2x"
    },
    {
      "idiom" : "universal",
      "filename" : "[email protected]",
      "scale" : "3x"
    },
    {
      "idiom" : "universal",
      "filename" : "[email protected]",
      "scale" : "4x"
    }
  ],
  "info" : {
    "version" : 1,
    "author" : "xcode"
  }
}

これで、次回からAndroidやiOSでアプリを実行すると、追加したブランディング画像が表示された正しいスプラッシュスクリーンが表示されるはずです。

感謝