chore: optimize android UI (#4498)

frontend/appflowy_flutter/lib/mobile/presentation/favorite/mobile_favorite_page.dart

@@ -1,3 +1,5 @@
+import 'dart:io';
+
 import 'package:appflowy/mobile/presentation/favorite/mobile_favorite_folder.dart';
 import 'package:appflowy/mobile/presentation/home/mobile_home_page_header.dart';
 import 'package:appflowy/startup/startup.dart';
@@ -73,7 +75,11 @@ class MobileFavoritePage extends StatelessWidget {
       children: [
         // Header
         Padding(
-          padding: const EdgeInsets.symmetric(horizontal: 16),
+          padding: EdgeInsets.only(
+            left: 16,
+            right: 16,
+            top: Platform.isAndroid ? 8.0 : 0.0,
+          ),
           child: MobileHomePageHeader(
             userProfile: userProfile,
           ),

frontend/appflowy_flutter/lib/mobile/presentation/home/mobile_home_page.dart

@@ -1,3 +1,5 @@
+import 'dart:io';
+
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/mobile/presentation/home/home.dart';
@@ -80,10 +82,13 @@ class MobileHomePage extends StatelessWidget {
   Widget build(BuildContext context) {
     return Column(
       children: [
-        // TODO: header + option icon button
         // Header
         Padding(
-          padding: const EdgeInsets.symmetric(horizontal: 16),
+          padding: EdgeInsets.only(
+            left: 16,
+            right: 16,
+            top: Platform.isAndroid ? 8.0 : 0.0,
+          ),
           child: MobileHomePageHeader(
             userProfile: userProfile,
           ),

frontend/appflowy_flutter/lib/mobile/presentation/home/mobile_home_page_header.dart

@@ -27,7 +27,7 @@ class MobileHomePageHeader extends StatelessWidget {
         builder: (context, state) {
           final userIcon = state.userProfile.iconUrl;
           return ConstrainedBox(
-            constraints: const BoxConstraints(minHeight: 48),
+            constraints: const BoxConstraints(minHeight: 52),
             child: Row(
               children: [
                 _UserIcon(userIcon: userIcon),

frontend/appflowy_flutter/lib/startup/tasks/app_widget.dart

@@ -1,4 +1,4 @@
-import 'package:flutter/material.dart';
+import 'dart:io';
 
 import 'package:appflowy/mobile/application/mobile_router.dart';
 import 'package:appflowy/plugins/document/presentation/more/cubit/document_appearance_cubit.dart';
@@ -17,6 +17,8 @@ import 'package:appflowy_editor/appflowy_editor.dart' hide Log;
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:go_router/go_router.dart';
 
@@ -173,28 +175,56 @@ class _ApplicationWidgetState extends State<ApplicationWidget> {
           });
         },
         child: BlocBuilder<AppearanceSettingsCubit, AppearanceSettingsState>(
-          builder: (context, state) => MaterialApp.router(
+          builder: (context, state) {
-            builder: (context, child) => MediaQuery(
+            _setSystemOverlayStyle(state);
-              // use the 1.0 as the textScaleFactor to avoid the text size
+            return MaterialApp.router(
-              //  affected by the system setting.
+              builder: (context, child) => MediaQuery(
-              data: MediaQuery.of(context).copyWith(
+                // use the 1.0 as the textScaleFactor to avoid the text size
-                textScaler: const TextScaler.linear(1),
+                //  affected by the system setting.
+                data: MediaQuery.of(context).copyWith(
+                  textScaler: const TextScaler.linear(1),
+                ),
+                child: overlayManagerBuilder(context, child),
               ),
-              child: overlayManagerBuilder()(context, child),
+              debugShowCheckedModeBanner: false,
-            ),
+              theme: state.lightTheme,
-            debugShowCheckedModeBanner: false,
+              darkTheme: state.darkTheme,
-            theme: state.lightTheme,
+              themeMode: state.themeMode,
-            darkTheme: state.darkTheme,
+              localizationsDelegates: context.localizationDelegates,
-            themeMode: state.themeMode,
+              supportedLocales: context.supportedLocales,
-            localizationsDelegates: context.localizationDelegates,
+              locale: state.locale,
-            supportedLocales: context.supportedLocales,
+              routerConfig: routerConfig,
-            locale: state.locale,
+            );
-            routerConfig: routerConfig,
+          },
-          ),
         ),
       ),
     );
   }
+
+  void _setSystemOverlayStyle(AppearanceSettingsState state) {
+    if (Platform.isAndroid) {
+      SystemUiOverlayStyle style = SystemUiOverlayStyle.dark;
+      final themeMode = state.themeMode;
+      if (themeMode == ThemeMode.dark) {
+        style = SystemUiOverlayStyle.light;
+      } else if (themeMode == ThemeMode.light) {
+        style = SystemUiOverlayStyle.dark;
+      } else {
+        final brightness = Theme.of(context).brightness;
+        // reverse the brightness of the system status bar.
+        style = brightness == Brightness.dark
+            ? SystemUiOverlayStyle.light
+            : SystemUiOverlayStyle.dark;
+      }
+
+      SystemChrome.setSystemUIOverlayStyle(
+        style.copyWith(
+          statusBarColor: Colors.transparent,
+          systemNavigationBarColor: Colors.transparent,
+        ),
+      );
+    }
+  }
 }
 
 class AppGlobals {

frontend/appflowy_flutter/packages/flowy_infra_ui/example/lib/main.dart

@@ -13,10 +13,10 @@ class ExampleApp extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return MaterialApp(
+    return const MaterialApp(
-      builder: overlayManagerBuilder(),
+      builder: overlayManagerBuilder,
       title: "Flowy Infra Title",
-      home: const HomeScreen(),
+      home: HomeScreen(),
     );
   }
 }

frontend/appflowy_flutter/packages/flowy_infra_ui/lib/src/flowy_overlay/flowy_overlay.dart

@@ -67,11 +67,9 @@ class FlowyOverlayStyle {
 final GlobalKey<FlowyOverlayState> _key = GlobalKey<FlowyOverlayState>();
 
 /// Invoke this method in app generation process
-TransitionBuilder overlayManagerBuilder() {
+Widget overlayManagerBuilder(BuildContext context, Widget? child) {
-  return (context, child) {
+  assert(child != null, 'Child can\'t be null.');
-    assert(child != null, 'Child can\'t be null.');
+  return FlowyOverlay(key: _key, child: child!);
-    return FlowyOverlay(key: _key, child: child!);
-  };
 }
 
 abstract mixin class FlowyOverlayDelegate {