Become a sponsor

Splash View

A splash view is a short introduction to an application shown when it is launched. In the splash view, basic introductory information, such as the company logo, content, etc. is displayed at the moment the application load.

Here is an example of how to implement SplashView in a Flutter application. Recommended: Use splash view inside MaterialApp().

void main() {
  runApp(
    MaterialApp(
      home: SplashView(
        logo: FlutterLogo(),
        loading: CircularProgressIndicator(),
        done: Done(HomePage()),
      ),
    ),
  );
}

Properties of SplashView

Property	Type	Description
logo:	Widget	Logo of the splash view.
title:	Widget	Title of the splash view.
subtitle:	Widget	Subtitle of the splash view.
loadingIndicator:	Widget	Loading indicator of the splash view.
done:	Done	Redirect to the next page.
duration:	Duration	Duration of redirecting to the next page.
backgroundColor:	Color	Background color of the splash view.
backgroundImageDecoration:	BackgroundImageDecoration	Background image of the splash view.
gradient:	Gradient	Gradient background of the splash view.
bottomLoading:	bool	Show loading indicator on the bottom of the splash view.
showStatusBar:	bool	Show and hide app status/navigation bar on the splash view.

Redirecting to the next page

SplashView has a property called done, here you can use Done() widget to redirect to the next page.

SplashView(
  done: Done(HomePage()),
)

Redirecting to the next page with an animation effect

Done has two more properties which are used to redirect to the next page with an animation effect. animationDuration is used to set the duration of the animation and curve is used to set the animation curve.

SplashView(
  done: Done(
    HomePage(),
    animationDuration: Duration(seconds: 2),
    curve: Curves.easeInOut,
  ),
)

Properties of Done

Property	Type	Description
animationDuration:	Duration	The duration the transition going forwards.
curve:	Curve	A collection of common animation easing curves.

Background

There are three ways to set the background of the splash view.

Background Color

Background color can be set by backgroundColor property.

SplashView(
  backgroundColor: Colors.red,
)

Gradient Color

Gradient color can be set by gradient property.

SplashView(
  gradient: LinearGradient(
    begin: Alignment.topCenter,
    end: Alignment.bottomCenter,
    colors: <Color>[Colors.green, Colors.blue]),
  ),
)

Background Image

Background image can be set by backgroundImageDecoration property.

SplashView(
  backgroundImageDecoration: BackgroundImageDecoration(
    image: AssetImage('images/larry-page.jpg'),
  ),
)

Properties of BackgroundImageDecoration

Property	Type	Description
image:	ImageProvider	Typically this will be an AssetImage or a NetworkImage
fit:	BoxFit	Fill the target box by distorting the source's aspect ratio.
colorFilter:	ColorFilter	A color filter is a function that takes two colors, and outputs one color.
opacity:	double	Used to set the filterQuality of the image.

Change the position of loading indicator

By default bottomLoading is false. You can change the position of loading indicator to the bottom by setting bottomLoading to true.

SplashView(
  bottomLoading: true,
)

Hide/Show status bar and navigation bar

By default showStatusBar is false. You can show status bar and navigation bar by setting showStatusBar to true.

SplashView(
  showStatusBar: true,
)

Report bugs or issues

You are welcome to open a ticket on github if any problems arise. New ideas are always welcome.

Copyright and License

Copyright © 2022 Rahul Chouhan. Licensed under the MIT LICENSE.