Splash / Icon / Branding

README.md

@@ -1,3 +1,5 @@
+![Header](.github/assets/woo_app_banner.png)
+
 # WooCommerceMobile
 
 [![Version](https://img.shields.io/badge/Version-0.0.1-green)](https://github.com/ShiftHackZ/WooCommerceMobile/releases)

android/app/build.gradle

@@ -33,9 +33,8 @@ android {
     }
 
     defaultConfig {
-        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
         applicationId "com.shifthackz.wooapp"
-        minSdkVersion 20
+        minSdkVersion 21
         targetSdkVersion 33
         versionCode flutterVersionCode.toInteger()
         versionName flutterVersionName
@@ -56,4 +55,5 @@ flutter {
 
 dependencies {
     implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
+    implementation 'androidx.core:core-splashscreen:1.0.0'
 }

android/app/src/main/AndroidManifest.xml

@@ -12,7 +12,7 @@
             android:exported="true"
             android:hardwareAccelerated="true"
             android:launchMode="singleTop"
-            android:theme="@style/LaunchTheme"
+            android:theme="@style/Theme.App.Starting"
             android:windowSoftInputMode="adjustResize">
             <!-- Specifies an Android theme to apply to this Activity as soon as
                  the Android process has started. This theme is visible to the user
@@ -26,9 +26,9 @@
                  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" />
+<!--            <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" />

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>

android/app/src/main/res/values-night/styles.xml

@@ -1,17 +1,6 @@
 <?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>

android/app/src/main/res/values/ic_launcher_background.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="ic_launcher_background">#FDFCFF</color>
+</resources>

android/app/src/main/res/values/styles.xml

@@ -1,18 +1,14 @@
 <?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 off -->
-    <style name="LaunchTheme" parent="@android:style/Theme.Light.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.Light.NoTitleBar">
         <item name="android:windowBackground">?android:colorBackground</item>
     </style>
+
+    <style name="Theme.App.Starting" parent="Theme.SplashScreen">
+        <item name="windowSplashScreenBackground">#fdfcff</item>
+        <item name="windowSplashScreenAnimatedIcon">@mipmap/ic_launcher</item>
+        <item name="windowSplashScreenAnimationDuration">200</item>
+        <item name="postSplashScreenTheme">@style/NormalTheme</item>
+    </style>
 </resources>

assets/splash.json

@@ -0,0 +1 @@
+{"v":"4.8.0","meta":{"g":"LottieFiles AE 1.0.0","a":"","k":"","d":"","tc":"#FFFFFF"},"fr":29.9700012207031,"ip":0,"op":60.0000024438501,"w":100,"h":100,"nm":"loader","ddd":0,"assets":[{"id":"comp_0","layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.836]},"o":{"x":[0.167],"y":[0.164]},"t":0,"s":[0]},{"t":59.0000024031193,"s":[360]}],"ix":10},"p":{"a":0,"k":[62,62,0],"ix":2},"a":{"a":0,"k":[0.576,4.576,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[89.152,89.152],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[50.1]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":30,"s":[70.1]},{"t":59.0000024031193,"s":[50.1]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[49.9]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":30,"s":[29.9]},{"t":59.0000024031193,"s":[49.9]}],"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.836]},"o":{"x":[0.167],"y":[0.164]},"t":0,"s":[0]},{"t":59.0000024031193,"s":[360]}],"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0.125490196078,0.388235324037,0.607843137255,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":18,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0.576,4.576],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":90.0000036657751,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Shape Layer 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.836]},"o":{"x":[0.167],"y":[0.164]},"t":0,"s":[0]},{"t":59.0000024031193,"s":[360]}],"ix":10},"p":{"a":0,"k":[62,62,0],"ix":2},"a":{"a":0,"k":[0.576,4.576,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[89.152,89.152],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[50.1]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":30,"s":[70.1]},{"t":59.0000024031193,"s":[50.1]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[49.9]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":30,"s":[19.9]},{"t":59.0000024031193,"s":[49.9]}],"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.836]},"o":{"x":[0.167],"y":[0.164]},"t":0,"s":[0]},{"t":59.0000024031193,"s":[360]}],"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0.235294132607,0.682352941176,0.639215686275,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":18,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0.576,4.576],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":90.0000036657751,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Shape Layer 4","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.836]},"o":{"x":[0.167],"y":[0.164]},"t":0,"s":[0]},{"t":59.0000024031193,"s":[360]}],"ix":10},"p":{"a":0,"k":[62,62,0],"ix":2},"a":{"a":0,"k":[0.576,4.576,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[89.152,89.152],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[50.1]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":30,"s":[70.1]},{"t":59.0000024031193,"s":[50.1]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[49.9]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":30,"s":[9.9]},{"t":59.0000024031193,"s":[49.9]}],"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.836]},"o":{"x":[0.167],"y":[0.164]},"t":0,"s":[0]},{"t":59.0000024031193,"s":[360]}],"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0.964705942191,0.835294177485,0.360784313725,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":18,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0.576,4.576],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":90.0000036657751,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.836]},"o":{"x":[0.167],"y":[0.164]},"t":0,"s":[0]},{"t":59.0000024031193,"s":[360]}],"ix":10},"p":{"a":0,"k":[62,62,0],"ix":2},"a":{"a":0,"k":[0.576,4.576,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[89.152,89.152],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[50.1]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":30,"s":[70.1]},{"t":59.0000024031193,"s":[50.1]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[49.9]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":30,"s":[0]},{"t":59.0000024031193,"s":[49.9]}],"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.836]},"o":{"x":[0.167],"y":[0.164]},"t":0,"s":[0]},{"t":59.0000024031193,"s":[360]}],"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0.929411824544,0.333333333333,0.231372563979,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":18,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0.576,4.576],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":90.0000036657751,"st":0,"bm":0}]}],"layers":[{"ddd":0,"ind":1,"ty":0,"nm":"Pre-comp 1","refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":180,"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2},"a":{"a":0,"k":[62,62,0],"ix":1},"s":{"a":0,"k":[75,75,100],"ix":6}},"ao":0,"w":124,"h":124,"ip":0,"op":60.0000024438501,"st":0,"bm":0}],"markers":[]}

