Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chouhan-rahul/splash_view
A splash view is the first screen the user sees when the application is launched.
https://github.com/chouhan-rahul/splash_view
dart flutter
Last synced: about 2 months ago
JSON representation
A splash view is the first screen the user sees when the application is launched.
- Host: GitHub
- URL: https://github.com/chouhan-rahul/splash_view
- Owner: chouhan-rahul
- License: mit
- Created: 2022-05-07T12:06:30.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-09-30T05:13:27.000Z (almost 2 years ago)
- Last Synced: 2024-07-09T00:11:01.129Z (2 months ago)
- Topics: dart, flutter
- Language: Dart
- Homepage: https://pub.dev/packages/splash_view
- Size: 11.7 KB
- Stars: 10
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/chouhan-rahul)
_[](https://www.buymeacoffee.com/rahulchouhan)_
_[](https://ko-fi.com/rahulchouhan)_
_[](https://paypal.me/rahulvchouhan)_
### Become a sponsor
[](https://github.com/sponsors/chouhan-rahul)
# 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().
```dart
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](#redirecting-to-the-next-page) | 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) | 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.
```dart
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.
```dart
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.
```dart
SplashView(
backgroundColor: Colors.red,
)
```
## Gradient Color
Gradient color can be set by `gradient` property.
```dart
SplashView(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Colors.green, Colors.blue]),
),
)
```
## Background Image
Background image can be set by `backgroundImageDecoration` property.
```dart
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.
```dart
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.
```dart
SplashView(
showStatusBar: true,
)
```
# Report bugs or issues
You are welcome to open a _[ticket](https://github.com/chouhan-rahul/splash_view/issues)_ on github if any problems arise. New ideas are always welcome.
# Copyright and License
> Copyright © 2022 **[Rahul Chouhan](https://rahulchouhan.me)**. Licensed under the _[MIT LICENSE](https://github.com/chouhan-rahul/splash_view/blob/main/LICENSE)_.