📱

【Flutter】Splash画面作成してみた

2024/06/29に公開
main.dart
import 'package:flutter/material.dart';
import 'splash_screen.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      home: SplashScreen(), // スプラッシュ画面を最初に表示
    );
  }
}
splash_screen.dart
import 'package:flutter/material.dart';
import 'home_screen.dart'; // ホーム画面をインポート

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

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

  _navigateToHome() async {
    // ここで初期化やデータのロードなどを行う
    await Future.delayed(Duration(seconds: 3), () {});
    Navigator.pushReplacement(
      context,
      PageRouteBuilder(
        pageBuilder: (context, animation, secondaryAnimation) => HomeScreen(),
      ),
    );
  }

  
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Expanded(
            child: Center(
              child: Image.asset('assets/images/sample.png'),
            ),
          ),
          Padding(
            padding:
                const EdgeInsets.symmetric(horizontal: 50.0, vertical: 20.0),
            child: LinearProgressIndicator(
              valueColor:
                  AlwaysStoppedAnimation<Color>(Colors.blue), // プログレスバーの色
              backgroundColor: Colors.grey[200], // 背景色
            ),
          ),
        ],
      ),
    );
  }
}

Discussion