Ask Your Question
4

How can I incorporate a splash screen for 2 seconds in Flutter that is native to the platform?

asked 2022-11-08 11:00:00 +0000

qstack gravatar image

edit retag flag offensive close merge delete

1 Answer

Sort by ยป oldest newest most voted
1

answered 2022-09-15 13:00:00 +0000

david gravatar image

Here is how you can incorporate a splash screen for 2 seconds in Flutter that is native to the platform:

  1. Create an assets folder and add an image of your choice for the splash screen, preferably a PNG image.

  2. In your pubspec.yaml file, add the following lines of code to load the image:

  assets:
   - assets/splash.png
  1. In your main.dart file, add the following lines of code to import the necessary packages:
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'dart:async';
  1. Create a StatefulWidget named SplashScreen and add the following lines of code:
class SplashScreen extends StatefulWidget {
  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    super.initState();
    Timer(Duration(seconds: 2), () => Navigator.pushReplacement(
        context, MaterialPageRoute(builder: (context) => HomePage())));
  }

  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
        statusBarBrightness: Brightness.light,
        statusBarIconBrightness: Brightness.light,
        systemNavigationBarColor: Colors.white,
        systemNavigationBarIconBrightness: Brightness.dark
    ));

    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
            image: DecorationImage(
                image: AssetImage("assets/splash.png"),
                fit: BoxFit.cover
            )
        ),
      ),
    );
  }
}
  1. In the initState() method, we define a delay of 2 seconds using the Timer object, and use the Navigator.pushReplacement() method to navigate to the HomePage() of our app.

  2. In the build() method, we use the SystemChrome class to customize the status bar and navigation bar of our app. We then use a Container widget to display the splash screen image.

  3. Finally, in your main() method, replace the default MyApp() widget with SplashScreen() as follows:

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    home: SplashScreen(),
  ));
}
  1. Run your app and you should see the splash screen for 2 seconds before your app navigates to the HomePage().
edit flag offensive delete link more

Your Answer

Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss

Add Answer


Question Tools

Stats

Asked: 2022-11-08 11:00:00 +0000

Seen: 8 times

Last updated: Sep 15 '22