Icon browser and other gallery examples for 0.80.0

sdk/python/examples/apps/icons_browser/main.py

@@ -1,32 +1,16 @@
-import os
+import asyncio
 from itertools import islice
 
-import flet
-from flet import (
-    Colors,
-    Column,
-    Container,
-    GridView,
-    Icon,
-    IconButton,
-    Icons,
-    Page,
-    Row,
-    SnackBar,
-    Text,
-    TextButton,
-    TextField,
-    alignment,
-)
+import flet as ft
 
 # logging.basicConfig(level=logging.INFO)
+ft.context.disable_auto_update()
 
-os.environ["FLET_WS_MAX_MESSAGE_SIZE"] = "8000000"
 
-
-class IconBrowser(Container):
-    def __init__(self, expand=False, height=500):
+class IconBrowser(ft.Container):
+    def __init__(self, icon_set, expand=False, height=500):
         super().__init__()
+        self.icon_set = icon_set
         if expand:
             self.expand = expand
         else:
@@ -39,91 +23,101 @@ def batches(iterable, batch_size):
                 yield batch
 
         # fetch all icon constants from icons.py module
-        icons_list = []
-        list_started = False
-        for icon in Icons:
-            icons_list.append(icon.name)
+        icons_list = list(self.icon_set)
+
+        search_icon = (
+            self.icon_set.SEARCH
+            if hasattr(self.icon_set, "SEARCH")
+            else ft.Icons.SEARCH
+        )
+
+        async def search_click():
+            await display_icons(search_txt.value)
 
-        search_txt = TextField(
+        search_txt = ft.TextField(
             expand=1,
-            hint_text="Enter keyword and press search button. To view all icons enter *",
+            hint_text="Enter keyword and press search button. "
+            "To view all icons enter *",
             autofocus=True,
-            on_submit=lambda e: display_icons(e.control.value),
+            on_submit=search_click,
         )
 
-        def search_click(e):
-            display_icons(search_txt.value)
-
-        search_query = Row(
-            [search_txt, IconButton(icon=Icons.SEARCH, on_click=search_click)]
+        search_query = ft.Row(
+            [search_txt, ft.IconButton(icon=search_icon, on_click=search_click)]
         )
 
-        search_results = GridView(
+        search_results = ft.GridView(
             expand=1,
             runs_count=10,
             max_extent=150,
             spacing=5,
             run_spacing=5,
             child_aspect_ratio=1,
         )
-        status_bar = Text()
+        status_bar = ft.Text()
 
-        def copy_to_clipboard(e):
+        async def copy_to_clipboard(e):
             icon_key = e.control.data
             print("Copy to clipboard:", icon_key)
-            self.page.set_clipboard(e.control.data)
-            self.page.open(SnackBar(Text(f"Copied {icon_key}"), open=True))
+            await ft.Clipboard().set(icon_key)
+            self.page.show_dialog(ft.SnackBar(ft.Text(f"Copied {icon_key}")))
 
         def search_icons(search_term: str):
             # switch variable to allow empty search, which shows all icons
             all_icons = 0
-            for icon_name in icons_list:
+            for icon in icons_list:
+                icon_name = icon.name
                 if all_icons == 1 or search_term != "":
                     # match search to query
                     if search_term != "" and search_term in icon_name:
                         all_icons = 0
-                        yield icon_name
+                        yield icon
                     # turn on switch, empty search, and yield to not skip 1st icon
                     elif search_term == "*":
                         all_icons = 1
                         search_term = ""
-                        yield icon_name
+                        yield icon
                     # all_icons is 1, which allows for empty search, which shows all
                     elif search_term == "" and all_icons == 1:
-                        yield icon_name
+                        yield icon
                     else:
                         all_icons = 0
 
-        def display_icons(search_term: str):
+        async def display_icons(search_term: str):
             # clean search results
             search_query.disabled = True
             self.update()
 
-            search_results.clean()
+            search_results.controls.clear()
+            search_results.update()
+
+            print("Searching for icons with term:", search_term)
 
-            for batch in batches(search_icons(search_term.upper()), 200):
-                for icon_name in batch:
-                    icon_key = f"Icons.{icon_name.upper()}"
+            for batch in batches(search_icons(search_term.upper()), 500):
+                for icon in batch:
+                    icon_name = icon.name
+                    icon_key = f"ft.{icon.__class__.__name__}.{icon_name}"
+                    # print("Found icon:", icon_key)
                     search_results.controls.append(
-                        TextButton(
-                            content=Container(
-                                content=Column(
+                        ft.TextButton(
+                            content=ft.Container(
+                                content=ft.Column(
                                     [
-                                        Icon(name=icon_name, size=30),
-                                        Text(
+                                        ft.Icon(icon=icon, size=30),
+                                        ft.Text(
                                             value=f"{icon_name}",
                                             size=12,
                                             width=100,
                                             no_wrap=True,
-                                            text_align="center",
-                                            color=Colors.ON_SURFACE_VARIANT,
+                                            text_align=ft.TextAlign.CENTER,
+                                            color=ft.Colors.ON_SURFACE_VARIANT,
                                         ),
                                     ],
                                     spacing=5,
-                                    alignment="center",
-                                    horizontal_alignment="center",
+                                    alignment=ft.MainAxisAlignment.CENTER,
+                                    horizontal_alignment=ft.CrossAxisAlignment.CENTER,
                                 ),
-                                alignment=alignment.center,
+                                alignment=ft.Alignment.CENTER,
                             ),
                             tooltip=f"{icon_key}\nClick to copy to a clipboard",
                             on_click=copy_to_clipboard,
@@ -132,13 +126,15 @@ def display_icons(search_term: str):
                     )
                 status_bar.value = f"Icons found: {len(search_results.controls)}"
                 self.update()
+                print(f"Displayed {len(search_results.controls)} icons so far...")
+                await asyncio.sleep(0.1)  # allow UI to update
 
             if len(search_results.controls) == 0:
-                self.page.open(SnackBar(Text("No icons found"), open=True))
+                self.page.show_dialog(ft.SnackBar(ft.Text("No icons found")))
             search_query.disabled = False
             self.update()
 
-        self.content = Column(
+        self.content = ft.Column(
             [
                 search_query,
                 search_results,
@@ -148,9 +144,33 @@ def display_icons(search_term: str):
         )
 
 
-def main(page: Page):
+def main(page: ft.Page):
     page.title = "Flet icons browser"
-    page.add(IconBrowser(expand=True))
+    page.add(
+        ft.Tabs(
+            selected_index=0,
+            length=2,
+            expand=True,
+            content=ft.Column(
+                expand=True,
+                controls=[
+                    ft.TabBar(
+                        tabs=[
+                            ft.Tab(label="Material"),
+                            ft.Tab(label="Cupertino"),
+                        ]
+                    ),
+                    ft.TabBarView(
+                        expand=True,
+                        controls=[
+                            IconBrowser(ft.Icons, expand=True),
+                            IconBrowser(ft.CupertinoIcons, expand=True),
+                        ],
+                    ),
+                ],
+            ),
+        )
+    )
 
 
-flet.app(target=main)
+ft.run(main)

sdk/python/examples/apps/icons_browser/requirements.txt

@@ -1 +1,2 @@
-flet>=0.27.0
+flet>=0.80.0
+flet-web>=0.80.0