Update existing styles xml to support Xiaomi/Redmi devices. Fixes #285,

fixes #281. Avoid changing logo size on mobile browsers.  Fixes #276.

CHANGELOG.md

@@ -1,3 +1,7 @@
+## [2.0.2] - (2022-Feb-07)
+* Update existing styles xml to support Xiaomi/Redmi devices.  Fixes [#285](https://github.com/jonbhanson/flutter_native_splash/issues/285), fixes [#281](https://github.com/jonbhanson/flutter_native_splash/issues/281).
+* Avoid changing logo size on mobile browsers.  Fixes [#276](https://github.com/jonbhanson/flutter_native_splash/issues/276).
+
 ## [2.0.1+1] - (2022-Jan-29)
 * Provide BuildContext argument to the initialization function.
 

README.md

@@ -15,13 +15,13 @@ You can now keep the splash screen up while your app initializes!  No need for a
 
 # Usage
 
-Would you prefer a video tutorial instead?  Check out <a href="https://www.youtube.com/watch?v=8ME8Czqc-Oc">Johannes Milke's tutorial</a>.
+Would you prefer a video tutorial instead?  Check out <a href="https://www.youtube.com/watch?v=dB0dOnc2k10">Johannes Milke's tutorial</a>.
 
 First, add `flutter_native_splash` as a dependency in your pubspec.yaml file.
 
 ```yaml
 dependencies:
-  flutter_native_splash: ^2.0.1+1
+  flutter_native_splash: ^2.0.2
 ```
 
 Don't forget to `flutter pub get`.
@@ -55,7 +55,7 @@ flutter_native_splash:
 
   # This property allows you to specify an image used as branding in the splash screen. It must be
   # a png file. Currently, it is only supported for Android and iOS.
-  branding: assets/dart.png
+  #branding: assets/dart.png
 
   # Specify your branding image for dark mode.
   #branding_dark: assets/dart_dark.png
@@ -65,7 +65,7 @@ flutter_native_splash:
   #
   # Make sure this content mode value should not be similar to android_gravity value and
   # ios_content_mode value.
-  branding_mode: bottom
+  #branding_mode: bottom
 
   # The color_dark, background_image_dark, and image_dark are parameters that set the background
   # and image when the device is in dark mode. If they are not specified, the app will use the
@@ -136,6 +136,8 @@ flutter pub run flutter_native_splash:create --path=path/to/my/file.yaml
 By default, the splash screen will be removed when Flutter has drawn the first frame.  If you would like the splash screen to remain while your app initializes, you can use the `removeAfter` method in the following manner:
 
 ```dart
+import 'package:flutter_native_splash/flutter_native_splash.dart';
+
 void main() {
   FlutterNativeSplash.removeAfter(initialization);
   // runApp will run, but not be shown until initialization completes:

example/pubspec.lock

@@ -96,7 +96,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "2.0.1+1"
+    version: "2.0.2"
   flutter_test:
     dependency: "direct dev"
     description: flutter
@@ -123,6 +123,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "0.12.11"
+  material_color_utilities:
+    dependency: transitive
+    description:
+      name: material_color_utilities
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.1.3"
   meta:
     dependency: transitive
     description:
@@ -190,7 +197,7 @@ packages:
       name: test_api
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.4.3"
+    version: "0.4.8"
   typed_data:
     dependency: transitive
     description:

example/pubspec.yaml

@@ -113,7 +113,7 @@ flutter_native_splash:
 
   # This property allows you to specify an image used as branding in the splash screen. It must be
   # a png file. Currently, it is only supported for Android and iOS.
-  branding: assets/dart.png
+  #branding: assets/dart.png
 
   # Specify your branding image for dark mode.
   #branding_dark: assets/dart_dark.png
@@ -123,7 +123,7 @@ flutter_native_splash:
   #
   # Make sure this content mode value should not be similar to android_gravity value and
   # ios_content_mode value.
-  branding_mode: bottom
+  #branding_mode: bottom
 
   # The color_dark, background_image_dark, and image_dark are parameters that set the background
   # and image when the device is in dark mode. If they are not specified, the app will use the
@@ -147,7 +147,7 @@ flutter_native_splash:
   # https://developer.android.com/reference/android/view/Gravity): bottom, center,
   # center_horizontal, center_vertical, clip_horizontal, clip_vertical, end, fill, fill_horizontal,
   # fill_vertical, left, right, start, or top.
-  android_gravity: center
+  #android_gravity: center
   #
   # ios_content_mode can be one of the following iOS UIView.ContentMode (see
   # https://developer.apple.com/documentation/uikit/uiview/contentmode): scaleToFill,

lib/android.dart

@@ -296,6 +296,11 @@ Future<void> _updateStylesFile(
     return;
   }
 
+  replaceElement(
+      launchTheme: launchTheme,
+      name: 'android:forceDarkAllowed',
+      value: "false");
+
   replaceElement(
       launchTheme: launchTheme,
       name: 'android:windowFullscreen',

lib/web.dart

@@ -146,31 +146,41 @@ void updateIndex({required String imageMode, required String? imagePath}) {
   var lines = webIndex.readAsLinesSync();
 
   var foundExistingStyleSheet = false;
+  bool foundExistingMetaViewport = false;
   var headCloseTagLine = 0;
   var bodyOpenTagLine = 0;
   var existingPictureLine = 0;
-  var existingBodyLine = 0;
 
   const styleSheetLink =
       '<link rel="stylesheet" type="text/css" href="splash/style.css">';
+  const metaViewport =
+      '<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>';
   for (var x = 0; x < lines.length; x++) {
     var line = lines[x];
 
     if (line.contains(styleSheetLink)) {
       foundExistingStyleSheet = true;
-    } else if (line.contains('</head>')) {
+    }
+    if (line.contains(metaViewport)) {
+      foundExistingMetaViewport = true;
+    }
+
+    if (line.contains('</head>')) {
       headCloseTagLine = x;
     } else if (line.contains('<body')) {
       bodyOpenTagLine = x;
     } else if (line.contains('<picture id="splash">')) {
       existingPictureLine = x;
-    } else if (line.contains('<body>')) {
-      existingBodyLine = x;
     }
   }
 
   if (!foundExistingStyleSheet) {
-    lines[headCloseTagLine] = '  ' + styleSheetLink + '\n</head>';
+    lines[headCloseTagLine] =
+        '  ' + styleSheetLink + '\n' + lines[headCloseTagLine];
+  }
+  if (!foundExistingMetaViewport) {
+    lines[headCloseTagLine] =
+        '  ' + metaViewport + '\n' + lines[headCloseTagLine];
   }
 
   if (existingPictureLine == 0) {
@@ -193,9 +203,5 @@ void updateIndex({required String imageMode, required String? imagePath}) {
           existingPictureLine, existingPictureLine + _indexHtmlPicture.length);
     }
   }
-  if (existingBodyLine != 0) {
-    lines[existingBodyLine] =
-        '<body style="position: fixed; inset: 0px; overflow: hidden; padding: 0px; margin: 0px; user-select: none; touch-action: none; font: 14px sans-serif; color: red;">';
-  }
   webIndex.writeAsStringSync(lines.join('\n'));
 }

pubspec.yaml

@@ -1,6 +1,6 @@
 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.0.1+1
+version: 2.0.2
 homepage: https://github.com/jonbhanson/flutter_native_splash
 
 environment: