Question 216206 in Flutter Question posted in
The official Flutter documentation can be found here.

How to create splash screen in flutter?

How to I create splash screen in flutter with timer? I want to user wait 3 second on splash screen and after they redirect to home page.

I want to create splash screen in flutter with 3 second timer. Give me example and code for easy to explain for me. Add icon and text just for simple ui.

Tags:

3

Answers


  1. 0

    sure i create just demo for example .

    try this code as you told i add 3 second time limit and icon and text for simple ui.

    import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

import 'home_page_demo.dart';

class SplashScreenDemo extends StatefulWidget {
const SplashScreenDemo({super.key});

@override
State<SplashScreenDemo> createState() => _SplashScreenDemoState();
}

class _SplashScreenDemoState extends State<SplashScreenDemo> {
@override
void initState() {
super.initState();
Timer(const Duration(seconds: 3), () { // if you want increase time 
  Navigator.pushReplacement(context,
      MaterialPageRoute(builder: (context) => const HomePageDemo())); // replace with your home screen
});
}

@override
Widget build(BuildContext context) {
 return AnnotatedRegion(
  value: const SystemUiOverlayStyle(statusBarColor: Colors.transparent),
  child: Scaffold(
    backgroundColor: Colors.deepPurpleAccent,
    body: SizedBox(
      height: MediaQuery.of(context).size.height,
      width: MediaQuery.of(context).size.width,
      child: const Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Spacer(),
          Icon(
            Icons.fastfood,
            color: Colors.white,
            size: 80,
          ),
          Spacer(),
          SafeArea(
              bottom: true,
              child: Text(
                "Your App Name",
                style: TextStyle(fontSize: 22, color: Colors.white),
              ))
        ],
      ),
    ),
  ),
);
}
}

    enter image description here

    enter image description here

    Login or Signup to reply.
  2. 0

    Just call this method in initState:

    void pushToHome()async{
    Future.delayed(const Duration(seconds: 3),(){
      Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) => const HomePage,));
    });
  }
    Login or Signup to reply.
  3. 0 
    import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';
import '../main_page/screen_main_page.dart';

class ScreenSplash extends StatefulWidget {
  const ScreenSplash({super.key});

  @override
  State<ScreenSplash> createState() => _ScreenSplashState();
}

class _ScreenSplashState extends State<ScreenSplash> {
  @override
  void initState() {
    goToHomeScreen();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.black,
      child: Lottie.network(
          'https://assets6.lottiefiles.com/private_files/lf30_F6EtR7.json'),
    );
  }

  Future<void> goToHomeScreen() async {
    await Future.delayed(
      const Duration(seconds: 5),



    );
    Navigator.pushReplacement(
      context,
      MaterialPageRoute(
        builder: (context) => ScreenMainPage(),
      ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search