Filled buttons, dividers

Author: FeodorFitsner

client/lib/controls/create_control.dart

@@ -12,6 +12,7 @@ import 'circle_avatar.dart';
 import 'clipboard.dart';
 import 'column.dart';
 import 'container.dart';
+import 'divider.dart';
 import 'dropdown.dart';
 import 'elevated_button.dart';
 import 'floating_action_button.dart';
@@ -35,6 +36,7 @@ import 'tabs.dart';
 import 'text.dart';
 import 'text_button.dart';
 import 'textfield.dart';
+import 'vertical_divider.dart';
 
 // abstract class ControlWidget extends Widget {
 //   const ControlWidget(
@@ -75,6 +77,10 @@ Widget createControl(Control? parent, String id, bool parentDisabled) {
           return ClipboardControl(control: controlView.control);
         case ControlType.image:
           return ImageControl(parent: parent, control: controlView.control);
+        case ControlType.divider:
+          return DividerControl(control: controlView.control);
+        case ControlType.verticalDivider:
+          return VerticalDividerControl(control: controlView.control);
         case ControlType.circleAvatar:
           return CircleAvatarControl(
               parent: parent,

client/lib/controls/divider.dart

@@ -0,0 +1,31 @@
+import 'package:flutter/material.dart';
+
+import '../models/control.dart';
+import '../utils/colors.dart';
+import 'create_control.dart';
+
+class DividerControl extends StatelessWidget {
+  final Control? parent;
+  final Control control;
+
+  const DividerControl({Key? key, this.parent, required this.control})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    debugPrint("Divider build: ${control.id}");
+
+    var height = control.attrDouble("height");
+    var thickness = control.attrDouble("thickness");
+    var color = HexColor.fromString(context, control.attrString("color", "")!);
+
+    return baseControl(
+        Divider(
+          height: height,
+          thickness: thickness,
+          color: color,
+        ),
+        parent,
+        control);
+  }
+}

client/lib/controls/elevated_button.dart

@@ -28,10 +28,13 @@ class ElevatedButtonControl extends StatelessWidget {
     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", "")!);
+    var elevation = control.attrDouble("elevation");
     var contentCtrls = children.where((c) => c.name == "content");
     bool autofocus = control.attrBool("autofocus", false)!;
-    bool filled = control.attrBool("filled", false)!;
-    bool filledTonal = control.attrBool("filledTonal", false)!;
     bool disabled = control.isDisabled || parentDisabled;
 
     Function()? onPressed = disabled
@@ -47,20 +50,13 @@ class ElevatedButtonControl extends StatelessWidget {
     ElevatedButton? button;
     ButtonStyle? style;
 
-    if (filled) {
+    if (color != null || bgcolor != null || elevation != null) {
       style = ElevatedButton.styleFrom(
         // Foreground color
-        onPrimary: Theme.of(context).colorScheme.onPrimary,
+        onPrimary: color,
         // Background color
-        primary: Theme.of(context).colorScheme.primary,
-      ).copyWith(elevation: ButtonStyleButton.allOrNull(0.0));
-    } else if (filledTonal) {
-      style = ElevatedButton.styleFrom(
-        // Foreground color
-        onPrimary: Theme.of(context).colorScheme.onSecondaryContainer,
-        // Background color
-        primary: Theme.of(context).colorScheme.secondaryContainer,
-      ).copyWith(elevation: ButtonStyleButton.allOrNull(0.0));
+        primary: bgcolor,
+      ).copyWith(elevation: ButtonStyleButton.allOrNull(elevation));
     }
 
     if (icon != null) {

client/lib/controls/vertical_divider.dart

@@ -0,0 +1,31 @@
+import 'package:flutter/material.dart';
+
+import '../models/control.dart';
+import '../utils/colors.dart';
+import 'create_control.dart';
+
+class VerticalDividerControl extends StatelessWidget {
+  final Control? parent;
+  final Control control;
+
+  const VerticalDividerControl({Key? key, this.parent, required this.control})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    debugPrint("VerticalDivider build: ${control.id}");
+
+    var width = control.attrDouble("width");
+    var thickness = control.attrDouble("thickness");
+    var color = HexColor.fromString(context, control.attrString("color", "")!);
+
+    return baseControl(
+        VerticalDivider(
+          width: width,
+          thickness: thickness,
+          color: color,
+        ),
+        parent,
+        control);
+  }
+}

client/lib/models/control_type.dart

@@ -6,6 +6,7 @@ enum ControlType {
   clipboard,
   column,
   container,
+  divider,
   dropdown,
   dropdownOption,
   elevatedButton,
@@ -32,5 +33,6 @@ enum ControlType {
   tab,
   text,
   textButton,
-  textField
+  textField,
+  verticalDivider
 }

docs/roadmap.md

@@ -13,8 +13,13 @@
     * [x] Stack
     * [x] ListView
     * [x] GridView
+    * [ ] Divider
+    * [ ] VerticalDivider
   * App structure and navigation
     * [x] Tabs
+    * [ ] AppBar
+    * [ ] NavigationRail
+    * [ ] NavigationBar
   * Basic controls
     * [x] Text
     * [x] Icon
@@ -24,10 +29,13 @@
     * [x] ProgressRing
   * Buttons
     * [x] ElevatedButton
+    * [x] FilledButton
+    * [x] FilledTonalButton
     * [x] OutlinedButton
     * [x] TextButton
     * [x] IconButton
     * [x] FloatingActionButton
+    * [ ] PopupMenuButton
   * Input and selections
     * [x] TextField
     * [x] Dropdown
@@ -59,12 +67,14 @@
 
 ## Sprint 2
 
+* Authentication
 * Controls
+  * Navigation
+    * NavigationDrawer  
   * Layout
     * Row (responsive)
     * Column (responsive)
   * Behavior
-    * Complex embeddable values for `padding`, `marging`, etc, e.g. `.padding = { 'left': 10, 'right': 20 }`
     * Visual Density ([more](https://api.flutter.dev/flutter/material/VisualDensity-class.html))
     * Early detection of layout issues (like enabling scrolling in unbounded controls) with [Layout Builder](https://api.flutter.dev/flutter/widgets/LayoutBuilder-class.html).
     * Scroll speed on Windows Desktop [The issue](https://github.com/flutter/flutter/issues/67985)
@@ -75,6 +85,17 @@
   * [ ] Windows ("host" mode with hot reload)
   * [ ] macOS ("host" mode with hot reload)
 
+## Year 2022
+
+* Grids
+* Charts
+* Navigation controls and Routing
+* Responsive layout
+* Adaptive controls
+* Animations
+* PubSub
+* DB
+
 ## Controls
 
 <table>

sdk/python/flet/__init__.py

@@ -5,8 +5,11 @@
 from flet.column import Column
 from flet.container import Container
 from flet.control import Control
+from flet.divider import Divider
 from flet.dropdown import Dropdown
 from flet.elevated_button import ElevatedButton
+from flet.filled_button import FilledButton
+from flet.filled_tonal_button import FilledTonalButton
 from flet.flet import *
 from flet.floating_action_button import FloatingActionButton
 from flet.grid_view import GridView
@@ -31,3 +34,4 @@
 from flet.text_button import TextButton
 from flet.textfield import TextField
 from flet.theme import Theme
+from flet.vertical_divider import VerticalDivider

sdk/python/flet/divider.py

@@ -0,0 +1,66 @@
+from typing import Union
+
+import beartype
+
+from flet.control import Control, OptionalNumber
+from flet.ref import Ref
+
+
+class Divider(Control):
+    def __init__(
+        self,
+        ref: Ref = None,
+        opacity: OptionalNumber = None,
+        visible: bool = None,
+        data: any = None,
+        #
+        # Specific
+        #
+        height: OptionalNumber = None,
+        thickness: OptionalNumber = None,
+        color: str = None,
+    ):
+
+        Control.__init__(
+            self,
+            ref=ref,
+            opacity=opacity,
+            visible=visible,
+            data=data,
+        )
+
+        self.height = height
+        self.thickness = thickness
+        self.color = color
+
+    def _get_control_name(self):
+        return "divider"
+
+    # height
+    @property
+    def height(self):
+        return self._get_attr("height")
+
+    @height.setter
+    @beartype
+    def height(self, value: OptionalNumber):
+        self._set_attr("height", value)
+
+    # thickness
+    @property
+    def thickness(self):
+        return self._get_attr("thickness")
+
+    @thickness.setter
+    @beartype
+    def thickness(self, value: OptionalNumber):
+        self._set_attr("thickness", value)
+
+    # color
+    @property
+    def color(self):
+        return self._get_attr("color")
+
+    @color.setter
+    def color(self, value):
+        self._set_attr("color", value)

sdk/python/flet/elevated_button.py

@@ -23,8 +23,9 @@ def __init__(
         #
         # Specific
         #
-        filled: bool = None,
-        filled_tonal: bool = None,
+        color: str = None,
+        bgcolor: str = None,
+        elevation: OptionalNumber = None,
         icon: str = None,
         icon_color: str = None,
         content: Control = None,
@@ -45,8 +46,9 @@ def __init__(
         )
 
         self.text = text
-        self.filled = filled
-        self.filled_tonal = filled_tonal
+        self.color = color
+        self.bgcolor = bgcolor
+        self.elevation = elevation
         self.icon = icon
         self.icon_color = icon_color
         self.content = content
@@ -71,25 +73,33 @@ def text(self):
     def text(self, value):
         self._set_attr("text", value)
 
-    # filled
+    # color
     @property
-    def filled(self):
-        return self._get_attr("filled", data_type="bool", def_value=False)
+    def color(self):
+        return self._get_attr("color")
 
-    @filled.setter
-    @beartype
-    def filled(self, value: Optional[bool]):
-        self._set_attr("filled", value)
+    @color.setter
+    def color(self, value):
+        self._set_attr("color", value)
+
+    # bgcolor
+    @property
+    def bgcolor(self):
+        return self._get_attr("bgcolor")
+
+    @bgcolor.setter
+    def bgcolor(self, value):
+        self._set_attr("bgcolor", value)
 
-    # filled_tonal
+    # elevation
     @property
-    def filled_tonal(self):
-        return self._get_attr("filledTonal", data_type="bool", def_value=False)
+    def elevation(self) -> OptionalNumber:
+        return self._get_attr("elevation")
 
-    @filled_tonal.setter
+    @elevation.setter
     @beartype
-    def filled_tonal(self, value: Optional[bool]):
-        self._set_attr("filledTonal", value)
+    def elevation(self, value: OptionalNumber):
+        self._set_attr("elevation", value)
 
     # icon
     @property