Membuat Splash Screen Sederhana di Flutter

25 Aug 2022 15:10
Dipost oleh Admin
523
0
Share:

Sobatcoding.com - Tutorial Sederhana Membuat Splash Screen di Flutter

Terkadang kita ingin membuat sebuah splash screen sebelum menuju halaman home atau halaman utama sebuah aplikasi android. Kali ini kita akan mencoba membuat splash screen sederhana menggunakan flutter dan visual studio code. Library yang kita gunakan kali ini adalah AnimatedSwitcher

kalian bisa baca selengkapnya di link berikut https://api.flutter.dev/flutter/widgets/AnimatedSwitcher-class.html

Langkah pertama kita buat sebuah file untuk halaman splash screen nantinya

import 'dart:async';

import 'package:androidflutter/views/home_page.dart';
import 'package:flutter/material.dart';

class SplashScreen extends StatefulWidget {
  const SplashScreen({Key? key}) : super(key: key);

  @override
  State<SplashScreen> createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  bool isVisible = false;

  @override
  void initState() {
    
    super.initState();
  }

  
  @override
  Widget build(BuildContext context) {
    Size screenSize = MediaQuery.of(context).size;

    return Scaffold(
      body: Center(
          child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          FlutterLogo(size: screenSize.height / 4),
          const SizedBox(height: 25),
          const Text("Welcome the app..", style: TextStyle(fontSize: 18)),
          const Align(
              //alignment: FractionalOffset.bottomCenter,
              heightFactor: 5,
              alignment: Alignment.bottomCenter,
              child: CircularProgressIndicator(
                color: Colors.grey,
              )) 
        ],
      )),
    );
  }
}

Kita tambahkan animasi logo splashscreen bawaan flutter

AnimatedSwitcher(
              duration: const Duration(seconds: 2),
              transitionBuilder: (Widget child, Animation<double> animation) {
                return ScaleTransition(scale: animation, child: child);
              },
              child: isVisible
                  ? FlutterLogo(size: screenSize.height / 4)
                  : const SizedBox()),

Pada initState tambahkan kode timer

Timer(const Duration(seconds: 2), () {
      setState(() {
        isVisible = true;
      });
     //pindah halaman home page
      toHomePage();
});

Tambahkan kode timer untuk otomatis pindah halaman ke home

toHomePage() {
    Timer(const Duration(seconds: 3), () {
      Navigator.of(context).pushReplacement(MaterialPageRoute(
                      builder: (context) => const HomePage()));
    });
  }

sobatcoding.com