Fixed #10 (#14)

flet-dev · Jun 5, 2022 · 1ad1a11 · 1ad1a11
1 parent b841a6e
commit 1ad1a11
Show file tree

Hide file tree

Showing 10 changed files with 435 additions and 122 deletions.
diff --git a/client/lib/actions.dart b/client/lib/actions.dart
@@ -27,6 +27,11 @@ class PageSizeChangeAction {
   PageSizeChangeAction(this.newSize);
 }
 
+class PageBrightnessChangeAction {
+  final Brightness brightness;
+  PageBrightnessChangeAction(this.brightness);
+}
+
 class RegisterWebClientAction {
   final RegisterWebClientResponse payload;
   RegisterWebClientAction(this.payload);

diff --git a/client/lib/controls/app_bar.dart b/client/lib/controls/app_bar.dart
@@ -10,14 +10,16 @@ class AppBarControl extends StatelessWidget implements PreferredSizeWidget {
   final bool parentDisabled;
   final List<Control> children;
   final double height;
+  final ThemeData theme;
 
   const AppBarControl(
       {Key? key,
       this.parent,
       required this.control,
       required this.children,
       required this.parentDisabled,
-      required this.height})
+      required this.height,
+      required this.theme})
       : super(key: key);
 
   @override
@@ -31,10 +33,9 @@ class AppBarControl extends StatelessWidget implements PreferredSizeWidget {
 
     var leadingWidth = control.attrDouble("leadingWidth");
     var centerTitle = control.attrBool("centerTitle", false)!;
-    var color = HexColor.fromString(
-        Theme.of(context), control.attrString("color", "")!);
-    var bgcolor = HexColor.fromString(
-        Theme.of(context), control.attrString("bgcolor", "")!);
+    var color = HexColor.fromString(theme, control.attrString("color", "")!);
+    var bgcolor =
+        HexColor.fromString(theme, control.attrString("bgcolor", "")!);
 
     return AppBar(
       leading: leadingCtrls.isNotEmpty

diff --git a/client/lib/controls/page.dart b/client/lib/controls/page.dart
@@ -5,12 +5,13 @@ import '../models/app_state.dart';
 import '../models/control.dart';
 import '../models/control_type.dart';
 import '../models/controls_view_model.dart';
+import '../models/page_media_view_model.dart';
 import '../utils/alignment.dart';
 import '../utils/colors.dart';
 import '../utils/desktop.dart';
 import '../utils/edge_insets.dart';
 import '../utils/theme.dart';
-import '../widgets/screen_size.dart';
+import '../widgets/page_media.dart';
 import 'app_bar.dart';
 import 'create_control.dart';
 import 'scrollable_control.dart';
@@ -73,7 +74,7 @@ class PageControl extends StatelessWidget {
     }
 
     // theme
-    var theme = parseTheme(control, "theme") ??
+    var lightTheme = parseTheme(control, "theme") ??
         ThemeData(
             colorSchemeSeed: Colors.blue,
             brightness: Brightness.light,
@@ -109,76 +110,90 @@ class PageControl extends StatelessWidget {
       childIds.add(appBar.id);
     }
 
-    return StoreConnector<AppState, ControlsViewModel>(
+    return StoreConnector<AppState, PageMediaViewModel>(
         distinct: true,
-        converter: (store) => ControlsViewModel.fromStore(store, childIds),
-        builder: (context, childrenViews) {
-          debugPrint("Offstage StoreConnector build");
-
-          // offstage
-          List<Widget> offstageWidgets = offstage != null
-              ? childrenViews.controlViews.first.children
-                  .where((c) =>
-                      c.isVisible && c.type != ControlType.floatingActionButton)
-                  .map((c) => createControl(offstage, c.id, disabled))
-                  .toList()
-              : [];
-
-          List<Control> fab = offstage != null
-              ? childrenViews.controlViews.first.children
-                  .where((c) =>
-                      c.isVisible && c.type == ControlType.floatingActionButton)
-                  .toList()
-              : [];
-
-          var appBarView =
-              appBar != null ? childrenViews.controlViews.last : null;
-
-          var column = Column(
-              mainAxisAlignment: mainAlignment,
-              crossAxisAlignment: crossAlignment,
-              children: controls);
-
-          return MaterialApp(
-            title: title,
-            theme: theme,
-            darkTheme: darkTheme,
-            themeMode: themeMode,
-            home: Scaffold(
-              appBar: appBarView != null
-                  ? AppBarControl(
-                      parent: control,
-                      control: appBarView.control,
-                      children: appBarView.children,
-                      parentDisabled: disabled,
-                      height: appBarView.control
-                          .attrDouble("toolbarHeight", kToolbarHeight)!,
-                    )
-                  : null,
-              body: Stack(children: [
-                SizedBox.expand(
-                    child: Container(
-                        padding: parseEdgeInsets(control, "padding") ??
-                            const EdgeInsets.all(10),
-                        decoration: BoxDecoration(
-                            color: HexColor.fromString(Theme.of(context),
-                                control.attrString("bgcolor", "")!)),
-                        child: scrollMode != ScrollMode.none
-                            ? ScrollableControl(
-                                child: column,
-                                scrollDirection: Axis.vertical,
-                                scrollMode: scrollMode,
-                                autoScroll: autoScroll,
-                              )
-                            : column)),
-                ...offstageWidgets,
-                const ScreenSize()
-              ]),
-              floatingActionButton: fab.isNotEmpty
-                  ? createControl(offstage, fab.first.id, disabled)
-                  : null,
-            ),
-          );
+        converter: (store) => PageMediaViewModel.fromStore(store),
+        builder: (context, media) {
+          var theme = themeMode == ThemeMode.light ||
+                  (themeMode == ThemeMode.system &&
+                      media.displayBrightness == Brightness.light)
+              ? lightTheme
+              : darkTheme;
+
+          return StoreConnector<AppState, ControlsViewModel>(
+              distinct: true,
+              converter: (store) =>
+                  ControlsViewModel.fromStore(store, childIds),
+              builder: (context, childrenViews) {
+                debugPrint("Offstage StoreConnector build");
+
+                // offstage
+                List<Widget> offstageWidgets = offstage != null
+                    ? childrenViews.controlViews.first.children
+                        .where((c) =>
+                            c.isVisible &&
+                            c.type != ControlType.floatingActionButton)
+                        .map((c) => createControl(offstage, c.id, disabled))
+                        .toList()
+                    : [];
+
+                List<Control> fab = offstage != null
+                    ? childrenViews.controlViews.first.children
+                        .where((c) =>
+                            c.isVisible &&
+                            c.type == ControlType.floatingActionButton)
+                        .toList()
+                    : [];
+
+                var appBarView =
+                    appBar != null ? childrenViews.controlViews.last : null;
+
+                var column = Column(
+                    mainAxisAlignment: mainAlignment,
+                    crossAxisAlignment: crossAlignment,
+                    children: controls);
+
+                return MaterialApp(
+                  title: title,
+                  theme: lightTheme,
+                  darkTheme: darkTheme,
+                  themeMode: themeMode,
+                  home: Scaffold(
+                    appBar: appBarView != null
+                        ? AppBarControl(
+                            parent: control,
+                            control: appBarView.control,
+                            children: appBarView.children,
+                            parentDisabled: disabled,
+                            height: appBarView.control
+                                .attrDouble("toolbarHeight", kToolbarHeight)!,
+                            theme: theme)
+                        : null,
+                    body: Stack(children: [
+                      SizedBox.expand(
+                          child: Container(
+                              padding: parseEdgeInsets(control, "padding") ??
+                                  const EdgeInsets.all(10),
+                              decoration: BoxDecoration(
+                                  color: HexColor.fromString(theme,
+                                      control.attrString("bgcolor", "")!)),
+                              child: scrollMode != ScrollMode.none
+                                  ? ScrollableControl(
+                                      child: column,
+                                      scrollDirection: Axis.vertical,
+                                      scrollMode: scrollMode,
+                                      autoScroll: autoScroll,
+                                    )
+                                  : column)),
+                      ...offstageWidgets,
+                      const PageMedia()
+                    ]),
+                    floatingActionButton: fab.isNotEmpty
+                        ? createControl(offstage, fab.first.id, disabled)
+                        : null,
+                  ),
+                );
+              });
         });
   }
 }
diff --git a/client/lib/models/app_state.dart b/client/lib/models/app_state.dart
@@ -17,6 +17,7 @@ class AppState extends Equatable {
   final String error;
   final Size size;
   final String sizeBreakpoint;
+  final Brightness displayBrightness;
   final Map<String, double> sizeBreakpoints;
   final Map<String, Control> controls;
 
@@ -29,25 +30,27 @@ class AppState extends Equatable {
       required this.size,
       required this.sizeBreakpoint,
       required this.sizeBreakpoints,
+      required this.displayBrightness,
       required this.controls});
 
   factory AppState.initial() => const AppState(
-          pageUri: null,
-          sessionId: "",
-          isLoading: true,
-          reconnectingTimeout: 0,
-          error: "",
-          size: Size(0, 0),
-          sizeBreakpoint: "",
-          sizeBreakpoints: {
-            "xs": 0,
-            "sm": 576,
-            "md": 768,
-            "lg": 992,
-            "xl": 1200,
-            "xxl": 1400
-          },
-          controls: {});
+      pageUri: null,
+      sessionId: "",
+      isLoading: true,
+      reconnectingTimeout: 0,
+      error: "",
+      size: Size(0, 0),
+      sizeBreakpoint: "",
+      sizeBreakpoints: {
+        "xs": 0,
+        "sm": 576,
+        "md": 768,
+        "lg": 992,
+        "xl": 1200,
+        "xxl": 1400
+      },
+      displayBrightness: Brightness.light,
+      controls: {});
 
   AppState copyWith(
           {Uri? pageUri,
@@ -58,6 +61,7 @@ class AppState extends Equatable {
           Size? size,
           String? sizeBreakpoint,
           Map<String, double>? sizeBreakpoints,
+          Brightness? displayBrightness,
           Map<String, Control>? controls}) =>
       AppState(
           pageUri: pageUri ?? this.pageUri,
@@ -68,6 +72,7 @@ class AppState extends Equatable {
           size: size ?? this.size,
           sizeBreakpoint: sizeBreakpoint ?? this.sizeBreakpoint,
           sizeBreakpoints: sizeBreakpoints ?? this.sizeBreakpoints,
+          displayBrightness: displayBrightness ?? this.displayBrightness,
           controls: controls ?? this.controls);
 
   @override

diff --git a/client/lib/models/page_load_view_model.dart b/client/lib/models/page_load_view_model.dart
@@ -2,12 +2,12 @@ import 'package:equatable/equatable.dart';
 import 'package:redux/redux.dart';
 
 import 'app_state.dart';
-import 'page_size_view_model.dart';
+import 'page_media_view_model.dart';
 
 class PageLoadViewModel extends Equatable {
   final Uri? pageUri;
   final String sessionId;
-  final PageSizeViewModel sizeViewModel;
+  final PageMediaViewModel sizeViewModel;
 
   const PageLoadViewModel(
       {required this.pageUri,
@@ -18,7 +18,7 @@ class PageLoadViewModel extends Equatable {
     return PageLoadViewModel(
         pageUri: store.state.pageUri,
         sessionId: store.state.sessionId,
-        sizeViewModel: PageSizeViewModel.fromStore(store));
+        sizeViewModel: PageMediaViewModel.fromStore(store));
   }
 
   @override

diff --git a/client/lib/models/page_media_view_model.dart b/client/lib/models/page_media_view_model.dart
@@ -0,0 +1,27 @@
+import 'dart:ui';
+
+import 'package:equatable/equatable.dart';
+import 'package:redux/redux.dart';
+
+import 'app_state.dart';
+
+class PageMediaViewModel extends Equatable {
+  final Size size;
+  final Brightness displayBrightness;
+  final Function dispatch;
+
+  const PageMediaViewModel(
+      {required this.size,
+      required this.displayBrightness,
+      required this.dispatch});
+
+  static PageMediaViewModel fromStore(Store<AppState> store) {
+    return PageMediaViewModel(
+        size: store.state.size,
+        displayBrightness: store.state.displayBrightness,
+        dispatch: store.dispatch);
+  }
+
+  @override
+  List<Object?> get props => [size, displayBrightness, dispatch];
+}
diff --git a/client/lib/models/page_size_view_model.dart b/client/lib/models/page_size_view_model.dart
diff --git a/client/lib/reducers.dart b/client/lib/reducers.dart
@@ -58,6 +58,8 @@ AppState appReducer(AppState state, dynamic action) {
     }
 
     return state.copyWith(size: action.newSize, sizeBreakpoint: newBreakpoint);
+  } else if (action is PageBrightnessChangeAction) {
+    return state.copyWith(displayBrightness: action.brightness);
   } else if (action is RegisterWebClientAction) {
     //
     // register web client