Move system_overlay_style from AppBar to Theme (#2667)

* move systemOverlayStyle to Theme * Introduced SystemUiOverlayStyleTheme * Using `AnnotatedRegion` to apply system overlay style * Cleanup --------- Co-authored-by: Feodor Fitsner <[email protected]>
flet-dev · Feb 17, 2024 · 8aa0f1b · 8aa0f1b
1 parent 2ee9e60
commit 8aa0f1b
Show file tree

Hide file tree

Showing 7 changed files with 105 additions and 75 deletions.
diff --git a/packages/flet/lib/src/controls/app_bar.dart b/packages/flet/lib/src/controls/app_bar.dart
@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 
 import '../models/control.dart';
 import '../utils/colors.dart';
-import '../utils/overlay_style.dart';
+import '../utils/theme.dart';
 import 'create_control.dart';
 import 'cupertino_app_bar.dart';
 import 'flet_store_mixin.dart';
@@ -57,8 +57,6 @@ class AppBarControl extends StatelessWidget
           Theme.of(context), control.attrString("color", "")!);
       var bgcolor = HexColor.fromString(
           Theme.of(context), control.attrString("bgcolor", "")!);
-      var systemOverlayStyle = parseSystemOverlayStyle(
-          Theme.of(context), control, "systemOverlayStyle");
 
       return AppBar(
         leading: leadingCtrls.isNotEmpty
@@ -80,7 +78,9 @@ class AppBarControl extends StatelessWidget
             .map((c) => createControl(control, c.id, control.isDisabled,
                 parentAdaptive: adaptive))
             .toList(),
-        systemOverlayStyle: systemOverlayStyle,
+        systemOverlayStyle: Theme.of(context)
+            .extension<SystemUiOverlayStyleTheme>()
+            ?.systemUiOverlayStyle,
       );
     });
   }

diff --git a/packages/flet/lib/src/controls/page.dart b/packages/flet/lib/src/controls/page.dart
@@ -937,6 +937,15 @@ class _ViewControlState extends State<ViewControl> with FletStoreMixin {
               ...widget.overlayWidgets
             ]);
 
