How to create a simple splash screen in Flutter 2022

In this article we are going to discussed about How to create a simple splash screen in Flutter

What is a splash screen?


A splash screen is a screen that briefly opens whenever you open an application. A splash screen is also called the launch screen or startup screen and appears as soon as you click on the app icon to launch it. A splash screen usually appears for two to four seconds and then disappears, and the application home screen is launched. Below are some pictures of a splash screen.

How to create a splash screen in Flutter
We will use the Timer() function to create a splash screen in Flutter. First, we create a new Flutter application with the following command:

<img width=

flutter create new_flutter_app


The application will be created and will have a main.dart file, where we add the following code:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        
        
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomePage() 
  }
}

We will create a stateful widget named SplashScreen and add the code for the splash screen in it. The splash screen can just have a simple logo or the name of the app.

First, we create a stateless widget in the main.dart file named homepage screen. Then, we add a simple code for the second screen and add some styling to it. After our widget for the second screen is ready, we just need to write code to connect it.

We will add the timer, which specifies how long the screen is displayed whenever it is launched. We add the timer in initState().

The following is the code to add a splash screen:

class SplashScreen extends StatefulWidget {
  @override
  _SplashScreenState createState() => _SplashScreenState();
}
class _SplashScreenState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
    Timer(Duration(seconds: 3),
          ()=>Navigator.pushReplacement(context,MaterialPageRoute(builder:(context) => HomeScreen()));
  }
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text("This is the splash screen")
    );
  }
}

The code below is added to the new homepage.dart file, which contains the screen displayed after the splash screen.

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title:Text("This is the secoind screen")),
      body: Text("Home page",textScaleFactor: 2,)
    );
  }
}

Do like & share my Facebook page. if you find this post helpful. Thank you!!

Related Articles:

READ MORE

If you found this post useful, don’t forget to share this with your friends, and if you have any query feel free to comment it in the comment section.

Thank you 🙂 Keep Learning !

DeepCrazyWorld

Hey, I'm Deepika a professional blogger and Experienced in Android Developer,Flutter Developer, PHP Web Developer. Technically sound Post graduate pursuing M.Tech in Computer Science and Engineering. I Love to gain every type of knowledge that's why i have done many courses in different fields like engineering and technology. Skilled in Java, HTML, CSS,Bootstrap,j query PHP, Python, SQL, C, C++,Firebase,MySQL,SQLite,JavaScript. Also I have learned Networking.

Leave a Reply