Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tranhuycong/custom_splash
A Flutter package to custom splash screen like change logo icon, logo animation, and splash screen background color.
https://github.com/tranhuycong/custom_splash
Last synced: 3 months ago
JSON representation
A Flutter package to custom splash screen like change logo icon, logo animation, and splash screen background color.
- Host: GitHub
- URL: https://github.com/tranhuycong/custom_splash
- Owner: tranhuycong
- License: other
- Created: 2019-09-09T06:36:53.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-05-26T07:10:08.000Z (over 2 years ago)
- Last Synced: 2024-10-21T13:08:48.060Z (3 months ago)
- Language: Dart
- Size: 12.6 MB
- Stars: 80
- Watchers: 1
- Forks: 11
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Custom Splash Screen
A Flutter package to custom splash screen: change logo icon, logo animation, and splash screen background color. (Custom from animated splash screen)
### Using the package
[Get the library](https://github.com/tranhuycong/custom_splash)
### Things to do
- Get a logo for your app
- Prepare what to execute while the splash screen is shown (initializing your db, shared preferences, firebase...etc)
- Screen to be shown after splash screen and background process
- Duration of Splash Screen
Import the package
```dart
import 'package:custom_splash/custom_splash.dart';
```
## Show splash screen for some duration
```dart
type: CustomSplashType.StaticDuration
```
Inside your **main** function, use *home* as **SplashScreen(_)**, the parameters are as follows:
> **imagePath**: Path to your app-logo/image
> **backGroundColor**(not require - default: white): background's color (Colors.deepOrange or Color(0xfffc6042))
> **animationEffect**(not require - default: **'fade-in'**): change animation of logo. There are: **'fade-in'**, **'zoom-in'**, **'zoom-out'**, **'top-down'**.
> **logoSize**(not require - default: 250): custom size of logo
> **home**: Screen to be shown after splash
> **duration**: duration of splash screen in milliseconds
> **type**
```dart
runApp(MaterialApp(
home: CustomSplash(
imagePath: 'assets/flutter_icon.png',
backGroundColor: Colors.deepOrange,
animationEffect: 'zoom-in',
logoSize: 200,
home: MyApp(),
customFunction: duringSplash,
duration: 2500,
type: CustomSplashType.StaticDuration,
outputAndHome: op,
),
));
```
## Execute a function in background and based on the value from that function navigate to different screen
```dart
type: CustomSplashType.BackgroundProcess
```
> Create an object of **Function** that gets executed while splash screen is shown
```dart
Function duringSplash = () {
//Write your code here
...
return value;
};
```
> Create routes according to your function return value
```dart
//setup the return value correctly for proper navigation
Map returnValueAndHomeScreen = {1: Home(), 2: HomeSt()};
```
Inside your **main** function, use *home* as **SplashScreen(_)**, the parameters are as follows:
> imagePath: Path to your app-logo/image
> home: Screen to be shown after splash
> customFunction: the function you have written above
> duration: duration of splash screen in milliseconds
> type
> output value of customFunction and home screen to navigate(Map function)
```dart
runApp(MaterialApp(
home: CustomSplash(
imagePath: 'assets/flutter_icon.png',
backGroundColor: Colors.deepOrange,
animationEffect: 'zoom-in',
logoSize: 200,
home: MyApp(),
customFunction: duringSplash,
duration: 2500,
type: CustomSplashType.BackgroundProcess,
outputAndHome: op,
),
));
```