Posts

Assalamualaikum warahmatullahi wabarakatuh, Hallo sahabat uda semua semoga masih dalam keadaan sehat, Amiin.

Pada pertemuan kali ini saya akan menjelaskan cara membuat halaman splashcreen pada flutter, Berikut Langkah-langkahnya:

• Buat sebuah folder yang berisikan image yang akan ditampilkan pada halaman splashscreennya

• Hapus tanda komentar yang ada pada pubspec.yaml, seperti berikut :

• Tambahkan codingan berikut pada main.dart

import ‘dart:async’;

import ‘package:flutter/material.dart’;

import ‘package:udacodingapps/DashboardPage.dart’;

void main() => runApp(MaterialApp(

 debugShowCheckedModeBanner: false,

 home: SplashScreenPage(),

));

class SplashScreenPage extends StatefulWidget {

 @override

 _SplashScreenPageState createState() => _SplashScreenPageState();

}

class _SplashScreenPageState extends State<SplashScreenPage> {

 void initState(){

   super.initState();

   startSplashScreen();

 }

 startSplashScreen() async{

   var duration = const Duration(seconds: 5);

   return Timer(duration, () {

     Navigator.of(context).pushReplacement(

       MaterialPageRoute(builder: (_){

         return DashboardPage(); //pergi ke halaman dashboard

       }),

     );

   });

 }

 @override

 Widget build(BuildContext context) {

   return Scaffold(

     body: Center(

       child: Image.asset(

         “images/Splashscreen.png”,

         width: MediaQuery.of(context).size.width,

         height: MediaQuery.of(context).size.height,

         fit: BoxFit.cover,

       ),

     ),

   );

 }

}

• Selanjutnya buat dart baru untuk halaman selanjutnya ketika kita telah membuat splashcreen
• Running project tersebut dan yang akan tampil pertama kali adalah splashscreennya