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.