How to create a launch screen in Flutter app

Question

I am making an application in Flutter and I want to create a launch screen that is shown when the application is started for the first time. When the application is opened up for the first time a white screen is shown for a brief time, meaning that there are some processes in Android that need to be done before the app is launched. I want to replace that white screen with my own screen.

I do not intend to make a splash screen that will be shown once the app is launched but a launching screen that is shown while the application is loading/launching.

What is the easiest way to do this?

I also wanted to say that I've looked for the answers on the internet most of them offer adding a splash screen that is shown once the app is initialized. I am not looking for that. Thank you for your help!

Answer 1

You can use splash screen Widget in your app.

1.Get splash screen in your pubspec.yaml file. Check it out on Flutter packages link .

2.import splash screen in your project
import 'package:splashscreen/splashscreen.dart';

3.Create Statefull or stateless widget.

Return the below code:

return MaterialApp(
  home: SplashScreen(
    navigateAfterSeconds: MainScreen(),
    seconds: 3,
    backgroundColor: Colors.white12,
    image: Image.asset('Location of the gif or image to be displayed'),
    loaderColor: Colors.redAccent,
    photoSize: 159,
  ),
);

Check more tutorials on Rapto Learning .

Answer 2

Well, first you need to use a RootPage. This will show the loadingPage and then the HomePage (or whatever page you need). You just need to make the RootPage stateful (in order to change the page setting a new state).

There is no unique way to do. Therefore, I won't write the code here. I will explain the structure.

The loadingPage shows the content you want (you can use the Animated widgets to make it animated)

The Rootpage will show the LoadingPage and you can use Timer dart class to change the state of the rootpage in order to show the Homepage. Another method it would be to get a callback from the loadingpage when the animation is finished.

This is one of the easiest way I'm thinking without using other management systems, like the bloc libraries

Answer 3

In .android > app > src\\main > res there is a drawable and one or more mipmap folders. These mipmap folders contain images for different device sizes. Place your image asset in there. Now take a look at drawable > launch_background.xml . You can see in the image below how the file should look like. Uncomment lines 7-11 and/or change line 4 with another color and now you've customized the default launch screen of your Flutter app. Now if you start your app, with the example above, your launch screen should look like this: