🐒

【Flutter】スプラッシュ画面の表示時間を設定する

2024/05/04に公開

Flutter

tech

スプラッシュ画面を表示するには、flutter_native_splashが便利ですよね。

しかし、flutter_native_splashを導入しただけではスプラッシュ画面の表示時間がとても短く、不自然に感じることがありました。

そこで、スプラッシュ画面の表示時間を2秒に設定してみると、いい感じになりました。

flutter_native_splashの導入方法については、こちらの記事をいつも参考にしています。

main()の編集

まず、main.dartにflutter_native_splashをインポートします。

import 'package:flutter_native_splash/flutter_native_splash.dart';

そして、runAppの前に次の2行を追加します。

  final widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);

基本的にはこんな感じになると思います。

import 'package:flutter_native_splash/flutter_native_splash.dart';

void main()　{

  final widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);

  runApp(const MyApp());
}

新規プロジェクトを作成したときのカウンターアプリでは、MyApp（Stateless）からMyHomePage(Stateful)を呼び出しますよね。

その場合、MyHomePageが最初に読み込むStateful Widgetになります。

最初に読み込むStateful Widgetがmain.dart以外のファイルにある場合、そのファイルでflutter_native_splashをインポートします。

import 'package:flutter_native_splash/flutter_native_splash.dart';

次に、Stateful Widgetの中にinitStateを追加します。

  @override
  void initState() {
    super.initState();
    Future(() async {
      await Future<void>.delayed(const Duration(seconds: 2));
      setState(() {
        FlutterNativeSplash.remove();
      });
    });

Duration(seconds: 2)の数字がスプラッシュ画面の表示時間を表しています。

2秒では「長い！」もしくは「短い！」という方は調整してみてください。

以上、スプラッシュ画面の表示時間の設定方法でした。

【Flutter】スプラッシュ画面の表示時間を設定する

main()の編集

最初に読み込むStateful Widgetの編集

Discussion