Branding Image support for the web platform (#386)

* CHORE: updated dependencies * (Web) FEAT: creating branding images * FEAT: added HTML, CSS and JS template for branding * (Web) FEAT: added support for branding image * STYLE: Formatted markdown files * DOCS: added web support for branding in readme
jonbhanson · Jul 17, 2022 · a1fe777 · a1fe777
1 parent bc5b34a
commit a1fe777
Show file tree

Hide file tree

Showing 7 changed files with 350 additions and 179 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/README.md b/README.md
diff --git a/example/pubspec.lock b/example/pubspec.lock
@@ -96,7 +96,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "2.2.1"
+    version: "2.2.4"
   flutter_test:
     dependency: "direct dev"
     description: flutter
@@ -244,7 +244,7 @@ packages:
       name: xml
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "6.0.1"
+    version: "6.1.0"
   yaml:
     dependency: transitive
     description:

diff --git a/lib/cli_commands.dart b/lib/cli_commands.dart
@@ -65,12 +65,16 @@ void createSplashByConfig(Map<String, dynamic> config) {
       _checkImageExists(config: config, parameter: 'branding_android');
   final String? brandingImageIos =
       _checkImageExists(config: config, parameter: 'branding_ios');
+  final String? brandingImageWeb =
+      _checkImageExists(config: config, parameter: 'branding_web');
   final String? brandingDarkImage =
       _checkImageExists(config: config, parameter: 'branding_dark');
   final String? brandingDarkImageAndroid =
       _checkImageExists(config: config, parameter: 'branding_dark_android');
   final String? brandingDarkImageIos =
       _checkImageExists(config: config, parameter: 'branding_dark_ios');
+  final String? brandingDarkImageWeb =
+      _checkImageExists(config: config, parameter: 'branding_dark_web');
   final String? color = parseColor(config['color']);
   final String? darkColor = parseColor(config['color_dark']);
   final String? backgroundImage =
@@ -84,7 +88,9 @@ void createSplashByConfig(Map<String, dynamic> config) {
   final String? darkBackgroundImage =
       _checkImageExists(config: config, parameter: 'background_image_dark');
   final String? darkBackgroundImageAndroid = _checkImageExists(
-      config: config, parameter: 'background_image_dark_android');
+    config: config,
+    parameter: 'background_image_dark_android',
+  );
   final String? darkBackgroundImageIos =
       _checkImageExists(config: config, parameter: 'background_image_dark_ios');
   final String? darkBackgroundImageWeb =
@@ -178,9 +184,12 @@ void createSplashByConfig(Map<String, dynamic> config) {
         darkImagePath: darkImageWeb ?? darkImage,
         backgroundImage: backgroundImageWeb ?? backgroundImage,
         darkBackgroundImage: darkBackgroundImageWeb ?? darkBackgroundImage,
+        brandingImagePath: brandingImageWeb ?? brandingImage,
+        brandingDarkImagePath: brandingDarkImageWeb ?? brandingDarkImage,
         color: color,
         darkColor: darkColor,
         imageMode: webImageMode,
+        brandingMode: brandingGravity,
       );
     } else {
       print('Web folder not found, skipping web splash update...');

diff --git a/lib/templates.dart b/lib/templates.dart
@@ -470,6 +470,26 @@ body {
   object-fit: cover;
 }
 
+.bottom {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  -ms-transform: translate(-50%, 0);
+  transform: translate(-50%, 0);
+}
+
+.bottomLeft {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+.bottomRight {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+
 @media (prefers-color-scheme: dark) {
   body {
     margin:0;
@@ -489,12 +509,24 @@ const List<String> _indexHtmlPicture = [
   '  </picture>',
 ];
 
+const List<String> _indexHtmlBrandingPicture = [
+  '  <picture id="splash-branding">',
+  '    <source srcset="splash/img/branding-1x.png 1x, splash/img/branding-2x.png 2x, splash/img/branding-3x.png 3x, splash/img/branding-4x.png 4x" media="(prefers-color-scheme: light)">',
+  '    <source srcset="splash/img/branding-dark-1x.png 1x, splash/img/branding-dark-2x.png 2x, splash/img/branding-dark-3x.png 3x, splash/img/branding-dark-4x.png 4x" media="(prefers-color-scheme: dark)">',
+  '    <img class="[BRANDINGMODE]" aria-hidden="true" src="splash/img/branding-1x.png alt=""/>',
+  '  </picture>',
+];
+
 const String _webJS = '''
 function removeSplashFromWeb() {
   const elem = document.getElementById("splash");
   if (elem) {
     elem.remove();
   }
+  const elem2 = document.getElementById("splash-branding");
+  if (elem2) {
+    elem2.remove();
+  }
   document.body.style.background = "transparent";
 }
 ''';
diff --git a/lib/web.dart b/lib/web.dart
@@ -13,7 +13,10 @@ void _createWebSplash({
   required String? darkImagePath,
   required String? color,
   required String? darkColor,
+  required String? brandingImagePath,
+  required String? brandingDarkImagePath,
   required String imageMode,
+  required String brandingMode,
   required String? backgroundImage,
   required String? darkBackgroundImage,
 }) {
@@ -41,6 +44,39 @@ void _createWebSplash({
       _WebLaunchImageTemplate(fileName: 'dark-4x.png', pixelDensity: 4),
     ],
   );
+
+  brandingDarkImagePath ??= brandingImagePath;
+  createWebImages(
+    imagePath: brandingImagePath,
+    webSplashImages: [
+      _WebLaunchImageTemplate(fileName: 'branding-1x.png', pixelDensity: 1),
+      _WebLaunchImageTemplate(fileName: 'branding-2x.png', pixelDensity: 2),
+      _WebLaunchImageTemplate(fileName: 'branding-3x.png', pixelDensity: 3),
+      _WebLaunchImageTemplate(fileName: 'branding-4x.png', pixelDensity: 4),
+    ],
+  );
+  createWebImages(
+    imagePath: brandingDarkImagePath,
+    webSplashImages: [
+      _WebLaunchImageTemplate(
+        fileName: 'branding-dark-1x.png',
+        pixelDensity: 1,
+      ),
+      _WebLaunchImageTemplate(
+        fileName: 'branding-dark-2x.png',
+        pixelDensity: 2,
+      ),
+      _WebLaunchImageTemplate(
+        fileName: 'branding-dark-3x.png',
+        pixelDensity: 3,
+      ),
+      _WebLaunchImageTemplate(
+        fileName: 'branding-dark-4x.png',
+        pixelDensity: 4,
+      ),
+    ],
+  );
+
   createBackgroundImages(
     backgroundImage: backgroundImage,
     darkBackgroundImage: darkBackgroundImage,
@@ -52,7 +88,12 @@ void _createWebSplash({
     backgroundImage: backgroundImage,
   );
   _createSplashJs();
-  updateIndex(imageMode: imageMode, imagePath: imagePath);
+  updateIndex(
+    imageMode: imageMode,
+    imagePath: imagePath,
+    brandingMode: brandingMode,
+    brandingImagePath: brandingImagePath,
+  );
 }
 
 void createBackgroundImages({
@@ -163,7 +204,12 @@ void _createSplashJs() {
   file.writeAsStringSync(_webJS);
 }
 
-void updateIndex({required String imageMode, required String? imagePath}) {
+void updateIndex({
+  required String imageMode,
+  required String? imagePath,
+  required String brandingMode,
+  required String? brandingImagePath,
+}) {
   print('[Web] Updating index.html');
   final webIndex = File(_webIndex);
   final lines = webIndex.readAsLinesSync();
@@ -174,6 +220,7 @@ void updateIndex({required String imageMode, required String? imagePath}) {
   var headCloseTagLine = 0;
   var bodyOpenTagLine = 0;
   var existingPictureLine = 0;
+  var existingBrandingPictureLine = 0;
 
   const styleSheetLink =
       '<link rel="stylesheet" type="text/css" href="splash/style.css">';
@@ -199,6 +246,8 @@ void updateIndex({required String imageMode, required String? imagePath}) {
       bodyOpenTagLine = x;
     } else if (line.contains('<picture id="splash">')) {
       existingPictureLine = x;
+    } else if (line.contains('<picture id="splash-branding">')) {
+      existingBrandingPictureLine = x;
     }
   }
 
@@ -233,5 +282,26 @@ void updateIndex({required String imageMode, required String? imagePath}) {
       );
     }
   }
+
+  if (existingBrandingPictureLine == 0) {
+    if (brandingImagePath != null) {
+      for (var x = _indexHtmlBrandingPicture.length - 1; x >= 0; x--) {
+        lines[bodyOpenTagLine + 1] =
+            '${_indexHtmlBrandingPicture[x].replaceFirst('[BRANDINGMODE]', brandingMode)}\n${lines[bodyOpenTagLine + 1]}';
+      }
+    }
+  } else {
+    if (brandingImagePath != null) {
+      for (var x = 0; x < _indexHtmlBrandingPicture.length; x++) {
+        lines[existingBrandingPictureLine + x] = _indexHtmlBrandingPicture[x]
+            .replaceFirst('[BRANDINGMODE]', brandingMode);
+      }
+    } else {
+      lines.removeRange(
+        existingBrandingPictureLine,
+        existingBrandingPictureLine + _indexHtmlBrandingPicture.length,
+      );
+    }
+  }
   webIndex.writeAsStringSync(lines.join('\n'));
 }
diff --git a/pubspec.yaml b/pubspec.yaml
@@ -24,7 +24,7 @@ dependencies:
   yaml: ^3.1.1
 
 dev_dependencies:
-  flutter_lints: ^1.0.4
+  flutter_lints: ^2.0.1
   flutter_test:
     sdk: flutter