+            var materialTheme = widget.themeMode == ThemeMode.light ||
+                    ((widget.themeMode == null ||
+                            widget.themeMode == ThemeMode.system) &&
+                        widget.brightness == Brightness.light)
+                ? parseTheme(widget.parent, "theme", Brightness.light)
+                : widget.parent.attrString("darkTheme") != null
+                    ? parseTheme(widget.parent, "darkTheme", Brightness.dark)
+                    : parseTheme(widget.parent, "theme", Brightness.dark);
+
             Widget scaffold = Scaffold(
               key: bar == null || bar is AppBarControl ? scaffoldKey : null,
               backgroundColor: HexColor.fromString(
@@ -983,6 +992,18 @@ class _ViewControlState extends State<ViewControl> with FletStoreMixin {
               floatingActionButtonLocation: fabLocation,
             );
 
+            var systemOverlayStyle =
+                materialTheme.extension<SystemUiOverlayStyleTheme>();
+
+            if (systemOverlayStyle != null &&
+                systemOverlayStyle.systemUiOverlayStyle != null &&
+                bar == null) {
+              scaffold = AnnotatedRegion<SystemUiOverlayStyle>(
+                value: systemOverlayStyle.systemUiOverlayStyle!,
+                child: scaffold,
+              );
+            }
+
             if (bar is CupertinoAppBarControl) {
               scaffold = CupertinoPageScaffold(
                   key: scaffoldKey,
@@ -1009,15 +1030,7 @@ class _ViewControlState extends State<ViewControl> with FletStoreMixin {
               );
             } else if (widget.widgetsDesign == PageDesign.cupertino) {
               scaffold = Theme(
-                data: widget.themeMode == ThemeMode.light ||
-                        ((widget.themeMode == null ||
-                                widget.themeMode == ThemeMode.system) &&
-                            widget.brightness == Brightness.light)
-                    ? parseTheme(widget.parent, "theme", Brightness.light)
-                    : widget.parent.attrString("darkTheme") != null
-                        ? parseTheme(
-                            widget.parent, "darkTheme", Brightness.dark)
-                        : parseTheme(widget.parent, "theme", Brightness.dark),
+                data: materialTheme,
                 child: scaffold,
               );
             }

diff --git a/packages/flet/lib/src/utils/overlay_style.dart b/packages/flet/lib/src/utils/overlay_style.dart
@@ -1,43 +1,49 @@
-import 'dart:convert';
-
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 
-import '../models/control.dart';
 import '../utils/numbers.dart';
 import 'colors.dart';
 
-SystemUiOverlayStyle? parseSystemOverlayStyle(
-    ThemeData theme, Control control, String propName) {
-  dynamic j;
-  var v = control.attrString(propName, null);
-  if (v == null) {
-    return null;
-  }
-  j = json.decode(v);
-  return overlayStyleFromJson(theme, j);
-}
-
 SystemUiOverlayStyle overlayStyleFromJson(
-    ThemeData theme, Map<String, dynamic> json) {
+    ThemeData? theme, Map<String, dynamic> json, Brightness? brightness) {
   return SystemUiOverlayStyle(
-    statusBarColor: json["status_bar_color"] != null
-        ? HexColor.fromString(theme, json["status_bar_color"] ?? "")
-        : null,
-    systemNavigationBarColor: json["system_navigation_bar_color"] != null
-        ? HexColor.fromString(theme, json["system_navigation_bar_color"] ?? "")
-        : null,
-    systemNavigationBarDividerColor:
-        json["system_navigation_bar_divider_color"] != null
-            ? HexColor.fromString(theme, json["system_navigation_bar_divider_color"] ?? "")
-            : null,
-    systemStatusBarContrastEnforced:
-        json["enforce_system_status_bar_contrast"] != null
-            ? parseBool(json["enforce_system_status_bar_contrast"])
-            : null,
-    systemNavigationBarContrastEnforced:
-        json["enforce_system_navigation_bar_contrast"] != null
-            ? parseBool(json["enforce_system_navigation_bar_contrast"])
-            : null,
-  );
+      statusBarColor: json["status_bar_color"] != null
+          ? HexColor.fromString(theme, json["status_bar_color"] ?? "")
+          : null,
+      systemNavigationBarColor: json["system_navigation_bar_color"] != null
+          ? HexColor.fromString(
+              theme, json["system_navigation_bar_color"] ?? "")
+          : null,
+      systemNavigationBarDividerColor:
+          json["system_navigation_bar_divider_color"] != null
+              ? HexColor.fromString(
+                  theme, json["system_navigation_bar_divider_color"] ?? "")
+              : null,
+      systemStatusBarContrastEnforced:
+          json["enforce_system_status_bar_contrast"] != null
+              ? parseBool(json["enforce_system_status_bar_contrast"])
+              : null,
+      systemNavigationBarContrastEnforced:
+          json["enforce_system_navigation_bar_contrast"] != null
+              ? parseBool(json["enforce_system_navigation_bar_contrast"])
+              : null,
+      systemNavigationBarIconBrightness: parseBrightness(
+          json["system_navigation_bar_icon_brightness"], brightness),
+      statusBarBrightness:
+          parseBrightness(json["status_bar_brightness"], brightness),
+      statusBarIconBrightness:
+          parseBrightness(json["status_bar_icon_brightness"], brightness));
+}
+
+Brightness? parseBrightness(dynamic value, Brightness? brightness) {
+  if (value == null) {
+    return null;
+  }
+  var b = parseBool(value);
+  Brightness? invertedBrightness = brightness != null
+      ? brightness == Brightness.light
+          ? Brightness.dark
+          : Brightness.light
+      : null;
+  return b ? brightness : invertedBrightness;
 }
diff --git a/packages/flet/lib/src/utils/theme.dart b/packages/flet/lib/src/utils/theme.dart
@@ -2,15 +2,34 @@ import 'dart:convert';
 
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 
 import '../models/control.dart';
 import 'borders.dart';
 import 'colors.dart';
 import 'edge_insets.dart';
 import 'material_state.dart';
 import 'numbers.dart';
+import 'overlay_style.dart';
 import 'text.dart';
 
+class SystemUiOverlayStyleTheme
+    extends ThemeExtension<SystemUiOverlayStyleTheme> {
+  final SystemUiOverlayStyle? systemUiOverlayStyle;
+  SystemUiOverlayStyleTheme(this.systemUiOverlayStyle);
+
+  @override
+  ThemeExtension<SystemUiOverlayStyleTheme> copyWith() {
+    return SystemUiOverlayStyleTheme(systemUiOverlayStyle);
+  }
+
+  @override
+  ThemeExtension<SystemUiOverlayStyleTheme> lerp(
+      covariant ThemeExtension<SystemUiOverlayStyleTheme>? other, double t) {
+    return this;
+  }
+}
+
 CupertinoThemeData parseCupertinoTheme(
     Control control, String propName, Brightness? brightness,
     {ThemeData? parentTheme}) {
@@ -79,7 +98,12 @@ ThemeData themeFromJson(Map<String, dynamic>? json, Brightness? brightness,
       scrollbarTheme: parseScrollBarTheme(theme, json?["scrollbar_theme"]),
       tabBarTheme: parseTabBarTheme(theme, json?["tabs_theme"]));
 
+  var systemOverlayStyle = json?["system_overlay_style"] != null
+      ? overlayStyleFromJson(theme, json?["system_overlay_style"], brightness)
+      : null;
+
   return theme.copyWith(
+      extensions: {SystemUiOverlayStyleTheme(systemOverlayStyle)},
       cupertinoOverrideTheme: fixCupertinoTheme(
           MaterialBasedCupertinoThemeData(materialTheme: theme), theme));
 }

diff --git a/sdk/python/packages/flet-core/src/flet_core/__init__.py b/sdk/python/packages/flet-core/src/flet_core/__init__.py
@@ -20,7 +20,7 @@
 from flet_core.alignment import Alignment
 from flet_core.animated_switcher import AnimatedSwitcher, AnimatedSwitcherTransition
 from flet_core.animation import Animation, AnimationCurve
-from flet_core.app_bar import AppBar, SystemOverlayStyle
+from flet_core.app_bar import AppBar
 from flet_core.audio import Audio
 from flet_core.audio_recorder import AudioEncoder, AudioRecorder
 from flet_core.badge import Badge
@@ -216,6 +216,7 @@
     PageTransitionsTheme,
     PageTransitionTheme,
     ScrollbarTheme,
+    SystemOverlayStyle,
     TabsTheme,
     TextTheme,
     Theme,

diff --git a/sdk/python/packages/flet-core/src/flet_core/app_bar.py b/sdk/python/packages/flet-core/src/flet_core/app_bar.py
@@ -1,21 +1,10 @@
-import dataclasses
-from dataclasses import field
 from typing import List, Optional
 
 from flet_core.adaptive_control import AdaptiveControl
 from flet_core.control import Control, OptionalNumber
 from flet_core.ref import Ref
 
 
-@dataclasses.dataclass
-class SystemOverlayStyle:
-    status_bar_color: Optional[str] = field(default=None)
-    system_navigation_bar_color: Optional[str] = field(default=None)
-    system_navigation_bar_divider_color: Optional[str] = field(default=None)
-    enforce_system_navigation_bar_contrast: Optional[bool] = field(default=None)
-    enforce_system_status_bar_contrast: Optional[bool] = field(default=None)
-
-
 class AppBar(AdaptiveControl):
     """
     A material design app bar.
@@ -71,7 +60,6 @@ def __init__(
         toolbar_height: OptionalNumber = None,
         color: Optional[str] = None,
         bgcolor: Optional[str] = None,
-        system_overlay_style: Optional[SystemOverlayStyle] = None,
         elevation: OptionalNumber = None,
         actions: Optional[List[Control]] = None,
         adaptive: Optional[bool] = None,
@@ -94,16 +82,10 @@ def __init__(
         self.bgcolor = bgcolor
         self.elevation = elevation
         self.actions = actions
-        self.system_overlay_style = system_overlay_style
 
     def _get_control_name(self):
         return "appbar"
 
-    def _before_build_command(self):
-        super()._before_build_command()
-        if dataclasses.is_dataclass(self.__system_overlay_style):
-            self._set_attr_json("systemOverlayStyle", self.__system_overlay_style)
-
     def _get_children(self):
         children = []
         if self.__leading:
@@ -160,15 +142,6 @@ def title(self) -> Optional[Control]:
     def title(self, value: Optional[Control]):
         self.__title = value
 
-    # system_overlay_style
-    @property
-    def system_overlay_style(self) -> Optional[SystemOverlayStyle]:
-        return self.__system_overlay_style
-
-    @system_overlay_style.setter
-    def system_overlay_style(self, value: Optional[SystemOverlayStyle]):
-        self.__system_overlay_style = value
-
     # center_title
     @property
     def center_title(self) -> Optional[bool]:

diff --git a/sdk/python/packages/flet-core/src/flet_core/theme.py b/sdk/python/packages/flet-core/src/flet_core/theme.py
@@ -140,6 +140,18 @@ class TabsTheme:
     overlay_color: Union[None, str, Dict[MaterialState, str]] = field(default=None)
 
 
+@dataclasses.dataclass
+class SystemOverlayStyle:
+    status_bar_color: Optional[str] = field(default=None)
+    system_navigation_bar_color: Optional[str] = field(default=None)
+    system_navigation_bar_divider_color: Optional[str] = field(default=None)
+    enforce_system_navigation_bar_contrast: Optional[bool] = field(default=None)
+    enforce_system_status_bar_contrast: Optional[bool] = field(default=None)
+    system_navigation_bar_icon_brightness: Optional[bool] = field(default=None)
+    status_bar_brightness: Optional[bool] = field(default=None)
+    status_bar_icon_brightness: Optional[bool] = field(default=None)
+
+
 @dataclasses.dataclass
 class Theme:
     color_scheme_seed: Optional[str] = field(default=None)
@@ -153,3 +165,4 @@ class Theme:
     use_material3: Optional[bool] = field(default=None)
     visual_density: ThemeVisualDensity = field(default=ThemeVisualDensity.STANDARD)
     page_transitions: PageTransitionsTheme = field(default_factory=PageTransitionsTheme)
+    system_overlay_style: SystemOverlayStyle = field(default_factory=SystemOverlayStyle)