Home Mobile Membuat Splash Screen Flutter dengan mudah menggunakan library Flutter_spinkit

Membuat Splash Screen Flutter dengan mudah menggunakan library Flutter_spinkit

0
Membuat Splash Screen Flutter dengan mudah menggunakan library Flutter_spinkit

Assalamualaikum teman-teman, disini kita akan mencoba nihh cara membuat splash screen menggunakan package atau library dari flutter yaitu flutter_spinkit

Flutter_spinkit merupakan salah satu library flutter yang membantu teman-teman dallam berkolaborasi membuat tampilan yang menarik lewat animasi animasi yang di tawarkannya. Adapun contoh list dari flutter-spinkit antara lain

SpinKitRotatingCircle(color: Colors.white)
SpinKitRotatingPlain(color: Colors.white)
SpinKitChasingDots(color: Colors.white)
SpinKitPumpingHeart(color: Colors.white)
SpinKitPulse(color: Colors.white)
SpinKitDoubleBounce(color: Colors.white)
SpinKitWave(color: Colors.white, type: SpinKitWaveType.start)
SpinKitWave(color: Colors.white, type: SpinKitWaveType.center)
SpinKitWave(color: Colors.white, type: SpinKitWaveType.end)
SpinKitThreeBounce(color: Colors.white)
SpinKitWanderingCubes(color: Colors.white)
SpinKitWanderingCubes(color: Colors.white, shape: BoxShape.circle)
SpinKitCircle(color: Colors.white)
SpinKitFadingFour(color: Colors.white)
SpinKitFadingFour(color: Colors.white, shape: BoxShape.rectangle)
SpinKitFadingCube(color: Colors.white)
SpinKitCubeGrid(size: 51.0, color: Colors.white)
SpinKitFoldingCube(color: Colors.white)
SpinKitRing(color: Colors.white)
SpinKitDualRing(color: Colors.white)
SpinKitRipple(color: Colors.white)
SpinKitFadingGrid(color: Colors.white)
SpinKitFadingGrid(color: Colors.white, shape: BoxShape.rectangle)
SpinKitHourGlass(color: Colors.white)
SpinKitSpinningCircle(color: Colors.white)
SpinKitSpinningCircle(color: Colors.white, shape: BoxShape.rectangle)
SpinKitFadingCircle(color: Colors.white)
SpinKitPouringHourglass(color: Colors.white)

Kemudian mari kita menggunkaan salah satu contoh nya, okeebuat proyek flutternya lalu di main.dart


  import 'dart:async';
  import 'package:flutter/material.dart';
  import 'package:flutter_spinkit/flutter_spinkit.dart';
  import 'package:webview/Home_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(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(),
      );
    }
  }

  class MyHomePage extends StatefulWidget {
    @override
    _MyHomePageState createState() => _MyHomePageState();
  }

  class _MyHomePageState extends State<MyHomePage> {
    @override
    void initState() {
      super.initState();
      Timer(
        Duration(seconds: 5),
        () => Navigator.pushReplacement(
          context,
          MaterialPageRoute(builder: (context) => HomePage()),
        ),
      );
    }

    @override
    Widget build(BuildContext context) {
      return Scaffold(
          body: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          Container(
            decoration: BoxDecoration(color: Colors.blue),
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                "   Loading....",
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 20,
                    fontWeight: FontWeight.bold),
              ),
              SizedBox(
                height: 25,
              ),
              SpinKitWave(
                itemBuilder: (BuildContext context, int index) {
                  return DecoratedBox(
                    decoration: BoxDecoration(
                      color: index.isEven ? Colors.white : Colors.red,
                    ),
                  );
                },
              ),
            ],
          ),
        ],
      ));
    }
  }

Di method initstate ada timer digunakan untuk menentukan seberapa lama animasi nya dan navigasi nya untuk melanjutkan ke halaman mana setelah halaman MyHomePage nya

Kemudian untuk animasi nya bisa di lihat disitu ada SpinkitWave, saya ambil salah dari salah satu list diatas, dan teman teman bisa memodifikasi sesuai keiinginann masing-masing

lalu buat file baru lagi namanya Home_Page.dart untuk pindah ke halaman selanjutnya lalu ketik aja

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

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Tutorial"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[Text("Assalamualaikum")],
        ),
      ),
    );
  }
}

Upss kita lupa tambahin library nya hehehe, lalu di puspec.yaml

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  flutter_spinkit: ^5.0.0

Udahh, untuk tampilannya kurang lebih seperti ini