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!

Solution 1

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:

Solution 2

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.

Comments

[Shahryar Rafique]

this is git hub link where loading spinner show with the splash screen [github.com/shahryar-cmyk/thrive] if this your are searching

[Aleksa Vujisic]

Nope, that way I am adding a splash screen, not a loading screen.

[Aleksa Vujisic]

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]

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 : stackoverflow.com/questions/12140464/…

[Admin]

You can call a class splash screen muliple time.Hope this is useful for you

[Aleksa Vujisic]

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: stackoverflow.com/questions/12140464/…