Skip to content

Commit

Permalink
Roll back web fade as it was a breaking change. Fixes #628. Fixes #627.
Browse files Browse the repository at this point in the history
Fixes #622.
  • Loading branch information
jonbhanson committed Dec 7, 2023
1 parent 2cc2d52 commit a52d4c5
Show file tree
Hide file tree
Showing 8 changed files with 51 additions and 87 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
## [2.3.7] - (2023-Dec-06)

- Roll back web fade as it was a breaking change. Fixes [#628](https://github.com/jonbhanson/flutter_native_splash/issues/628). Fixes [#627](https://github.com/jonbhanson/flutter_native_splash/issues/627). Fixes [#622](https://github.com/jonbhanson/flutter_native_splash/issues/622).

## [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).
Expand Down
6 changes: 1 addition & 5 deletions 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.6
flutter_native_splash: ^2.3.7
```
Don't forget to `flutter pub get`.
Expand Down Expand Up @@ -169,10 +169,6 @@ 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
28 changes: 14 additions & 14 deletions example/pubspec.lock
Original file line number Diff line number Diff line change
Expand Up @@ -61,10 +61,10 @@ packages:
dependency: transitive
description:
name: collection
sha256: f092b211a4319e98e5ff58223576de6c2803db36221657b46c82574721240687
sha256: ee67cb0715911d28db6bf4af1026078bd6f0128b07a5f66fb2ed94ec6783c09a
url: "https://pub.dev"
source: hosted
version: "1.17.2"
version: "1.18.0"
convert:
dependency: transitive
description:
Expand Down Expand Up @@ -124,7 +124,7 @@ packages:
path: ".."
relative: true
source: path
version: "2.3.6"
version: "2.3.7"
flutter_test:
dependency: "direct dev"
description: flutter
Expand Down Expand Up @@ -187,10 +187,10 @@ packages:
dependency: transitive
description:
name: meta
sha256: "3c74dbf8763d36539f114c799d8a2d87343b5067e9d796ca22b5eb8437090ee3"
sha256: a6e590c838b18133bb482a2745ad77c5bb7715fb0451209e1a7567d416678b8e
url: "https://pub.dev"
source: hosted
version: "1.9.1"
version: "1.10.0"
path:
dependency: transitive
description:
Expand Down Expand Up @@ -232,18 +232,18 @@ packages:
dependency: transitive
description:
name: stack_trace
sha256: c3c7d8edb15bee7f0f74debd4b9c5f3c2ea86766fe4178eb2a18eb30a0bdaed5
sha256: "73713990125a6d93122541237550ee3352a2d84baad52d375a4cad2eb9b7ce0b"
url: "https://pub.dev"
source: hosted
version: "1.11.0"
version: "1.11.1"
stream_channel:
dependency: transitive
description:
name: stream_channel
sha256: "83615bee9045c1d322bbbd1ba209b7a749c2cbcdcb3fdd1df8eb488b3279c1c8"
sha256: ba2aa5d8cc609d96bbb2899c28934f9e1af5cddbd60a827822ea467161eb54e7
url: "https://pub.dev"
source: hosted
version: "2.1.1"
version: "2.1.2"
string_scanner:
dependency: transitive
description:
Expand All @@ -264,10 +264,10 @@ packages:
dependency: transitive
description:
name: test_api
sha256: "75760ffd7786fffdfb9597c35c5b27eaeec82be8edfb6d71d32651128ed7aab8"
sha256: "5c2f730018264d276c20e4f1503fd1308dfbbae39ec8ee63c5236311ac06954b"
url: "https://pub.dev"
source: hosted
version: "0.6.0"
version: "0.6.1"
typed_data:
dependency: transitive
description:
Expand Down Expand Up @@ -296,10 +296,10 @@ packages:
dependency: transitive
description:
name: web
sha256: dc8ccd225a2005c1be616fe02951e2e342092edf968cf0844220383757ef8f10
sha256: afe077240a270dcfd2aafe77602b4113645af95d0ad31128cc02bce5ac5d5152
url: "https://pub.dev"
source: hosted
version: "0.1.4-beta"
version: "0.3.0"
xml:
dependency: transitive
description:
Expand All @@ -317,5 +317,5 @@ packages:
source: hosted
version: "3.1.2"
sdks:
dart: ">=3.1.0-185.0.dev <4.0.0"
dart: ">=3.2.0-194.0.dev <4.0.0"
flutter: ">=2.5.0"
4 changes: 0 additions & 4 deletions example/pubspec.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -230,10 +230,6 @@ 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
4 changes: 0 additions & 4 deletions lib/cli_commands.dart
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,6 @@ 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 @@ -215,7 +214,6 @@ 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 @@ -457,7 +455,6 @@ 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,
Expand Down Expand Up @@ -505,6 +502,5 @@ class _Parameter {
plistFiles,
web,
webImageMode,
fadeTimeMs,
];
}
70 changes: 25 additions & 45 deletions lib/templates.dart
Original file line number Diff line number Diff line change
Expand Up @@ -407,34 +407,19 @@ const String _iOSBrandingRightBottomConstraints = '''
/// Web related templates
const String _webCss = '''
<style id="splash-screen-style">
.flutter-loader {
z-index: 999999;
html {
height: 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;
body {
margin: 0;
min-height: 100%;
background-color: [LIGHTBACKGROUNDCOLOR];
[LIGHTBACKGROUNDIMAGE]
background-size: 100% 100%;
}
#splash .center {
.center {
margin: 0;
position: absolute;
top: 50%;
Expand All @@ -443,38 +428,38 @@ const String _webCss = '''
transform: translate(-50%, -50%);
}
#splash .contain {
.contain {
display:block;
width:100%; height:100%;
object-fit: contain;
}
#splash .stretch {
.stretch {
display:block;
width:100%; height:100%;
}
#splash .cover {
.cover {
display:block;
width:100%; height:100%;
object-fit: cover;
}
#splash .bottom {
.bottom {
position: absolute;
bottom: 0;
left: 50%;
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
#splash .bottomLeft {
.bottomLeft {
position: absolute;
bottom: 0;
left: 0;
}
#splash .bottomRight {
.bottomRight {
position: absolute;
bottom: 0;
right: 0;
Expand All @@ -484,7 +469,7 @@ const String _webCss = '''
const String _webCssDark = '''
@media (prefers-color-scheme: dark) {
#splash {
body {
background-color: [DARKBACKGROUNDCOLOR];
[DARKBACKGROUNDIMAGE]
}
Expand All @@ -493,13 +478,11 @@ const String _webCssDark = '''

// XML's insertBefore can't have a newline at the end:
const String _indexHtmlPicture = '''
<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>''';
<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>''';

// XML's insertBefore can't have a newline at the end:
const String _indexHtmlBrandingPicture = '''
Expand All @@ -512,12 +495,9 @@ const String _indexHtmlBrandingPicture = '''
const String _webJS = '''
<script id="splash-screen-script">
function removeSplashFromWeb() {
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) */);
document.getElementById("splash")?.remove();
document.getElementById("splash-branding")?.remove();
document.body.style.background = "transparent";
}
</script>
''';
20 changes: 6 additions & 14 deletions lib/web.dart
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ void _createWebSplash({
required String brandingMode,
required String? backgroundImage,
required String? darkBackgroundImage,
required int fadeTimeMs,
}) {
if (!File(_webIndex).existsSync()) {
print('[Web] $_webIndex not found. Skipping Web.');
Expand Down Expand Up @@ -167,9 +166,8 @@ void _createWebSplash({
darkBackgroundImage: darkBackgroundImage,
backgroundImage: backgroundImage,
hasDarkImage: darkBackgroundImage != null,
fadeTimeMs: fadeTimeMs,
);
_createSplashJs(fadeTimeMs: fadeTimeMs);
_createSplashJs();
_updateHtml(
imageMode: imageMode,
imagePath: imagePath,
Expand Down Expand Up @@ -262,13 +260,10 @@ void _createSplashCss({
required String? backgroundImage,
required String? darkBackgroundImage,
required bool hasDarkImage,
required int fadeTimeMs,
}) {
print('[Web] Creating CSS');
color ??= 'ffffff';
var cssContent = _webCss
.replaceFirst('[LIGHTBACKGROUNDCOLOR]', '#$color')
.replaceFirst('[FADETIME]', "${fadeTimeMs / 1000}s");
var cssContent = _webCss.replaceFirst('[LIGHTBACKGROUNDCOLOR]', '#$color');
if (darkColor != null || darkBackgroundImage != null || hasDarkImage) {
darkColor ??= '000000';
cssContent += _webCssDark.replaceFirst(
Expand Down Expand Up @@ -317,7 +312,7 @@ void _createSplashCss({
webIndex.writeAsStringSync(document.outerHtml);
}

void _createSplashJs({required int fadeTimeMs}) {
void _createSplashJs() {
// Add js as an inline script in head tag
final webIndex = File(_webIndex);
final document = html_parser.parse(webIndex.readAsStringSync());
Expand All @@ -326,9 +321,7 @@ void _createSplashJs({required int fadeTimeMs}) {
document.head
?..querySelector('script#splash-screen-script')?.remove()
..append(
html_parser.parseFragment(
_webJS.replaceFirst("[FADETIME]", (fadeTimeMs + 500).toString()),
container: ''),
html_parser.parseFragment(_webJS, container: ''),
);

// Write the updated index.html
Expand Down Expand Up @@ -392,8 +385,7 @@ void _updateHtml({
// Update branding image
document.querySelector('picture#splash-branding')?.remove();
if (brandingImagePath != null) {
var div = document.querySelector('div#splash');
div?.insertBefore(
document.body?.insertBefore(
html_parser.parseFragment(
'\n${_indexHtmlBrandingPicture.replaceAll(
'[BRANDINGMODE]',
Expand All @@ -404,7 +396,7 @@ void _updateHtml({
)}',
container: '',
),
div.firstChild,
document.body?.firstChild,
);
}

Expand Down
2 changes: 1 addition & 1 deletion pubspec.yaml
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
name: flutter_native_splash
description: Customize Flutter's default white native splash screen with
background color and splash image. Supports dark mode, full screen, and more.
version: 2.3.6
version: 2.3.7
repository: https://github.com/jonbhanson/flutter_native_splash
issue_tracker: https://github.com/jonbhanson/flutter_native_splash/issues

Expand Down

0 comments on commit a52d4c5

Please sign in to comment.