Flutter splash screen example

Splash screen is an important part of all mobile applications. Most of the app will show a logo in the splash screen for few seconds. Some application will do some data download in background while showing the splash screen. Like that splash screen can serve multiple purpose in mobile application. In this tutorial we will implement a splash screen in flutter.

Steps

  • Get required packages.
  • Import the packages in your file.
  • Learn code for splash screen in flutter.
  • Navigate to new screen after showing splash screen.

Get packages

Flutter does not have any default widget for splash screen. But you can achieve this with the help of library. So you need to import the package for splash for using it in application. For getting package you need to open the pubspec.yaml file and add the following dependency

splashscreen:

After adding the following line just click on package get link, android studio will automatically import the packages.

Import the packages in your file

After syncing the splash screen package we need to import it in your file. You need to open the dart file you are planing to implement the webview and add the following import code.

import 'package:splashscreen/splashscreen.dart';

Learn code for splash screen in flutter

Now we have our library sets, its now time to learn the code for implementing splash screen in flutter apps. Following is the set of code which is used to implement the splash screen in flutter applications.

new SplashScreen(
    seconds: 5,
    navigateAfterSeconds: 'Home',//route
    title: new Text(
      'CODESFOR',
      style: new TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
    ),

    image: new Image.network('https://scontent-bom1-2.xx.fbcdn.net/v/t1.0-9/18034282_1913545918923306_3841540891958486265_n.jpg?_nc_cat=105&_nc_ht=scontent-bom1-2.xx&oh=82fcf9796f052373435571e3d74be012&oe=5CBFB359'),
    backgroundColor: Colors.white,
    styleTextUnderTheLoader: new TextStyle(
        fontSize: 0
    ),
    photoSize: 150.0);

Where to navigate after showing splash screen

In this step we will learn routing . Means how to specify the screen which needs to be displayed after showing the splash screen for sometime. In the previous step which we have splash screen code we have one paramenter navigateAfterSeconds with a string as value. That string is a route which has to be defined in statelesswidget class. Following is the full code with route implemented.

import 'package:flutter/material.dart';
import 'package:splashscreen/splashscreen.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 Spalsh Screen',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Splash Screen'),
      routes: {

        'Home': (context) => ScreenOne(),

      },
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  
  @override
  Widget build(BuildContext context) {
    return new SplashScreen(
        seconds: 5,
        navigateAfterSeconds: 'Home',//route
        title: new Text(
          'CODESFOR',
          style: new TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
        ),

        image: new Image.network('https://scontent-bom1-2.xx.fbcdn.net/v/t1.0-9/18034282_1913545918923306_3841540891958486265_n.jpg?_nc_cat=105&_nc_ht=scontent-bom1-2.xx&oh=82fcf9796f052373435571e3d74be012&oe=5CBFB359'),
        backgroundColor: Colors.white,
        styleTextUnderTheLoader: new TextStyle(
            fontSize: 0
        ),
        photoSize: 150.0);
  }
}

class ScreenOne extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Welcome'),
      ),
      body: Center(
        child:new Container(
          padding: EdgeInsets.all(20),
          child: new Text('Welcome!.. Source code link is in description! Please dont forget to subscibe.',style: TextStyle(fontSize: 20)),

        ),
      ),
    );
  }
}

Now simply run the project you will get the following outputscreen. It will show splash screen for sometime and take you to the welcome screen. Here i am setting the seconds as 5 .Hope you are smart enough to figure where to edit that 🙂

About the author

Hi guys, i am the author of codesfor. I am a B.Tech graduate currently working as an App developer. Apart from job i am a blogger and a freelancer.

2 Comments

  1. Brielmaier January 4, 2019 Reply

Add a Comment

Your email address will not be published. Required fields are marked *