Auto-scrollable ListView

Author: FeodorFitsner

client/lib/controls/column.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/widgets.dart';
+
 import '../models/control.dart';
 import '../utils/alignment.dart';
 import 'create_control.dart';
@@ -53,40 +54,34 @@ class ColumnControl extends StatelessWidget {
       controls.add(createControl(control, ctrl.id, disabled));
     }
 
+    Widget widget = wrap
+        ? Wrap(
+            direction: Axis.vertical,
+            children: controls,
+            spacing: spacing,
+            runSpacing: control.attrDouble("runSpacing", 10)!,
+            alignment:
+                parseWrapAlignment(control, "alignment", WrapAlignment.start),
+            crossAxisAlignment: parseWrapCrossAlignment(
+                control, "horizontalAlignment", WrapCrossAlignment.start),
+          )
+        : Column(
+            mainAxisAlignment: mainAlignment,
+            mainAxisSize: tight ? MainAxisSize.min : MainAxisSize.max,
+            crossAxisAlignment: parseCrossAxisAlignment(
+                control, "horizontalAlignment", CrossAxisAlignment.start),
+            children: controls,
+          );
+
     return constrainedControl(
-        wrapAutoScroll(
-            wrap
-                ? Wrap(
-                    direction: Axis.vertical,
-                    children: controls,
-                    spacing: spacing,
-                    runSpacing: control.attrDouble("runSpacing", 10)!,
-                    alignment: parseWrapAlignment(
-                        control, "alignment", WrapAlignment.start),
-                    crossAxisAlignment: parseWrapCrossAlignment(control,
-                        "horizontalAlignment", WrapCrossAlignment.start),
-                  )
-                : Column(
-                    mainAxisAlignment: mainAlignment,
-                    mainAxisSize: tight ? MainAxisSize.min : MainAxisSize.max,
-                    crossAxisAlignment: parseCrossAxisAlignment(control,
-                        "horizontalAlignment", CrossAxisAlignment.start),
-                    children: controls,
-                  ),
-            wrap: wrap,
-            scrollMode: scrollMode),
+        scrollMode != ScrollMode.none
+            ? ScrollableControl(
+                child: widget,
+                scrollDirection: wrap ? Axis.horizontal : Axis.vertical,
+                scrollMode: scrollMode,
+              )
+            : widget,
         parent,
         control);
   }
-
-  Widget wrapAutoScroll(Widget child,
-      {required bool wrap, required ScrollMode scrollMode}) {
-    return scrollMode != ScrollMode.none
-        ? ScrollableControl(
-            child: child,
-            scrollDirection: wrap ? Axis.horizontal : Axis.vertical,
-            scrollMode: scrollMode,
-          )
-        : child;
-  }
 }

client/lib/controls/list_view.dart

@@ -10,21 +10,33 @@ class ListViewControl extends StatelessWidget {
   final bool parentDisabled;
   final List<Control> children;
 
-  const ListViewControl(
+  ListViewControl(
       {Key? key,
       this.parent,
       required this.control,
       required this.children,
       required this.parentDisabled})
       : super(key: key);
 
+  final ScrollController _controller = ScrollController();
+
+// This is what you're looking for!
+  void _scrollDown() {
+    _controller.animateTo(
+      _controller.position.maxScrollExtent,
+      duration: const Duration(seconds: 1),
+      curve: Curves.fastOutSlowIn,
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
     debugPrint("ListViewControl build: ${control.id}");
 
     bool disabled = control.isDisabled || parentDisabled;
 
     final horizontal = control.attrBool("horizontal", false)!;
+    final autoScroll = control.attrBool("autoScroll", false)!;
     final spacing = control.attrDouble("spacing", 0)!;
     final padding = parseEdgeInsets(control, "padding");
 
@@ -43,8 +55,15 @@ class ListViewControl extends StatelessWidget {
       controls.add(createControl(control, ctrl.id, disabled));
     }
 
+    if (autoScroll) {
+      WidgetsBinding.instance!.addPostFrameCallback((_) {
+        _scrollDown();
+      });
+    }
+
     return constrainedControl(
         ListView(
+          controller: _controller,
           scrollDirection: horizontal ? Axis.horizontal : Axis.vertical,
           padding: padding,
           children: controls,

docs/roadmap.md

@@ -32,9 +32,9 @@
     * [x] Slider
     * [x] Switch
   * Dialogs, alerts and panels
-    * [ ] Banner
+    * [x] Banner
     * [x] SnackBar
-    * [ ] AlertDialog
+    * [x] AlertDialog
 
 * Flet Client
   * [ ] Web

sdk/python/flet/list_view.py

@@ -28,6 +28,7 @@ def __init__(
         horizontal: bool = None,
         spacing: OptionalNumber = None,
         padding: PaddingValue = None,
+        auto_scroll: bool = None,
     ):
         ConstrainedControl.__init__(
             self,
@@ -46,6 +47,7 @@ def __init__(
         self.horizontal = horizontal
         self.spacing = spacing
         self.padding = padding
+        self.auto_scroll = auto_scroll
 
     def _get_control_name(self):
         return "listview"
@@ -96,3 +98,13 @@ def controls(self):
     @controls.setter
     def controls(self, value):
         self.__controls = value or []
+
+    # auto_scroll
+    @property
+    def auto_scroll(self):
+        return self._get_attr("autoScroll")
+
+    @auto_scroll.setter
+    @beartype
+    def auto_scroll(self, value: Optional[bool]):
+        self._set_attr("autoScroll", value)

sdk/python/playground/banner-test.py

@@ -6,16 +6,8 @@
 logging.basicConfig(level=logging.DEBUG)
 
 
-class Data:
-    def __init__(self) -> None:
-        self.counter = 0
-
-
-d = Data()
-
-
 def main(page):
-    page.title = "SnackBar Example"
+    page.title = "Banner Example"
     page.update()
 
     def close_banner(e):
@@ -42,4 +34,4 @@ def show_banner_click(e):
     page.add(ElevatedButton("Show Banner", on_click=show_banner_click))
 
 
-flet.app(name="test1", port=8550, target=main, view=flet.WEB_BROWSER)
+flet.app(name="test1", port=8550, target=main, view=flet.FLET_APP)

sdk/python/playground/listview-scroll.py

@@ -0,0 +1,42 @@
+import json
+import logging
+from datetime import datetime
+from msilib.schema import Icon
+from time import sleep
+
+from click import style
+
+import flet
+from flet import Column, ElevatedButton, ListView, Page, Row, Text, Theme
+from flet.stack import Stack
+
+logging.basicConfig(level=logging.DEBUG)
+
+
+def main(page: Page):
+    page.title = "Text Examples"
+    page.padding = 50
+    page.spacing = 30
+    page.vertical_alignment = "start"
+    page.horizontal_alignment = "center"
+    page.bgcolor = "blueGrey200"
+    page.update()
+
+    lv = ListView(expand=1, spacing=10, padding=20, auto_scroll=True)
+
+    count = 1
+
+    for i in range(0, 60):
+        lv.controls.append(Text(f"Line {count}"))
+        count += 1
+
+    page.add(lv)
+
+    for i in range(0, 60):
+        sleep(1)
+        lv.controls.append(Text(f"Line {count}"))
+        count += 1
+        page.update()
+
+
+flet.app(name="test1", port=8550, target=main, view=flet.FLET_APP)