การสร้าง Splash Screen ใน Flutter

Splash Screen เป็นหน้า page เมื่อเรียกใช้งาน App ครั้งแรก โดยใช้ package splashscreen โดยเปิดไฟล์ pubspec.yaml แล้วเพิ่ม splashscreen: any

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  splashscreen: any

สร้าง folder assets จากนั้นนำไฟล์ logo.png ใส่ใน assets/images แล้ว ระบุ assets ใน pubspec.yaml ลักษณะดังนี้

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
   - assets/images/logo.png

แก้ไขไฟล์ main.dart

import 'package:flutter/material.dart';
import 'package:yourpackage/pages/splash_page.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
            scaffoldBackgroundColor: Color(0xffe9ebee),
            primaryColor: Colors.blue,
            accentColor: Colors.pinkAccent),
        title: 'Your App Name',
        home: SplashPage());
  }
}

สร้างไฟล์ page/splash_page.dart

สร้างไฟล์ splash_page.dart ใน folder page จากนั้นเขียนโปรแกรม

import 'package:flutter/material.dart';
import 'package:splashscreen/splashscreen.dart';
import 'main_page.dart';

class SplashPage extends StatefulWidget {
  @override
  _SplashPageState createState() => _SplashPageState();
}

class _SplashPageState extends State<SplashPage> {
  @override
  Widget build(BuildContext context) {
    return SplashScreen(
        seconds: 5,
        navigateAfterSeconds: MainPage(),
        title: Text(
          'Your App Name',
          style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
        ),
        image: Image.asset('assets/images/logo.png'),
        backgroundColor: Colors.white,
        styleTextUnderTheLoader: TextStyle(color: Colors.deepPurple),
        photoSize: 100.0,
        loaderColor: Colors.pinkAccent);
  }
}

สร้างไฟล์ main_page.dart

สร้างไฟล์ main_page.dart เพื่อสร้างเป็นไฟล์หน้าจอหลักของ App (อันนี้ไม่ขอกล่าวถึงในขั้นตอนนี้)

ตัวอย่างเมื่อสั่ง run