Flutter: สร้าง splash screen จาก package.

สำหรับบทความนี้จะแนะนำการสร้าง Splash screen ด้วย package นะคับ

1. เริ่มแรกเลยก้อไปที่ pub.dev แล้ว search ด้วยคำว่า splashscreen เลยนะคับ

เลือกใช้ตัวนี้นะคับ

2. จากนั้นให้ install ใน pubspec.yaml ให้เรียบร้อยนะคับ

3. วิธีการใช้งานให้เราสร้าง page ใหม่ขึ้นมาเพื่อคั่นระหว่างหน้า main.dart กับ หน้าแรกของเรานะคับ เช่น LoginPage() เป็นต้น
จากในโค้ดด้านล่าง เราจะสร้าง Stateful ขึ้นมาและ return เป็น SplashScreen นะคับ และกำหนด Propery ตามที่เราต้องการได้เลย

new SplashScreen(
      seconds: 14,
      navigateAfterSeconds: new AfterSplash(),
      title: new Text('Welcome In SplashScreen'),
      image: new Image.asset('screenshot.png'),
      backgroundColor: Colors.white,
      styleTextUnderTheLoader: new TextStyle(),
      photoSize: 100.0,
      loaderColor: Colors.red
    );

เมื่อโชว์หน้า SplashScreen ครบ 14 วินาทีแล้ว จะวิ่งไปที่หน้า AfterSplash() ต่อ จาก navigateAFterSeconds: นะคับ

4. เมื่อเรียบร้อยแล้ว หน้าตาของ Splash screen เราจะหน้าตาประมาณนี้นะคับ หน้าจอ Splash screen แบบนี้จะใส่ได้เพียง Logo ด้านบน ขนาด 2 ใน 3 ส่วนของทั้งหน้าจอนะคับ และ CircularProgressIndicator() ด้านล่างขนาด 1 ใน 3 (จะไม่สามารถใช้รูปขนาดเต็มหน้าจอได้นะคับ แบบนั้นต้องเขียนเอง)

หน้าจอ splash screen.

แล้วพบกันใหม่เมื่อว่างครับ