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!

this is git hub link where loading spinner show with the splash screen [https://github.com/shahryar-cmyk/thrive] if this your are searching — Shahryar Rafique, Sep 06 '20 at 14:32
Nope, that way I am adding a splash screen, not a loading screen. — Aleksa Vujisic, Sep 06 '20 at 14:44

score 1 · Answer 1 · edited Sep 06 '20 at 16:52

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.

edited Sep 06 '20 at 16:52

fernandospr

2,541
1
18
37

answered Sep 06 '20 at 14:55

Rohan Solanke

11
1

I've tried it, but this is adding a splash screen after the app is initialized, there is still a white screen while the app is initializing. I wanted to replace that white screen with my own screen. This didn't solve my problem. Thank you though! – Aleksa Vujisic Sep 06 '20 at 15:23
You can call a class splash screen muliple time.Hope this is useful for you – Rohan Solanke Sep 06 '20 at 15:27
Unfortunately, I do not want to create a splash screen. I want to create a launch screen, please read my question above. You can check out this link to see the difference between launch screen and a splash screen: https://stackoverflow.com/questions/12140464/difference-between-launch-image-and-splash-screen – Aleksa Vujisic Sep 06 '20 at 17:47

score 0 · Answer 2 · answered Sep 06 '20 at 14:45

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

I am sorry but there is still a white screen that is showing while the app is being initialized. After the app initialization the loadingPage is shown, which is not what I wanted. Check out this so you know what I am looking for : https://stackoverflow.com/questions/12140464/difference-between-launch-image-and-splash-screen — Aleksa Vujisic, Sep 06 '20 at 15:26

How to create a launch screen in Flutter app

2 Answers2