FAB, scrollable page

Author: FeodorFitsner

client/lib/controls/create_control.dart

@@ -12,6 +12,7 @@ import 'column.dart';
 import 'container.dart';
 import 'dropdown.dart';
 import 'elevated_button.dart';
+import 'floating_action_button.dart';
 import 'grid_view.dart';
 import 'icon.dart';
 import 'icon_button.dart';
@@ -93,6 +94,12 @@ Widget createControl(Control? parent, String id, bool parentDisabled) {
               control: controlView.control,
               children: controlView.children,
               parentDisabled: parentDisabled);
+        case ControlType.floatingActionButton:
+          return FloatingActionButtonControl(
+              parent: parent,
+              control: controlView.control,
+              children: controlView.children,
+              parentDisabled: parentDisabled);
         case ControlType.column:
           return ColumnControl(
               parent: parent,

client/lib/controls/floating_action_button.dart

@@ -0,0 +1,72 @@
+import 'package:flet_view/controls/error.dart';
+import 'package:flutter/material.dart';
+
+import '../models/control.dart';
+import '../utils/colors.dart';
+import '../utils/icons.dart';
+import '../web_socket_client.dart';
+import 'create_control.dart';
+
+class FloatingActionButtonControl extends StatelessWidget {
+  final Control? parent;
+  final Control control;
+  final List<Control> children;
+  final bool parentDisabled;
+
+  const FloatingActionButtonControl(
+      {Key? key,
+      this.parent,
+      required this.control,
+      required this.children,
+      required this.parentDisabled})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    debugPrint("FloatingActionButtonControl build: ${control.id}");
+
+    String? text = control.attrString("text");
+    IconData? icon = getMaterialIcon(control.attrString("icon", "")!);
+    Color? bgColor =
+        HexColor.fromString(context, control.attrString("bgColor", "")!);
+    var contentCtrls = children.where((c) => c.name == "content");
+    bool disabled = control.isDisabled || parentDisabled;
+
+    Function()? onPressed = disabled
+        ? null
+        : () {
+            debugPrint("FloatingActionButtonControl ${control.id} clicked!");
+            ws.pageEventFromWeb(
+                eventTarget: control.id,
+                eventName: "click",
+                eventData: control.attrs["data"] ?? "");
+          };
+
+    if (text == null && icon == null) {
+      return const ErrorControl("FAB doesn't have a text, nor icon.");
+    }
+
+    Widget button;
+    if (contentCtrls.isNotEmpty) {
+      button = FloatingActionButton(
+          onPressed: onPressed,
+          child: createControl(control, contentCtrls.first.id, disabled));
+    } else if (icon != null && text == null) {
+      button = FloatingActionButton(
+        onPressed: onPressed,
+        child: Icon(icon),
+        backgroundColor: bgColor,
+      );
+    } else if (icon != null && text != null) {
+      button = FloatingActionButton.extended(
+          onPressed: onPressed,
+          label: Text(text),
+          icon: Icon(icon),
+          backgroundColor: bgColor);
+    } else {
+      return const ErrorControl("FAB doesn't have a text, nor icon.");
+    }
+
+    return constrainedControl(button, parent, control);
+  }
+}

client/lib/controls/page.dart

@@ -12,6 +12,7 @@ import '../utils/edge_insets.dart';
 import '../utils/theme.dart';
 import '../widgets/screen_size.dart';
 import 'create_control.dart';
