Skip to content

Commit

Permalink
Added support for web. Closes #30. Updated the example app to include…
Browse files Browse the repository at this point in the history
… web.
  • Loading branch information
Jon Hanson committed Feb 11, 2021
1 parent 691bcbc commit 30a7356
Show file tree
Hide file tree
Showing 56 changed files with 730 additions and 333 deletions.
5 changes: 5 additions & 0 deletions CHANGELOG.md
@@ -1,3 +1,8 @@
## [0.3.0] - (2021-Feb-10)

* Added support for web. Closes [#30](https://github.com/jonbhanson/flutter_native_splash/issues/30).
* Updated the example app to include web.

## [0.2.11] - (2021-Feb-09)

* Fixed `remove` command which was leaving splash images in place.
Expand Down
23 changes: 15 additions & 8 deletions README.md
Expand Up @@ -2,7 +2,7 @@
[![pub package](https://img.shields.io/pub/v/flutter_native_splash)](https://pub.dev/packages/flutter_native_splash)
[![Build Status](https://img.shields.io/travis/jonbhanson/flutter_native_splash)](https://travis-ci.org/jonbhanson/flutter_native_splash)

When your app is opened, there is a brief time while the native app loads Flutter. By default, during this time the native app displays a white splash screen. This package automatically generates iOS and Android native code for customizing this native splash screen background color and splash image. Supports dark mode, full screen, and platform-specific options.
When your app is opened, there is a brief time while the native app loads Flutter. By default, during this time the native app displays a white splash screen. This package automatically generates iOS, Android, and Web native code for customizing this native splash screen background color and splash image. Supports dark mode, full screen, and platform-specific options.

<p align='center'>
<img src="https://raw.githubusercontent.com/jonbhanson/flutter_native_splash/master/splash_demo.gif" width="250" height="443" />
Expand All @@ -13,7 +13,7 @@ First, add `flutter_native_splash` as a dev dependency in your pubspec.yaml file

```yaml
dev_dependencies:
flutter_native_splash: ^0.2.11
flutter_native_splash: ^0.3.0
```

Don't forget to `flutter pub get`.
Expand Down Expand Up @@ -51,9 +51,10 @@ flutter_native_splash:
# platform.
#android: false
#ios: false
#web: false

# The position of the splash image can be set with android_gravity and ios_content_mode
# parameters. Both default to center.
# The position of the splash image can be set with android_gravity, ios_content_mode, and
# web_image_mode parameters. All default to center.
#
# android_gravity can be one of the following Android Gravity (see
# https://developer.android.com/reference/android/view/Gravity): bottom, center,
Expand All @@ -66,8 +67,12 @@ flutter_native_splash:
# scaleAspectFit, scaleAspectFill, center, top, bottom, left, right, topLeft, topRight,
# bottomLeft, or bottomRight.
#ios_content_mode: center
#
# web_image_mode can be one of the following modes: center, contain, stretch, and cover.
#web_image_mode: center

# To hide the notification bar, use the fullscreen parameter. Defaults to false.
# To hide the notification bar, use the fullscreen parameter. Has no affect in web since web
# has no notification bar. Defaults to false.
# NOTE: Unlike Android, iOS will not automatically show the notification bar when the app loads.
# To show the notification bar, add the following code to your Flutter app:
# WidgetsFlutterBinding.ensureInitialized();
Expand Down Expand Up @@ -145,9 +150,6 @@ The native splash screen is displayed while the native app loads the Flutter fra
## Are animations/lottie/GIF images supported?
Not at this time. However, you may want to consider a secondary splash screen that supports animation. See the [secondary splash screen](#secondary-splash-screen) recommendation.

## Is there support for web?
Not yet, but this is a planned improvement.

# Notes
* If splash screen was not updated properly on iOS or if you experience a white screen before splash screen, run `flutter clean` and recompile your app. If that does not solve the problem, delete your app from the device, power down the device, power up device, install and launch app as per [this stackoverflow thread](https://stackoverflow.com/questions/33002829/ios-keeping-old-launch-screen-and-app-icon-after-update).

Expand All @@ -167,6 +169,11 @@ Not yet, but this is a planned improvement.
* The background color is implemented by using a single pixel png file and stretching it to fit the screen.
* Code for hidden status bar toggle will be added in `Info.plist`.

## Web
* A `web/splash` folder will be created for splash screen images and CSS files.
* Your splash image will be resized to `1x`, `2x`, and `3x` sizes and placed in `web/splash/img`.
* The splash style sheet will be added to the app's `web/index.html`, as well as the HTML for the splash pictures.

# Removing

If you would like to restore Flutter's default white splash screen, run the following command in the terminal:
Expand Down
52 changes: 13 additions & 39 deletions example/.gitignore
Expand Up @@ -22,51 +22,25 @@

# Flutter/Dart/Pub related
**/doc/api/
**/ios/Flutter/.last_build_id
.dart_tool/
.flutter-plugins
.flutter-plugins-dependencies
.packages
.pub-cache/
.pub/
/build/

# Android related
**/android/**/gradle-wrapper.jar
**/android/.gradle
**/android/captures/
**/android/gradlew
**/android/gradlew.bat
**/android/local.properties
**/android/**/GeneratedPluginRegistrant.java
# Web related
lib/generated_plugin_registrant.dart

# iOS/XCode related
**/ios/**/*.mode1v3
**/ios/**/*.mode2v3
**/ios/**/*.moved-aside
**/ios/**/*.pbxuser
**/ios/**/*.perspectivev3
**/ios/**/*sync/
**/ios/**/.sconsign.dblite
**/ios/**/.tags*
**/ios/**/.vagrant/
**/ios/**/DerivedData/
**/ios/**/Icon?
**/ios/**/Pods/
**/ios/**/.symlinks/
**/ios/**/profile
**/ios/**/xcuserdata
**/ios/.generated/
**/ios/Flutter/App.framework
**/ios/Flutter/Flutter.framework
**/ios/Flutter/Generated.xcconfig
**/ios/Flutter/app.flx
**/ios/Flutter/app.zip
**/ios/Flutter/flutter_assets/
**/ios/ServiceDefinitions.json
**/ios/Runner/GeneratedPluginRegistrant.*
# Symbolication related
app.*.symbols

# Exceptions to above rules.
!**/ios/**/default.mode1v3
!**/ios/**/default.mode2v3
!**/ios/**/default.pbxuser
!**/ios/**/default.perspectivev3
!/packages/flutter_tools/test/data/dart_dependencies_test/**/.packages
# Obfuscation related
app.*.map.json

# Android Studio will place build artifacts here
/android/app/debug
/android/app/profile
/android/app/release
4 changes: 2 additions & 2 deletions example/.metadata
Expand Up @@ -4,7 +4,7 @@
# This file should be version controlled and should not be manually edited.

version:
revision: 20e59316b8b8474554b38493b8ca888794b0234a
channel: stable
revision: 4b50ca7f7fbf56be72e54cd200825b760416a356
channel: beta

project_type: app
42 changes: 15 additions & 27 deletions example/README.md
@@ -1,37 +1,25 @@
# Example for flutter_native_splash

This is a brand new Flutter project created with `flutter create`.
A new Flutter application for testing a splash screen.

`pubspec.yaml`:
## Getting Started

```yaml
name: example
description: A new Flutter project.
version: 1.0.0+1
This is Flutter's example application. Run it now and you will see that it has Flutter's default white splash screen.

environment:
sdk: ">=2.1.0 <3.0.0"
The pubspec.yaml file has been modified to add a color and icon to the splash screen. To apply these modification, run the following command in the terminal:

dependencies:
flutter:
sdk: flutter
cupertino_icons: ^0.1.2
```
flutter pub get
flutter pub run flutter_native_splash:create
```

dev_dependencies:
flutter_test:
sdk: flutter
flutter_native_splash: ^0.1.5
The updated splash screen will now appear when you run the app.

flutter_native_splash:
image: assets/splash.png
color: "42a5f5"
A few resources to get you started if this is your first Flutter project:

flutter:
uses-material-design: true
```
- [Lab: Write your first Flutter app](https://flutter.dev/docs/get-started/codelab)
- [Cookbook: Useful Flutter samples](https://flutter.dev/docs/cookbook)

And then:
```
flutter pub get
flutter pub pub run flutter_native_splash:create
```
For help getting started with Flutter, view our
[online documentation](https://flutter.dev/docs), which offers tutorials,
samples, guidance on mobile development, and a full API reference.
11 changes: 11 additions & 0 deletions example/android/.gitignore
@@ -0,0 +1,11 @@
gradle-wrapper.jar
/.gradle
/captures/
/gradlew
/gradlew.bat
/local.properties
GeneratedPluginRegistrant.java

# Remember to never publicly share your keystore.
# See https://flutter.dev/docs/deployment/android#reference-the-keystore-from-the-app
key.properties
15 changes: 2 additions & 13 deletions example/android/app/build.gradle
Expand Up @@ -25,20 +25,15 @@ apply plugin: 'com.android.application'
apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"

android {
compileSdkVersion 28

lintOptions {
disable 'InvalidPackage'
}
compileSdkVersion 30

defaultConfig {
// TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
applicationId "com.example.example"
minSdkVersion 16
targetSdkVersion 28
targetSdkVersion 30
versionCode flutterVersionCode.toInteger()
versionName flutterVersionName
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
}

buildTypes {
Expand All @@ -53,9 +48,3 @@ android {
flutter {
source '../..'
}

dependencies {
testImplementation 'junit:junit:4.12'
androidTestImplementation 'com.android.support.test:runner:1.0.2'
androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}
38 changes: 23 additions & 15 deletions example/android/app/src/main/AndroidManifest.xml
@@ -1,33 +1,41 @@
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.example">

<!-- io.flutter.app.FlutterApplication is an android.app.Application that
calls FlutterMain.startInitialization(this); in its onCreate method.
In most cases you can leave this as-is, but you if you want to provide
additional functionality it is fine to subclass or reimplement
FlutterApplication and put your custom class here. -->
<application
android:name="io.flutter.app.FlutterApplication"
<application
android:label="example"
android:icon="@mipmap/ic_launcher">
<activity
android:name=".MainActivity"
android:launchMode="singleTop"
android:theme="@style/LaunchTheme"
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
android:hardwareAccelerated="true"
android:windowSoftInputMode="adjustResize">
<!-- This keeps the window background of the activity showing
until Flutter renders its first frame. It can be removed if
there is no splash screen (such as the default splash screen
defined in @style/LaunchTheme). -->
<!-- Specifies an Android theme to apply to this Activity as soon as
the Android process has started. This theme is visible to the user
while the Flutter UI initializes. After that, this theme continues
to determine the Window background behind the Flutter UI. -->
<meta-data
android:name="io.flutter.app.android.SplashScreenUntilFirstFrame"
android:value="true" />
android:name="io.flutter.embedding.android.NormalTheme"
android:resource="@style/NormalTheme"
/>
<!-- Displays an Android View that continues showing the launch screen
Drawable until Flutter paints its first frame, then this splash
screen fades out. A splash screen is useful to avoid any visual
gap between the end of Android's launch screen and the painting of
Flutter's first frame. -->
<meta-data
android:name="io.flutter.embedding.android.SplashScreenDrawable"
android:resource="@drawable/launch_background"
/>
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
<!-- Don't delete the meta-data below.
This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
<meta-data
android:name="flutterEmbedding"
android:value="2" />
</application>
</manifest>
@@ -1,28 +1,6 @@
package com.example.example;

import android.os.Bundle;
import io.flutter.app.FlutterActivity;
import io.flutter.plugins.GeneratedPluginRegistrant;

import android.view.ViewTreeObserver;
import android.view.WindowManager;
import io.flutter.embedding.android.FlutterActivity;

public class MainActivity extends FlutterActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
boolean flutter_native_splash = true;
getWindow().setStatusBarColor(0x00000000);

GeneratedPluginRegistrant.registerWith(this);
ViewTreeObserver vto = getFlutterView().getViewTreeObserver();
vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
getFlutterView().getViewTreeObserver().removeOnGlobalLayoutListener(this);
getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
}
});

}
}
}
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="?android:colorBackground" />

<!-- You can insert your own image assets here -->
<!-- <item>
<bitmap
android:gravity="center"
android:src="@mipmap/launch_image" />
</item> -->
</layer-list>
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1,16 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@color/splash_color" />
<item android:drawable="@android:color/white" />

<!-- You can insert your own image assets here -->
<!-- <item>
<bitmap
android:gravity="center"
android:src="@mipmap/launch_image" />
</item> -->
<item>
<bitmap android:gravity="center" android:src="@drawable/splash" />
</item>

</layer-list>
18 changes: 18 additions & 0 deletions example/android/app/src/main/res/values-night/styles.xml
@@ -0,0 +1,18 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Theme applied to the Android Window while the process is starting when the OS's Dark Mode setting is on -->
<style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
<!-- Show a splash screen on the activity. Automatically removed when
Flutter draws its first frame -->
<item name="android:windowBackground">@drawable/launch_background</item>
</style>
<!-- Theme applied to the Android Window as soon as the process has started.
This theme determines the color of the Android Window while your
Flutter UI initializes, as well as behind your Flutter UI while its
running.
This Theme is only used starting with V2 of Flutter's Android embedding. -->
<style name="NormalTheme" parent="@android:style/Theme.Black.NoTitleBar">
<item name="android:windowBackground">?android:colorBackground</item>
</style>
</resources>
4 changes: 0 additions & 4 deletions example/android/app/src/main/res/values/colors.xml

This file was deleted.

0 comments on commit 30a7356

Please sign in to comment.