😃

Flutterでスプラッシュスクリーンを出そうと思ったら存外めんどくさそうだったので小技を使ってみた、というお話

2024/03/12に公開

アプリを起動する時になんか企業ロゴとか出てくるアレ、あるじゃないですか。スプラッシュスクリーン。起動までの処理が重いからイライラさせないようになんか出す、みたいな話でもなく、「まぁブランディングみたいな気持ちで何か出したいよねー」みたいなの

で、ちょっと調べてみたんですけど、想像してたのよりワリとダルくて、いや、そんなiOSとAndroidそれぞれで何か設定するとか、大袈裟なことしないでいいんですよ、というかしたくないんですよ、と思ったわけです

で、なんかもっとこう、お手軽な感じでできるやつないんかなー、と思って ChatGPT先生に相談したんですよ

そしたらですよ

「main.dart にスプラッシュスクリーンウィジェットを最初の画面として設定すればできますよ」

との回答。で、やりました。なんか昔に作った画像すぎて背景の色のhex値がなんかよくわからず、Mac君に入ってたDigital Color Meterに色を見てもらったんですがなんか微妙に違うのはご愛嬌ということで...

そうそう。そういうのでいいんだよそういうので

「Flutter内で動的にスプラッシュスクリーンを実装する方法は、横断的に同じコードをAndroidとiOSの両方で使えるため、非常に便利です。」

ってChatGPTさんも言ってました。
頑張らないでスプラッシュスクリーンやりたい方は、これでいいんじゃないでしょうか？
軽く検索してもこういうスナックなのは出てこなかった気がしたので書いてみました。

さいなら〜

main.dart

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:chat_sample_app/src/screens/register_password_view.dart';
import 'package:chat_sample_app/src/screens/validate_password_view.dart';

Future<bool> isFirstLaunch() async {
  final prefs = await SharedPreferences.getInstance();
  final isFirstLaunch = prefs.getBool('isFirstLaunch') ?? true;

  if (isFirstLaunch) {
    await prefs.setBool('isFirstLaunch', false);
  }
  return isFirstLaunch;
}

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  bool firstLaunch = await isFirstLaunch();
  runApp(MyApp(firstLaunch: firstLaunch));
} 

class MyApp extends StatelessWidget {
  final bool firstLaunch;
  const MyApp({super.key, required this.firstLaunch});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SplashScreen(),
    );
  }
}

class SplashScreen extends StatefulWidget {
  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    super.initState();
    _navigateToNext();
  }

  void _navigateToNext() async {
    final prefs = await SharedPreferences.getInstance();
    final isFirstLaunch = prefs.getBool('isFirstLaunch') ?? true;
     await Future.delayed(Duration(seconds: 3)); 

    if (isFirstLaunch) {
      await prefs.setBool('isFirstLaunch', false);
      Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) => RegisterPasswordScreen()));
    } else {
      Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) => ValidatePasswordScreen()));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Color(0xFFc8ccc4), // ここに画像に合わせた背景色を設定
        width: double.infinity,
        height: double.infinity,
        child: Center(
          child: Image.asset('assets/img/splash.png', // 画像のパスを指定
              width: 328, // 画像のサイズを指定
              height: 220),
        ),
      ),
    );
  }
}

そうそう。そういうのでいいんだよそういうので

Discussion