assets/translations/en.json

@@ -192,5 +192,8 @@
   "product_review_empty_subtitle": "Be the first to leave a review about the product, your opinion is important to us",
   "thank_you": "Thank you!",
   "review_submit_success": "Your review submitted successfully. It will be published after verification by a moderator.",
-  "review_submit_error": "There was some issue while posting your review. Please, try again."
+  "review_submit_error": "There was some issue while posting your review. Please, try again.",
+  "splash_status_communicating": "Communicating with server ...",
+  "splash_status_cache": "Initializing cache ...",
+  "splash_status_run": "Starting app \uD83C\uDF89"
 }

assets/translations/ru.json

@@ -192,5 +192,8 @@
   "product_review_empty_subtitle": "Будьте первым, кто оставит отзыв о товаре, ваше мнение очень важно для нас",
   "thank_you": "Спасибо!",
   "review_submit_success": "Ваш отзыв успешно отправлен. Он будет опубликован после одобрения модератором.",
-  "review_submit_error": "При отправке вашего отзыва возникла ошибка. Пожалуйста, попробуйте чуть позже."
+  "review_submit_error": "При отправке вашего отзыва возникла ошибка. Пожалуйста, попробуйте чуть позже.",
+  "splash_status_communicating": "Соединение с сервером ...",
+  "splash_status_cache": "Инициализация кеша ...",
+  "splash_status_run": "Запускаем приложение \uD83C\uDF89"
 }

assets/translations/uk.json

@@ -192,5 +192,8 @@
   "product_review_empty_subtitle": "Будьте першим, хто залишить відгук про товар, ваша думка важлива для нас",
   "thank_you": "Дякуємо!",
   "review_submit_success": "Ваш відгук успішно відправлено. Відгук буде опубліковано після перевірки модератором.",
