Splash Screens in Flutter (2024)

Nikita Gandhi



Published in

The Startup


6 min read


Oct 27, 2020


Splash Screens in Flutter (3)

They say, first impression is the last! Yep, truly for any amazingly crafted application, it’s easier to start impressing your audience with a good start — the splash screen! In this article, I will walk you through steps on how add splash screens to your Flutter application.

Splash screens are used to provide engagements with your user till the app loads. This allows your app to set the app engine and load app processes to initialise. You may keep your splash screen simple with some solid colors and text added or you might add some images with customised animations. Having splash screens with your app logo and version number helps to add wait time till your engine / app process is set to launch.

Install Xcode if you haven’t already. All apps submitted to the Apple’s App Store must use an Xcode storyboard to provide the app’s launch screen.
By default a blank image launch screen is added to your application which can be customised by you by adding your own assets. Find the default design at LaunchScreen.storyboard in your Xcode project.

To customise your splash screen, go to your project’s root directory. At the terminal type the following command : open ios/Runner.xcworkspace

Then select Runner/Assets.xcassets from the Project Navigator and drop in the desired images to the LaunchImage image set.

In Android there are two separate screens that you can control, Launch Screen when the app initialises and Splash Screen when Flutter experience initialises.
If you’re adding Flutter code to your existing Android project, consider to pre heat the Flutter engine to avoid load time and use the same Flutter engine throughout the app lifecycle to ensure minimum wait time to load the Flutter engine.

The two exceptions to using a cached FlutterEngine are:

  • When FlutterFragment is in the first Activity displayed by the app, because pre-warming a FlutterEngine would have no impact in this situation.
  • When you are unsure when/if you will need to display a Flutter experience.

The following illustrates how to pre-warm and cache a FlutterEngine:

// Create and pre-warm a FlutterEngine.
FlutterEngine flutterEngine = new FlutterEngine(context);
// Cache the pre-warmed FlutterEngine in the FlutterEngineCache.
FlutterEngineCache.getInstance().put("my_engine", flutterEngine);

Every app requires time to initialise while the OS sets the app to process. The concept of launch screen in Android helps to add a Drawable which can be added while the app is initialising.

For folks who don’t know what Drawable is : In Android, the concept of Drawable is for a graphic that can be drawn to the screen and which you can retrieve with APIs such as getDrawable(int) or apply to another XML resource with attributes such as android:drawable and android:icon. There are several different types of drawables. Read more here.

In a default Flutter project, the definition of launch theme and launch background is added by default. You can customise this based on your own needs. Go to styles.xml in your project where you can define the windowBackgroundwhich is set to the Drawable and is displayed as the launch screen.

<style name="LaunchTheme" parent="@android:style/Theme.Blue.NoTitleBar">
<item name="android:windowBackground">@drawable/launch_background</item>

In the code above, in the launch theme, a plain blue background is added.

<style name="NormalTheme" parent="@android:style/Theme.Blue.NoTitleBar">
<item name="android:windowBackground">@drawable/normal_background</item>

Normal theme defines the appearance of the screen as the Flutter engine starts. It appears for a very brief time and hence it’s recommended to add background color similar to the app theme to ensure the transition looks smooth.

  1. In AndroidManifest.xml, set the theme of FlutterActivity to the launch theme.
  2. Then, add a <meta-data> element to the desired FlutterActivity to instruct Flutter to switch from the launch theme to the normal theme at the appropriate time.
// ...
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>

The Android app now displays the desired launch screen while the app initializes.

Every time a Flutter application is started, it takes some time to load the Dart isolate (which runs the code). This means user will see a blank screen till Flutter renders the first frame of the application.

To specify a splash screen for Flutter initialization, subclass FlutterActivity and override provideSplashScreen().
Flutter supports an improved user experience by displaying an Android View as a splash screen while Flutter initializes.

Flutter supports two options for a splash screen :
1. The first option is to display a Drawableof your choice, which fades out after the initialization is complete.

2. The other option is to provide a custom SplashScreen that is capable of displaying any Android View content that you want.

A Drawable splash screen can be configured for a FlutterActivity, FlutterFragment, or FlutterView.

For those who don’t know what is FlutterActivity : FlutterActivity is the simplest and most direct way to integrate Flutter within an Android app.

Alternatives to FlutterActivity

If Flutter is needed in a location that cannot use an Activity, consider using a FlutterFragment. Using a FlutterFragment requires forwarding some calls from an Activity to the FlutterFragment.

If Flutter is needed in a location that can only use a View, consider using a FlutterView. Using a FlutterView requires forwarding some calls from an Activity, as well as forwarding lifecycle calls from an Activity or a Fragment.

