Dynamic lazy building ListView and GridView controls

Author: FeodorFitsner

client/lib/controls/grid_view.dart

@@ -26,21 +26,34 @@ class GridViewControl extends StatelessWidget {
 
     final horizontal = control.attrBool("horizontal", false)!;
     final runsCount = control.attrInt("runsCount", 1)!;
+    final maxExtent = control.attrDouble("maxExtent");
     final spacing = control.attrDouble("spacing", 10)!;
     final runSpacing = control.attrDouble("runSpacing", 10)!;
     final padding = parseEdgeInsets(control, "padding");
 
-    List<Widget> controls =
-        children.map((c) => createControl(control, c.id, disabled)).toList();
+    List<Control> visibleControls = children.where((c) => c.isVisible).toList();
+
+    var gridDelegate = maxExtent == null
+        ? SliverGridDelegateWithFixedCrossAxisCount(
+            crossAxisCount: runsCount,
+            mainAxisSpacing: spacing,
+            crossAxisSpacing: runSpacing,
+            childAspectRatio: 1)
+        : SliverGridDelegateWithMaxCrossAxisExtent(
+            maxCrossAxisExtent: maxExtent,
+            mainAxisSpacing: spacing,
+            crossAxisSpacing: runSpacing,
+            childAspectRatio: 1);
 
     return constrainedControl(
-        GridView.count(
+        GridView.builder(
           scrollDirection: horizontal ? Axis.horizontal : Axis.vertical,
-          crossAxisCount: runsCount,
-          mainAxisSpacing: spacing,
-          crossAxisSpacing: runSpacing,
           padding: padding,
-          children: controls,
+          gridDelegate: gridDelegate,
+          itemCount: visibleControls.length,
+          itemBuilder: (context, index) {
+            return createControl(control, visibleControls[index].id, disabled);
+          },
         ),
         parent,
         control);

client/lib/controls/list_view.dart

@@ -1,3 +1,4 @@
+import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
 
 import '../models/control.dart';
@@ -40,20 +41,7 @@ class ListViewControl extends StatelessWidget {
     final spacing = control.attrDouble("spacing", 0)!;
     final padding = parseEdgeInsets(control, "padding");
 
-    List<Widget> controls = [];
-
-    bool firstControl = true;
-    for (var ctrl in children.where((c) => c.isVisible)) {
-      // spacer between displayed controls
-      if (spacing > 0 && !firstControl) {
-        controls.add(
-            horizontal ? SizedBox(width: spacing) : SizedBox(height: spacing));
-      }
-      firstControl = false;
-
-      // displayed control
-      controls.add(createControl(control, ctrl.id, disabled));
-    }
+    List<Control> visibleControls = children.where((c) => c.isVisible).toList();
 
     if (autoScroll) {
       WidgetsBinding.instance!.addPostFrameCallback((_) {
@@ -62,13 +50,33 @@ class ListViewControl extends StatelessWidget {
     }
 
     return constrainedControl(
-        ListView.builder(
-            controller: _controller,
-            scrollDirection: horizontal ? Axis.horizontal : Axis.vertical,
-            padding: padding,
-            itemBuilder: (context, index) {
-              return null;
-            }),
+        spacing > 0
+            ? ListView.separated(
+                controller: _controller,
+                scrollDirection: horizontal ? Axis.horizontal : Axis.vertical,
+                padding: padding,
+                itemCount: children.length,
+                itemBuilder: (context, index) {
+                  return createControl(
+                      control, visibleControls[index].id, disabled);
+                },
+                separatorBuilder: (context, index) {
+                  return Divider(height: spacing);
+                },
+              )
+            : ListView.builder(
+                controller: _controller,
+                scrollDirection: horizontal ? Axis.horizontal : Axis.vertical,
+                padding: padding,
+                itemCount: children.length,
+                itemBuilder: (context, index) {
+                  return createControl(
+                      control, visibleControls[index].id, disabled);
+                },
+                prototypeItem: children.isNotEmpty
+                    ? createControl(control, visibleControls[0].id, disabled)
+                    : null,
+              ),
         parent,
         control);
   }

sdk/python/flet/grid_view.py

@@ -27,6 +27,7 @@ def __init__(
         #
         horizontal: bool = None,
         runs_count: int = None,
+        max_extent: int = None,
         spacing: OptionalNumber = None,
         run_spacing: OptionalNumber = None,
         padding: PaddingValue = None,
@@ -47,6 +48,7 @@ def __init__(
         self.controls = controls
         self.horizontal = horizontal
         self.runs_count = runs_count
+        self.max_extent = max_extent
         self.spacing = spacing
         self.run_spacing = run_spacing
         self.padding = padding
@@ -77,6 +79,16 @@ def runs_count(self):
     def runs_count(self, value: Optional[int]):
         self._set_attr("runsCount", value)
 
+    # max_extent
+    @property
+    def max_extent(self):
+        return self._get_attr("maxExtent")
+
+    @max_extent.setter
+    @beartype
+    def max_extent(self, value: OptionalNumber):
+        self._set_attr("maxExtent", value)
+
     # spacing
     @property
     def spacing(self):

sdk/python/playground/icons-browser.py

@@ -0,0 +1,104 @@
+import logging
+import os
+from datetime import datetime
+from time import sleep
+
+import flet
+from flet import (
+    Column,
+    Container,
+    GridView,
+    Icon,
+    IconButton,
+    ListView,
+    OutlinedButton,
+    Page,
+    Row,
+    Text,
+    TextField,
+    Theme,
+    alignment,
+    border,
+    border_radius,
+    colors,
+    icons,
+    padding,
+)
+
+# logging.basicConfig(level=logging.DEBUG)
+
+# fetch all icon constants from icons.py module
+icons_list = []
+list_started = False
+for name, value in vars(icons).items():
+    if name == "TEN_K":
+        list_started = True
+    if list_started:
+        icons_list.append(value)
+
+os.environ["FLET_WS_MAX_MESSAGE_SIZE"] = "8000000"
+
+
+def main(page: Page):
+    page.title = "Flet icons browser"
+
+    search_txt = TextField(expand=1, hint_text="Enter keyword and press search button")
+    # search_results = ListView(expand=1, wrap=True, scroll="always")
+    # search_results = ListView(expand=1, spacing=2)
+    search_results = GridView(
+        expand=1, runs_count=10, max_extent=100, spacing=5, run_spacing=5
+    )
+
+    def display_icons(search_term: str):
+
+        # clean search results
+        search_results.controls.clear()
+        page.update()
+
+        # add matching icons
+        for i in range(0, len(icons_list)):
+            if search_term != "" and search_term in icons_list[i]:
+                search_results.controls.append(
+                    Container(
+                        content=Column(
+                            [
+                                Icon(
+                                    name=icons_list[i],
+                                ),
+                                Text(
+                                    value=icons_list[i],
+                                    size=10,
+                                    width=100,
+                                    # selectable=True,
+                                    text_align="center",
+                                    color=colors.BLACK87,
+                                ),
+                            ],
+                            spacing=5,
+                            alignment="center",
+                            horizontal_alignment="center",
+                        ),
+                        alignment=alignment.center,
+                        padding=padding.only(left=5, right=5),
+                        # border=border.all(1, colors.BLACK26),
+                        bgcolor="#f0f0f0",
+                        border_radius=border_radius.all(3),
+                    )
+                )
+        print("Icons found:", len(search_results.controls))
+        if len(search_results.controls) == 0:
+            search_results.controls.append(
+                Text(f'No icons found with text "{search_term}".')
+            )
+        page.update()
+
+    def search_click(e):
+        display_icons(search_txt.value)
+
+    page.add(
+        Row([search_txt, IconButton(icon=icons.SEARCH, on_click=search_click)]),
+        search_results,
+    )
+
+
+flet.app(name="test1", port=8550, target=main, view=flet.FLET_APP)