-  "review_submit_error": "Під час відправки вашого відгуку виникла помилка. Будь-ласка, спробуйте ще раз пізніше."
+  "review_submit_error": "Під час відправки вашого відгуку виникла помилка. Будь-ласка, спробуйте ще раз пізніше.",
+  "splash_status_communicating": "Завантаження данних ...",
+  "splash_status_cache": "Ініціалізація кешу ...",
+  "splash_status_run": "Запускаємо додаток \uD83C\uDF89"
 }

lib/screens/splash/splash.dart

@@ -2,7 +2,8 @@ import 'dart:async';
 
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter/widgets.dart';
+import 'package:lottie/lottie.dart';
+import 'package:wooapp/config/theme.dart';
 import 'package:wooapp/database/database.dart';
 import 'package:wooapp/datasource/category_attribute_data_source.dart';
 import 'package:wooapp/locator.dart';
@@ -14,52 +15,83 @@ class SplashScreen extends StatefulWidget {
 }
 
 class _SplashState extends State<SplashScreen> {
-  final CategoryAttributeDateSource _ds = locator<CategoryAttributeDateSource>();
+  final CategoryAttributeDateSource _ds =
+      locator<CategoryAttributeDateSource>();
   final AppDb _db = locator<AppDb>();
 
+  String _status = '';
+
   startTimer() async {
-    var _duration = Duration(seconds: 3);
+    var _duration = Duration(seconds: 1);
     return Timer(_duration, navigationPage);
   }
 
   Future navigationPage() async {
-    Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) => HomeScreen()));
+    Navigator.pushReplacement(
+        context, MaterialPageRoute(builder: (context) => HomeScreen()));
   }
 
   @override
   void initState() {
     super.initState();
-    _ds.getAttributes().then((attrs) {
-      for (var attr in attrs) {
-        _ds.getTerms(attr.id).then((terms) {
-          _db.saveFilter(attr, terms);
-        });
-      }
-    });
-    startTimer();
+    preFetch();
   }
 
   @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      backgroundColor: Colors.blue,
-      body: Center(
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: [
-            Padding(padding: EdgeInsets.only(top: 20.0)),
-            Text(
-              'app_name',
-              style: TextStyle(fontSize: 20.0, color: Colors.white),
-            ).tr(),
-            Padding(padding: EdgeInsets.only(top: 20.0)),
-            CircularProgressIndicator(
-              backgroundColor: Colors.white,
-              strokeWidth: 1,
-            )
-          ],
+  Widget build(BuildContext context) => Scaffold(
+        backgroundColor: WooAppTheme.colorCommonBackground,
+        body: Center(
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            crossAxisAlignment: CrossAxisAlignment.center,
+            children: [
+              Spacer(),
+              Lottie.asset('assets/splash.json'),
+              SizedBox(height: 20),
+              Text(
+                'app_name',
+                style: TextStyle(
+                  fontSize: 32.0,
+                  color: WooAppTheme.colorCommonText,
+                  fontWeight: FontWeight.w300,
+                ),
+              ).tr(),
+              Spacer(),
+              Text(
+                _status,
+                style: TextStyle(
+                  color: WooAppTheme.colorSecondaryForeground,
+                  fontSize: 12,
+                ),
+              ),
+              SizedBox(height: 20),
+            ],
+          ),
         ),
-      ),
-    );
+      );
+
+  void preFetch() async {
+    try {
+      setState(() {
+        _status = tr('splash_status_communicating');
+      });
+      var attrs = await _ds.getAttributes();
+      setState(() {
+        _status = tr('splash_status_cache');
+      });
+      for (var attr in attrs) {
+        var terms = await _ds.getTerms(attr.id);
+        await _db.saveFilter(attr, terms);
+      }
+      setState(() {
+        _status = tr('splash_status_run');
+      });
+    } catch (e) {
+      setState(() {
+        _status = '';
+      });
+    } finally {
+      startTimer();
+    }
   }
 }