Flutter Splashscreen - 2

Creating a splash screen by using dart splash screen packages.

About the application :

Installing package :

1. Add this splashscreen: ^0.0.9 package in pubspc.yaml file.

img 1.0

2. You can install packages from the command line : flutter packages get

3. Import it in dart code : import ‘package:splashscreen/splashscreen.dart’;

Main code :

return new SplashScreen(
  seconds: 5,
  backgroundColor: Colors.orange,
  image: Image.asset('assets/images/logo.png'),
  title: Text("Welcome to Flutter"),
  photoSize: 50.0,
  loaderColor: Colors.white,
  navigateAfterSeconds: new HomeScreen(),
);

In this SplashScreen package, we can use the above things only.

Using navigateAfterSeconds to move to the next screen. Here I’m created one more class(HomeScreen.dart).

return new Scaffold(
  appBar: AppBar(
    title: Text("Home"),
    automaticallyImplyLeading: false,
  ),
  body: Container(
    padding: EdgeInsets.all(20.0),
    child: Column(
      children: <Widget>[
        Image.asset("assets/images/logo.png", height: 200.0),
        Text(aboutFlutter),
      ],
    ),
  ),
);

In this HomeScreen.dart class, I’m added Image-widget and Text-widget.

Here automaticallyImplyLeading: false, because it’ll show back arrow in app bar.

img 1.1

splashscreen.dart library:

Replace:

Timer(Duration(seconds: widget.seconds), () =>
    Navigator.of(context).push(new MaterialPageRoute(
        builder: (BuildContext context) => widget.navigateAfterSeconds));

with:

Timer(Duration(seconds: widget.seconds), () =>
    Navigator.of(context).pushAndRemoveUntil(new MaterialPageRoute(
        builder: (BuildContext context) => widget.navigateAfterSeconds), (
        Route<dynamic> route) => false));

push : Push the given route onto the navigator.

pushAndRemoveUntil : Push the given route onto the navigator, and then remove all the previous routes until the `predicate` returns true.

For avoiding previous screen we are using pushAndRemoveUntil.

Full source code in GitHub:

https://github.com/vignesh7501/Flutter-splash-screen-example-2