Flutter アプリにスプラッシュ スクリーンを追加する 質問する

Flutter でスプラッシュ スクリーンを作成する実際の方法について、もう少し詳しく説明したいと思います。

ここで少しトレースをたどってみたところ、Flutter のスプラッシュ スクリーンの状況はそれほど悪くないことがわかりました。

おそらく、ほとんどの開発者 (私のような) は、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 が使用されます (必要に応じて変更できます)。

3. Android での最後の手順は、drawable/launch_background.xml ファイル内の XML コードのコメントを解除することです。app -> src -> main -> res-> drawable を参照し、launch_background.xml を開きます。このファイル内で、スラッシュ画面の背景が白である理由がわかります。手順 2 で配置したブランド イメージを適用するには、launch_background.xml ファイル内の XML コードのコメントを解除する必要があります。変更後、コードは次のようになります。

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

{
  "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"
  }
}