|
| 1 | +# flutter_splash_screen |
| 2 | + |
| 3 | +[ ](https://pub.dartlang.org/packages/flutter_splash_screen) |
| 4 | +[ ](https://github.com/crazycodeboy/flutter_splash_screen/pulls) |
| 5 | +[ ](https://github.com/crazycodeboy/GitHubPopular/releases) |
| 6 | +[](https://raw.githubusercontent.com/crazycodeboy/flutter-check-box/master/LICENSE) |
| 7 | +[ ](https://github.com/crazycodeboy/react-native-splash-screen) |
| 8 | + |
| 9 | +A splash screen API for flutter which can programatically hide and show the splash screen. Works on |
| 10 | +Android and iOS. |
| 11 | + |
| 12 | +## Content |
| 13 | + |
| 14 | +- [Changes](#changes) |
| 15 | +- [Installation](#installation) |
| 16 | +- [Examples](#examples) |
| 17 | +- [Getting started](#getting-started) |
| 18 | +- [API](#api) |
| 19 | +- [Testing](#testing) |
| 20 | +- [Troubleshooting](#troubleshooting) |
| 21 | +- [Contribution](#contribution) |
| 22 | + |
| 23 | +## Changes |
| 24 | + |
| 25 | +## Examples |
| 26 | + |
| 27 | +* [Examples](https://github.com/crazycodeboy/flutter_splash_screen/tree/master/example) |
| 28 | + |
| 29 | + |
| 30 | + |
| 31 | + |
| 32 | +## 1. Installation |
| 33 | + |
| 34 | +### Depend on it |
| 35 | + |
| 36 | +Run this command: |
| 37 | + |
| 38 | +```bash |
| 39 | +flutter pub add flutter_splash_screen |
| 40 | +``` |
| 41 | + |
| 42 | +## 2. Plugin Configuration |
| 43 | + |
| 44 | +### Android |
| 45 | + |
| 46 | +#### Update the `MainActivity.kt` |
| 47 | + |
| 48 | +Update the `MainActivity.kt` to use `flutter_splash_screen` via the following changes: |
| 49 | + |
| 50 | +```kotlin |
| 51 | +package org.devio.flutter.splashscreen.example |
| 52 | + |
| 53 | +import android.os.Bundle |
| 54 | +import io.flutter.embedding.android.FlutterActivity |
| 55 | + |
| 56 | ++import org . devio . flutter . splashscreen . SplashScreen |
| 57 | + |
| 58 | +class MainActivity : FlutterActivity() { |
| 59 | + override fun onCreate(savedInstanceState: Bundle?) { |
| 60 | + +SplashScreen.show(this) |
| 61 | + // or enable full screen |
| 62 | + SplashScreen.show(this, true) |
| 63 | + super.onCreate(savedInstanceState) |
| 64 | + } |
| 65 | +} |
| 66 | +``` |
| 67 | + |
| 68 | +#### Create `launch_screen.xml` file |
| 69 | + |
| 70 | +Create a file called `launch_screen.xml` in `app/src/main/res/layout` (create the `layout`-folder if |
| 71 | +it doesn't exist). The contents of the file should be the following: |
| 72 | + |
| 73 | +```xml |
| 74 | +<?xml version="1.0" encoding="utf-8"?> |
| 75 | +<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" |
| 76 | + android:layout_width="match_parent" android:layout_height="match_parent" |
| 77 | + android:background="@android:color/white"> |
| 78 | + |
| 79 | + <ImageView android:layout_width="match_parent" android:layout_height="match_parent" |
| 80 | + android:layout_gravity="center|top" android:scaleType="centerCrop" |
| 81 | + android:src="@mipmap/launch_screen" /> |
| 82 | +</FrameLayout> |
| 83 | +``` |
| 84 | + |
| 85 | +Customize your launch screen by creating a `launch_screen.png`-file and placing it in an |
| 86 | +appropriate `mipmap`-folder. Android automatically scales drawable, so you do not necessarily need |
| 87 | +to provide images for all phone densities. |
| 88 | +You can create splash screens in the following folders: |
| 89 | + |
| 90 | +* `mipmap-ldpi` |
| 91 | +* `mipmap-mdpi` |
| 92 | +* `mipmap-hdpi` |
| 93 | +* `mipmap-xhdpi` |
| 94 | +* `mipmap-xxhdpi` |
| 95 | +* `mipmap-xxxhdpi` |
| 96 | + |
| 97 | +Add a color called `primary_dark` in `app/src/main/res/values/colors.xml` |
| 98 | + |
| 99 | +``` |
| 100 | +<?xml version="1.0" encoding="utf-8"?> |
| 101 | +<resources> |
| 102 | + <color name="primary_dark">#000000</color> |
| 103 | +</resources> |
| 104 | +``` |
| 105 | + |
| 106 | +**Optional steps:** |
| 107 | + |
| 108 | +If you want the splash screen to be transparent, follow these steps. |
| 109 | + |
| 110 | +Open `android/app/src/main/res/values/styles.xml` and |
| 111 | +add `<item name="android:windowIsTranslucent">true</item>` to the file. It should look like this: |
| 112 | + |
| 113 | +```xml |
| 114 | + |
| 115 | +<resources> |
| 116 | + <!-- Base application theme. --> |
| 117 | + <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> |
| 118 | + <!-- Customize your theme here. --> |
| 119 | + <!--设置透明背景--> |
| 120 | + <item name="android:windowIsTranslucent">true</item> |
| 121 | + </style> |
| 122 | +</resources> |
| 123 | +``` |
| 124 | + |
| 125 | +**To learn more |
| 126 | +see [examples](https://github.com/crazycodeboy/flutter_splash_screen/tree/master/example)** |
| 127 | + |
| 128 | +If you want to customize the color of the status bar when the splash screen is displayed: |
| 129 | + |
| 130 | +Create `android/app/src/main/res/values/colors.xml` and add |
| 131 | + |
| 132 | +```xml |
| 133 | +<?xml version="1.0" encoding="utf-8"?> |
| 134 | +<resources> |
| 135 | + <color name="status_bar_color"><!-- Colour of your status bar here --></color> |
| 136 | +</resources> |
| 137 | +``` |
| 138 | + |
| 139 | +Create a style definition for this in `android/app/src/main/res/values/styles.xml`: |
| 140 | + |
| 141 | +```xml |
| 142 | +<?xml version="1.0" encoding="utf-8"?> |
| 143 | +<resources> |
| 144 | + <style name="SplashScreenTheme" parent="SplashScreen_SplashTheme"> |
| 145 | + <item name="colorPrimaryDark">@color/status_bar_color</item> |
| 146 | + </style> |
| 147 | +</resources> |
| 148 | +``` |
| 149 | + |
| 150 | +Change your `show` method to include your custom style: |
| 151 | + |
| 152 | +```java |
| 153 | +SplashScreen.show(this,R.style.SplashScreenTheme); |
| 154 | +``` |
| 155 | + |
| 156 | +### iOS |
| 157 | + |
| 158 | +Customize your splash screen via `LaunchScreen.storyboard`, |
| 159 | + |
| 160 | +**Learn more to |
| 161 | +see [examples](https://github.com/crazycodeboy/flutter_splash_screen/tree/master/example)** |
| 162 | + |
| 163 | +## Usage |
| 164 | + |
| 165 | +Use like so: |
| 166 | + |
| 167 | +```dart |
| 168 | +import 'dart:async'; |
| 169 | +
|
| 170 | +import 'package:flutter/material.dart'; |
| 171 | +import 'package:flutter_splash_screen/flutter_splash_screen.dart'; |
| 172 | +
|
| 173 | +void main() => runApp(MyApp()); |
| 174 | +
|
| 175 | +class MyApp extends StatefulWidget { |
| 176 | + @override |
| 177 | + _MyAppState createState() => _MyAppState(); |
| 178 | +} |
| 179 | +
|
| 180 | +class _MyAppState extends State<MyApp> { |
| 181 | + @override |
| 182 | + void initState() { |
| 183 | + super.initState(); |
| 184 | + hideScreen(); |
| 185 | + } |
| 186 | +
|
| 187 | + ///hide your splash screen |
| 188 | + Future<void> hideScreen() async { |
| 189 | + Future.delayed(Duration(milliseconds: 1800), () { |
| 190 | + FlutterSplashScreen.hide(); |
| 191 | + }); |
| 192 | + } |
| 193 | +
|
| 194 | + ... |
| 195 | +``` |
| 196 | + |
| 197 | +## API |
| 198 | + |
| 199 | +| Method | Type | Optional | Description | |
| 200 | +|--------|----------|----------|-------------------------------------| |
| 201 | +| show() | function | false | Open splash screen (Native Method ) | |
| 202 | +| hide() | function | false | Close splash screen | |
| 203 | + |
| 204 | +## Testing |
| 205 | + |
| 206 | +## Contribution |
| 207 | + |
| 208 | +Issues are welcome. Please add a screenshot of you bug and a code snippet. Quickest way to solve |
| 209 | +issue is to reproduce it in one of the examples. |
| 210 | + |
| 211 | +Pull requests are welcome. If you want to change the API or do something big it is best to create an |
| 212 | +issue and discuss it first. |
| 213 | + |
| 214 | +--- |
| 215 | + |
| 216 | +**[MIT Licensed](https://github.com/crazycodeboy/flutter_splash_screen/blob/master/LICENSE)** |
0 commit comments