UDACODING

Posts

Cara Membuat Halaman SplashScreen pada flutter

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
image Cara Membuat Halaman SplashScreen pada flutter
  • Hapus tanda komentar yang ada pada pubspec.yaml, seperti berikut :
rvFQVfS0C4-8jwYkvxzNNFfVBz_nLClLP4x4CYzn7bkr6BOg967Mr7A5Fxon3ZlD-tbFCgf-SAAFB2Wooayl-upgap2Gz_SSE9RLTZ8GVz_2nOHWN9tYTSUvHCSuusF957TD0SJT Cara Membuat Halaman SplashScreen pada flutter
  • 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 
QidASrob6O9i7_pg8LIB34NG6XyJs4VXSHcL_R6V5XPL5cQMwTjinTRj_3ZY7yPyM5ZJSCXeJ7S7V8sCR8e0U-yzi7P7DShjzOmephFYWvIxj0xHyMmzZ3F8m7bLo3qxkkDUuZZf Cara Membuat Halaman SplashScreen pada flutter

2 Comments :

  1. Google plus one count May 9, 2020 at 1:10 pm

    Google plus one count

    xipusipus emeyf ndgwcst ujyg iqcgelbouqzfpmb

    Reply
  2. ปั้มไลค์ June 8, 2020 at 10:04 pm

    Like!! Thank you for publishing this awesome article.

    Reply

Leave a Reply :

* Your email address will not be published.