Category: flutter

How to create splash screen in flutter

what is splash screen and why it is used?

Splash screen is type of page which show for a while time and its hide. Basically the splash screen is used to hide the loading time or fetching time taken from the databases.

Step by step creating Flutter splash screen in android studio

You have to add flutter plugins from android studio.

File => settings=> Plugins ==> Install Flutter

Make sure the flutter is installed properly. Now close and open the android studio. Let’s start,

File ==> New ==> New Flutter project

Now create a project name and click next to create flutter files. After flutter files created, the main.dart file in the lib folder is our main targeting file we want to change all the default coding and paste the below code.

main.dart

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'dart:async';
void main() => runApp( MaterialApp(
    theme:
        ThemeData(primaryColor: Colors.red, accentColor: Colors.yellowAccent),
    debugShowCheckedModeBanner: false,
    home: SplashScreen(),
  ));

  class SplashScreen extends StatefulWidget {
  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
 @override
  void initState() {
    // TODO: implement initState
    super.initState();
    Timer(Duration(seconds: 5), () => print("splash finished."));
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          Container(
            decoration: BoxDecoration(color: Colors.deepOrange),
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Expanded(
                flex: 2,
                child: Container(

                  child: Column(

                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[


                      Image.asset('assets/images/helperscript_logo.png',width: 200,fit:BoxFit.fitWidth  ),

                    ],
                  ),
                ),
              ),
              Expanded(
                flex: 1,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    CircularProgressIndicator(),
                    Padding(
                      padding: EdgeInsets.only(top: 20.0),
                    ),
                    Text(
                      "Help you To Script",
                      softWrap: true,
                      textAlign: TextAlign.center,
                      style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 18.0,
                          color: Colors.yellowAccent),
                    )
                  ],
                ),
              )
            ],
          )
        ],
      ),
    );
  }
}

After pasted the above code in main.dart. Find the file pubspec.yaml and set the static images folder or static images

For adding the images create a folder assets>images in the root folder. Add your images into images folder and set the path to flutter

flutter:
  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons i
  # the material Icons class.
  uses-material-design: true
  assets:
    - assets/images/helperscript_logo.png

Add the above code to your pubspec.yaml file. That’s it your splash screen is ready. Now Run the app in android emulator or directly open the root path(project name folder) in terminal type flutter run.

I hope this will helpful to your work! Thank You for reading. If you have any suggestion or question belongs to the post, please comment in the below. It definitely helpful to improve the post writing styles. Have a good day!.