Pembuatan SplashScreen Pada Flutter

Setelah Semalaman hujan tiada henti, akhirnya Langit Begitu indah pagi ini. Selamat Pagi 😊

Hari ini kita akan mempelajari Flutter. Apa itu sebenarnya Flutter ? Flutter hemat saya adalah bahasa pemrograman native cross platform yang di khususkan untuk membuild aplikasi mobile, dimana output yang dihasilkan nantinya bisa berjalan di Android dan IOS, sehingga membuat waktu membangun aplikasi mobile lebih efisien.

Dalam flutter anda harus memahami widget, widget adalah media untuk membuat layout, pada Flutter ada dua tipe dari Widget yaitu Sateful dan Stateles.  kedua tipe Widget ini memiliki peran masing - masing.

Stateful widget digunakan untuk membagun layout yang dinamis, yang mengijinkan suatu perubahan pada UI saat aplikasi itu berlangsung, berikut struktur dari sateful Widget :

class introSlide extends StatefulWidget {
  @override
  _introSlideState createState() => _introSlideState();
}

class _introSlideState extends State<introSlide> {
  @override
  Widget build(BuildContext context) {
    return Container();
}


Stateless widget digunakan untuk membangun layout yang static, dimana nanti layout yang di tampilkan saat UI dijalankan tidak ada perubahan sama sekali dari segi layout akibat dari interaksi dari user, berikut struktur dari Stateless widget :

class introSlide  extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}


Pada pembuatan SplashScreen kali ini kita menggunakan Stateful Widget, dimana kita akan membuat introApp berupa icon yang posisinya center dengan ukurannya sepertiga dari lebar layar. dan height juga ukurannya sama dengan dengan widthnya sehingga bentuknya nanti square. 

Center(

   child: Image.asset( "assets/images/logoIntro.png",

      alignment: Alignment.center,

      fit: BoxFit.fitWidth,

      width: width / 3,

      height: width / 3,

   )

);

Agar bisa pindah page automatic, kita bisa menggunakan feature initState(). initStete() adalah feature yang hanya dimiliki stateful Widget sebagai media untuk menampung segala aktivitas yang mengakibatkan perubahan pada UI secara dinamis.

@override

  void initState() {

    // TODO: implement initState

    super.initState();

    Timer(Duration(seconds: 15), ()=>{

      Navigator.of(context).push(_createRoute())

   });

}

Agar perpindahan antar layout tidak kasar dan sedikit lebih smooth Flutter menyediakan Transition Builder, dimana kita dapat mengatur nanti layout selanjutnya akan muncul dari bawah, atas, kanan atau kiri. dengan kecepatan berapa perubahan Page terjadi . seperti berikut ini saya menampilkan page selanjutnya dari kanan ke kiri. berikut fungsi yang digunakan :

Route _createRoute() {

  return PageRouteBuilder(

    pageBuilder: (context, animation, secondaryAnimation) => introSlide(),

    transitionsBuilder: (context, animation, secondaryAnimation, child) {

      var begin = Offset(0.0, 1.0);

      var end = Offset.zero;

      var curve = Curves.ease;

      var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));

      return SlideTransition(

        position: animation.drive(tween),

        child: child,

      );

    },

  );

}

Source full :

import 'dart:async';
import 'package:flutter/material.dart'; 

class introApp extends StatefulWidget {
  @override
  _introAppState createState() => _introAppState();
}

class _introAppState extends State<introApp> {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    Timer(Duration(seconds: 15), ()=>{
      Navigator.of(context).push(_createRoute())
    });
  }

  @override
  Widget build(BuildContext context) {
    var width = MediaQuery.of(context).size.width;

    return Center(
        child: Image.asset(
      "assets/images/logoIntro.png",
      alignment: Alignment.center,
      fit: BoxFit.fitWidth,
      width: width / 3,
      height: width / 3,
    ));
  }
}

Route _createRoute() {
  return PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => introSlide(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      var begin = Offset(0.0, 1.0);
      var end = Offset.zero;
      var curve = Curves.ease;
      var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));
      return SlideTransition(
        position: animation.drive(tween),
        child: child,
      );
    },
  );

}

Output :

Berikut Link Github dari percobaan diatas, semoga bermanfaat 😊:

https://github.com/sdiik/MaybeHelp/blob/master/intro.dart