Subscribe to Updates

    Get the latest creative news from FooBar about art, design and business.

    What's Hot

    Top 15 Flutter Interview Questions and Answers 2023

    April 22, 2023

    The Best Flutter Stepper Widget : Build Multi-Step Forms

    April 22, 2023

    Flutter ListView – A Guide to Creating Dynamic Lists with flutter

    April 16, 2023
    Facebook Twitter Instagram
    Facebook Twitter Instagram Pinterest YouTube
    DeepCrazyWorld
    Subscribe
    • Home
    • FLUTTER
      • UI
        • Splash Screen
        • Card Design
        • Login Screen
      • APPS
    • ANDROID
      • ANDROID APP
      • GAME APP
    • SOURCE CODE
    • ANDROID STUDIO
    • PROJECT
      • Android Projects
      • College Projects
      • Project Ideas
      • PHP Projects
      • Python Projects
    • MCQ
      • AKTU MCQ
        • RPA MCQ
        • COA MCQ
        • HPC MCQ
        • SPM MCQ
        • Renewable Energy All MCQ
        • Data Compression MCQ
        • Data Structure MCQ
        • Digital Image Processing MCQ
        • Software Engineering MCQ
        • Machine Learning MCQ
        • Artificial Intelligence MCQ
      • D PHARMA MCQ
        • Pharmaceutics – I MCQ
        • Pharmacognosy MCQ
        • Pharmaceutical Chemistry MCQ
        • Biochemistry and Clinical Pathology MCQ
        • Human Anatomy and Physiology MCQ
        • Heath Education and Community Pharmacy MCQ
      • COLLECTION
        • WORDPRESS
          • SEO
          • TOP 10 WORDPRESS THEME
        • PRODUCTIVITY
        • Networking
        • Program
        • YOUTUBE
        • QUOTES
    • INTERVIEW QUESTIONS
    DeepCrazyWorld
    Home»FLUTTER»How to create a simple splash screen in Flutter 2023
    FLUTTER

    How to create a simple splash screen in Flutter 2023

    DeepikaBy DeepikaAugust 8, 2022Updated:February 19, 2023No Comments3 Mins Read
    Facebook Twitter LinkedIn WhatsApp Telegram
    Share
    Facebook Twitter LinkedIn Pinterest Telegram WhatsApp

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

    Table of Contents

    • What is a splash screen?
    • Related Articles:
    • READ MORE

    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 decoding=
    
    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,)
        );
      }
    }

    How to Setup Space Between Elements In Flutter 2023

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

    Related Articles:

    • How to Install Flutter in windows 10 | With videos guide
    • How to Setup Space Between Elements In Flutter 
    • Flutter Card Widget with Example
    • Integrating an API into a Flutter – Working with REST APIs
    • Android Projects with Source Code
    • Flutter Interview Questions
    • School Database Management System Project 

    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 !

    Share this…
    • Facebook
    • Pinterest
    • Twitter
    • Linkedin
    • Whatsapp
    • Gmail
    Post Views: 328
    a splash screen was provided to flutter beautiful splash screen in flutter but this is deprecated custom splash screen in flutter flutter splash screen flutter splash screen background image flutter web splash screen How do I add a splash screen dependency in Flutter? How do I create a splash screen image? How do I create a splash screen in Flutter? splash screen in flutter github splash screen in flutter with animation
    Share. Facebook Twitter LinkedIn WhatsApp Telegram
    Previous ArticleFlutter Card Widget with Example Tutorial 2023
    Next Article Top 30 Trending Android Projects Ideas for Beginner to Advanced
    Deepika
    • Website
    • Facebook
    • Twitter
    • Pinterest
    • Instagram
    • LinkedIn

    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.

    Related Posts

    Top 15 Flutter Interview Questions and Answers 2023

    April 22, 2023

    The Best Flutter Stepper Widget : Build Multi-Step Forms

    April 22, 2023

    Flutter ListView – A Guide to Creating Dynamic Lists with flutter

    April 16, 2023

    Top 10 Flutter Projects with source code For Startups

    April 16, 2023

    Leave A Reply Cancel Reply

    Our Picks
    • Facebook
    • Twitter
    • Pinterest
    • Instagram
    • YouTube
    • Vimeo
    Don't Miss
    Android Interview Questions

    Top 15 Flutter Interview Questions and Answers 2023

    By DeepikaApril 22, 2023010 Mins Read

    One of the hottest issues in cross-platform application development has been flutter interview questions and…

    Share this...
    • Facebook
    • Pinterest
    • Twitter
    • Linkedin
    • Whatsapp
    • Gmail

    The Best Flutter Stepper Widget : Build Multi-Step Forms

    April 22, 2023

    Flutter ListView – A Guide to Creating Dynamic Lists with flutter

    April 16, 2023

    Top 10 Flutter Projects with source code For Startups

    April 16, 2023
    Archives

    Subscribe to Updates

    Get the latest creative news from SmartMag about art & design.

    About Us
    About Us

    Hey, I'm Deepika a professional blogger and Experienced in Mobile App Developer ( Android and Flutter ) Technically sound Post graduated 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.

    Recent Posts
    • Top 15 Flutter Interview Questions and Answers 2023
    • The Best Flutter Stepper Widget : Build Multi-Step Forms
    • Flutter ListView – A Guide to Creating Dynamic Lists with flutter
    • Top 10 Flutter Projects with source code For Startups
    • How to use chatGPT for UI/UX design with examples in 2023
    • Top 10 Flutter Interview Questions in 2023
    • Top 50+ Flutter Interview Questions in 2023
    • Stripe Payment gateway integration in Flutter 2023

    Top 15 Flutter Interview Questions and Answers 2023

    April 22, 2023

    The Best Flutter Stepper Widget : Build Multi-Step Forms

    April 22, 2023

    Flutter ListView – A Guide to Creating Dynamic Lists with flutter

    April 16, 2023

    Top 10 Flutter Projects with source code For Startups

    April 16, 2023
    Facebook Twitter Instagram Pinterest
    • Home
    • Contact Us
    • Disclaimer
    • Privacy Policy
    © 2023 DeepCrazyWorld. Designed by DeepCrazyWorld.

    Type above and press Enter to search. Press Esc to cancel.