To display a Drawable as a Flutter splash screen in a FlutterActivity, add the following metadata to the associated FlutterActivity in AndroidManifest.xml :


To display a splash screen with the same visual as a launch screen, reference the same @drawable/launch_background in the io.flutter.embedding.android.SplashScreenDrawable meta-data.

In a FlutterFragment

To display a Drawable as a Flutter splash screen in a FlutterFragment, make a subclass of FlutterFragment and override provideSplashScreen().

public class MyFlutterFragment extends FlutterFragment {
protected SplashScreen provideSplashScreen() {
// Load the splash Drawable.
Drawable splash = getResources().getDrawable(R.drawable.my_splash);

// Construct a DrawableSplashScreen with the loaded splash
// Drawable and return it.
return new DrawableSplashScreen(splash);

Implement a custom splash View

First, define the custom View that should be displayed as the splash screen. This View could display anything, from a simple solid color to an animation.

Implement the SplashScreen interface

With a custom View defined, implement the SplashScreen interface.

This guide shows two approaches to a SplashScreen implementation. First, the following is an example of a SplashScreen that has no visual state and no transition animation.

public class SimpleScreen implements SplashScreen {
public View createSplashView(
@NonNull Context context,
@Nullable Bundle savedInstanceState
) {
// Return a new MySplashView without saving a reference, because it
// has no state that needs to be tracked or controlled.
return new MySplashView(context);
public void transitionToFlutter(@NonNull Runnable onTransitionComplete) {
// Immediately invoke onTransitionComplete because this SplashScreen
// doesn't display a transition animation.
// Every SplashScreen *MUST* invoke onTransitionComplete at some point
// for the splash system to work correctly.

We created an Android view which does not save instances of the application as no state of the application needs to be tracked or stored. The app does not display the transition animation where the app moves from splash screen to first Flutter frame. Once the app transition is complete, the app is set to run the processes.

The second example is a bit more sophisticated. In this example, the custom SplashScreen keeps a reference to its custom View and instructs the custom View to transition away, passing the onTransitionComplete callback to the custom View to invoke.

public class SplashScreenWithTransition implements SplashScreen {
private MySplashView mySplashView;
public View createSplashView(
@NonNull Context context,
@Nullable Bundle savedInstanceState
) {
// A reference to the MySplashView is retained so that it can be told
// to transition away at the appropriate time.
mySplashView = new MySplashView(context);
return mySplashView;
public void transitionToFlutter(@NonNull Runnable onTransitionComplete) {
// Instruct MySplashView to animate away in whatever manner it wants.
// The onTransitionComplete Runnable is passed to the MySplashView
// to be invoked when the transition animation is complete.

In this example, reference to MySplashView is stored and once the transition of Drawable is complete, the app transitions to Flutter screen and the function mySplashView.animateAway() is evoked as soon as the transition is complete.

You can do a lot of experiments with custom splash screens. But use the power you have with responsibility: a splash screen that is too complex may frustrate your users by adding to your app’s load time.

There are instant plugins available with detailed instructions in case you wish to save time and use existing libraries. Explore more at Pub.Dev!

Thanks so much for reading my article till the end. It took me a long time since I last posted an article on Flutter with Firebase. I promise the next one is going to be quicker as I share tips on creating a responsive app in few easy steps. Till then happy coding with Flutter :-)

Splash Screens in Flutter (2024)


Why is my Flutter splash screen not working? ›

If the splash screen was not updated correctly on iOS or if you experience a white screen before the splash screen, run flutter clean and recompile your app. If that does not solve the problem, delete your app, power down the device, power up the device, install and launch the app as per this StackOverflow thread.

What is the duration for splash screen in Flutter? ›

But considering you have a countdown, you can use the animation framework Flutter provides. The idea behind it would be to use an AnimationController with a duration of 3 seconds. Start the animation as soon as the splashScreen is instantiated. And add a listener to redirect to /login on animation end.

How do I enable accessibility on Flutter? ›

Inspecting accessibility support

Enable the Accessibility Scanner from Android Settings > Accessibility > Accessibility Scanner > On. Navigate to the Accessibility Scanner 'checkbox' icon button to initiate a scan.

How do I make my screen zoomable in Flutter? ›

In Flutter, you can use the InteractiveViewer widget to create a zoomable interface. This widget allows users to zoom and pan the content within it. It is a low-level widget that provides basic zooming and panning capabilities.

What is the best way to navigate between screens in Flutter? ›

Flutter – Navigate From One Screen to Another
  1. How to use:
  2. Navigator class has a push method to Navigate to the next screen.
  3. Step 1: Create a New Project in Android Studio.
  4. Step 2: Import the material package.
  5. Step 3: Create the first screen or Home screen RunMyApp.
  6. Step 4: Create a Second Screen or NextPage.
  7. Output:
Nov 15, 2022

What is the difference between splash screen and launch screen? ›

Splash Screen is the very first screen the user sees when they open up an app on a mobile device. It's the very first chance of creating a positive impact on the users. It appears while the app is loading when the user has just opened up the app. Many times the Splash screen is called a launch screen.

How do you handle crash apps in Flutter? ›

You should run your app in release mode, for example with the command flutter run --release. In Crashlytycs console, by default shown only fatal crashes. The crashes above are non-fatal crashes. So, you should clear the filter to see all crash types.

How many hours to master Flutter? ›

According to frequently asked questions, learning Dart-Flutter's programming language and Flutter can take roughly three months if you spend around 20 hours each week learning.

What is the minimum time to learn Flutter? ›

You'll gain the confidence to build customized UI's for your own projects using Flutter. You'll work with its cool features and understand how to compose widgets, add animations, and make your apps interactive in 7 days by building them throughout the course.

How do I make my Flutter app faster? ›

Best Practices to Improve Performance of Flutter App
  1. Table of Contents. Do Not Rebuild Widgets. ...
  2. Do Not Rebuild Widgets. ...
  3. Const Keyword Can Help Split Widgets. ...
  4. Async/Await. ...
  5. Keep the Opacity Widget to a Minimum. ...
  6. 16ms or Less. ...
  7. Only Render Visible Widgets. ...
  8. Avoid Using ListView For Longer Lists.
Aug 16, 2022

Do Flutter apps look native? ›

This means that your Flutter app will look and behave naturally on each platform, imitating their native components. Application components look just like native ones (e.g. a button on an iOS device looks just like a native iOS button, and the same on Android).

How do you customize splash screen in Flutter? ›

The customization of the default splash screen will be done in the file called launch_background. xml . It's located in the res folder, more specifically in the drawable folder. To apply the branding image, we have to uncomment some of the XML code in this file.

How do you make a loading screen in Flutter? ›

First, we create a stateless widget in the main. dart file named homepage screen. Then, we add a simple code for the second screen and add some styling to it. After our widget for the second screen is ready, we just need to write code to connect it.

How do I make my Flutter app adaptive? ›

Creating an adaptive app with Flutter
  1. Setting up.
  2. Building the Product widget.
  3. Building the navigation drawer.
  4. Rendering the mobile screen.
  5. Rendering the desktop screen.
  6. Implementing the LayoutBuilder class.
Sep 16, 2022

What is the Flutter app for blind people? ›

The blind user can use this app to detect and save human faces, detect objects in front of him/her, get voice output of text within objects, summarized result of text and URLs, translate sentences to different languages, video call, and also send his/her GPS location for tracing purposes.

How do I control the visibility of a widget in Flutter? ›

There are a couple of ways to manage the visibility of widgets in flutter.
  1. Method 1: Using Visibility class.
  2. Method 2: Using Opacity Class.
  3. Method 3: Using Offstage Class.
Mar 27, 2023

How do you make a dynamic screen in Flutter? ›

  1. Depend on it. Add this to your package's pubspec.yaml file: dependencies: dynamic_widget: ^3.0.3.
  2. Install it. You can install packages from the command line: with Flutter: $ flutter packages get. ...
  3. Import it. Now in your Dart code, you can use: import 'package:dynamic_widget/dynamic_widget.dart';

How do I fetch data from one screen to another in Flutter? ›

Navigate and pass data to the detail screen.
  1. Define a todo class. First, you need a simple way to represent todos. ...
  2. Create a list of todos. Second, display a list of todos. ...
  3. Create a Todo screen to display the list. ...
  4. Create a detail screen to display information about a todo. ...
  5. Navigate and pass data to the detail screen.

How to pass a text in one screen to another screen in Flutter? ›

How to pass data between screens in Flutter
  1. Using constructors. This is a very well known technique that is used in other languages as well. ...
  2. Using arguments in navigator. The pushNamed method of Nagigator can be used for passing arguments. ...
  3. Using shared preferences. The last method is by using SharedPreferences .

What is the difference between screen and page in Flutter? ›

What is a page in Flutter? A page is a single screen that is visible at a point in time. A single page or screen can be made up of numerous widgets organized together to create the desired UI. Pages/screens in Flutter are known as Routes, and we use the Navigator widget to navigate between them.

Are splash screens outdated? ›

Bottom Line. Splash pages are outdated on today's web. Most people find them annoying.

Why do you need a splash screen? ›

Purpose. Splash screens are typically used by particularly large applications to notify the user that the program is in the process of loading. They provide feedback that a lengthy process is underway. Occasionally, a progress bar within the splash screen indicates the loading progress.

What is the difference between landing page and splash screen? ›

The Difference Between Splash Pages and Landing Pages

While splash pages are windows that convey limited (but necessary) information before a visitor enters a website, landing pages are dedicated web pages that stand entirely separate from your site.

How do you intercept traffic on Flutter app? ›

  1. Get the latest version of the script from NVISOSecurity/disable-flutter-tls-verification, or use Frida CodeShare.
  2. If it fails, share your app so the memory pattern can be improved.
  3. Flutter still doesn't listen to Proxy settings, so use ProxyDroid on Android or a VPN on iOS.
Aug 18, 2022

How do I force an app to not crash? ›

How to fix apps that keep crashing on Android
  1. Force stop the app. The easiest way to fix an app that keeps crashing on your Android smartphone is to simply force stop it and open it again. ...
  2. Restart the device. ...
  3. Reinstall the app. ...
  4. Check app permissions. ...
  5. Keep your apps updated. ...
  6. Clear cache. ...
  7. Free up storage space. ...
  8. Factory reset.
Dec 13, 2022

Is Flutter lucrative? ›

The salary can be even higher for experienced Flutter app developers with a strong portfolio of successful projects. A Flutter app developer with 5+ years of experience can expect to earn anywhere from $100,000 to $140,000 per year.

How long does it take to become an expert in Flutter? ›

With a good online course and no prior experience, you can learn Flutter's basics in 7 days. But that is just the basics. For more thorough knowledge, you will need at least a month for those with some programming experience. Some people with prior programming knowledge and experience can learn Flutter in a few weeks.

What is the salary of Flutter developer in India? ›

How much does a Flutter Developer make? The national average salary for a Flutter Developer is ₹4,90,000 in India. Filter by location to see Flutter Developer salaries in your area. Salary estimates are based on 425 salaries submitted anonymously to Glassdoor by Flutter Developer employees.

Is Flutter worth learning in 2023? ›

In conclusion, learning Flutter in 2023 can be a worthwhile pursuit for developers seeking to expand their skill set and leverage the benefits of cross-platform application development.

Is Flutter enough to get a job? ›

Going indie and making your own Flutter apps as a full-time job is probably the hardest option of all mentioned here, however, at least in my opinion. There's no guarantee you will get to earn as much as you would by working full-time for a company as a developer, and it could take a while to get there.

Is Flutter too complicated? ›

Flutter is easy to learn and easy to use

In addition, for those with less development experience, Flutter's expansive widget library makes it easy to build applications without writing extensive code; there are several platforms that use Flutter to build apps without writing any code!

Can you make big apps with Flutter? ›

It helps you create high-quality, fast, and beautiful apps for iOS, Android, and the web – all from a single codebase. Flutter has quickly become a popular choice among developers. Thanks to its ease of use and performance, you can build beautiful mobile applications using Flutter.

Which architecture is best for Flutter? ›

Popular frameworks like MVC and MVVM can be used. However, BLoC is generally considered the ideal Flutter architecture due to Flutter's uniqueness and its focus on widgets.

Why native is better than Flutter? ›

Flutter has a minimum required SDK version of 16 and can be compiled into Android 4.1, making it compatible with many devices. React Native apps often require a lower minimum SDK version than others. As a result, react Native apps are usually more lightweight and need less code than others.

Will Google cancel Flutter? ›

So Flutter is used by Google Pay and Google Stadia. In the Flutter 2.8 announcement it was even brought up that they ran performance tests in the Google Pay app. So Google is now invested in Flutter's success. They won't cancel the project because it would be like shooting themselves in the foot.

What is the limitation of Flutter? ›

Limited number of third-party libraries: Flutter being relatively cannot be compared to native programming languages. Developers still need to spend more time building as many libraries as possible.

How do you animate a splash screen? ›

Go to app > java > first package name > right-click > New > Activity > Empty Activity and create another activity and named it as SplashScreen. Edit the activity_splash_screen. xml file and add image, text in the splash screen as per the requirement. Here we are adding an image to the splash screen.

What is the default splash color in Flutter? ›

The default splash color is the current theme's splash color, ThemeData. splashColor. The appearance of the splash can be configured with the theme's splash factory, ThemeData.

What is lazy loading in Flutter? ›

Lazy loading in Flutter is a technique used to load only the necessary items into a ListView as the user scrolls, rather than loading all items at once. This can improve the performance of your app, especially when loading large amounts of data.

How do I make a full stack app with Flutter? ›

Create a Full Stack Amazon Clone with Flutter
  1. Introduction & Demo.
  2. Setting Up The Flutter Project.
  3. Setting Up Themes.
  4. Folder Structure.
  5. Setting Up Routes.
  6. Auth Screen UI.
  7. What is Node. js.
  8. Node. js Installation.
Jun 9, 2022

How do you make lazy loading in Flutter? ›

How to Perform Lazy Loading in Flutter Data Table
  1. Dependency package. Include the Syncfusion Flutter DataGrid and Firebase package dependencies in the pubspec. ...
  2. Create a model data class. ...
  3. Create a DataGridSource class and initialize the Firebase. ...
  4. Enable the lazy-loading feature in DataGrid. ...
  5. Resource. ...
  6. Conclusion. ...
  7. Related blogs.
Sep 27, 2022

Why can't i see vertical divider in Flutter? ›

When you add Vertical Divider inside Row, Wrap widget, it may not display, or display with irregular height. The main reason of this reason is the unrestricted height of the parent widget of Row/Wrap widget.

What is the white screen before splash flutter? ›

By default, both iOS and Android show a native loading screen before the splash screen of a Flutter app is displayed. This default screen is completely white, which means your app will have a white "flash" before showing your custom splash screen in your app's chosen colours and logo, making for a bad user experience.

How do I change the splash screen in flutter IOS? ›

Customize the launch screen

To do so, open the Flutter app's Xcode project by typing open ios/Runner. xcworkspace from the root of your app directory. Then select Runner/Assets. xcassets from the Project Navigator and drop in the desired images to the LaunchImage image set.

How do I change the splash screen in flutter Android? ›

Launch Screen using Storyboard
  1. First of all, we need to open our project in Xcode. Being in the main directory of the project, we can do that using open ios/Runner. ...
  2. Then, we need to add AssetImage, which is going to be our icon on the splash screen. ...
  3. Then, we need to set a background color in LaunchScreen. ...
  4. That is all.
Apr 25, 2022

Why there is nothing to show in flutter outline? ›

Your answer

There are a few possible solutions for this issue: Check if your Flutter and Dart plugins are installed and enabled in Android Studio. Go to File > Settings > Plugins and search for Flutter and Dart plugins. Make sure they are installed and enabled.

What is the best way to navigate between screens in flutter? ›

Flutter – Navigate From One Screen to Another
  1. How to use:
  2. Navigator class has a push method to Navigate to the next screen.
  3. Step 1: Create a New Project in Android Studio.
  4. Step 2: Import the material package.
  5. Step 3: Create the first screen or Home screen RunMyApp.
  6. Step 4: Create a Second Screen or NextPage.
  7. Output:
Nov 15, 2022

What is the difference between launch and splash screen? ›

In Android, there are two separate screens that you can control: a launch screen shown while your Android app initializes, and a splash screen that displays while the Flutter experience initializes.

What is the difference between splash screen and loading screen? ›

To me, a splash screen is like a title screen. It could, in fact, contain a loading bar, or just a title sequence. Also, in my opinion, a loading screen would be just that, a screen showing the load progress, and should probably only contain info relevant to the loading process.

What is splash screen vs start screen? ›

A splash screen is a screen which appears when you open an app on your mobile device. Sometimes it's referred to as a launch screen or startup screen and shows up when your app is loading after you've just opened it. Splash screens appear on your screen for a fleeting moment — look away and your might miss them.

How to make a splash screen? ›

7 Best Practices for Creating an Effective Splash Screen
  1. Entertain users if your app takes longer to load. ...
  2. Keep the design simple. ...
  3. Show the current state of the system. ...
  4. Keep it visual. ...
  5. But not too visual. ...
  6. No advertising. ...
  7. Avoid multiple screens. ...
  8. Go flashy only for first-timers.
Dec 16, 2021


Top Articles
Latest Posts
Article information

Author: Twana Towne Ret

Last Updated:

Views: 5898

Rating: 4.3 / 5 (64 voted)

Reviews: 87% of readers found this page helpful

Author information

Name: Twana Towne Ret

Birthday: 1994-03-19

Address: Apt. 990 97439 Corwin Motorway, Port Eliseoburgh, NM 99144-2618

Phone: +5958753152963

Job: National Specialist

Hobby: Kayaking, Photography, Skydiving, Embroidery, Leather crafting, Orienteering, Cooking

Introduction: My name is Twana Towne Ret, I am a famous, talented, joyous, perfect, powerful, inquisitive, lovely person who loves writing and wants to share my knowledge and understanding with you.