Flutter-#2 Membuat Splashscreen

Persiapan

1. Buat Project Flutter
2. Download logo Flutter yang nantinya digunakan untuk splashscreen
   

Struktur Direktori

Menambahkan Depedensi

Tambahkan baris berikut pada file pubspec.yaml.

dependencies:
  flutter:
    sdk: flutter
  splashscreen:

flutter:
  uses-material-design: true
  assets:
    - images/flutterwithlogo.png

Edit file main.dart

import 'package:flutter/material.dart';
import 'package:hello_world/homePage.dart';
import 'package:splashscreen/splashscreen.dart';
void main(){
  runApp(new MaterialApp(
    home: new MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new SplashScreen(
      seconds: 14,
      navigateAfterSeconds: new HomePage(),
      title: new Text('Welcome In SplashScreen',
      style: new TextStyle(
          fontWeight: FontWeight.bold,
          fontSize: 20.0,
          color: Colors.white
        )
      ),
      image: new Image.asset('images/splash_logo.png'),
      backgroundColor: Colors.blueAccent,
      styleTextUnderTheLoader: new TextStyle(),
      photoSize: 100.0,
      onClick: ()=>print("Flutter Egypt"),
      loaderColor: Colors.red
    );
  }
}

Buat file homePage.dart

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
      title: new Text("Home"),
      automaticallyImplyLeading: false
      ),
      body: new Center(
        child: new Text("Welcome",
          style: new TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 30.0
          ),
        ),
      ),
    );
  }
}

Jalankan Aplikasi