From 10a2b61d51336430bdb44c86d7d177638694473e Mon Sep 17 00:00:00 2001 From: Inesa Fitsner Date: Mon, 28 Nov 2022 13:41:21 -0800 Subject: [PATCH 01/55] added comments for page, container, tooltip --- sdk/python/flet/container.py | 22 ++++++++++++++--- sdk/python/flet/page.py | 24 ++++++++++++++++++ sdk/python/flet/tooltip.py | 47 ++++++++++++++++++++++++++++++++++++ 3 files changed, 90 insertions(+), 3 deletions(-) diff --git a/sdk/python/flet/container.py b/sdk/python/flet/container.py index 238ed7639..d3fb7d2db 100644 --- a/sdk/python/flet/container.py +++ b/sdk/python/flet/container.py @@ -41,9 +41,25 @@ class Container(ConstrainedControl): """ Container allows to decorate a control with background color and border and position it with padding, margin and alignment. - Args: - width (:obj:`int`|:obj:`float`, optional): Container width. - height (:obj:`int`|:obj:`float`, optional): Container height. + Example: + + ``` + import flet as ft + + def main(page: ft.Page): + page.title = "Container" + + c1 = ft.Container( + content=ft.Text("Container with background"), + bgcolor=ft.colors.AMBER_100, + padding=5, + ) + page.add(c1) + + ft.app(target=main) + ``` + + ----- Online docs: https://flet.dev/docs/controls/container """ diff --git a/sdk/python/flet/page.py b/sdk/python/flet/page.py index 65ad91ea8..7e83f1cdb 100644 --- a/sdk/python/flet/page.py +++ b/sdk/python/flet/page.py @@ -49,6 +49,30 @@ class Page(Control): + """ + Page is a container for `View` (https://flet.dev/docs/controls/view) controls. + + A page instance and the root view are automatically created when a new user session started. + + Example: + + ``` + import flet as ft + + + def main(page: ft.Page): + page.title = "New page" + page.add(ft.Text("Hello")) + + + ft.app(target=main) + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/page + """ + def __init__(self, conn: Connection, session_id): Control.__init__(self) diff --git a/sdk/python/flet/tooltip.py b/sdk/python/flet/tooltip.py index c163ba1e2..d94fd2977 100644 --- a/sdk/python/flet/tooltip.py +++ b/sdk/python/flet/tooltip.py @@ -18,6 +18,53 @@ class Tooltip(Control): + """ + Tooltips provide text labels which help explain the function of a button or other user interface action. Wrap the button in a Tooltip control and provide a message which will be shown when the control is long pressed. + + Example: + ``` + import math + + import flet as ft + from flet import alignment + + def main(page: ft.Page): + page.title = "Tooltip Example" + page.add( + ft.Tooltip( + message="This is tooltip", + content=ft.Text("Hover to see tooltip"), + padding=20, + border_radius=10, + text_style=ft.TextStyle(size=20, color=ft.colors.WHITE), + gradient=ft.LinearGradient( + begin=alignment.top_left, + end=alignment.Alignment(0.8, 1), + colors=[ + "0xff1f005c", + "0xff5b0060", + "0xff870160", + "0xffac255e", + "0xffca485c", + "0xffe16b5c", + "0xfff39060", + "0xffffb56b", + ], + tile_mode=ft.GradientTileMode.MIRROR, + rotation=math.pi / 3, + ), + ) + ) + + + ft.app(target=main) + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/tooltip + """ + def __init__( self, ref: Optional[Ref] = None, From fef2fa6c7e16474347db2a146259edfde06c9576 Mon Sep 17 00:00:00 2001 From: Inesa Fitsner Date: Mon, 28 Nov 2022 13:57:55 -0800 Subject: [PATCH 02/55] comments for view, row --- sdk/python/flet/row.py | 35 +++++++++++++++++++++++++++++++++++ sdk/python/flet/view.py | 10 ++++++++++ 2 files changed, 45 insertions(+) diff --git a/sdk/python/flet/row.py b/sdk/python/flet/row.py index bbae4c935..dc3db5f72 100644 --- a/sdk/python/flet/row.py +++ b/sdk/python/flet/row.py @@ -22,6 +22,41 @@ class Row(ConstrainedControl): + """ + A control that displays its children in a horizontal array. + + To cause a child control to expand and fill the available horizontal space, set its `expand` property. + + Example: + + ``` + import flet as ft + + def main(page: ft.Page): + page.title = "Row example" + + page.add( + ft.Row( + controls=[ + ft.ElevatedButton(expand=1, text="Button1"), + ft.ElevatedButton(expand=2, text="Button2"), + ] + ), + ft.Row( + controls=[ + ft.ElevatedButton(expand=True, text="Button3"), + ] + ), + ) + + ft.app(target=main) + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/row + """ + def __init__( self, controls: Optional[List[Control]] = None, diff --git a/sdk/python/flet/view.py b/sdk/python/flet/view.py index 55f9ff6d4..314cbc5c5 100644 --- a/sdk/python/flet/view.py +++ b/sdk/python/flet/view.py @@ -18,6 +18,16 @@ class View(Control): + """ + View is the top most container for all other controls. + + A root view is automatically created when a new user session started. From layout perspective the View represents a `Column`(https://flet.dev/docs/controls/column/) control, so it has a similar behavior and shares same properties. + + ----- + + Online docs: https://flet.dev/docs/controls/view + """ + def __init__( self, route: Optional[str] = None, From 3a1df367c82b026428aee76ccde844fcf950a850 Mon Sep 17 00:00:00 2001 From: Inesa Fitsner Date: Mon, 28 Nov 2022 14:14:20 -0800 Subject: [PATCH 03/55] comments for column --- sdk/python/flet/column.py | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/sdk/python/flet/column.py b/sdk/python/flet/column.py index 32a607392..e610b6454 100644 --- a/sdk/python/flet/column.py +++ b/sdk/python/flet/column.py @@ -22,6 +22,41 @@ class Column(ConstrainedControl): + """ + Container allows to decorate a control with background color and border and position it with padding, margin and alignment. + + Example: + + ``` + import flet as ft + + def main(page: ft.Page): + page.title = "Column example" + + page.add( + ft.Column( + expand=True, + controls=[ + ft.Container( + expand=1, + content=ft.Text("Container 1"), + bgcolor=ft.colors.GREEN_100, + ), + ft.Container( + expand=2, content=ft.Text("Container 2"), bgcolor=ft.colors.RED_100 + ), + ], + ), + ), + + ft.app(target=main) + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/column + """ + def __init__( self, controls: Optional[List[Control]] = None, From 88d5f26f3f0c7f7a5d9a127249bae5268bcb0ee0 Mon Sep 17 00:00:00 2001 From: Inesa Fitsner Date: Mon, 28 Nov 2022 14:17:43 -0800 Subject: [PATCH 04/55] updated example --- sdk/python/flet/row.py | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/sdk/python/flet/row.py b/sdk/python/flet/row.py index dc3db5f72..00efa7600 100644 --- a/sdk/python/flet/row.py +++ b/sdk/python/flet/row.py @@ -32,22 +32,25 @@ class Row(ConstrainedControl): ``` import flet as ft + def main(page: ft.Page): page.title = "Row example" page.add( ft.Row( controls=[ - ft.ElevatedButton(expand=1, text="Button1"), - ft.ElevatedButton(expand=2, text="Button2"), - ] - ), - ft.Row( - controls=[ - ft.ElevatedButton(expand=True, text="Button3"), - ] + ft.Container( + expand=1, + content=ft.Text("Container 1"), + bgcolor=ft.colors.GREEN_100, + ), + ft.Container( + expand=2, content=ft.Text("Container 2"), bgcolor=ft.colors.RED_100 + ), + ], ), - ) + ), + ft.app(target=main) ``` From cfddebf45621eda2cdf1500b4f3c841194cb7729 Mon Sep 17 00:00:00 2001 From: Inesa Fitsner Date: Mon, 28 Nov 2022 14:34:08 -0800 Subject: [PATCH 05/55] comments --- sdk/python/flet/stack.py | 47 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) diff --git a/sdk/python/flet/stack.py b/sdk/python/flet/stack.py index e9221cf19..a97c8e630 100644 --- a/sdk/python/flet/stack.py +++ b/sdk/python/flet/stack.py @@ -23,6 +23,53 @@ class Stack(ConstrainedControl): + """ + A control that positions its children on top of each other. + + This control is useful if you want to overlap several children in a simple way, for example having some text and an image, overlaid with a gradient and a button attached to the bottom. + + Stack is also useful if you want to implement implicit animations (https://flet.dev/docs/guides/python/animations/) that require knowing absolute position of a target value. + + Example: + + ``` + import flet as ft + + def main(page: ft.Page): + st = ft.Stack( + controls=[ + ft.Image( + src=f"https://picsum.photos/300/300", + width=300, + height=300, + fit=ft.ImageFit.CONTAIN, + ), + ft.Row( + controls=[ + ft.Text( + "Image title", + color="white", + size=40, + weight="bold", + opacity=0.5, + ) + ], + alignment=ft.MainAxisAlignment.CENTER, + ), + ], + width=300, + height=300, + ) + + page.add(st) + + ft.app(target=main) + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/stack + """ def __init__( self, controls: Optional[List[Control]] = None, From 7f74f5f21d0fdc3f2c16261387afcda6d946373c Mon Sep 17 00:00:00 2001 From: Inesa Fitsner Date: Mon, 28 Nov 2022 14:38:23 -0800 Subject: [PATCH 06/55] Update stack.py --- sdk/python/flet/stack.py | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/sdk/python/flet/stack.py b/sdk/python/flet/stack.py index a97c8e630..fca25c802 100644 --- a/sdk/python/flet/stack.py +++ b/sdk/python/flet/stack.py @@ -23,13 +23,13 @@ class Stack(ConstrainedControl): - """ + """ A control that positions its children on top of each other. This control is useful if you want to overlap several children in a simple way, for example having some text and an image, overlaid with a gradient and a button attached to the bottom. - + Stack is also useful if you want to implement implicit animations (https://flet.dev/docs/guides/python/animations/) that require knowing absolute position of a target value. - + Example: ``` @@ -70,6 +70,7 @@ def main(page: ft.Page): Online docs: https://flet.dev/docs/controls/stack """ + def __init__( self, controls: Optional[List[Control]] = None, From be7d7881bec459f6496d74cfa561d34197a8b3b9 Mon Sep 17 00:00:00 2001 From: Inesa Fitsner Date: Tue, 29 Nov 2022 08:39:28 -0800 Subject: [PATCH 07/55] Update list_view.py --- sdk/python/flet/list_view.py | 38 ++++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/sdk/python/flet/list_view.py b/sdk/python/flet/list_view.py index 437260d10..17c8d2ff1 100644 --- a/sdk/python/flet/list_view.py +++ b/sdk/python/flet/list_view.py @@ -17,6 +17,44 @@ class ListView(ConstrainedControl): + """ + A scrollable list of controls arranged linearly. + + ListView is the most commonly used scrolling control. It displays its children one after another in the scroll direction. In the cross axis, the children are required to fill the ListView. + + Example: + + ``` + from time import sleep + import flet as ft + + def main(page: ft.Page): + page.title = "Auto-scrolling ListView" + + lv = ft.ListView(expand=1, spacing=10, padding=20, auto_scroll=True) + + count = 1 + + for i in range(0, 60): + lv.controls.append(ft.Text(f"Line {count}")) + count += 1 + + page.add(lv) + + for i in range(0, 60): + sleep(1) + lv.controls.append(ft.Text(f"Line {count}")) + count += 1 + page.update() + + ft.app(target=main) + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/listview + """ + def __init__( self, controls: Optional[List[Control]] = None, From 8e5753e0559fb6da3ce4f884b77cbe5571c595d4 Mon Sep 17 00:00:00 2001 From: Inesa Fitsner Date: Tue, 29 Nov 2022 08:44:11 -0800 Subject: [PATCH 08/55] Update list_tile.py --- sdk/python/flet/list_tile.py | 40 ++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/sdk/python/flet/list_tile.py b/sdk/python/flet/list_tile.py index d442b663f..236ffbd46 100644 --- a/sdk/python/flet/list_tile.py +++ b/sdk/python/flet/list_tile.py @@ -16,6 +16,46 @@ class ListTile(ConstrainedControl): + """ + A single fixed-height row that typically contains some text as well as a leading or trailing icon. + + Example: + + ``` + import flet as ft + + def main(page): + page.title = "ListTile Example" + page.add( + ft.Card( + content=ft.Container( + width=500, + content=ft.Column( + [ + ft.ListTile( + title=ft.Text("One-line list tile"), + ), + ft.ListTile( + leading=ft.Icon(ft.icons.SETTINGS), + title=ft.Text("One-line selected list tile"), + selected=True, + ), + ], + spacing=0, + ), + padding=ft.padding.symmetric(vertical=10), + ) + ) + ) + + ft.app(target=main) + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/listtile + """ + def __init__( self, ref: Optional[Ref] = None, From 280a21b2260d49f33b2bf35ba7a481afa2f75da4 Mon Sep 17 00:00:00 2001 From: Inesa Fitsner Date: Tue, 29 Nov 2022 08:50:37 -0800 Subject: [PATCH 09/55] Update grid_view.py --- sdk/python/flet/grid_view.py | 46 ++++++++++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) diff --git a/sdk/python/flet/grid_view.py b/sdk/python/flet/grid_view.py index 917dedc3e..f1fc665a5 100644 --- a/sdk/python/flet/grid_view.py +++ b/sdk/python/flet/grid_view.py @@ -17,6 +17,52 @@ class GridView(ConstrainedControl): + """ + A scrollable, 2D array of controls. + + GridView is very effective for large lists (thousands of items). Prefer it over wrapping `Column` or `Row` for smooth scrolling. + + Example: + ``` + import flet as ft + + def main(page: ft.Page): + page.title = "GridView Example" + page.theme_mode = ft.ThemeMode.DARK + page.padding = 50 + page.update() + + images = ft.GridView( + expand=1, + runs_count=5, + max_extent=150, + child_aspect_ratio=1.0, + spacing=5, + run_spacing=5, + ) + + page.add(images) + + for i in range(0, 60): + images.controls.append( + ft.Image( + src=f"https://picsum.photos/150/150?{i}", + fit=ft.ImageFit.NONE, + repeat=ft.ImageRepeat.NO_REPEAT, + border_radius=ft.border_radius.all(10), + ) + ) + page.update() + + ft.app(target=main) + + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/gridview + """ + def __init__( self, controls: Optional[List[Control]] = None, From ebec45f53bd7ad0004d5e6bcb7e13dfafa052548 Mon Sep 17 00:00:00 2001 From: Inesa Fitsner Date: Tue, 29 Nov 2022 09:14:00 -0800 Subject: [PATCH 10/55] Update responsive_row.py --- sdk/python/flet/responsive_row.py | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/sdk/python/flet/responsive_row.py b/sdk/python/flet/responsive_row.py index 2e5b53c0e..fc21c2432 100644 --- a/sdk/python/flet/responsive_row.py +++ b/sdk/python/flet/responsive_row.py @@ -20,6 +20,37 @@ class ResponsiveRow(ConstrainedControl): + """ + ResponsiveRow allows aligning child controls to virtual columns. By default, a virtual grid has 12 columns, but that can be customized with `ResponsiveRow.columns` property. + + Similar to `expand` property, every control now has `col` property which allows specifying how many columns a control should span. + + Example: + + ``` + import flet as ft + + def main(page: ft.Page): + + page.add( + ft.ResponsiveRow( + [ + ft.TextField(label="TextField 1", col={"md": 4}), + ft.TextField(label="TextField 2", col={"md": 4}), + ft.TextField(label="TextField 3", col={"md": 4}), + ], + run_spacing={"xs": 10}, + ), + ) + + ft.app(target=main) + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/responsiverow + """ + def __init__( self, controls: Optional[List[Control]] = None, From a8fd4d0ed23def8bbdc00a81f1d235fbbceae42f Mon Sep 17 00:00:00 2001 From: Inesa Fitsner Date: Tue, 29 Nov 2022 09:20:29 -0800 Subject: [PATCH 11/55] Update tabs.py --- sdk/python/flet/tabs.py | 45 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) diff --git a/sdk/python/flet/tabs.py b/sdk/python/flet/tabs.py index 044c1ba2e..f6ccbf8f9 100644 --- a/sdk/python/flet/tabs.py +++ b/sdk/python/flet/tabs.py @@ -16,6 +16,7 @@ class Tab(Control): + def __init__( self, text: Optional[str] = None, @@ -83,6 +84,50 @@ def content(self, value): class Tabs(ConstrainedControl): + """ + The Tabs control is used for navigating frequently accessed, distinct content categories. Tabs allow for navigation between two or more content views and relies on text headers to articulate the different sections of content. + + Example: + ``` + import flet as ft + + + def main(page: ft.Page): + + t = ft.Tabs( + selected_index=1, + animation_duration=300, + tabs=[ + ft.Tab( + text="Tab 1", + content=ft.Container( + content=ft.Text("This is Tab 1"), alignment=ft.alignment.center + ), + ), + ft.Tab( + tab_content=ft.Icon(ft.icons.SEARCH), + content=ft.Text("This is Tab 2"), + ), + ft.Tab( + text="Tab 3", + icon=ft.icons.SETTINGS, + content=ft.Text("This is Tab 3"), + ), + ], + expand=1, + ) + + page.add(t) + + + ft.app(target=main) + + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/tabs + """ def __init__( self, ref: Optional[Ref] = None, From 15ab3b4c4136721cb2ceeda47ee3ae44f8fa3f72 Mon Sep 17 00:00:00 2001 From: Inesa Fitsner Date: Tue, 29 Nov 2022 09:24:31 -0800 Subject: [PATCH 12/55] Update card.py --- sdk/python/flet/card.py | 42 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/sdk/python/flet/card.py b/sdk/python/flet/card.py index dd5f80014..b6667b1c8 100644 --- a/sdk/python/flet/card.py +++ b/sdk/python/flet/card.py @@ -16,6 +16,48 @@ class Card(ConstrainedControl): + """ + A material design card: a panel with slightly rounded corners and an elevation shadow. + + Example: + ``` + import flet as ft + + def main(page): + page.title = "Card Example" + page.add( + ft.Card( + content=ft.Container( + content=ft.Column( + [ + ft.ListTile( + leading=ft.Icon(ft.icons.ALBUM), + title=ft.Text("The Enchanted Nightingale"), + subtitle=ft.Text( + "Music by Julie Gable. Lyrics by Sidney Stein." + ), + ), + ft.Row( + [ft.TextButton("Buy tickets"), ft.TextButton("Listen")], + alignment=ft.MainAxisAlignment.END, + ), + ] + ), + width=400, + padding=10, + ) + ) + ) + + ft.app(target=main) + + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/card + """ + def __init__( self, content: Optional[Control] = None, From cd04a38a85dd09173020e06154a20e1da14da268 Mon Sep 17 00:00:00 2001 From: Inesa Fitsner Date: Tue, 29 Nov 2022 09:30:28 -0800 Subject: [PATCH 13/55] Update divider.py --- sdk/python/flet/divider.py | 40 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/sdk/python/flet/divider.py b/sdk/python/flet/divider.py index 5780864ac..ba25803cd 100644 --- a/sdk/python/flet/divider.py +++ b/sdk/python/flet/divider.py @@ -7,6 +7,46 @@ class Divider(Control): + """ + A thin horizontal line, with padding on either side. + + In the material design language, this represents a divider. + + Example: + ``` + import flet as ft + + + def main(page: ft.Page): + + page.add( + ft.Column( + [ + ft.Container( + bgcolor=ft.colors.AMBER, + alignment=ft.alignment.center, + expand=True, + ), + ft.Divider(), + ft.Container( + bgcolor=ft.colors.PINK, alignment=ft.alignment.center, expand=True + ), + ], + spacing=0, + expand=True, + ), + ) + + + ft.app(target=main) + + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/divider + """ + def __init__( self, ref: Optional[Ref] = None, From 36280ce9c228de16cbb9439904251d920e8cc1af Mon Sep 17 00:00:00 2001 From: InesaFitsner Date: Mon, 5 Dec 2022 09:52:37 -0800 Subject: [PATCH 14/55] Update vertical_divider.py --- sdk/python/flet/vertical_divider.py | 39 +++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) diff --git a/sdk/python/flet/vertical_divider.py b/sdk/python/flet/vertical_divider.py index 13626be3c..143bafe7d 100644 --- a/sdk/python/flet/vertical_divider.py +++ b/sdk/python/flet/vertical_divider.py @@ -7,6 +7,45 @@ class VerticalDivider(Control): + """ + A thin vertical line, with padding on either side. + + In the material design language, this represents a divider. + + Example: + + ``` + import flet as ft + + def main(page: ft.Page): + + page.add( + ft.Row( + [ + ft.Container( + bgcolor=ft.colors.ORANGE_300, + alignment=ft.alignment.center, + expand=True, + ), + ft.VerticalDivider(), + ft.Container( + bgcolor=ft.colors.BROWN_400, + alignment=ft.alignment.center, + expand=True, + ), + ], + spacing=0, + expand=True, + ) + ) + + ft.app(target=main) + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/verticaldivider + """ def __init__( self, ref: Optional[Ref] = None, From a14158942f14a1072c32032da1ff3c915662e317 Mon Sep 17 00:00:00 2001 From: InesaFitsner Date: Mon, 5 Dec 2022 10:30:51 -0800 Subject: [PATCH 15/55] Update app_bar.py --- sdk/python/flet/app_bar.py | 47 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) diff --git a/sdk/python/flet/app_bar.py b/sdk/python/flet/app_bar.py index ad8021b93..10445ab39 100644 --- a/sdk/python/flet/app_bar.py +++ b/sdk/python/flet/app_bar.py @@ -8,6 +8,48 @@ class AppBar(Control): + """ + A material design app bar. + + Example: + ``` + import flet as ft + + def main(page: ft.Page): + def check_item_clicked(e): + e.control.checked = not e.control.checked + page.update() + + page.appbar = ft.AppBar( + leading=ft.Icon(ft.icons.PALETTE), + leading_width=40, + title=ft.Text("AppBar Example"), + center_title=False, + bgcolor=ft.colors.SURFACE_VARIANT, + actions=[ + ft.IconButton(ft.icons.WB_SUNNY_OUTLINED), + ft.IconButton(ft.icons.FILTER_3), + ft.PopupMenuButton( + items=[ + ft.PopupMenuItem(text="Item 1"), + ft.PopupMenuItem(), # divider + ft.PopupMenuItem( + text="Checked item", checked=False, on_click=check_item_clicked + ), + ] + ), + ], + ) + page.add(ft.Text("Body!")) + + ft.app(target=main) + + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/appbar + """ def __init__( self, ref: Optional[Ref] = None, @@ -63,6 +105,11 @@ def leading(self) -> Optional[Control]: @leading.setter @beartype def leading(self, value: Optional[Control]): + """ + A Control to display before the toolbar's title. + + Typically the leading control is an Icon or an IconButton. + """ self.__leading = value # leading_width From 09e96bd28c8eb02647668e0f6153d6119aaddad3 Mon Sep 17 00:00:00 2001 From: InesaFitsner Date: Mon, 5 Dec 2022 13:00:01 -0800 Subject: [PATCH 16/55] Update navigation_rail.py --- sdk/python/flet/navigation_rail.py | 54 ++++++++++++++++++++++++++++++ 1 file changed, 54 insertions(+) diff --git a/sdk/python/flet/navigation_rail.py b/sdk/python/flet/navigation_rail.py index cc2cfb03a..81d7b0202 100644 --- a/sdk/python/flet/navigation_rail.py +++ b/sdk/python/flet/navigation_rail.py @@ -145,6 +145,60 @@ def padding(self, value: PaddingValue): class NavigationRail(ConstrainedControl): + """ + A material widget that is meant to be displayed at the left or right of an app to navigate between a small number of views, typically between three and five. + + Example: + + ``` + import flet as ft + + def main(page: ft.Page): + + rail = ft.NavigationRail( + selected_index=1, + label_type=ft.NavigationRailLabelType.ALL, + # extended=True, + min_width=100, + min_extended_width=400, + leading=ft.FloatingActionButton(icon=ft.icons.CREATE, text="Add"), + group_alignment=-0.9, + destinations=[ + ft.NavigationRailDestination( + icon=ft.icons.FAVORITE_BORDER, selected_icon=ft.icons.FAVORITE, label="First" + ), + ft.NavigationRailDestination( + icon_content=ft.Icon(ft.icons.BOOKMARK_BORDER), + selected_icon_content=ft.Icon(ft.icons.BOOKMARK), + label="Second", + ), + ft.NavigationRailDestination( + icon=ft.icons.SETTINGS_OUTLINED, + selected_icon_content=ft.Icon(ft.icons.SETTINGS), + label_content=ft.Text("Settings"), + ), + ], + on_change=lambda e: print("Selected destination:", e.control.selected_index), + ) + + page.add( + ft.Row( + [ + rail, + ft.VerticalDivider(width=1), + ft.Column([ ft.Text("Body!")], alignment=ft.MainAxisAlignment.START, expand=True), + ], + expand=True, + ) + ) + + ft.app(target=main) + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/navigationrail + """ def __init__( self, ref: Optional[Ref] = None, From fca1a9dc1329d0d829f00f81c4ffdec7378ec5a4 Mon Sep 17 00:00:00 2001 From: InesaFitsner Date: Mon, 5 Dec 2022 13:08:31 -0800 Subject: [PATCH 17/55] navigation_rail and navigation_bar --- sdk/python/flet/navigation_bar.py | 38 ++++++++++++++++++++++++++++++ sdk/python/flet/navigation_rail.py | 2 +- 2 files changed, 39 insertions(+), 1 deletion(-) diff --git a/sdk/python/flet/navigation_bar.py b/sdk/python/flet/navigation_bar.py index 7873b4358..0e46be768 100644 --- a/sdk/python/flet/navigation_bar.py +++ b/sdk/python/flet/navigation_bar.py @@ -26,12 +26,17 @@ class NavigationBarLabelBehavior(Enum): + """Defines how the destinations' labels will be laid out and when they'll be displayed.""" ALWAYS_SHOW = "alwaysShow" ALWAYS_HIDE = "alwaysHide" ONLY_SHOW_SELECTED = "onlyShowSelected" class NavigationDestination(Control): + """Defines the appearance of the button items that are arrayed within the navigation bar. + + The value must be a list of two or more NavigationDestination instances.""" + def __init__( self, ref: Optional[Ref] = None, @@ -114,6 +119,39 @@ def label(self, value): class NavigationBar(ConstrainedControl): + """ + Material 3 Navigation Bar component. + + Navigation bars offer a persistent and convenient way to switch between primary destinations in an app. + + Example: + + ``` + import flet as ft + + def main(page: ft.Page): + + page.title = "NavigationBar Example" + page.navigation_bar = ft.NavigationBar( + destinations=[ + ft.NavigationDestination(icon=ft.icons.EXPLORE, label="Explore"), + ft.NavigationDestination(icon=ft.icons.COMMUTE, label="Commute"), + ft.NavigationDestination( + icon=ft.icons.BOOKMARK_BORDER, + selected_icon=ft.icons.BOOKMARK, + label="Explore", + ), + ] + ) + page.add(ft.Text("Body!")) + + ft.app(target=main) + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/navigationbar + """ def __init__( self, ref: Optional[Ref] = None, diff --git a/sdk/python/flet/navigation_rail.py b/sdk/python/flet/navigation_rail.py index 81d7b0202..0793b3345 100644 --- a/sdk/python/flet/navigation_rail.py +++ b/sdk/python/flet/navigation_rail.py @@ -145,7 +145,7 @@ def padding(self, value: PaddingValue): class NavigationRail(ConstrainedControl): - """ + """ A material widget that is meant to be displayed at the left or right of an app to navigate between a small number of views, typically between three and five. Example: From a74e5b09493181cabfb7aedff6de848879425ee0 Mon Sep 17 00:00:00 2001 From: InesaFitsner Date: Mon, 5 Dec 2022 13:14:59 -0800 Subject: [PATCH 18/55] Update text.py --- sdk/python/flet/text.py | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/sdk/python/flet/text.py b/sdk/python/flet/text.py index 6dff27e21..acea8f417 100644 --- a/sdk/python/flet/text.py +++ b/sdk/python/flet/text.py @@ -72,6 +72,33 @@ class TextThemeStyle(Enum): class Text(ConstrainedControl): + """ + Text is a control for displaying text. + + Example: + ``` + import flet as ft + + def main(page: ft.Page): + page.title = "Text examples" + + page.add( + ft.Text("Size 10", size=10), + ft.Text("Size 30, Italic", size=20, color="pink600", italic=True), + ft.Text("Limit long text to 2 lines and fading", style=ft.TextThemeStyle.HEADLINE_SMALL), + ft.Text( + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis nibh vitae purus consectetur facilisis sed vitae ipsum. Quisque faucibus sed nulla placerat sagittis. Phasellus condimentum risus vitae nulla vestibulum auctor. Curabitur scelerisque, nibh eget imperdiet consequat, odio ante tempus diam, sed volutpat nisl erat eget turpis. Sed viverra, diam sit amet blandit vulputate, mi tellus dapibus lorem, vitae vehicula diam mauris placerat diam. Morbi sit amet pretium turpis, et consequat ligula. Nulla velit sem, suscipit sit amet dictum non, tincidunt sed nulla. Aenean pellentesque odio porttitor sagittis aliquam. Nam varius at metus vitae vulputate. Praesent faucibus nibh lorem, eu pretium dolor dictum nec. Phasellus eget dui laoreet, viverra magna vitae, pellentesque diam.", + max_lines=2, + ), + ) + + ft.app(target=main) + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/text + """ def __init__( self, value: Optional[str] = None, From 7a6a9476a9cbbf922f2ae62c61a912d8e72edda4 Mon Sep 17 00:00:00 2001 From: InesaFitsner Date: Mon, 5 Dec 2022 13:19:17 -0800 Subject: [PATCH 19/55] Update icon.py --- sdk/python/flet/icon.py | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/sdk/python/flet/icon.py b/sdk/python/flet/icon.py index 91fd3a9b2..cfd81f61a 100644 --- a/sdk/python/flet/icon.py +++ b/sdk/python/flet/icon.py @@ -15,6 +15,35 @@ class Icon(ConstrainedControl): + """ + Displays a Material icon. + + Icon browser: https://flet-icons-browser.fly.dev/#/ + + Example: + ``` + import flet as ft + + def main(page: ft.Page): + page.add( + ft.Row( + [ + ft.Icon(name=ft.icons.FAVORITE, color=ft.colors.PINK), + ft.Icon(name=ft.icons.AUDIOTRACK, color=ft.colors.GREEN_400, size=30), + ft.Icon(name=ft.icons.BEACH_ACCESS, color=ft.colors.BLUE, size=50), + ft.Icon(name="settings", color="#c1c1c1"), + ] + ) + ) + + ft.app(target=main) + + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/icon + """ def __init__( self, name: Optional[str] = None, From 7580523b1f0f5e03a09401a367e1776a794b8d40 Mon Sep 17 00:00:00 2001 From: InesaFitsner Date: Mon, 5 Dec 2022 13:26:25 -0800 Subject: [PATCH 20/55] Update image.py --- sdk/python/flet/image.py | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/sdk/python/flet/image.py b/sdk/python/flet/image.py index af5783094..534c0c725 100644 --- a/sdk/python/flet/image.py +++ b/sdk/python/flet/image.py @@ -27,6 +27,32 @@ class Image(ConstrainedControl): + """ + A control that displays an image. + + Example: + ``` + import flet as ft + + def main(page: ft.Page): + page.title = "Image Example" + + img = ft.Image( + src=f"/icons/icon-512.png", + width=100, + height=100, + fit=ft.ImageFit.CONTAIN, + ) + + page.add(img) + + ft.app(target=main) + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/image + """ def __init__( self, src: Optional[str] = None, From 4e1babc9b299893599079f924c79bafa54e2bbb9 Mon Sep 17 00:00:00 2001 From: InesaFitsner Date: Mon, 5 Dec 2022 13:34:31 -0800 Subject: [PATCH 21/55] Update markdown.py --- sdk/python/flet/markdown.py | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/sdk/python/flet/markdown.py b/sdk/python/flet/markdown.py index 6dffcaa23..9f0c506a6 100644 --- a/sdk/python/flet/markdown.py +++ b/sdk/python/flet/markdown.py @@ -33,6 +33,13 @@ class MarkdownExtensionSet(Enum): class Markdown(ConstrainedControl): + """ + Control for rendering text in markdown format. + + ----- + + Online docs: https://flet.dev/docs/controls/markdown + """ def __init__( self, value: Optional[str] = None, From 9c739cebdb7f5be49c99ecf3cb7051baa20b9606 Mon Sep 17 00:00:00 2001 From: InesaFitsner Date: Mon, 5 Dec 2022 13:42:23 -0800 Subject: [PATCH 22/55] Update circle_avatar.py --- sdk/python/flet/circle_avatar.py | 54 ++++++++++++++++++++++++++++++++ 1 file changed, 54 insertions(+) diff --git a/sdk/python/flet/circle_avatar.py b/sdk/python/flet/circle_avatar.py index 116fbe3ba..bfa916fde 100644 --- a/sdk/python/flet/circle_avatar.py +++ b/sdk/python/flet/circle_avatar.py @@ -15,6 +15,60 @@ class CircleAvatar(ConstrainedControl): + """ + A circle that represents a user. + + If `foreground_image_url` fails then `background_image_url` is used. If `background_image_url` fails too, `bgcolor` is used. + + Example: + ``` + import flet as ft + + def main(page): + # a "normal" avatar with background image + a1 = ft.CircleAvatar( + foreground_image_url="https://avatars.githubusercontent.com/u/5041459?s=88&v=4", + content=ft.Text("FF"), + ) + # avatar with failing foreground image and fallback text + a2 = ft.CircleAvatar( + foreground_image_url="https://avatars.githubusercontent.com/u/_5041459?s=88&v=4", + content=ft.Text("FF"), + ) + # avatar with icon, aka icon with inverse background + a3 = ft.CircleAvatar( + content=ft.Icon(ft.icons.ABC), + ) + # avatar with icon and custom colors + a4 = ft.CircleAvatar( + content=ft.Icon(ft.icons.WARNING_ROUNDED), + color=ft.colors.YELLOW_200, + bgcolor=ft.colors.AMBER_700, + ) + # avatar with online status + a5 = ft.Stack( + [ + ft.CircleAvatar( + foreground_image_url="https://avatars.githubusercontent.com/u/5041459?s=88&v=4" + ), + ft.Container( + content=ft.CircleAvatar(bgcolor=ft.colors.GREEN, radius=5), + alignment=ft.alignment.bottom_left, + ), + ], + width=40, + height=40, + ) + page.add(a1, a2, a3, a4, a5) + + + ft.app(target=main) + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/circleavatar + """ def __init__( self, icon: Optional[str] = None, From 9ad97cb0055ad9136a8d2557a9691e6d29022f60 Mon Sep 17 00:00:00 2001 From: InesaFitsner Date: Tue, 6 Dec 2022 08:42:27 -0800 Subject: [PATCH 23/55] Update progress_bar.py --- sdk/python/flet/progress_bar.py | 34 +++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/sdk/python/flet/progress_bar.py b/sdk/python/flet/progress_bar.py index 4cd187dae..90f5099c0 100644 --- a/sdk/python/flet/progress_bar.py +++ b/sdk/python/flet/progress_bar.py @@ -15,6 +15,40 @@ class ProgressBar(ConstrainedControl): + """ + A material design linear progress indicator, also known as a progress bar. + + A control that shows progress along a line. + + Example: + + ``` + from time import sleep + + import flet as ft + + def main(page: ft.Page): + pb = ft.ProgressBar(width=400) + + page.add( + ft.Text("Linear progress indicator", style="headlineSmall"), + ft.Column([ ft.Text("Doing something..."), pb]), + ft.Text("Indeterminate progress bar", style="headlineSmall"), + ft.ProgressBar(width=400, color="amber", bgcolor="#eeeeee"), + ) + + for i in range(0, 101): + pb.value = i * 0.01 + sleep(0.1) + page.update() + + ft.app(target=main) + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/progressbar + """ def __init__( self, ref: Optional[Ref] = None, From 04e6852733b5a32cf7e2e443e3706b65af05bca8 Mon Sep 17 00:00:00 2001 From: InesaFitsner Date: Tue, 6 Dec 2022 08:47:02 -0800 Subject: [PATCH 24/55] Update progress_ring.py --- sdk/python/flet/progress_ring.py | 36 ++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/sdk/python/flet/progress_ring.py b/sdk/python/flet/progress_ring.py index 4dd4160ec..529eb063b 100644 --- a/sdk/python/flet/progress_ring.py +++ b/sdk/python/flet/progress_ring.py @@ -15,6 +15,42 @@ class ProgressRing(ConstrainedControl): + """ + A material design circular progress indicator, which spins to indicate that the application is busy. + + A control that shows progress along a circle. + + Example: + + ``` + from time import sleep + import flet as ft + + def main(page: ft.Page): + pr = ft.ProgressRing(width=16, height=16, stroke_width = 2) + + page.add( + ft.Text("Circular progress indicator", style="headlineSmall"), + ft.Row([pr, ft.Text("Wait for the completion...")]), + ft.Text("Indeterminate cicrular progress", style="headlineSmall"), + ft.Column( + [ft.ProgressRing(), ft.Text("I'm going to run for ages...")], + horizontal_alignment=ft.CrossAxisAlignment.CENTER, + ), + ) + + for i in range(0, 101): + pr.value = i * 0.01 + sleep(0.1) + page.update() + + ft.app(target=main) + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/progressring + """ def __init__( self, ref: Optional[Ref] = None, From e2a76e1a64700096aab0effe0e5ca7f4b3783c14 Mon Sep 17 00:00:00 2001 From: InesaFitsner Date: Tue, 6 Dec 2022 09:09:14 -0800 Subject: [PATCH 25/55] Update elevated_button.py --- sdk/python/flet/elevated_button.py | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/sdk/python/flet/elevated_button.py b/sdk/python/flet/elevated_button.py index 2b133c03c..0081d7f61 100644 --- a/sdk/python/flet/elevated_button.py +++ b/sdk/python/flet/elevated_button.py @@ -16,6 +16,27 @@ class ElevatedButton(ConstrainedControl): + """ + Elevated buttons are essentially filled tonal buttons with a shadow. To prevent shadow creep, only use them when absolutely necessary, such as when the button requires visual separation from a patterned background. + + Example: + ``` + import flet as ft + + def main(page: ft.Page): + page.title = "Basic elevated buttons" + page.add( + ft.ElevatedButton(text="Elevated button"), + ft.ElevatedButton("Disabled button", disabled=True), + ) + + ft.app(target=main) + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/elevatedbutton + """ def __init__( self, text: Optional[str] = None, From 58b8a447c906618ffc0db9ba9aff6ccb1b4849e3 Mon Sep 17 00:00:00 2001 From: InesaFitsner Date: Tue, 6 Dec 2022 09:48:44 -0800 Subject: [PATCH 26/55] Update filled_button.py --- sdk/python/flet/filled_button.py | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/sdk/python/flet/filled_button.py b/sdk/python/flet/filled_button.py index 7ffb3cef8..9883f391b 100644 --- a/sdk/python/flet/filled_button.py +++ b/sdk/python/flet/filled_button.py @@ -8,6 +8,29 @@ class FilledButton(ElevatedButton): + """ + Filled buttons have the most visual impact after the FloatingActionButton (https://flet.dev/docs/controls/floatingactionbutton), and should be used for important, final actions that complete a flow, like Save, Join now, or Confirm. + + Example: + ``` + import flet as ft + + + def main(page: ft.Page): + page.title = "Basic filled buttons" + page.add( + ft.FilledButton(text="Filled button"), + ft.FilledButton("Disabled button", disabled=True), + ft.FilledButton("Button with icon", icon="add"), + ) + + ft.app(target=main) + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/filledbutton + """ def __init__( self, text: Optional[str] = None, From ddcb07302bd4cdbc5d6f95fb458fb5350387e84e Mon Sep 17 00:00:00 2001 From: InesaFitsner Date: Tue, 6 Dec 2022 09:59:32 -0800 Subject: [PATCH 27/55] Update filled_tonal_button.py --- sdk/python/flet/filled_tonal_button.py | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/sdk/python/flet/filled_tonal_button.py b/sdk/python/flet/filled_tonal_button.py index 4984c05d2..a5a12c8f1 100644 --- a/sdk/python/flet/filled_tonal_button.py +++ b/sdk/python/flet/filled_tonal_button.py @@ -8,6 +8,29 @@ class FilledTonalButton(ElevatedButton): + """ + A filled tonal button is an alternative middle ground between FilledButton and OutlinedButton buttons. They’re useful in contexts where a lower-priority button requires slightly more emphasis than an outline would give, such as "Next" in an onboarding flow. Tonal buttons use the secondary color mapping. + + Example: + ``` + import flet as ft + + + def main(page: ft.Page): + page.title = "Basic filled tonal buttons" + page.add( + ft.FilledTonalButton(text="Filled tonal button"), + ft.FilledTonalButton("Disabled button", disabled=True), + ft.FilledTonalButton("Button with icon", icon="add"), + ) + + ft.app(target=main) + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/filledtonalbutton + """ def __init__( self, text: Optional[str] = None, From be6829b53730ab67543022d2d5c96da5c23110db Mon Sep 17 00:00:00 2001 From: InesaFitsner Date: Tue, 6 Dec 2022 10:03:55 -0800 Subject: [PATCH 28/55] Update floating_action_button.py --- sdk/python/flet/floating_action_button.py | 47 +++++++++++++++++++++++ 1 file changed, 47 insertions(+) diff --git a/sdk/python/flet/floating_action_button.py b/sdk/python/flet/floating_action_button.py index 6554cba8d..76768c6f1 100644 --- a/sdk/python/flet/floating_action_button.py +++ b/sdk/python/flet/floating_action_button.py @@ -16,6 +16,53 @@ class FloatingActionButton(ConstrainedControl): + """ + A floating action button is a circular icon button that hovers over content to promote a primary action in the application. Floating action button is usually set to `page.floating_action_button`, but can also be added as a regular control at any place on a page. + + Example: + ``` + import flet as ft + + def main(page: ft.Page): + page.title = "Floating Action Button" + page.theme_mode = ft.ThemeMode.LIGHT + page.horizontal_alignment = ft.CrossAxisAlignment.CENTER + page.auto_scroll = True + page.scroll = ft.ScrollMode.HIDDEN + page.appbar = ft.AppBar( + title=ft.Text( + "Floating Action Button", weight=ft.FontWeight.BOLD, color=ft.colors.BLACK87 + ), + bgcolor=ft.colors.BLUE, + center_title=True, + actions=[ + ft.IconButton(ft.icons.MENU, tooltip="Menu", icon_color=ft.colors.BLACK87) + ], + color=ft.colors.WHITE, + ) + + # keeps track of the number of tiles already added + page.count = 0 + + def fab_pressed(e): + page.add(ft.ListTile(title=ft.Text(f"Tile {page.count}"))) + page.show_snack_bar( + ft.SnackBar(ft.Text("Tile was added successfully!"), open=True) + ) + page.count += 1 + + page.floating_action_button = ft.FloatingActionButton( + icon=ft.icons.ADD, on_click=fab_pressed, bgcolor=ft.colors.LIME_300 + ) + page.add(ft.Text("Press the FAB to add a tile!")) + + ft.app(target=main) + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/floatingactionbutton + """ def __init__( self, text: Optional[str] = None, From a448d5209a0b0204874207b409c0c6adf2612040 Mon Sep 17 00:00:00 2001 From: InesaFitsner Date: Tue, 6 Dec 2022 10:10:11 -0800 Subject: [PATCH 29/55] Update icon_button.py --- sdk/python/flet/icon_button.py | 37 ++++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/sdk/python/flet/icon_button.py b/sdk/python/flet/icon_button.py index 66a02824a..9b8e822f5 100644 --- a/sdk/python/flet/icon_button.py +++ b/sdk/python/flet/icon_button.py @@ -16,6 +16,43 @@ class IconButton(ConstrainedControl): + """ + An icon button is a round button with an icon in the middle that reacts to touches by filling with color (ink). + + Icon buttons are commonly used in the toolbars, but they can be used in many other places as well. + + Example: + ``` + import flet as ft + + def main(page: ft.Page): + page.title = "Icon buttons" + page.add( + ft.Row( + [ + ft.IconButton( + icon=ft.icons.PAUSE_CIRCLE_FILLED_ROUNDED, + icon_color="blue400", + icon_size=20, + tooltip="Pause record", + ), + ft.IconButton( + icon=ft.icons.DELETE_FOREVER_ROUNDED, + icon_color="pink600", + icon_size=40, + tooltip="Delete record", + ), + ] + ), + ) + + ft.app(target=main) + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/iconbutton + """ def __init__( self, icon: Optional[str] = None, From 59c1bbd0bd4470a25e9a89e206b8fd7ec4e453f4 Mon Sep 17 00:00:00 2001 From: InesaFitsner Date: Tue, 6 Dec 2022 10:13:15 -0800 Subject: [PATCH 30/55] Update outlined_button.py --- sdk/python/flet/outlined_button.py | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/sdk/python/flet/outlined_button.py b/sdk/python/flet/outlined_button.py index 6999bbb67..e7c12cfd4 100644 --- a/sdk/python/flet/outlined_button.py +++ b/sdk/python/flet/outlined_button.py @@ -16,6 +16,27 @@ class OutlinedButton(ConstrainedControl): + """ + Outlined buttons are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app. Outlined buttons pair well with filled buttons to indicate an alternative, secondary action. + + Example: + ``` + import flet as ft + + def main(page: ft.Page): + page.title = "Basic outlined buttons" + page.add( + ft.OutlinedButton(text="Outlined button"), + ft.OutlinedButton("Disabled button", disabled=True), + ) + + ft.app(target=main) + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/outlinedbutton + """ def __init__( self, text: Optional[str] = None, From 2be9194afb03df91596f5bfa11f2f7b81cbec3fa Mon Sep 17 00:00:00 2001 From: InesaFitsner Date: Tue, 6 Dec 2022 10:16:00 -0800 Subject: [PATCH 31/55] Update popup_menu_button.py --- sdk/python/flet/popup_menu_button.py | 40 ++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/sdk/python/flet/popup_menu_button.py b/sdk/python/flet/popup_menu_button.py index 26e29d0c7..3bcfc00fe 100644 --- a/sdk/python/flet/popup_menu_button.py +++ b/sdk/python/flet/popup_menu_button.py @@ -94,6 +94,46 @@ def on_click(self, handler): class PopupMenuButton(ConstrainedControl): + """ + An icon button which displays a menu when clicked. + + Example: + ``` + import flet as ft + + def main(page: ft.Page): + def check_item_clicked(e): + e.control.checked = not e.control.checked + page.update() + + pb = ft.PopupMenuButton( + items=[ + ft.PopupMenuItem(text="Item 1"), + ft.PopupMenuItem(icon=ft.icons.POWER_INPUT, text="Check power"), + ft.PopupMenuItem( + content=ft.Row( + [ + ft.Icon(ft.icons.HOURGLASS_TOP_OUTLINED), + ft.Text("Item with a custom content"), + ] + ), + on_click=lambda _: print("Button with a custom content clicked!"), + ), + ft.PopupMenuItem(), # divider + ft.PopupMenuItem( + text="Checked item", checked=False, on_click=check_item_clicked + ), + ] + ) + page.add(pb) + + ft.app(target=main) + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/popupmenubutton + """ def __init__( self, content: Optional[Control] = None, From 48736a251cc689544d55d943c43b00d11a15998d Mon Sep 17 00:00:00 2001 From: InesaFitsner Date: Tue, 6 Dec 2022 10:18:37 -0800 Subject: [PATCH 32/55] Update text_button.py --- sdk/python/flet/text_button.py | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/sdk/python/flet/text_button.py b/sdk/python/flet/text_button.py index 608a18e0f..b40d8713b 100644 --- a/sdk/python/flet/text_button.py +++ b/sdk/python/flet/text_button.py @@ -16,6 +16,27 @@ class TextButton(ConstrainedControl): + """ + Text buttons are used for the lowest priority actions, especially when presenting multiple options. Text buttons can be placed on a variety of backgrounds. Until the button is interacted with, its container isn’t visible. + + Example: + ``` + import flet as ft + + def main(page: ft.Page): + page.title = "Basic text buttons" + page.add( + ft.TextButton(text="Text button"), + ft.TextButton("Disabled button", disabled=True), + ) + + ft.app(target=main) + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/textbutton + """ def __init__( self, text: Optional[str] = None, From 05caef7f7eb4de7341d562fa057f03d122277f7b Mon Sep 17 00:00:00 2001 From: InesaFitsner Date: Tue, 6 Dec 2022 10:22:25 -0800 Subject: [PATCH 33/55] Update checkbox.py --- sdk/python/flet/checkbox.py | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/sdk/python/flet/checkbox.py b/sdk/python/flet/checkbox.py index 9d8bd2c3e..ff72053e3 100644 --- a/sdk/python/flet/checkbox.py +++ b/sdk/python/flet/checkbox.py @@ -24,6 +24,38 @@ class Checkbox(ConstrainedControl): + """ + Checkbox allows to select one or more items from a group, or switch between two mutually exclusive options (checked or unchecked, on or off). + + Example: + ``` + import flet as ft + + def main(page): + def button_clicked(e): + t.value = ( + f"Checkboxes values are: {c1.value}, {c2.value}, {c3.value}, {c4.value}, {c5.value}." + ) + page.update() + + t = ft.Text() + c1 = ft.Checkbox(label="Unchecked by default checkbox", value=False) + c2 = ft.Checkbox(label="Undefined by default tristate checkbox", tristate=True) + c3 = ft.Checkbox(label="Checked by default checkbox", value=True) + c4 = ft.Checkbox(label="Disabled checkbox", disabled=True) + c5 = ft.Checkbox( + label="Checkbox with rendered label_position='left'", label_position=ft.LabelPosition.LEFT + ) + b = ft.ElevatedButton(text="Submit", on_click=button_clicked) + page.add(c1, c2, c3, c4, c5, b, t) + + ft.app(target=main) + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/checkbox + """ def __init__( self, ref: Optional[Ref] = None, From 900390cd0380d80c747f2f7e4614db61c16c01a7 Mon Sep 17 00:00:00 2001 From: InesaFitsner Date: Tue, 6 Dec 2022 10:26:01 -0800 Subject: [PATCH 34/55] Update dropdown.py --- sdk/python/flet/dropdown.py | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/sdk/python/flet/dropdown.py b/sdk/python/flet/dropdown.py index 600f04c52..dbe5f40a0 100644 --- a/sdk/python/flet/dropdown.py +++ b/sdk/python/flet/dropdown.py @@ -20,6 +20,37 @@ class Dropdown(FormFieldControl): + """ + A dropdown lets the user select from a number of items. The dropdown shows the currently selected item as well as an arrow that opens a menu for selecting another item. + + Example: + ``` + import flet as ft + + def main(page: ft.Page): + def button_clicked(e): + t.value = f"Dropdown value is: {dd.value}" + page.update() + + t = ft.Text() + b = ft.ElevatedButton(text="Submit", on_click=button_clicked) + dd = ft.Dropdown( + width=200, + options=[ + ft.dropdown.Option("Red"), + ft.dropdown.Option("Green"), + ft.dropdown.Option("Blue"), + ], + ) + page.add(dd, b, t) + + ft.app(target=main) + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/dropdown + """ def __init__( self, ref: Optional[Ref] = None, From cf333e6d1fb615f2cfcab305a3f0131639fc80ec Mon Sep 17 00:00:00 2001 From: InesaFitsner Date: Tue, 6 Dec 2022 10:31:16 -0800 Subject: [PATCH 35/55] Radio and RadioGroup comments --- sdk/python/flet/radio.py | 28 ++++++++++++++++++++++++++++ sdk/python/flet/radio_group.py | 28 ++++++++++++++++++++++++++++ 2 files changed, 56 insertions(+) diff --git a/sdk/python/flet/radio.py b/sdk/python/flet/radio.py index 679b0d734..27b95e958 100644 --- a/sdk/python/flet/radio.py +++ b/sdk/python/flet/radio.py @@ -24,6 +24,34 @@ class Radio(ConstrainedControl): + """ + Radio buttons let people select a single option from two or more choices. + + Example: + ``` + import flet as ft + + def main(page): + def button_clicked(e): + t.value = f"Your favorite color is: {cg.value}" + page.update() + + t = ft.Text() + b = ft.ElevatedButton(text='Submit', on_click=button_clicked) + cg = ft.RadioGroup(content=ft.Column([ + ft.Radio(value="red", label="Red"), + ft.Radio(value="green", label="Green"), + ft.Radio(value="blue", label="Blue")])) + + page.add(ft.Text("Select your favorite color:"), cg, b, t) + + ft.app(target=main) + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/radio + """ def __init__( self, ref: Optional[Ref] = None, diff --git a/sdk/python/flet/radio_group.py b/sdk/python/flet/radio_group.py index 81051612a..422518a93 100644 --- a/sdk/python/flet/radio_group.py +++ b/sdk/python/flet/radio_group.py @@ -7,6 +7,34 @@ class RadioGroup(Control): + """ + Radio buttons let people select a single option from two or more choices. + + Example: + ``` + import flet as ft + + def main(page): + def button_clicked(e): + t.value = f"Your favorite color is: {cg.value}" + page.update() + + t = ft.Text() + b = ft.ElevatedButton(text='Submit', on_click=button_clicked) + cg = ft.RadioGroup(content=ft.Column([ + ft.Radio(value="red", label="Red"), + ft.Radio(value="green", label="Green"), + ft.Radio(value="blue", label="Blue")])) + + page.add(ft.Text("Select your favorite color:"), cg, b, t) + + ft.app(target=main) + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/radio + """ def __init__( self, content: Optional[Control] = None, From 5c733291824eebbb4f854197085c9de9f8f17b5a Mon Sep 17 00:00:00 2001 From: InesaFitsner Date: Tue, 6 Dec 2022 10:33:43 -0800 Subject: [PATCH 36/55] Update slider.py --- sdk/python/flet/slider.py | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/sdk/python/flet/slider.py b/sdk/python/flet/slider.py index ec700580e..12799323a 100644 --- a/sdk/python/flet/slider.py +++ b/sdk/python/flet/slider.py @@ -15,6 +15,29 @@ class Slider(ConstrainedControl): + """ + A slider provides a visual indication of adjustable content, as well as the current setting in the total range of content. + + Use a slider when you want people to set defined values (such as volume or brightness), or when people would benefit from instant feedback on the effect of setting changes. + + Example: + ``` + import flet as ft + + def main(page): + page.add( + ft.Text("Slider with value:"), + ft.Slider(value=0.3), + ft.Text("Slider with a custom range and label:"), + ft.Slider(min=0, max=100, divisions=10, label="{value}%")) + + ft.app(target=main) + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/slider + """ def __init__( self, ref: Optional[Ref] = None, From a7cd5d659d89028437982f6fd2d77cd3494564fa Mon Sep 17 00:00:00 2001 From: InesaFitsner Date: Tue, 6 Dec 2022 10:36:17 -0800 Subject: [PATCH 37/55] Update switch.py --- sdk/python/flet/switch.py | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/sdk/python/flet/switch.py b/sdk/python/flet/switch.py index ac528a2ef..d54e1ed6e 100644 --- a/sdk/python/flet/switch.py +++ b/sdk/python/flet/switch.py @@ -24,6 +24,38 @@ class Switch(ConstrainedControl): + """ + A toggle represents a physical switch that allows someone to choose between two mutually exclusive options. + + or example, "On/Off", "Show/Hide". Choosing an option should produce an immediate result. + + Example: + ``` + import flet as ft + + def main(page: ft.Page): + def theme_changed(e): + page.theme_mode = ( + ft.ThemeMode.DARK + if page.theme_mode == ft.ThemeMode.LIGHT + else ft.ThemeMode.LIGHT + ) + c.label = ( + "Light theme" if page.theme_mode == ft.ThemeMode.LIGHT else "Dark theme" + ) + page.update() + + page.theme_mode = ft.ThemeMode.LIGHT + c = ft.Switch(label="Light theme", on_change=theme_changed) + page.add(c) + + ft.app(target=main) + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/switch + """ def __init__( self, ref: Optional[Ref] = None, From e59efd8dbc55fd9fa71393999d4c722dfb9f861d Mon Sep 17 00:00:00 2001 From: InesaFitsner Date: Tue, 6 Dec 2022 10:38:58 -0800 Subject: [PATCH 38/55] Update textfield.py --- sdk/python/flet/textfield.py | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/sdk/python/flet/textfield.py b/sdk/python/flet/textfield.py index 96d75a529..5666ca2ca 100644 --- a/sdk/python/flet/textfield.py +++ b/sdk/python/flet/textfield.py @@ -66,6 +66,34 @@ class TextCapitalization(Enum): class TextField(FormFieldControl): + """ + A text field lets the user enter text, either with hardware keyboard or with an onscreen keyboard. + + Example: + ``` + import flet as ft + + def main(page: ft.Page): + def button_clicked(e): + t.value = f"Textboxes values are: '{tb1.value}', '{tb2.value}', '{tb3.value}', '{tb4.value}', '{tb5.value}'." + page.update() + + t = ft.Text() + tb1 = ft.TextField(label="Standard") + tb2 = ft.TextField(label="Disabled", disabled=True, value="First name") + tb3 = ft.TextField(label="Read-only", read_only=True, value="Last name") + tb4 = ft.TextField(label="With placeholder", hint_text="Please enter text here") + tb5 = ft.TextField(label="With an icon", icon=ft.icons.EMOJI_EMOTIONS) + b = ft.ElevatedButton(text="Submit", on_click=button_clicked) + page.add(tb1, tb2, tb3, tb4, tb5, b, t) + + ft.app(target=main) + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/textfield + """ def __init__( self, ref: Optional[Ref] = None, From f79eb419718307f56d6394aa4ee623b424cdcaec Mon Sep 17 00:00:00 2001 From: InesaFitsner Date: Wed, 7 Dec 2022 09:22:13 -0800 Subject: [PATCH 39/55] Update alert_dialog.py --- sdk/python/flet/alert_dialog.py | 51 +++++++++++++++++++++++++++++++++ 1 file changed, 51 insertions(+) diff --git a/sdk/python/flet/alert_dialog.py b/sdk/python/flet/alert_dialog.py index 953177ab2..56113cda3 100644 --- a/sdk/python/flet/alert_dialog.py +++ b/sdk/python/flet/alert_dialog.py @@ -10,6 +10,57 @@ class AlertDialog(Control): + """ + An alert dialog informs the user about situations that require acknowledgement. An alert dialog has an optional title and an optional list of actions. The title is displayed above the content and the actions are displayed below the content. + + Example: + ``` + import flet as ft + + def main(page: ft.Page): + page.title = "AlertDialog examples" + + dlg = ft.AlertDialog( + title=ft.Text("Hello, you!"), on_dismiss=lambda e: print("Dialog dismissed!") + ) + + def close_dlg(e): + dlg_modal.open = False + page.update() + + dlg_modal = ft.AlertDialog( + modal=True, + title=ft.Text("Please confirm"), + content=ft.Text("Do you really want to delete all those files?"), + actions=[ + ft.TextButton("Yes", on_click=close_dlg), + ft.TextButton("No", on_click=close_dlg), + ], + actions_alignment=ft.MainAxisAlignment.END, + on_dismiss=lambda e: print("Modal dialog dismissed!"), + ) + + def open_dlg(e): + page.dialog = dlg + dlg.open = True + page.update() + + def open_dlg_modal(e): + page.dialog = dlg_modal + dlg_modal.open = True + page.update() + + page.add( + ft.ElevatedButton("Open dialog", on_click=open_dlg), + ft.ElevatedButton("Open modal dialog", on_click=open_dlg_modal), + ) + + ft.app(target=main) + ``` + ----- + + Online docs: https://flet.dev/docs/controls/alertdialog + """ def __init__( self, ref: Optional[Ref] = None, From a01e228520f78c6a8260f2eb12f3cb5e03f85d7f Mon Sep 17 00:00:00 2001 From: InesaFitsner Date: Wed, 7 Dec 2022 09:26:06 -0800 Subject: [PATCH 40/55] Update banner.py --- sdk/python/flet/banner.py | 40 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/sdk/python/flet/banner.py b/sdk/python/flet/banner.py index 32fe90f43..864193d03 100644 --- a/sdk/python/flet/banner.py +++ b/sdk/python/flet/banner.py @@ -9,6 +9,46 @@ class Banner(Control): + """ + A banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). A user action is required for it to be dismissed. + + Banners are displayed at the top of the screen, below a top app bar. They are persistent and non-modal, allowing the user to either ignore them or interact with them at any time. + + Example: + ``` + import flet as ft + + def main(page): + def close_banner(e): + page.banner.open = False + page.update() + + page.banner = ft.Banner( + bgcolor=ft.colors.AMBER_100, + leading=ft.Icon(ft.icons.WARNING_AMBER_ROUNDED, color=ft.colors.AMBER, size=40), + content=ft.Text( + "Oops, there were some errors while trying to delete the file. What would you like me to do?" + ), + actions=[ + ft.TextButton("Retry", on_click=close_banner), + ft.TextButton("Ignore", on_click=close_banner), + ft.TextButton("Cancel", on_click=close_banner), + ], + ) + + def show_banner_click(e): + page.banner.open = True + page.update() + + page.add(ft.ElevatedButton("Show Banner", on_click=show_banner_click)) + + ft.app(target=main) + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/banner + """ def __init__( self, ref: Optional[Ref] = None, From a45a68b866c16f1c3eccb3d87f2d41265ec3af87 Mon Sep 17 00:00:00 2001 From: InesaFitsner Date: Wed, 7 Dec 2022 09:40:59 -0800 Subject: [PATCH 41/55] Update bottom_sheet.py --- sdk/python/flet/bottom_sheet.py | 43 +++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) diff --git a/sdk/python/flet/bottom_sheet.py b/sdk/python/flet/bottom_sheet.py index c211c0dac..930cba6c3 100644 --- a/sdk/python/flet/bottom_sheet.py +++ b/sdk/python/flet/bottom_sheet.py @@ -8,6 +8,49 @@ class BottomSheet(Control): + """ + A modal bottom sheet is an alternative to a menu or a dialog and prevents the user from interacting with the rest of the app. + + Example: + ``` + import flet as ft + + def main(page: ft.Page): + def bs_dismissed(e): + print("Dismissed!") + + def show_bs(e): + bs.open = True + bs.update() + + def close_bs(e): + bs.open = False + bs.update() + + bs = ft.BottomSheet( + ft.Container( + ft.Column( + [ + ft.Text("This is sheet's content!"), + ft.ElevatedButton("Close bottom sheet", on_click=close_bs), + ], + tight=True, + ), + padding=10, + ), + open=True, + on_dismiss=bs_dismissed, + ) + page.overlay.append(bs) + page.add(ft.ElevatedButton("Display bottom sheet", on_click=show_bs)) + + ft.app(target=main) + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/bottomsheet + """ def __init__( self, content: Optional[Control] = None, From c00a607c5a8ae1755d2308fde37cfdb520222d6d Mon Sep 17 00:00:00 2001 From: InesaFitsner Date: Wed, 7 Dec 2022 09:47:45 -0800 Subject: [PATCH 42/55] Update snack_bar.py --- sdk/python/flet/snack_bar.py | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/sdk/python/flet/snack_bar.py b/sdk/python/flet/snack_bar.py index dc7e4b651..c8623265e 100644 --- a/sdk/python/flet/snack_bar.py +++ b/sdk/python/flet/snack_bar.py @@ -7,6 +7,42 @@ class SnackBar(Control): + """ + A lightweight message with an optional action which briefly displays at the bottom of the screen. + + Example: + ``` + import flet as ft + + class Data: + def __init__(self) -> None: + self.counter = 0 + + d = Data() + + def main(page): + + page.snack_bar = ft.SnackBar( + content=ft.Text("Hello, world!"), + action="Alright!", + ) + page.snack_bar.open = True + + def on_click(e): + page.snack_bar = ft.SnackBar(ft.Text(f"Hello {d.counter}")) + page.snack_bar.open = True + d.counter += 1 + page.update() + + page.add(ft.ElevatedButton("Open SnackBar", on_click=on_click)) + + ft.app(target=main) + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/snackbar + """ def __init__( self, content: Control, From 5333ecea84827578d27e73b19095db9a4be5aca6 Mon Sep 17 00:00:00 2001 From: InesaFitsner Date: Wed, 7 Dec 2022 09:54:45 -0800 Subject: [PATCH 43/55] Update matplotlib_chart.py --- sdk/python/flet/matplotlib_chart.py | 39 +++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) diff --git a/sdk/python/flet/matplotlib_chart.py b/sdk/python/flet/matplotlib_chart.py index b8b98cf9a..22e6a3dff 100644 --- a/sdk/python/flet/matplotlib_chart.py +++ b/sdk/python/flet/matplotlib_chart.py @@ -27,6 +27,45 @@ class MatplotlibChart(Container): + """ + Displays Matplotlib(https://matplotlib.org/) chart. + + Example: + ``` + import matplotlib + import matplotlib.pyplot as plt + + import flet as ft + from flet.matplotlib_chart import MatplotlibChart + + matplotlib.use("svg") + + + def main(page: ft.Page): + + fig, ax = plt.subplots() + + fruits = ["apple", "blueberry", "cherry", "orange"] + counts = [40, 100, 30, 55] + bar_labels = ["red", "blue", "_red", "orange"] + bar_colors = ["tab:red", "tab:blue", "tab:red", "tab:orange"] + + ax.bar(fruits, counts, label=bar_labels, color=bar_colors) + + ax.set_ylabel("fruit supply") + ax.set_title("Fruit supply by kind and color") + ax.legend(title="Fruit color") + + page.add(MatplotlibChart(fig, expand=True)) + + + ft.app(target=main) + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/matplotlibchart + """ def __init__( self, figure: Optional[Figure] = None, From 4b7d0c5fc99ce74addba094bc3c45c665e6cce2c Mon Sep 17 00:00:00 2001 From: InesaFitsner Date: Wed, 7 Dec 2022 09:57:04 -0800 Subject: [PATCH 44/55] Update plotly_chart.py --- sdk/python/flet/plotly_chart.py | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/sdk/python/flet/plotly_chart.py b/sdk/python/flet/plotly_chart.py index eb456d56b..10eb1a750 100644 --- a/sdk/python/flet/plotly_chart.py +++ b/sdk/python/flet/plotly_chart.py @@ -25,6 +25,30 @@ class PlotlyChart(Container): + """ + Displays Plotly(https://plotly.com/python/) chart. + + Example: + ``` + import plotly.express as px + + import flet as ft + from flet.plotly_chart import PlotlyChart + + def main(page: ft.Page): + + df = px.data.gapminder().query("continent=='Oceania'") + fig = px.line(df, x="year", y="lifeExp", color="country") + + page.add(PlotlyChart(fig, expand=True)) + + ft.app(target=main) + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/plotlychart + """ def __init__( self, figure: Optional[Figure] = None, From 24127cb88404869fc112dc4b6aa7b5c96d9a978f Mon Sep 17 00:00:00 2001 From: InesaFitsner Date: Wed, 7 Dec 2022 10:00:41 -0800 Subject: [PATCH 45/55] Update animated_switcher.py --- sdk/python/flet/animated_switcher.py | 48 ++++++++++++++++++++++++++++ 1 file changed, 48 insertions(+) diff --git a/sdk/python/flet/animated_switcher.py b/sdk/python/flet/animated_switcher.py index 8a4a4d9b1..62ebc6e5f 100644 --- a/sdk/python/flet/animated_switcher.py +++ b/sdk/python/flet/animated_switcher.py @@ -31,6 +31,54 @@ class AnimatedSwitcherTransition(Enum): class AnimatedSwitcher(ConstrainedControl): + """ + A control that by default does a cross-fade between a new control and the control previously set on the AnimatedSwitcher as a `content`. + + Example: + ``` + import flet as ft + + def main(page: ft.Page): + + c1 = ft.Container( + ft.Text("Hello!", style=ft.TextThemeStyle.HEADLINE_MEDIUM), + alignment=ft.alignment.center, + width=200, + height=200, + bgcolor=ft.colors.GREEN, + ) + c2 = ft.Container( + ft.Text("Bye!", size=50), + alignment=ft.alignment.center, + width=200, + height=200, + bgcolor=ft.colors.YELLOW, + ) + c = ft.AnimatedSwitcher( + content=c1, + transition=ft.AnimatedSwitcherTransition.SCALE, + duration=500, + reverse_duration=100, + switch_in_curve=ft.AnimationCurve.BOUNCE_OUT, + switch_out_curve=ft.AnimationCurve.BOUNCE_IN, + ) + + def animate(e): + c.content = c2 if c.content == c1 else c1 + c.update() + + page.add( + c, + ft.ElevatedButton("Animate!", on_click=animate), + ) + + ft.app(target=main) + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/animatedswitcher + """ def __init__( self, content: Optional[Control] = None, From 9d6635017e440557c20c4bf875d0bf1204b3a79d Mon Sep 17 00:00:00 2001 From: InesaFitsner Date: Wed, 7 Dec 2022 10:10:48 -0800 Subject: [PATCH 46/55] Update audio.py --- sdk/python/flet/audio.py | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/sdk/python/flet/audio.py b/sdk/python/flet/audio.py index c2adddb6e..044ad285b 100644 --- a/sdk/python/flet/audio.py +++ b/sdk/python/flet/audio.py @@ -31,6 +31,32 @@ class AudioMethodResults: class Audio(Control): + """ + A control to simultaneously play multiple audio files. Works on macOS, Linux, Windows, iOS, Android and web. Based on audioplayers Flutter widget (https://pub.dev/packages/audioplayers). + + Audio control is non-visual and should be added to `page.overlay` list. + + Example: + ``` + import flet as ft + + def main(page: ft.Page): + audio1 = ft.Audio( + src="https://luan.xyz/files/audio/ambient_c_motion.mp3", autoplay=True + ) + page.overlay.append(audio1) + page.add( + ft.Text("This is an app with background audio."), + ft.ElevatedButton("Stop playing", on_click=lambda _: audio1.pause()), + ) + + ft.app(target=main) + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/audio + """ def __init__( self, src: Optional[str] = None, From e52a6bdce05a994ad2d32143bcdaea5ba5968ec2 Mon Sep 17 00:00:00 2001 From: InesaFitsner Date: Wed, 7 Dec 2022 10:23:52 -0800 Subject: [PATCH 47/55] Update draggable.py --- sdk/python/flet/draggable.py | 105 +++++++++++++++++++++++++++++++++++ 1 file changed, 105 insertions(+) diff --git a/sdk/python/flet/draggable.py b/sdk/python/flet/draggable.py index 9db16f68c..03c65ba3d 100644 --- a/sdk/python/flet/draggable.py +++ b/sdk/python/flet/draggable.py @@ -7,6 +7,111 @@ class Draggable(Control): + """ + A control that can be dragged from to a `DragTarget`. + + When a draggable control recognizes the start of a drag gesture, it displays a `content_feedback` control that tracks the user's finger across the screen. If the user lifts their finger while on top of a `DragTarget`, that target is given the opportunity to complete drag-and-drop flow. + + Example: + ``` + import flet + from flet import ( + Column, + Container, + Draggable, + DragTarget, + DragTargetAcceptEvent, + Page, + Row, + border, + colors, + ) + + + def main(page: Page): + page.title = "Drag and Drop example" + + def drag_will_accept(e): + e.control.content.border = border.all( + 2, colors.BLACK45 if e.data == "true" else colors.RED + ) + e.control.update() + + def drag_accept(e: DragTargetAcceptEvent): + src = page.get_control(e.src_id) + e.control.content.bgcolor = src.content.bgcolor + e.control.content.border = None + e.control.update() + + def drag_leave(e): + e.control.content.border = None + e.control.update() + + page.add( + Row( + [ + Column( + [ + Draggable( + group="color", + content=Container( + width=50, + height=50, + bgcolor=colors.CYAN, + border_radius=5, + ), + content_feedback=Container( + width=20, + height=20, + bgcolor=colors.CYAN, + border_radius=3, + ), + ), + Draggable( + group="color", + content=Container( + width=50, + height=50, + bgcolor=colors.YELLOW, + border_radius=5, + ), + ), + Draggable( + group="color1", + content=Container( + width=50, + height=50, + bgcolor=colors.GREEN, + border_radius=5, + ), + ), + ] + ), + Container(width=100), + DragTarget( + group="color", + content=Container( + width=50, + height=50, + bgcolor=colors.BLUE_GREY_100, + border_radius=5, + ), + on_will_accept=drag_will_accept, + on_accept=drag_accept, + on_leave=drag_leave, + ), + ] + ) + ) + + + flet.app(target=main) + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/draggable + """ def __init__( self, ref: Optional[Ref] = None, From 2bd6c1a6fdd30b692fa4fba77c33e9d56b4a065c Mon Sep 17 00:00:00 2001 From: InesaFitsner Date: Wed, 7 Dec 2022 10:36:34 -0800 Subject: [PATCH 48/55] Update drag_target.py --- sdk/python/flet/drag_target.py | 92 ++++++++++++++++++++++++++++++++++ 1 file changed, 92 insertions(+) diff --git a/sdk/python/flet/drag_target.py b/sdk/python/flet/drag_target.py index 348ea968d..2dc9abecb 100644 --- a/sdk/python/flet/drag_target.py +++ b/sdk/python/flet/drag_target.py @@ -10,6 +10,98 @@ class DragTarget(Control): + """ + A control that completes drag operation when a `Draggable` widget is dropped. + + When a draggable is dragged on top of a drag target, the drag target is asked whether it will accept the data the draggable is carrying. The drag target will accept incoming drag if it belongs to the same group as draggable. If the user does drop the draggable on top of the drag target (and the drag target has indicated that it will accept the draggable's data), then the drag target is asked to accept the draggable's data. + + Example: + ``` + import flet as ft + + def main(page: ft.Page): + page.title = "Drag and Drop example" + + def drag_will_accept(e): + e.control.content.border = ft.border.all( + 2, ft.colors.BLACK45 if e.data == "true" else ft.colors.RED + ) + e.control.update() + + def drag_accept(e): + src = page.get_control(e.src_id) + e.control.content.bgcolor = src.content.bgcolor + e.control.content.border = None + e.control.update() + + def drag_leave(e): + e.control.content.border = None + e.control.update() + + page.add( + ft.Row( + [ + ft.Column( + [ + ft.Draggable( + group="color", + content=ft.Container( + width=50, + height=50, + bgcolor=ft.colors.CYAN, + border_radius=5, + ), + content_feedback=ft.Container( + width=20, + height=20, + bgcolor=ft.colors.CYAN, + border_radius=3, + ), + ), + ft.Draggable( + group="color", + content=ft.Container( + width=50, + height=50, + bgcolor=ft.colors.YELLOW, + border_radius=5, + ), + ), + ft.Draggable( + group="color1", + content=ft.Container( + width=50, + height=50, + bgcolor=ft.colors.GREEN, + border_radius=5, + ), + ), + ] + ), + ft.Container(width=100), + ft.DragTarget( + group="color", + content=ft.Container( + width=50, + height=50, + bgcolor=ft.colors.BLUE_GREY_100, + border_radius=5, + ), + on_will_accept=drag_will_accept, + on_accept=drag_accept, + on_leave=drag_leave, + ), + ] + ) + ) + + ft.app(target=main) + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/dragtarget + """ def __init__( self, ref: Optional[Ref] = None, From 5c944e07271ff11398b9b432002addcb17b70d01 Mon Sep 17 00:00:00 2001 From: InesaFitsner Date: Wed, 7 Dec 2022 10:50:37 -0800 Subject: [PATCH 49/55] Update file_picker.py --- sdk/python/flet/file_picker.py | 41 ++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/sdk/python/flet/file_picker.py b/sdk/python/flet/file_picker.py index 076498646..63e903c5d 100644 --- a/sdk/python/flet/file_picker.py +++ b/sdk/python/flet/file_picker.py @@ -63,6 +63,47 @@ class FilePickerUploadEvent(ControlEvent): class FilePicker(Control): + """ + A control that allows you to use the native file explorer to pick single or multiple files, with extensions filtering support and upload. + + Example: + ``` + import flet as ft + + def main(page: ft.Page): + def pick_files_result(e: ft.FilePickerResultEvent): + selected_files.value = ( + ", ".join(map(lambda f: f.name, e.files)) if e.files else "Cancelled!" + ) + selected_files.update() + + pick_files_dialog = ft.FilePicker(on_result=pick_files_result) + selected_files = ft.Text() + + page.overlay.append(pick_files_dialog) + + page.add( + ft.Row( + [ + ft.ElevatedButton( + "Pick files", + icon=ft.icons.UPLOAD_FILE, + on_click=lambda _: pick_files_dialog.pick_files( + allow_multiple=True + ), + ), + selected_files, + ] + ) + ) + + ft.app(target=main) + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/filepicker + """ def __init__( self, ref: Optional[Ref] = None, From bdf4eeaafdae3f1f265193e51a01d7f2ce6a92f0 Mon Sep 17 00:00:00 2001 From: InesaFitsner Date: Wed, 7 Dec 2022 10:56:46 -0800 Subject: [PATCH 50/55] Update gesture_detector.py --- sdk/python/flet/gesture_detector.py | 48 +++++++++++++++++++++++++++++ 1 file changed, 48 insertions(+) diff --git a/sdk/python/flet/gesture_detector.py b/sdk/python/flet/gesture_detector.py index 001aeb1d7..2fec4c8e5 100644 --- a/sdk/python/flet/gesture_detector.py +++ b/sdk/python/flet/gesture_detector.py @@ -58,6 +58,54 @@ class MouseCursor(Enum): class GestureDetector(ConstrainedControl): + """ + A control that detects gestures. + + Attempts to recognize gestures that correspond to its non-null callbacks. + + If this control has a content, it defers to that child control for its sizing behavior. If it does not have a content, it grows to fit the parent instead. + + Example: + ``` + import flet as ft + + def main(page: ft.Page): + def on_pan_update1(e: ft.DragUpdateEvent): + c.top = max(0, c.top + e.delta_y) + c.left = max(0, c.left + e.delta_x) + c.update() + + def on_pan_update2(e: ft.DragUpdateEvent): + e.control.top = max(0, e.control.top + e.delta_y) + e.control.left = max(0, e.control.left + e.delta_x) + e.control.update() + + gd = ft.GestureDetector( + mouse_cursor=ft.MouseCursor.MOVE, + drag_interval=50, + on_pan_update=on_pan_update1, + ) + + c = ft.Container(gd, bgcolor=ft.colors.AMBER, width=50, height=50, left=0, top=0) + + gd1 = ft.GestureDetector( + mouse_cursor=ft.MouseCursor.MOVE, + drag_interval=10, + on_vertical_drag_update=on_pan_update2, + left=100, + top=100, + content=ft.Container(bgcolor=ft.colors.BLUE, width=50, height=50), + ) + + page.add( ft.Stack([c, gd1], width=1000, height=500)) + + ft.app(target=main) + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/gesturedetector + """ def __init__( self, content: Optional[Control] = None, From e86f58e1b06e30ef26e5760e1959504c61bd1d58 Mon Sep 17 00:00:00 2001 From: InesaFitsner Date: Wed, 7 Dec 2022 11:00:02 -0800 Subject: [PATCH 51/55] Update haptic_feedback.py --- sdk/python/flet/haptic_feedback.py | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/sdk/python/flet/haptic_feedback.py b/sdk/python/flet/haptic_feedback.py index 56b08677b..c85e9de9e 100644 --- a/sdk/python/flet/haptic_feedback.py +++ b/sdk/python/flet/haptic_feedback.py @@ -7,6 +7,33 @@ class HapticFeedback(CallableControl): + """ + Allows access to the haptic feedback interface on the device. + + It is non-visual and should be added to `page.overlay` list. + + Example: + ``` + import flet as ft + + def main(page: ft.Page): + hf = ft.HapticFeedback() + page.overlay.append(hf) + + page.add( + ft.ElevatedButton("Heavy impact", on_click=lambda _: hf.heavy_impact()), + ft.ElevatedButton("Medium impact", on_click=lambda _: hf.medium_impact()), + ft.ElevatedButton("Light impact", on_click=lambda _: hf.light_impact()), + ft.ElevatedButton("Vibrate", on_click=lambda _: hf.vibrate()), + ) + + ft.app(target=main) + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/hapticfeedback + """ def __init__( self, ref: Optional[Ref] = None, From c098e179374ff9ac368ffbb2d1f7b3496c96179e Mon Sep 17 00:00:00 2001 From: InesaFitsner Date: Wed, 7 Dec 2022 11:02:05 -0800 Subject: [PATCH 52/55] Update semantics.py --- sdk/python/flet/semantics.py | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/sdk/python/flet/semantics.py b/sdk/python/flet/semantics.py index 6dc4ff033..bb7330550 100644 --- a/sdk/python/flet/semantics.py +++ b/sdk/python/flet/semantics.py @@ -7,6 +7,15 @@ class Semantics(Control): + """ + A control that annotates the control tree with a description of the meaning of the widgets. + + Used by accessibility tools, search engines, and other semantic analysis software to determine the meaning of the application. + + ----- + + Online docs: https://flet.dev/docs/controls/semantics + """ def __init__( self, content: Optional[Control] = None, From 68e69712f5c5d170c8f5f15a7dad2c4398fb00c3 Mon Sep 17 00:00:00 2001 From: InesaFitsner Date: Wed, 7 Dec 2022 11:05:39 -0800 Subject: [PATCH 53/55] Update shader_mask.py --- sdk/python/flet/shader_mask.py | 35 ++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/sdk/python/flet/shader_mask.py b/sdk/python/flet/shader_mask.py index 065bf0788..3b6425b33 100644 --- a/sdk/python/flet/shader_mask.py +++ b/sdk/python/flet/shader_mask.py @@ -19,6 +19,41 @@ class ShaderMask(ConstrainedControl): + """ + A control that applies a mask generated by a shader to its child. + + For example, ShaderMask can be used to gradually fade out the edge of a child by using a `LinearGradient` mask. + + Example: + ``` + import flet as ft + + def main(page: ft.Page): + page.add( + ft.Row( + [ + ft.ShaderMask( + ft.Image(src="https://picsum.photos/100/200?2"), + blend_mode=ft.BlendMode.DST_IN, + shader=ft.LinearGradient( + begin=ft.alignment.top_center, + end=ft.alignment.bottom_center, + colors=[ft.colors.BLACK, ft.colors.TRANSPARENT], + stops=[0.5, 1.0], + ), + border_radius=10, + ), + ] + ) + ) + + ft.app(target=main) + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/shadermask + """ def __init__( self, content: Optional[Control] = None, From bb35a8e0067163480ce81baaef6e6f35031488e5 Mon Sep 17 00:00:00 2001 From: InesaFitsner Date: Wed, 7 Dec 2022 11:08:08 -0800 Subject: [PATCH 54/55] Update shake_detector.py --- sdk/python/flet/shake_detector.py | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/sdk/python/flet/shake_detector.py b/sdk/python/flet/shake_detector.py index 6d5c27db8..d38ee6121 100644 --- a/sdk/python/flet/shake_detector.py +++ b/sdk/python/flet/shake_detector.py @@ -7,6 +7,33 @@ class ShakeDetector(Control): + """ + Detects phone shakes. + + It is non-visual and should be added to `page.overlay` list. + + Example: + ``` + import flet as ft + + def main(page: ft.Page): + shd = ft.ShakeDetector( + minimum_shake_count=2, + shake_slop_time_ms=300, + shake_count_reset_time_ms=1000, + on_shake=lambda _: print("SHAKE DETECTED!"), + ) + page.overlay.append(shd) + + page.add(ft.Text("Program body")) + + ft.app(target=main) + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/shakedetector + """ def __init__( self, ref: Optional[Ref] = None, From a52a9e98296460c7d071e78f3b504268a072c7af Mon Sep 17 00:00:00 2001 From: InesaFitsner Date: Wed, 7 Dec 2022 11:11:26 -0800 Subject: [PATCH 55/55] Update window_drag_area.py --- sdk/python/flet/window_drag_area.py | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/sdk/python/flet/window_drag_area.py b/sdk/python/flet/window_drag_area.py index 182b63fb5..c1695e248 100644 --- a/sdk/python/flet/window_drag_area.py +++ b/sdk/python/flet/window_drag_area.py @@ -13,6 +13,35 @@ class WindowDragArea(ConstrainedControl): + """ + A control for drag to move, maximize and restore application window. + + When you have hidden the title bar with `page.window_title_bar_hidden`, you can add this control to move the window position. + + Example: + ``` + import flet as ft + + def main(page: ft.Page): + page.window_title_bar_hidden = True + page.window_title_bar_buttons_hidden = True + + page.add( + ft.Row( + [ + ft.WindowDragArea(ft.Container(ft.Text("Drag this area to move, maximize and restore application window."), bgcolor=ft.colors.AMBER_300, padding=10), expand=True), + ft.IconButton(ft.icons.CLOSE, on_click=lambda _: page.window_close()) + ] + ) + ) + + ft.app(target=main) + ``` + + ----- + + Online docs: https://flet.dev/docs/controls/windowdragarea + """ def __init__( self, content: Optional[Control] = None,