Merge pull request #223 from TR-SLimey/navbar-tweaks

Android system UI tweaks
syphon-org · Feb 3, 2021 · 6727ef7 · 6727ef7
2 parents 7dd7e5d + aa7134a
commit 6727ef7
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 10 deletions.
diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -88,4 +88,5 @@ flutter {
 
 dependencies {
     implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
+    implementation 'com.google.android.material:material:1.3.0-rc01'
 }
diff --git a/android/app/src/main/res/values/colors.xml b/android/app/src/main/res/values/colors.xml
@@ -1,4 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
     <color name="ic_launcher_background">#34C7B5</color>
+    <color name="primary">#34C7B5</color>
 </resources>
diff --git a/android/app/src/main/res/values/styles.xml b/android/app/src/main/res/values/styles.xml
@@ -1,15 +1,19 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
+    <style name="LaunchTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
         <!-- Show a splash screen on the activity. Automatically removed when
              Flutter draws its first frame -->
-        <item name="android:windowFullscreen">true</item> 
         <item name="android:windowBackground">@drawable/launch_background</item>
-    </style> 
-    <style name="NormalTheme" parent="@android:style/Theme.Black.NoTitleBar">
-        <!-- Show a splash screen on the activity. Automatically removed when
-             Flutter draws its first frame --> 
+
+        <item name="android:statusBarColor">@color/primary</item>
+        <item name="android:navigationBarColor">@color/primary</item>
+    </style>
+    <style name="NormalTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
         <item name="android:windowBackground">@drawable/normal_background</item>
+
+        <!-- This is later overridden by the app theme, but setting to the primary color here
+             prevents weird flashes -->
+        <item name="android:statusBarColor">@color/primary</item>
+        <item name="android:navigationBarColor">@color/primary</item>
     </style>
-    <color name="primary">#34C7B5</color> 
 </resources>
diff --git a/lib/main.dart b/lib/main.dart
@@ -21,6 +21,8 @@ import 'package:sembast/sembast.dart';
 import 'package:syphon/cache/index.dart';
 import 'package:syphon/global/formatters.dart';
 import 'package:syphon/global/print.dart';
+import 'package:flutter/services.dart';
+import 'package:syphon/global/colours.dart';
 import 'package:syphon/storage/index.dart';
 
 // Project imports:
@@ -145,6 +147,33 @@ class SyphonState extends State<Syphon> with WidgetsBindingObserver {
     WidgetsBinding.instance.addObserver(this);
     super.initState();
 
+    // set system status bar to match theme.
+    // sadly the navbar doesn't play nicely with just being transparent
+    // so will also be updated on theme change
+    final currentTheme = store.state.settingsStore.theme;
+    var themeNavbarColour;
+    var themeNavbarIconBrightness;
+    switch (currentTheme) {
+      case (ThemeType.LIGHT):
+        themeNavbarColour = Colours.whiteDefault;
+        themeNavbarIconBrightness = Brightness.dark;
+        break;
+      case (ThemeType.NIGHT):
+        themeNavbarColour = Colours.blackFull;
+        themeNavbarIconBrightness = Brightness.light;
+        break;
+      default:
+        themeNavbarColour = Colours.blackDefault;
+        themeNavbarIconBrightness = Brightness.light;
+    }
+    SystemChrome.setSystemUIOverlayStyle(
+      SystemUiOverlayStyle(
+        statusBarColor: Colors.transparent,
+        systemNavigationBarColor: Color(themeNavbarColour),
+        systemNavigationBarIconBrightness: themeNavbarIconBrightness,
+      ),
+    );
+
     store.dispatch(initDeepLinks());
     store.dispatch(initClientSecret());
     store.dispatch(startAuthObserver());

diff --git a/lib/store/settings/actions.dart b/lib/store/settings/actions.dart
@@ -5,6 +5,8 @@ import 'package:flutter/material.dart';
 import 'package:flutter_dotenv/flutter_dotenv.dart';
 import 'package:redux/redux.dart';
 import 'package:redux_thunk/redux_thunk.dart';
+import 'package:flutter/services.dart';
+import 'package:syphon/global/colours.dart';
 
 // Project imports:
 import 'package:syphon/global/libs/matrix/auth.dart';
@@ -331,10 +333,34 @@ ThunkAction<AppState> incrementTheme() {
   return (Store<AppState> store) async {
     final currentTheme = store.state.settingsStore.theme;
     final themeIndex = ThemeType.values.indexOf(currentTheme);
+    final nextTheme = ThemeType.values[
+      (themeIndex + 1) % ThemeType.values.length
+    ];
+
+    // update system navbar theme to match
+    var nextThemeNavbarColour;
+    var nextThemeNavbarIconBrightness;
+    switch (nextTheme) {
+      case (ThemeType.LIGHT):
+        nextThemeNavbarColour = Colours.whiteDefault;
+        nextThemeNavbarIconBrightness = Brightness.dark;
+        break;
+      case (ThemeType.NIGHT):
+        nextThemeNavbarColour = Colours.blackFull;
+        nextThemeNavbarIconBrightness = Brightness.light;
+        break;
+      default:
+        nextThemeNavbarColour = Colours.blackDefault;
+        nextThemeNavbarIconBrightness = Brightness.light;
+    }
+    SystemChrome.setSystemUIOverlayStyle(
+      SystemUiOverlayStyle(
+        systemNavigationBarColor: Color(nextThemeNavbarColour),
+        systemNavigationBarIconBrightness: nextThemeNavbarIconBrightness,
+      ),
+    );
 
-    store.dispatch(SetTheme(
-      ThemeType.values[(themeIndex + 1) % ThemeType.values.length],
-    ));
+    store.dispatch(SetTheme(nextTheme));
   };
 }