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
ความคิดเห็น