Open In App

Flutter – Hold Splash Screen for Specific Time

Improve
Improve
Like Article
Like
Save
Share
Report

In every application, we have the Splash Screen, But we can’t set the time for the Splash. But In this article, we will see How to make the time-based Splash screen. A sample video is given below to get an idea about what we are going to do in this article.

Step By Step Implementation

Step 1: Create a New Project in Android Studio.

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Now we need to create the two screens for the application, the first one splash screen, and the home screen. The home screen is nothing but we can visit that after the splash screen timer is complete and navigate to the home screen. The home screen simply contains the Centered text widget because we don’t need anything more in that.

Dart




class HomePage extends StatelessWidget {
  const HomePage({super.key});
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home page'),
      ),
      body: Center(
        child: Text('GeeksForGeeks'),
      ),
    );
  }
}


Step 3: Now we have to create the splash screen so that we can attach the timer to the splash screen, Splash screen contains the Centered column, Now Column can have multiple child, that is CircularProgressIndicator widget, and the Text widget, CircularProgressIndicator is the circular bar.

Dart




class Splash extends StatefulWidget {
  const Splash({super.key});
  
  @override
  State<Splash> createState() => _SplashState();
}
  
class _SplashState extends State<Splash> {
   
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [CircularProgressIndicator(), Text('Welcome..')],
        ),
      ),
    );
  }
}


Step 4: Now add the Timer in the splash screen and after time completion of time we Navigate to the Home screen.

Dart




@override
 void initState() {
   super.initState();
 
   Timer(
     Duration(seconds: 5),
     () => Navigator.pushReplacement(
       context,
       MaterialPageRoute(
         builder: (context) => HomePage(),
       ),
     ),
   );
 }


Final Code 

Dart




import 'dart:async';
  
import 'package:flutter/material.dart';
  
void main() {
  runApp(RunMyApp());
}
  
class RunMyApp extends StatelessWidget {
  const RunMyApp({super.key});
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.green),
      home: Splash(),
    );
  }
}
  
class Splash extends StatefulWidget {
  const Splash({super.key});
  
  @override
  State<Splash> createState() => _SplashState();
}
  
class _SplashState extends State<Splash> {
  @override
  void initState() {
    super.initState();
  
    Timer(
      Duration(seconds: 5),
      () => Navigator.pushReplacement(
        context,
        MaterialPageRoute(
          builder: (context) => HomePage(),
        ),
      ),
    );
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [CircularProgressIndicator(), Text('Welcome..')],
        ),
      ),
    );
  }
}
  
class HomePage extends StatelessWidget {
  const HomePage({super.key});
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home page'),
      ),
      body: Center(
        child: Text('GeeksForGeeks'),
      ),
    );
  }
}


Output:

You can notice that our Splash screen holds for 5 seconds as we set the 4-second time.



Last Updated : 24 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads