AppBar

flet-dev · May 14, 2022 · fe2d6ae · fe2d6ae
1 parent 4751be9
commit fe2d6ae
Show file tree

Hide file tree

Showing 23 changed files with 279 additions and 71 deletions.
diff --git a/client/lib/controls/app_bar.dart b/client/lib/controls/app_bar.dart
@@ -0,0 +1,68 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+
+import '../models/control.dart';
+import '../utils/alignment.dart';
+import 'create_control.dart';
+import 'scrollable_control.dart';
+
+class AppBarControl extends StatelessWidget implements PreferredSizeWidget {
+  final Control? parent;
+  final Control control;
+  final bool parentDisabled;
+  final List<Control> children;
+
+  AppBar? _appBar;
+
+  AppBarControl(
+      {Key? key,
+      this.parent,
+      required this.control,
+      required this.children,
+      required this.parentDisabled})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    debugPrint("AppBar build: ${control.id}");
+
+    // final spacing = control.attrDouble("spacing", 10)!;
+    // final mainAlignment =
+    //     parseMainAxisAlignment(control, "alignment", MainAxisAlignment.start);
+    // bool tight = control.attrBool("tight", false)!;
+    // bool wrap = control.attrBool("wrap", false)!;
+    // ScrollMode scrollMode = ScrollMode.values.firstWhere(
+    //     (m) =>
+    //         m.name.toLowerCase() ==
+    //         control.attrString("scroll", "")!.toLowerCase(),
+    //     orElse: () => ScrollMode.none);
+    // bool disabled = control.isDisabled || parentDisabled;
+
+    // List<Widget> controls = [];
+
+    // bool firstControl = true;
+    // for (var ctrl in children.where((c) => c.isVisible)) {
+    //   // spacer between displayed controls
+    //   if (!wrap &&
+    //       spacing > 0 &&
+    //       !firstControl &&
+    //       mainAlignment != MainAxisAlignment.spaceAround &&
+    //       mainAlignment != MainAxisAlignment.spaceBetween &&
+    //       mainAlignment != MainAxisAlignment.spaceEvenly) {
+    //     controls.add(SizedBox(width: spacing));
+    //   }
+    //   firstControl = false;
+
+    //   // displayed control
+    //   controls.add(createControl(control, ctrl.id, disabled));
+    // }
+
+    _appBar = AppBar(
+      title: Text("Hello!"),
+    );
+    return _appBar!;
+  }
+
+  @override
+  Size get preferredSize => _appBar!.preferredSize;
+}
diff --git a/client/lib/controls/banner.dart b/client/lib/controls/banner.dart
@@ -63,7 +63,7 @@ class _BannerControlState extends State<BannerControl> {
           .toList(),
       forceActionsBelow: widget.control.attrBool("forceActionsBelow", false)!,
       backgroundColor: HexColor.fromString(
-          context, widget.control.attrString("bgcolor", "")!),
+          Theme.of(context), widget.control.attrString("bgcolor", "")!),
     );
   }
 