+import 'scrollable_control.dart';
 
 class PageControl extends StatelessWidget {
   final Control? parent;
@@ -34,6 +35,14 @@ class PageControl extends StatelessWidget {
     final crossAlignment = parseCrossAxisAlignment(
         control, "horizontalAlignment", CrossAxisAlignment.start);
 
+    ScrollMode scrollMode = ScrollMode.values.firstWhere(
+        (m) =>
+            m.name.toLowerCase() ==
+            control.attrString("scroll", "")!.toLowerCase(),
+        orElse: () => ScrollMode.none);
+
+    debugPrint("scrollMode: $scrollMode");
+
     Control? offstage;
     List<Widget> controls = [];
     bool firstControl = true;
@@ -100,6 +109,11 @@ class PageControl extends StatelessWidget {
                   .toList()
               : [];
 
+          var column = Column(
+              mainAxisAlignment: mainAlignment,
+              crossAxisAlignment: crossAlignment,
+              children: controls);
+
           return MaterialApp(
             title: title,
             theme: theme,
@@ -109,16 +123,18 @@ class PageControl extends StatelessWidget {
               body: Stack(children: [
                 SizedBox.expand(
                     child: Container(
-                  padding: parseEdgeInsets(control, "padding") ??
-                      const EdgeInsets.all(10),
-                  decoration: BoxDecoration(
-                      color: HexColor.fromString(
-                          context, control.attrString("bgcolor", "")!)),
-                  child: Column(
-                      mainAxisAlignment: mainAlignment,
-                      crossAxisAlignment: crossAlignment,
-                      children: controls),
-                )),
+                        padding: parseEdgeInsets(control, "padding") ??
+                            const EdgeInsets.all(10),
+                        decoration: BoxDecoration(
+                            color: HexColor.fromString(
+                                context, control.attrString("bgcolor", "")!)),
+                        child: scrollMode != ScrollMode.none
+                            ? ScrollableControl(
+                                child: column,
+                                scrollDirection: Axis.vertical,
+                                scrollMode: scrollMode,
+                              )
+                            : column)),
                 ...offstageWidgets,
                 const ScreenSize()
               ]),

client/lib/models/control_type.dart

@@ -7,6 +7,7 @@ enum ControlType {
   dropdown,
   dropdownOption,
   elevatedButton,
+  floatingActionButton,
   gridView,
   icon,
   iconButton,

docs/roadmap.md

@@ -26,6 +26,7 @@
     * [x] OutlinedButton
     * [x] TextButton
     * [x] IconButton
+    * [x] FloatingActionButton
   * Input and selections
     * [x] TextField
     * [x] Dropdown
@@ -224,10 +225,10 @@
         <td></td>
     </tr>
     <tr>
-        <td></td>
+        <td>✓</td>
         <td>FloatingActionButton</td>
         <td>-</td>
-        <td></td>
+        <td>S1</td>
     </tr>
     <tr><th colspan="4">Input and selections</th></tr>
     <tr>
@@ -714,6 +715,21 @@ Events:
 
 - onPressed
 
+## FloatingActionButton (FAB)
+
+Docs: https://api.flutter.dev/flutter/material/FloatingActionButton-class.html
+
+Properties:
+
+- text
+- icon
+- bgColor
+- content - a Control representing custom button content
+
+Events:
+
+- click
+
 ## RadioGroup
 
 Properties:

sdk/python/flet/__init__.py

@@ -7,6 +7,7 @@
 from flet.dropdown import Dropdown
 from flet.elevated_button import ElevatedButton
 from flet.flet import *
+from flet.floating_action_button import FloatingActionButton
 from flet.grid_view import GridView
 from flet.icon import Icon
 from flet.icon_button import IconButton

sdk/python/flet/floating_action_button.py

@@ -0,0 +1,101 @@
+from typing import Optional
+
+from beartype import beartype
+
+from flet.constrained_control import ConstrainedControl
+from flet.control import Control, OptionalNumber
+from flet.ref import Ref
+
+
+class FloatingActionButton(ConstrainedControl):
+    def __init__(
+        self,
+        text: str = None,
+        ref: Ref = None,
+        width: OptionalNumber = None,
+        height: OptionalNumber = None,
+        expand: int = None,
+        opacity: OptionalNumber = None,
+        visible: bool = None,
+        disabled: bool = None,
+        data: any = None,
+        #
+        # Specific
+        #
+        icon: str = None,
+        bgcolor: str = None,
+        content: Control = None,
+        on_click=None,
+    ):
+        ConstrainedControl.__init__(
+            self,
+            ref=ref,
+            width=width,
+            height=height,
+            expand=expand,
+            opacity=opacity,
+            visible=visible,
+            disabled=disabled,
+            data=data,
+        )
+
+        self.text = text
+        self.icon = icon
+        self.bgcolor = bgcolor
+        self.content = content
+        self.on_click = on_click
+
+    def _get_control_name(self):
+        return "floatingactionbutton"
+
+    def _get_children(self):
+        if self.__content == None:
+            return []
+        self.__content._set_attr_internal("n", "content")
+        return [self.__content]
+
+    # text
+    @property
+    def text(self):
+        return self._get_attr("text")
+
+    @text.setter
+    def text(self, value):
+        self._set_attr("text", value)
+
+    # icon
+    @property
+    def icon(self):
+        return self._get_attr("icon")
+
+    @icon.setter
+    def icon(self, value):
+        self._set_attr("icon", value)
+
+    # bgcolor
+    @property
+    def bgcolor(self):
+        return self._get_attr("bgcolor")
+
+    @bgcolor.setter
+    def bgcolor(self, value):
+        self._set_attr("bgcolor", value)
+
+    # on_click
+    @property
+    def on_click(self):
+        return self._get_event_handler("click")
+
+    @on_click.setter
+    def on_click(self, handler):
+        self._add_event_handler("click", handler)
+
+    # content
+    @property
+    def content(self):
+        return self.__content
+
+    @content.setter
+    @beartype
+    def content(self, value: Optional[Control]):
+        self.__content = value

sdk/python/flet/page.py

@@ -15,6 +15,7 @@
     MainAxisAlignment,
     OptionalNumber,
     PaddingValue,
+    ScrollMode,
 )
 from flet.control_event import ControlEvent
 from flet.embed_json_encoder import EmbedJsonEncoder
@@ -395,6 +396,21 @@ def dark_theme(self, value: Optional[Theme]):
             self.__dark_theme.brightness = "dark"
         self._set_attr("darkTheme", json.dumps(value, default=vars) if value else None)
 
+    # scroll
+    @property
+    def scroll(self):
+        return self.__scroll
+
+    @scroll.setter
+    @beartype
+    def scroll(self, value: ScrollMode):
+        self.__scroll = value
+        if value == True:
+            value = "auto"
+        elif value == False:
+            value = "none"
+        self._set_attr("scroll", value)
+
     # window_width
     @property
     def window_width(self):

sdk/python/playground/todo.py

@@ -5,6 +5,7 @@
     Checkbox,
     Column,
     ElevatedButton,
+    FloatingActionButton,
     IconButton,
     OutlinedButton,
     Page,
@@ -92,12 +93,12 @@ def __init__(self):
         self.view = Column(
             width=600,
             controls=[
-                Row([Text(value="Todos", size=30)], alignment="center"),
+                Row([Text(value="Todos", style="headlineMedium")], alignment="center"),
                 Row(
                     # on_submit=self.add_clicked,
                     controls=[
                         self.new_task,
-                        ElevatedButton(text="Add", on_click=self.add_clicked),
+                        FloatingActionButton(icon=icons.ADD, on_click=self.add_clicked),
                     ],
                 ),
                 Column(
@@ -159,6 +160,7 @@ def clear_clicked(self, e):
 def main(page: Page):
     page.title = "ToDo App"
     page.horizontal_alignment = "center"
+    page.scroll = "adaptive"
     page.update()
     app = TodoApp()
     page.add(app.view)