🐳

flutterでアプリ起動時に表示されるロゴ、スプラッシュ画面を実装する

2024/05/16に公開

Android

はじめに

アプリにおいて起動時に表示される画像やロゴのことをスプラッシュ画面といいます。
ブランドロゴの表示による認知向上やユーザーの離脱を防ぐために機能するため、追加してみてはいかがでしょうか。

環境

Flutter 3.16.8
Dart 3.2.5
flutter_native_splash　2.4.0

パッケージ

flutter pub add flutter_native_splash

import 'package:flutter_native_splash/flutter_native_splash.dart';

完成イメージ

スプラッシュ画面に耳馴染みがないかもしれませんが、以下の手順で読み込み中に画像が表示されます。ブランドロゴなどの表示もよくみられます。
1.アプリを開く
2.指定した画像が表示
3.アプリのホーム画面を表示

手順

パッケージを追加

flutter pub add flutter_native_splash

pubspec.yamlに追加

assets/images配下に画像を追加し、yamlに以下のように記載しました。

flutter_native_splash:
  color: "#f5f5ef"
  image: "assets/images/splash.png"
  fullscreen: true
  android_12://android のスプラッシュスクリーン実装用に使用
    icon_background_color: "#add8e6"
    image: "assets/images/splash_android12.png"
    icon_background_color_dark: "#f5f5ef"
    image_dark: "assets/images/splash_android12.png"