Skip to content

Commit

Permalink
Add fade between splash and app on web. Thanks eggp for the suggestio…
Browse files Browse the repository at this point in the history
…n and example code. Closes #608.  Add check of parameter names to catch user typos in the parameters.
  • Loading branch information
jonbhanson committed Nov 20, 2023
1 parent 18027f5 commit 2cc2d52
Show file tree
Hide file tree
Showing 8 changed files with 156 additions and 38 deletions.
5 changes: 5 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
## [2.3.6] - (2023-Nov-20)

- Add fade between splash and app on web. Thanks [eggp](https://github.com/eggp) for the suggestion and example code. Closes [#608](https://github.com/jonbhanson/flutter_native_splash/issues/608).
- Add check of parameter names to catch user typos in the parameters.

## [2.3.5] - (2023-Oct-29)

- Remove white flash on web. Thanks [eggp](https://github.com/eggp) for pointing out the problem and solution. Closes [#607](https://github.com/jonbhanson/flutter_native_splash/issues/607).
Expand Down
6 changes: 5 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ First, add `flutter_native_splash` as a dependency in your pubspec.yaml file.

```yaml
dependencies:
flutter_native_splash: ^2.3.5
flutter_native_splash: ^2.3.6
```
Don't forget to `flutter pub get`.
Expand Down Expand Up @@ -169,6 +169,10 @@ flutter_native_splash:
# SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: [SystemUiOverlay.bottom, SystemUiOverlay.top], );
#fullscreen: true
# On web, the splash screen fades out in 250ms. This fade delay can be adjusted by changing
# the web_splash_fade_time_ms parameter.
#web_splash_fade_time_ms: 250
# If you have changed the name(s) of your info.plist file(s), you can specify the filename(s)
# with the info_plist_files parameter. Remove only the # characters in the three lines below,
# do not remove any spaces:
Expand Down
10 changes: 9 additions & 1 deletion example/pubspec.lock
Original file line number Diff line number Diff line change
@@ -1,6 +1,14 @@
# Generated by pub
# See https://dart.dev/tools/pub/glossary#lockfile
packages:
ansicolor:
dependency: transitive
description:
name: ansicolor
sha256: "8bf17a8ff6ea17499e40a2d2542c2f481cd7615760c6d34065cb22bfd22e6880"
url: "https://pub.dev"
source: hosted
version: "2.0.2"
archive:
dependency: transitive
description:
Expand Down Expand Up @@ -116,7 +124,7 @@ packages:
path: ".."
relative: true
source: path
version: "2.3.5"
version: "2.3.6"
flutter_test:
dependency: "direct dev"
description: flutter
Expand Down
18 changes: 14 additions & 4 deletions example/pubspec.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,10 @@ flutter_native_splash:
# To restore Flutter's default white splash screen, run the following command in the terminal:
# dart run flutter_native_splash:remove

# IMPORTANT NOTE: These parameter do not affect the configuration of Android 12 and later, which
# handle splash screens differently that prior versions of Android. Android 12 and later must be
# configured specifically in the android_12 section below.

# color or background_image is the only required parameter. Use color to set the background
# of your splash screen to a solid color. Use background_image to set the background of your
# splash screen to a png image. This is useful for gradients. The image will be stretch to the
Expand Down Expand Up @@ -180,8 +184,8 @@ flutter_native_splash:
#image_dark_android: assets/splash-invert-android.png
#image_ios: assets/splash-ios.png
#image_dark_ios: assets/splash-invert-ios.png
#image_web: assets/splash-web.png
#image_dark_web: assets/splash-invert-web.png
#image_web: assets/splash-web.gif
#image_dark_web: assets/splash-invert-web.gif
#background_image_android: "assets/background-android.png"
#background_image_dark_android: "assets/dark-background-android.png"
#background_image_ios: "assets/background-ios.png"
Expand All @@ -192,6 +196,8 @@ flutter_native_splash:
#branding_dark_android: assets/dart_dark-android.png
#branding_ios: assets/brand-ios.png
#branding_dark_ios: assets/dart_dark-ios.png
#branding_web: assets/brand-web.gif
#branding_dark_web: assets/dart_dark-web.gif

# The position of the splash image can be set with android_gravity, ios_content_mode, and
# web_image_mode parameters. All default to center.
Expand Down Expand Up @@ -221,8 +227,12 @@ flutter_native_splash:
# 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();
# SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom, SystemUiOverlay.top]);
fullscreen: true
# SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: [SystemUiOverlay.bottom, SystemUiOverlay.top], );
#fullscreen: true

# On web, the splash screen fades out in 250ms. This fade delay can be adjusted by changing
# the web_splash_fade_time_ms parameter.
#web_splash_fade_time_ms: 250

# If you have changed the name(s) of your info.plist file(s), you can specify the filename(s)
# with the info_plist_files parameter. Remove only the # characters in the three lines below,
Expand Down
60 changes: 60 additions & 0 deletions lib/cli_commands.dart
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ library flutter_native_splash_cli;

import 'dart:isolate';

import 'package:ansicolor/ansicolor.dart';
import 'package:html/parser.dart' as html_parser;
import 'package:image/image.dart';
import 'package:meta/meta.dart';
Expand Down Expand Up @@ -118,6 +119,7 @@ void createSplashByConfig(Map<String, dynamic> config) {
final String iosContentMode =
config[_Parameter.iosContentMode] as String? ?? 'center';
final webImageMode = config[_Parameter.webImageMode] as String? ?? 'center';
final fadeTimeMs = config[_Parameter.fadeTimeMs] as int? ?? 250;
String? android12Image;
String? android12DarkImage;
String? android12IconBackgroundColor;
Expand Down Expand Up @@ -213,6 +215,7 @@ void createSplashByConfig(Map<String, dynamic> config) {
darkColor: darkColorWeb ?? darkColor,
imageMode: webImageMode,
brandingMode: brandingGravity,
fadeTimeMs: fadeTimeMs,
);
} else {
print('Web folder not found, skipping web splash update...');
Expand Down Expand Up @@ -370,6 +373,13 @@ Map<String, dynamic> getConfig({
Map<String, dynamic> _yamlToMap(YamlMap yamlMap) {
final Map<String, dynamic> map = <String, dynamic>{};
for (final MapEntry<dynamic, dynamic> entry in yamlMap.entries) {
if (!_Parameter.all.contains(entry.key)) {
AnsiPen pen = AnsiPen()..red(bold: true);
print(pen("⚠️ The parameter \"${entry.key}\" was found "
"in your flutter_native_splash config, but \"${entry.key}\" "
"is not a valid flutter_native_splash parameter."));
exit(0);
}
if (entry.value is YamlList) {
final list = <String>[];
for (final value in entry.value as YamlList) {
Expand Down Expand Up @@ -447,4 +457,54 @@ class _Parameter {
static const plistFiles = 'info_plist_files';
static const web = 'web';
static const webImageMode = 'web_image_mode';
static const fadeTimeMs = 'web_splash_fade_time_ms';

static List<String> all = [
android,
android12Section,
androidScreenOrientation,
backgroundImage,
backgroundImageAndroid,
backgroundImageIos,
backgroundImageWeb,
brandingDarkImage,
brandingDarkImageAndroid,
brandingDarkImageIos,
brandingDarkImageWeb,
brandingGravity,
brandingImage,
brandingImageAndroid,
brandingImageIos,
brandingImageWeb,
color,
colorAndroid,
colorIos,
colorWeb,
darkBackgroundImage,
darkBackgroundImageAndroid,
darkBackgroundImageIos,
darkBackgroundImageWeb,
darkColor,
darkColorAndroid,
darkColorIos,
darkColorWeb,
darkImage,
darkImageAndroid,
darkImageIos,
darkImageWeb,
fullscreen,
gravity,
iconBackgroundColor,
iconBackgroundColorDark,
image,
imageAndroid,
imageIos,
imageWeb,
ios,
iosContentMode,
plistFiles,
web,
webImageMode,
fadeTimeMs,
];
}
70 changes: 45 additions & 25 deletions lib/templates.dart
Original file line number Diff line number Diff line change
Expand Up @@ -407,19 +407,34 @@ const String _iOSBrandingRightBottomConstraints = '''
/// Web related templates
const String _webCss = '''
<style id="splash-screen-style">
html {
height: 100%
.flutter-loader {
z-index: 999999;
}
body {
margin: 0;
min-height: 100%;
background-color: [LIGHTBACKGROUNDCOLOR];
[LIGHTBACKGROUNDIMAGE]
background-size: 100% 100%;
#splash {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 999998;
opacity: 1;
/* animation type and duration */
transition: opacity [FADETIME];
background-color: [LIGHTBACKGROUNDCOLOR];
[LIGHTBACKGROUNDIMAGE]
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
#splash.remove {
/* enable click through when run animation */
pointer-events: none;
/* start animation */
opacity: 0;
}
.center {
#splash .center {
margin: 0;
position: absolute;
top: 50%;
Expand All @@ -428,38 +443,38 @@ const String _webCss = '''
transform: translate(-50%, -50%);
}
.contain {
#splash .contain {
display:block;
width:100%; height:100%;
object-fit: contain;
}
.stretch {
#splash .stretch {
display:block;
width:100%; height:100%;
}
.cover {
#splash .cover {
display:block;
width:100%; height:100%;
object-fit: cover;
}
.bottom {
#splash .bottom {
position: absolute;
bottom: 0;
left: 50%;
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
.bottomLeft {
#splash .bottomLeft {
position: absolute;
bottom: 0;
left: 0;
}
.bottomRight {
#splash .bottomRight {
position: absolute;
bottom: 0;
right: 0;
Expand All @@ -469,7 +484,7 @@ const String _webCss = '''
const String _webCssDark = '''
@media (prefers-color-scheme: dark) {
body {
#splash {
background-color: [DARKBACKGROUNDCOLOR];
[DARKBACKGROUNDIMAGE]
}
Expand All @@ -478,11 +493,13 @@ const String _webCssDark = '''

// XML's insertBefore can't have a newline at the end:
const String _indexHtmlPicture = '''
<picture id="splash">
<source srcset="splash/img/light-1x.[IMAGEEXTENSION] 1x, splash/img/light-2x.[IMAGEEXTENSION] 2x, splash/img/light-3x.[IMAGEEXTENSION] 3x, splash/img/light-4x.[IMAGEEXTENSION] 4x" media="(prefers-color-scheme: light)">
<source srcset="splash/img/dark-1x.[IMAGEEXTENSION] 1x, splash/img/dark-2x.[IMAGEEXTENSION] 2x, splash/img/dark-3x.[IMAGEEXTENSION] 3x, splash/img/dark-4x.[IMAGEEXTENSION] 4x" media="(prefers-color-scheme: dark)">
<img class="[IMAGEMODE]" aria-hidden="true" src="splash/img/light-1x.[IMAGEEXTENSION]" alt=""/>
</picture>''';
<div id="splash">
<picture>
<source srcset="splash/img/light-1x.[IMAGEEXTENSION] 1x, splash/img/light-2x.[IMAGEEXTENSION] 2x, splash/img/light-3x.[IMAGEEXTENSION] 3x, splash/img/light-4x.[IMAGEEXTENSION] 4x" media="(prefers-color-scheme: light)">
<source srcset="splash/img/dark-1x.[IMAGEEXTENSION] 1x, splash/img/dark-2x.[IMAGEEXTENSION] 2x, splash/img/dark-3x.[IMAGEEXTENSION] 3x, splash/img/dark-4x.[IMAGEEXTENSION] 4x" media="(prefers-color-scheme: dark)">
<img class="[IMAGEMODE]" aria-hidden="true" src="splash/img/light-1x.[IMAGEEXTENSION]" alt=""/>
</picture>
</div>''';

// XML's insertBefore can't have a newline at the end:
const String _indexHtmlBrandingPicture = '''
Expand All @@ -495,9 +512,12 @@ const String _indexHtmlBrandingPicture = '''
const String _webJS = '''
<script id="splash-screen-script">
function removeSplashFromWeb() {
document.getElementById("splash")?.remove();
document.getElementById("splash-branding")?.remove();
document.body.style.background = "transparent";
const splashElement = document.getElementById("splash");
splashElement.classList.add("remove");
setTimeout(function () {
splashElement.remove();
document.getElementById("splash-screen-script")?.remove();
}, [FADETIME] /* animation time + wait rendering and others(500ms) */);
}
</script>
''';
Loading

0 comments on commit 2cc2d52

Please sign in to comment.