diff --git a/client/lib/controls/circle_avatar.dart b/client/lib/controls/circle_avatar.dart
@@ -34,10 +34,10 @@ class CircleAvatarControl extends StatelessWidget {
         backgroundImage: backgroundImageUrl != null
             ? NetworkImage(backgroundImageUrl)
             : null,
-        backgroundColor:
-            HexColor.fromString(context, control.attrString("bgColor", "")!),
-        foregroundColor:
-            HexColor.fromString(context, control.attrString("color", "")!),
+        backgroundColor: HexColor.fromString(
+            Theme.of(context), control.attrString("bgColor", "")!),
+        foregroundColor: HexColor.fromString(
+            Theme.of(context), control.attrString("color", "")!),
         radius: control.attrDouble("radius"),
         minRadius: control.attrDouble("minRadius"),
         maxRadius: control.attrDouble("maxRadius"),

diff --git a/client/lib/controls/container.dart b/client/lib/controls/container.dart
@@ -26,8 +26,8 @@ class ContainerControl extends StatelessWidget {
   Widget build(BuildContext context) {
     debugPrint("Container build: ${control.id}");
 
-    var bgColor =
-        HexColor.fromString(context, control.attrString("bgColor", "")!);
+    var bgColor = HexColor.fromString(
+        Theme.of(context), control.attrString("bgColor", "")!);
     var contentCtrls = children.where((c) => c.name == "content");
     bool disabled = control.isDisabled || parentDisabled;
 
@@ -38,7 +38,7 @@ class ContainerControl extends StatelessWidget {
             alignment: parseAlignment(control, "alignment"),
             decoration: BoxDecoration(
                 color: bgColor,
-                border: parseBorder(context, control, "border"),
+                border: parseBorder(Theme.of(context), control, "border"),
                 borderRadius: parseBorderRadius(control, "borderRadius")),
             child: contentCtrls.isNotEmpty
                 ? createControl(control, contentCtrls.first.id, disabled)

diff --git a/client/lib/controls/create_control.dart b/client/lib/controls/create_control.dart
@@ -1,3 +1,4 @@
+import 'app_bar.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_redux/flutter_redux.dart';
 
@@ -70,6 +71,12 @@ Widget createControl(Control? parent, String id, bool parentDisabled) {
         case ControlType.page:
           return PageControl(
               control: controlView.control, children: controlView.children);
+        case ControlType.appBar:
+          return AppBarControl(
+              parent: parent,
+              control: controlView.control,
+              children: controlView.children,
+              parentDisabled: parentDisabled);
         case ControlType.text:
           return TextControl(control: controlView.control);
         case ControlType.icon:

diff --git a/client/lib/controls/divider.dart b/client/lib/controls/divider.dart
@@ -17,7 +17,8 @@ class DividerControl extends StatelessWidget {
 
     var height = control.attrDouble("height");
     var thickness = control.attrDouble("thickness");
-    var color = HexColor.fromString(context, control.attrString("color", "")!);
+    var color = HexColor.fromString(
+        Theme.of(context), control.attrString("color", "")!);
 
     return baseControl(
         Divider(

diff --git a/client/lib/controls/elevated_button.dart b/client/lib/controls/elevated_button.dart
@@ -26,12 +26,12 @@ class ElevatedButtonControl extends StatelessWidget {
 
     String text = control.attrString("text", "")!;
     IconData? icon = getMaterialIcon(control.attrString("icon", "")!);
-    Color? iconColor =
-        HexColor.fromString(context, control.attrString("iconColor", "")!);
-    Color? color =
-        HexColor.fromString(context, control.attrString("color", "")!);
-    Color? bgcolor =
-        HexColor.fromString(context, control.attrString("bgcolor", "")!);
+    Color? iconColor = HexColor.fromString(
+        Theme.of(context), control.attrString("iconColor", "")!);
+    Color? color = HexColor.fromString(
+        Theme.of(context), control.attrString("color", "")!);
+    Color? bgcolor = HexColor.fromString(
+        Theme.of(context), control.attrString("bgcolor", "")!);
     var elevation = control.attrDouble("elevation");
     var contentCtrls = children.where((c) => c.name == "content");
     bool autofocus = control.attrBool("autofocus", false)!;

diff --git a/client/lib/controls/floating_action_button.dart b/client/lib/controls/floating_action_button.dart
@@ -27,8 +27,8 @@ class FloatingActionButtonControl extends StatelessWidget {
 
     String? text = control.attrString("text");
     IconData? icon = getMaterialIcon(control.attrString("icon", "")!);
-    Color? bgColor =
-        HexColor.fromString(context, control.attrString("bgColor", "")!);
+    Color? bgColor = HexColor.fromString(
+        Theme.of(context), control.attrString("bgColor", "")!);
     var contentCtrls = children.where((c) => c.name == "content");
     bool autofocus = control.attrBool("autofocus", false)!;
     bool disabled = control.isDisabled || parentDisabled;

diff --git a/client/lib/controls/icon.dart b/client/lib/controls/icon.dart
@@ -1,3 +1,4 @@
+import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
 
 import '../models/control.dart';
@@ -18,7 +19,8 @@ class IconControl extends StatelessWidget {
 
     var name = control.attrString("name", "")!;
     var size = control.attrDouble("size", null);
-    var color = HexColor.fromString(context, control.attrString("color", "")!);
+    var color = HexColor.fromString(
+        Theme.of(context), control.attrString("color", "")!);
 
     return baseControl(
         Icon(

diff --git a/client/lib/controls/icon_button.dart b/client/lib/controls/icon_button.dart
@@ -26,10 +26,10 @@ class IconButtonControl extends StatelessWidget {
     debugPrint("Button build: ${control.id}");
 
     IconData? icon = getMaterialIcon(control.attrString("icon", "")!);
-    Color? iconColor =
-        HexColor.fromString(context, control.attrString("iconColor", "")!);
-    Color? bgColor =
-        HexColor.fromString(context, control.attrString("bgColor", "")!);
+    Color? iconColor = HexColor.fromString(
+        Theme.of(context), control.attrString("iconColor", "")!);
+    Color? bgColor = HexColor.fromString(
+        Theme.of(context), control.attrString("bgColor", "")!);
     double? iconSize = control.attrDouble("iconSize");
     var contentCtrls = children.where((c) => c.name == "content");
     bool autofocus = control.attrBool("autofocus", false)!;

diff --git a/client/lib/controls/outlined_button.dart b/client/lib/controls/outlined_button.dart
@@ -26,8 +26,8 @@ class OutlinedButtonControl extends StatelessWidget {
 
     String text = control.attrString("text", "")!;
     IconData? icon = getMaterialIcon(control.attrString("icon", "")!);
-    Color? iconColor =
-        HexColor.fromString(context, control.attrString("iconColor", "")!);
+    Color? iconColor = HexColor.fromString(
+        Theme.of(context), control.attrString("iconColor", "")!);
     var contentCtrls = children.where((c) => c.name == "content");
     bool autofocus = control.attrBool("autofocus", false)!;
     bool disabled = control.isDisabled || parentDisabled;

diff --git a/client/lib/controls/page.dart b/client/lib/controls/page.dart
@@ -1,5 +1,8 @@
-import 'package:flet_view/models/control_type.dart';
-import 'package:flet_view/utils/desktop.dart';
+import 'package:flet_view/models/control_view_model.dart';
+
+import '../models/control_type.dart';
+import '../models/controls_view_model.dart';
+import '../utils/desktop.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_redux/flutter_redux.dart';
 
@@ -44,6 +47,7 @@ class PageControl extends StatelessWidget {
     debugPrint("scrollMode: $scrollMode");
 
     Control? offstage;
+    Control? appBar;
     List<Widget> controls = [];
     bool firstControl = true;
 
@@ -52,10 +56,12 @@ class PageControl extends StatelessWidget {
       if (ctrl.type == ControlType.offstage) {
         offstage = ctrl;
         continue;
+      } else if (ctrl.type == ControlType.appBar) {
+        appBar = ctrl;
+        continue;
       }
-
       // spacer between displayed controls
-      if (spacing > 0 &&
+      else if (spacing > 0 &&
           !firstControl &&
           mainAlignment != MainAxisAlignment.spaceAround &&
           mainAlignment != MainAxisAlignment.spaceBetween &&
@@ -97,31 +103,39 @@ class PageControl extends StatelessWidget {
     String title = control.attrString("title", "")!;
     setWindowTitle(title);
 
-    return StoreConnector<AppState, ControlChildrenViewModel?>(
+    List<String> childIds = [];
+    if (offstage != null) {
+      childIds.add(offstage.id);
+    }
+    if (appBar != null) {
+      childIds.add(appBar.id);
+    }
+
+    return StoreConnector<AppState, ControlsViewModel>(
         distinct: true,
-        converter: (store) => offstage != null
-            ? ControlChildrenViewModel.fromStore(store, offstage.id,
-                dispatch: store.dispatch)
-            : null,
-        builder: (context, offstageView) {
+        converter: (store) => ControlsViewModel.fromStore(store, childIds),
+        builder: (context, childrenViews) {
           debugPrint("Offstage StoreConnector build");
 
           // offstage
-          List<Widget> offstageWidgets = offstageView != null
-              ? offstageView.children
+          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 = offstageView != null
-              ? offstageView.children
+          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,
@@ -133,15 +147,16 @@ class PageControl extends StatelessWidget {
             darkTheme: darkTheme,
             themeMode: themeMode,
             home: Scaffold(
-              appBar: null,
+              appBar:
+                  appBarView != null ? createAppBar(theme, appBarView) : null,
               body: Stack(children: [
                 SizedBox.expand(
                     child: Container(
                         padding: parseEdgeInsets(control, "padding") ??
                             const EdgeInsets.all(10),
                         decoration: BoxDecoration(
-                            color: HexColor.fromString(
-                                context, control.attrString("bgcolor", "")!)),
+                            color: HexColor.fromString(Theme.of(context),
+                                control.attrString("bgcolor", "")!)),
                         child: scrollMode != ScrollMode.none
                             ? ScrollableControl(
                                 child: column,
@@ -159,4 +174,42 @@ class PageControl extends StatelessWidget {
           );
         });
   }
+
+  PreferredSizeWidget createAppBar(
+      ThemeData theme, ControlViewModel appBarView) {
+    var leadingCtrls =
+        appBarView.children.where((c) => c.name == "leading" && c.isVisible);
+    var titleCtrls =
+        appBarView.children.where((c) => c.name == "title" && c.isVisible);
+    var actionCtrls =
+        appBarView.children.where((c) => c.name == "action" && c.isVisible);
+
+    var leadingWidth = appBarView.control.attrDouble("leadingWidth");
+    var toolbarHeight = appBarView.control.attrDouble("toolbarHeight");
+    var centerTitle = appBarView.control.attrBool("centerTitle", false)!;
+    var color =
+        HexColor.fromString(theme, appBarView.control.attrString("color", "")!);
+    var bgcolor = HexColor.fromString(
+        theme, appBarView.control.attrString("bgcolor", "")!);
+
+    return AppBar(
+      leading: leadingCtrls.isNotEmpty
+          ? createControl(appBarView.control, leadingCtrls.first.id,
+              appBarView.control.isDisabled)
+          : null,
+      leadingWidth: leadingWidth,
+      title: titleCtrls.isNotEmpty
+          ? createControl(appBarView.control, titleCtrls.first.id,
+              appBarView.control.isDisabled)
+          : null,
+      centerTitle: centerTitle,
+      toolbarHeight: toolbarHeight,
+      foregroundColor: color,
+      backgroundColor: bgcolor,
+      actions: actionCtrls
+          .map((c) => createControl(
+              appBarView.control, c.id, appBarView.control.isDisabled))
+          .toList(),
+    );
+  }
 }
diff --git a/client/lib/controls/progress_bar.dart b/client/lib/controls/progress_bar.dart
@@ -17,9 +17,10 @@ class ProgressBarControl extends StatelessWidget {
 
     var value = control.attrDouble("value", null);
     var barHeight = control.attrDouble("barHeight", 4)!;
-    var color = HexColor.fromString(context, control.attrString("color", "")!);
-    var bgColor =
-        HexColor.fromString(context, control.attrString("bgColor", "")!);
+    var color = HexColor.fromString(
+        Theme.of(context), control.attrString("color", "")!);
+    var bgColor = HexColor.fromString(
+        Theme.of(context), control.attrString("bgColor", "")!);
 
     return constrainedControl(
         LinearProgressIndicator(

diff --git a/client/lib/controls/progress_ring.dart b/client/lib/controls/progress_ring.dart
@@ -17,9 +17,10 @@ class ProgressRingControl extends StatelessWidget {
 
     var value = control.attrDouble("value", null);
     var strokeWidth = control.attrDouble("strokeWidth", 4)!;
-    var color = HexColor.fromString(context, control.attrString("color", "")!);
-    var bgColor =
-        HexColor.fromString(context, control.attrString("bgColor", "")!);
+    var color = HexColor.fromString(
+        Theme.of(context), control.attrString("color", "")!);
+    var bgColor = HexColor.fromString(
+        Theme.of(context), control.attrString("bgColor", "")!);
 
     return constrainedControl(
         CircularProgressIndicator(