GitLocker: The Coding Marketplace

Description:

splash view

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()),
),
),
);
}
copied to clipboard
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()),
)
copied to clipboard
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,
),
)
copied to clipboard
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,
)
copied to clipboard
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]),
),
)
copied to clipboard
Background Image #
Background image can be set by backgroundImageDecoration property.

SplashView(
backgroundImageDecoration: BackgroundImageDecoration(
image: AssetImage('images/larry-page.jpg'),
),
)
copied to clipboard
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,
)
copied to clipboard
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,
)
copied to clipboard
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.