Flutter Tips: Build a Splash Screen with Flutter BLoC

What is a Splash Screen?

When you open your app on your phone, some apps showing you a logo or a loading bar. That is a splash screen. We can add some actions in splash screen like connection checking, fetch the data, etc.

In this article, I will show you how to build a splash screen using Flutter BLoC state management. I have written some articles about Flutter BLoC. You can read it on these links:

Mengenal Konsep Reactive Programming dan Kaitannya dengan Flutter BLoC

Flutter Tips: Fetching Data From the API using BLoC

The core concepts of BLoC are Events and States. Simply put, we can call input in BLoC as Events and output as States.

1. Project Setup

Create a new project:

flutter create ftips_bloc_splash

When I’m writing this article, the flutter version I used in this project:

Flutter 1.12.13+hotfix.7 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 9f5ff2306b (4 months ago) • 2020–01–26 22:38:26 -0800
Engine • revision a67792536c
Tools • Dart 2.7.0

Add some dependencies in pubspec.yaml:

flutter_bloc is a flutter package that helps implement the BLoC pattern.

and create some folders to store our files, so the structure of the project will be as follows:

Project Structure

2. Setup BLoC

I will write three separate files:

Event

Create a file called splash_event.dart under lib/blocs/splash_bloc. If you have installed a bloc package in vscode, you can simply generate the three bloc files.

State

Create a file called splash_state.dart under lib/blocs/splash_bloc .

I write three classes:

• SplashInitial for initial the state,
• SplashLoading to inform the view that some actions are being executed.
• SplashLoaded to inform the view that some actions have already been executed.

BLoC

Create a file called splash_bloc.dart under lib/blocs/splash_bloc .

3. Pages

Last but not least, create some files called splash_page.dart and dashboard_page.dart under lib/pages.

Splash Page

I will use BlocListener to handle navigation.

Dashboard Page

After 3 seconds loading, the page will directed from SplashPage to DashboardPage .

flutter run

That’s it, if you have any troubles here the full project.

adamnain/ftips_bloc_splash

Thanks for reading,

stay safe, stay healthy.

Another Flutter Tips Series:

Flutter Tips: SSL Pinning in Flutter

Flutter Tips: Speed Up Your Flutter Development using GetFlutter Package