diff --git a/python/apps/authentication/github-oauth-with-listing-repos-async.py b/python/apps/authentication/github-oauth-with-listing-repos-async.py index cbcc4192..8cd6d13b 100644 --- a/python/apps/authentication/github-oauth-with-listing-repos-async.py +++ b/python/apps/authentication/github-oauth-with-listing-repos-async.py @@ -70,7 +70,7 @@ async def list_github_repositories(): for repo in user_repos: repos_view.controls.append( ft.ListTile( - leading=ft.Icon(ft.icons.FOLDER_ROUNDED), + leading=ft.Icon(ft.Icons.FOLDER_ROUNDED), title=ft.Text(repo["full_name"]), ) ) diff --git a/python/apps/authentication/github-oauth-with-listing-repos.py b/python/apps/authentication/github-oauth-with-listing-repos.py index 271bbcce..f237860d 100644 --- a/python/apps/authentication/github-oauth-with-listing-repos.py +++ b/python/apps/authentication/github-oauth-with-listing-repos.py @@ -67,7 +67,7 @@ def list_github_repositories(): for repo in user_repos: repos_view.controls.append( ft.ListTile( - leading=ft.Icon(ft.icons.FOLDER_ROUNDED), + leading=ft.Icon(ft.Icons.FOLDER_ROUNDED), title=ft.Text(repo["full_name"]), ) ) @@ -96,4 +96,4 @@ def toggle_login_buttons(): page.add(ft.Row([logged_user, login_button, logout_button]), repos_view) -ft.app(main) \ No newline at end of file +ft.app(main) diff --git a/python/apps/autocomplete-searcher/main.py b/python/apps/autocomplete-searcher/main.py index 29b98b72..1ac44851 100644 --- a/python/apps/autocomplete-searcher/main.py +++ b/python/apps/autocomplete-searcher/main.py @@ -3,7 +3,7 @@ def printer(e): - print('Yellow!') + print("Yellow!") def main(page: ft.Page): @@ -11,16 +11,18 @@ def main(page: ft.Page): def textbox_changed(string): str_lower = string.control.value.lower() - list_view.controls = [ - list_items.get(n) for n in NAMES if str_lower in n.lower() - ] if str_lower else [] + list_view.controls = ( + [list_items.get(n) for n in NAMES if str_lower in n.lower()] + if str_lower + else [] + ) page.update() list_items = { name: ft.ListTile( title=ft.Text(name), - leading=ft.Icon(ft.icons.ACCESSIBILITY), - on_click=printer + leading=ft.Icon(ft.Icons.ACCESSIBILITY), + on_click=printer, ) for name in NAMES } diff --git a/python/apps/controls-gallery/examples/animations/animated_switcher/01_animatedswitcher_example.py b/python/apps/controls-gallery/examples/animations/animated_switcher/01_animatedswitcher_example.py index 27026f82..a1996a5e 100644 --- a/python/apps/controls-gallery/examples/animations/animated_switcher/01_animatedswitcher_example.py +++ b/python/apps/controls-gallery/examples/animations/animated_switcher/01_animatedswitcher_example.py @@ -6,14 +6,14 @@ def example(): c1 = ft.Container( ft.Text("Hello!", theme_style=ft.TextThemeStyle.HEADLINE_MEDIUM), - alignment=ft.Alignment.center(), + alignment=ft.Alignment.CENTER, width=200, height=200, bgcolor=ft.Colors.GREEN, ) c2 = ft.Container( ft.Text("Bye!", size=50), - alignment=ft.Alignment.center(), + alignment=ft.Alignment.CENTER, width=200, height=200, bgcolor=ft.Colors.YELLOW, diff --git a/python/apps/controls-gallery/examples/buttons/menuitembutton/01_menuitembutton_example.py b/python/apps/controls-gallery/examples/buttons/menuitembutton/01_menuitembutton_example.py index cdb48366..b89123d0 100644 --- a/python/apps/controls-gallery/examples/buttons/menuitembutton/01_menuitembutton_example.py +++ b/python/apps/controls-gallery/examples/buttons/menuitembutton/01_menuitembutton_example.py @@ -7,7 +7,7 @@ def example(): menubar = ft.MenuBar( expand=True, style=ft.MenuStyle( - alignment=ft.Alignment.top_left(), + alignment=ft.Alignment.TOP_LEFT, bgcolor=ft.Colors.RED_100, mouse_cursor={ ft.ControlState.HOVERED: ft.MouseCursor.WAIT, diff --git a/python/apps/controls-gallery/examples/colors/colorpalettes/01_color_palettes.py b/python/apps/controls-gallery/examples/colors/colorpalettes/01_color_palettes.py index 4adf95fd..622cd6ad 100644 --- a/python/apps/controls-gallery/examples/colors/colorpalettes/01_color_palettes.py +++ b/python/apps/controls-gallery/examples/colors/colorpalettes/01_color_palettes.py @@ -102,7 +102,7 @@ def copy_to_clipboard(e): swatch_colors.controls.append( ft.Container( height=50, - alignment=ft.Alignment.center(), + alignment=ft.Alignment.CENTER, bgcolor=color.name, on_click=copy_to_clipboard, content=ft.Text(color.display_name, weight=ft.FontWeight.W_500), diff --git a/python/apps/controls-gallery/examples/colors/controlcolors/05_tabs_theme.py b/python/apps/controls-gallery/examples/colors/controlcolors/05_tabs_theme.py index c45bdf71..d6e15b9a 100644 --- a/python/apps/controls-gallery/examples/colors/controlcolors/05_tabs_theme.py +++ b/python/apps/controls-gallery/examples/colors/controlcolors/05_tabs_theme.py @@ -11,7 +11,7 @@ def example(): ft.Tab( label="Tab 1", content=ft.Container( - content=ft.Text("This is Tab 1"), alignment=ft.Alignment.center() + content=ft.Text("This is Tab 1"), alignment=ft.Alignment.CENTER ), ), ft.Tab( diff --git a/python/apps/controls-gallery/examples/colors/cupertinocolors/01_cupertino_colors.py b/python/apps/controls-gallery/examples/colors/cupertinocolors/01_cupertino_colors.py index a5499e61..7b1f2e50 100644 --- a/python/apps/controls-gallery/examples/colors/cupertinocolors/01_cupertino_colors.py +++ b/python/apps/controls-gallery/examples/colors/cupertinocolors/01_cupertino_colors.py @@ -32,7 +32,7 @@ def copy_to_clipboard(e): height=50, bgcolor=color[1], content=ft.Text(color[0], color=text_color), - alignment=ft.Alignment.center(), + alignment=ft.Alignment.CENTER, on_click=copy_to_clipboard, ) ) diff --git a/python/apps/controls-gallery/examples/colors/themecolors/01_theme_colors.py b/python/apps/controls-gallery/examples/colors/themecolors/01_theme_colors.py index 1984e2d1..445df9d4 100644 --- a/python/apps/controls-gallery/examples/colors/themecolors/01_theme_colors.py +++ b/python/apps/controls-gallery/examples/colors/themecolors/01_theme_colors.py @@ -64,7 +64,7 @@ def copy_to_clipboard(e): height=50, bgcolor=color.name, content=ft.Text(color.display_name, color=text_color), - alignment=ft.Alignment.center(), + alignment=ft.Alignment.CENTER, on_click=copy_to_clipboard, ) ) diff --git a/python/apps/controls-gallery/examples/displays/canvas/04_drawing_text.py b/python/apps/controls-gallery/examples/displays/canvas/04_drawing_text.py index 935cfe62..32cfb6b0 100644 --- a/python/apps/controls-gallery/examples/displays/canvas/04_drawing_text.py +++ b/python/apps/controls-gallery/examples/displays/canvas/04_drawing_text.py @@ -23,7 +23,7 @@ def example(): ft.TextStyle(italic=True, color=ft.Colors.GREEN, size=20), ) ], - alignment=ft.Alignment.top_center(), + alignment=ft.Alignment.top_CENTER, rotate=math.pi * 0.15, ), cv.Circle(400, 100, 2, ft.Paint(color=ft.Colors.RED)), @@ -32,7 +32,7 @@ def example(): 100, "Rotated around top_left", ft.TextStyle(size=20), - alignment=ft.Alignment.top_left(), + alignment=ft.Alignment.TOP_LEFT, rotate=math.pi * -0.15, ), cv.Circle(600, 200, 2, ft.Paint(color=ft.Colors.RED)), @@ -41,7 +41,7 @@ def example(): 200, "Rotated around center", ft.TextStyle(size=20), - alignment=ft.Alignment.center(), + alignment=ft.Alignment.CENTER, rotate=math.pi / 2, ), cv.Text( diff --git a/python/apps/controls-gallery/examples/displays/image/01_images_example.py b/python/apps/controls-gallery/examples/displays/image/01_images_example.py index 46de8f5d..f0a204ce 100644 --- a/python/apps/controls-gallery/examples/displays/image/01_images_example.py +++ b/python/apps/controls-gallery/examples/displays/image/01_images_example.py @@ -8,7 +8,7 @@ def example(): src="logo.svg", width=100, height=100, - fit=ft.ImageFit.CONTAIN, + fit=ft.BoxFit.CONTAIN, ) images = ft.Row(width=600, wrap=False, scroll="always") @@ -18,7 +18,7 @@ def example(): src=f"https://picsum.photos/200/200?{i}", width=200, height=200, - fit=ft.ImageFit.NONE, + fit=ft.BoxFit.NONE, repeat=ft.ImageRepeat.NO_REPEAT, border_radius=ft.BorderRadius.all(10), ) diff --git a/python/apps/controls-gallery/examples/displays/text/09_text_with_tooltip_with_a_custom_decoration.py b/python/apps/controls-gallery/examples/displays/text/09_text_with_tooltip_with_a_custom_decoration.py index a7df755f..6c652a05 100644 --- a/python/apps/controls-gallery/examples/displays/text/09_text_with_tooltip_with_a_custom_decoration.py +++ b/python/apps/controls-gallery/examples/displays/text/09_text_with_tooltip_with_a_custom_decoration.py @@ -16,7 +16,7 @@ def example(): border_radius=10, text_style=ft.TextStyle(size=20, color=ft.Colors.WHITE), gradient=ft.LinearGradient( - begin=ft.Alignment.top_left(), + begin=ft.Alignment.TOP_LEFT, end=ft.Alignment(0.8, 1), # end=ft.Alignment.bottom_left(), # colors=[ft.Colors.BLUE, ft.Colors.YELLOW], diff --git a/python/apps/controls-gallery/examples/layout/column/01_column_spacing.py b/python/apps/controls-gallery/examples/layout/column/01_column_spacing.py index fd6dd042..a3dfa0cf 100644 --- a/python/apps/controls-gallery/examples/layout/column/01_column_spacing.py +++ b/python/apps/controls-gallery/examples/layout/column/01_column_spacing.py @@ -10,7 +10,7 @@ def items(count): items.append( ft.Container( content=ft.Text(value=str(i)), - alignment=ft.Alignment.center(), + alignment=ft.Alignment.CENTER, width=50, height=50, bgcolor=ft.Colors.AMBER, diff --git a/python/apps/controls-gallery/examples/layout/column/02_column_wrapping.py b/python/apps/controls-gallery/examples/layout/column/02_column_wrapping.py index c2e26b3b..0c5346da 100644 --- a/python/apps/controls-gallery/examples/layout/column/02_column_wrapping.py +++ b/python/apps/controls-gallery/examples/layout/column/02_column_wrapping.py @@ -12,7 +12,7 @@ def items(count): items.append( ft.Container( content=ft.Text(value=str(i)), - alignment=ft.Alignment.center(), + alignment=ft.Alignment.CENTER, width=30, height=30, bgcolor=ft.Colors.AMBER, diff --git a/python/apps/controls-gallery/examples/layout/column/03_column_vertical_alignment.py b/python/apps/controls-gallery/examples/layout/column/03_column_vertical_alignment.py index 2a38321c..0ac2fe29 100644 --- a/python/apps/controls-gallery/examples/layout/column/03_column_vertical_alignment.py +++ b/python/apps/controls-gallery/examples/layout/column/03_column_vertical_alignment.py @@ -12,7 +12,7 @@ def items(count): items.append( ft.Container( content=ft.Text(value=str(i)), - alignment=ft.Alignment.center(), + alignment=ft.Alignment.CENTER, width=50, height=50, bgcolor=ft.Colors.AMBER_500, diff --git a/python/apps/controls-gallery/examples/layout/column/04_column_horizontal_alignment.py b/python/apps/controls-gallery/examples/layout/column/04_column_horizontal_alignment.py index 4744354d..fceae7bc 100644 --- a/python/apps/controls-gallery/examples/layout/column/04_column_horizontal_alignment.py +++ b/python/apps/controls-gallery/examples/layout/column/04_column_horizontal_alignment.py @@ -11,7 +11,7 @@ def items(count): items.append( ft.Container( content=ft.Text(value=str(i)), - alignment=ft.Alignment.center(), + alignment=ft.Alignment.CENTER, width=50, height=50, bgcolor=ft.Colors.AMBER_500, diff --git a/python/apps/controls-gallery/examples/layout/column/05_column_scroll_to.py b/python/apps/controls-gallery/examples/layout/column/05_column_scroll_to.py index 9a423408..25a64488 100644 --- a/python/apps/controls-gallery/examples/layout/column/05_column_scroll_to.py +++ b/python/apps/controls-gallery/examples/layout/column/05_column_scroll_to.py @@ -12,28 +12,28 @@ def example(): controls=[ ft.Container( ft.Text("Section A"), - alignment=ft.Alignment.top_left(), + alignment=ft.Alignment.TOP_LEFT, bgcolor=ft.Colors.YELLOW_200, height=100, scroll_key="A", ), ft.Container( ft.Text("Section B"), - alignment=ft.Alignment.top_left(), + alignment=ft.Alignment.TOP_LEFT, bgcolor=ft.Colors.GREEN_200, height=100, scroll_key="B", ), ft.Container( ft.Text("Section C"), - alignment=ft.Alignment.top_left(), + alignment=ft.Alignment.TOP_LEFT, bgcolor=ft.Colors.BLUE_200, height=100, scroll_key="C", ), ft.Container( ft.Text("Section D"), - alignment=ft.Alignment.top_left(), + alignment=ft.Alignment.TOP_LEFT, bgcolor=ft.Colors.PINK_200, height=100, scroll_key="D", diff --git a/python/apps/controls-gallery/examples/layout/container/01_clickable_containers.py b/python/apps/controls-gallery/examples/layout/container/01_clickable_containers.py index 30b150de..42b10dd1 100644 --- a/python/apps/controls-gallery/examples/layout/container/01_clickable_containers.py +++ b/python/apps/controls-gallery/examples/layout/container/01_clickable_containers.py @@ -11,7 +11,7 @@ def example(): content=ft.Text("Non clickable"), margin=10, padding=10, - alignment=ft.Alignment.center(), + alignment=ft.Alignment.CENTER, bgcolor=ft.Colors.AMBER, width=150, height=150, @@ -21,7 +21,7 @@ def example(): content=ft.Text("Clickable without Ink"), margin=10, padding=10, - alignment=ft.Alignment.center(), + alignment=ft.Alignment.CENTER, bgcolor=ft.Colors.GREEN_200, width=150, height=150, @@ -32,7 +32,7 @@ def example(): content=ft.Text("Clickable with Ink"), margin=10, padding=10, - alignment=ft.Alignment.center(), + alignment=ft.Alignment.CENTER, bgcolor=ft.Colors.CYAN_200, width=150, height=150, @@ -44,7 +44,7 @@ def example(): content=ft.Text("Clickable transparent with Ink"), margin=10, padding=10, - alignment=ft.Alignment.center(), + alignment=ft.Alignment.CENTER, width=150, height=150, border_radius=10, diff --git a/python/apps/controls-gallery/examples/layout/container/02_container_alignment.py b/python/apps/controls-gallery/examples/layout/container/02_container_alignment.py index 8f6398bf..2e3c09a4 100644 --- a/python/apps/controls-gallery/examples/layout/container/02_container_alignment.py +++ b/python/apps/controls-gallery/examples/layout/container/02_container_alignment.py @@ -7,7 +7,7 @@ def example(): container_1 = ft.Container( content=ft.Text("Center"), - alignment=ft.Alignment.center(), + alignment=ft.Alignment.CENTER, bgcolor=ft.Colors.BLUE_GREY_100, width=150, height=150, @@ -15,7 +15,7 @@ def example(): container_2 = ft.Container( content=ft.Text("Top left"), - alignment=ft.Alignment.top_left(), + alignment=ft.Alignment.TOP_LEFT, bgcolor=ft.Colors.BLUE_GREY_200, width=150, height=150, diff --git a/python/apps/controls-gallery/examples/layout/container/04_container_gradient.py b/python/apps/controls-gallery/examples/layout/container/04_container_gradient.py index d0dc4c50..32585f6e 100644 --- a/python/apps/controls-gallery/examples/layout/container/04_container_gradient.py +++ b/python/apps/controls-gallery/examples/layout/container/04_container_gradient.py @@ -9,10 +9,10 @@ def example(): container_1 = ft.Container( content=ft.Text("LinearGradient"), - alignment=ft.Alignment.center(), + alignment=ft.Alignment.CENTER, gradient=ft.LinearGradient( - begin=ft.Alignment.top_center(), - end=ft.Alignment.bottom_center(), + begin=ft.Alignment.top_CENTER, + end=ft.Alignment.bottom_CENTER, colors=[ft.Colors.BLUE, ft.Colors.YELLOW], ), width=150, @@ -22,7 +22,7 @@ def example(): container_2 = ft.Container( content=ft.Text("RadialGradient"), - alignment=ft.Alignment.center(), + alignment=ft.Alignment.CENTER, gradient=ft.RadialGradient( colors=[ft.Colors.YELLOW, ft.Colors.BLUE], ), @@ -33,9 +33,9 @@ def example(): container_3 = ft.Container( content=ft.Text("SweepGradient"), - alignment=ft.Alignment.center(), + alignment=ft.Alignment.CENTER, gradient=ft.SweepGradient( - center=ft.Alignment.center(), + center=ft.Alignment.CENTER, start_angle=0.0, end_angle=math.pi * 2, colors=[ft.Colors.YELLOW, ft.Colors.BLUE], diff --git a/python/apps/controls-gallery/examples/layout/divider/01_divider_example.py b/python/apps/controls-gallery/examples/layout/divider/01_divider_example.py index 545b0ffd..004107f8 100644 --- a/python/apps/controls-gallery/examples/layout/divider/01_divider_example.py +++ b/python/apps/controls-gallery/examples/layout/divider/01_divider_example.py @@ -9,23 +9,23 @@ def example(): [ ft.Container( bgcolor=ft.Colors.AMBER, - alignment=ft.Alignment.center(), + alignment=ft.Alignment.CENTER, expand=1, ), ft.Divider(), ft.Container( - bgcolor=ft.Colors.PINK, alignment=ft.Alignment.center(), expand=1 + bgcolor=ft.Colors.PINK, alignment=ft.Alignment.CENTER, expand=1 ), ft.Divider(height=1, color="white"), ft.Container( bgcolor=ft.Colors.BLUE_300, - alignment=ft.Alignment.center(), + alignment=ft.Alignment.CENTER, expand=1, ), ft.Divider(height=9, thickness=3), ft.Container( bgcolor=ft.Colors.DEEP_PURPLE_200, - alignment=ft.Alignment.center(), + alignment=ft.Alignment.CENTER, expand=1, ), ], diff --git a/python/apps/controls-gallery/examples/layout/divider/02_draggable_divider.py b/python/apps/controls-gallery/examples/layout/divider/02_draggable_divider.py index d0b49186..6e61cdba 100644 --- a/python/apps/controls-gallery/examples/layout/divider/02_draggable_divider.py +++ b/python/apps/controls-gallery/examples/layout/divider/02_draggable_divider.py @@ -15,7 +15,7 @@ def show_draggable_cursor(e: ft.HoverEvent): c = ft.Container( bgcolor=ft.Colors.AMBER, - alignment=ft.Alignment.center(), + alignment=ft.Alignment.CENTER, height=100, # expand=1, ) @@ -29,7 +29,7 @@ def show_draggable_cursor(e: ft.HoverEvent): on_hover=show_draggable_cursor, ), ft.Container( - bgcolor=ft.Colors.PINK, alignment=ft.Alignment.center(), expand=1 + bgcolor=ft.Colors.PINK, alignment=ft.Alignment.CENTER, expand=1 ), ], spacing=0, diff --git a/python/apps/controls-gallery/examples/layout/gridview/01_photo_gallery.py b/python/apps/controls-gallery/examples/layout/gridview/01_photo_gallery.py index bb51b4e8..12aeca90 100644 --- a/python/apps/controls-gallery/examples/layout/gridview/01_photo_gallery.py +++ b/python/apps/controls-gallery/examples/layout/gridview/01_photo_gallery.py @@ -19,7 +19,7 @@ def example(): images.controls.append( ft.Image( src=f"https://picsum.photos/150/150?{i}", - fit=ft.ImageFit.NONE, + fit=ft.BoxFit.NONE, repeat=ft.ImageRepeat.NO_REPEAT, border_radius=ft.BorderRadius.all(10), ) diff --git a/python/apps/controls-gallery/examples/layout/listtile/01_listtile_examples.py b/python/apps/controls-gallery/examples/layout/listtile/01_listtile_examples.py index 1d7cc8b8..8adf54da 100644 --- a/python/apps/controls-gallery/examples/layout/listtile/01_listtile_examples.py +++ b/python/apps/controls-gallery/examples/layout/listtile/01_listtile_examples.py @@ -20,7 +20,7 @@ def example(): selected=True, ), ft.ListTile( - leading=ft.Image(src="/logo.svg", fit=ft.ImageFit.CONTAIN), + leading=ft.Image(src="/logo.svg", fit=ft.BoxFit.CONTAIN), title=ft.Text("One-line with leading control"), ), ft.ListTile( diff --git a/python/apps/controls-gallery/examples/layout/row/01_row_spacing.py b/python/apps/controls-gallery/examples/layout/row/01_row_spacing.py index 9f713112..261b3fd5 100644 --- a/python/apps/controls-gallery/examples/layout/row/01_row_spacing.py +++ b/python/apps/controls-gallery/examples/layout/row/01_row_spacing.py @@ -10,7 +10,7 @@ def items(count): items.append( ft.Container( content=ft.Text(value=str(i)), - alignment=ft.Alignment.center(), + alignment=ft.Alignment.CENTER, width=50, height=50, bgcolor=ft.Colors.AMBER, diff --git a/python/apps/controls-gallery/examples/layout/row/02_row_wrapping.py b/python/apps/controls-gallery/examples/layout/row/02_row_wrapping.py index 7fe8121b..1c9bf68b 100644 --- a/python/apps/controls-gallery/examples/layout/row/02_row_wrapping.py +++ b/python/apps/controls-gallery/examples/layout/row/02_row_wrapping.py @@ -10,7 +10,7 @@ def items(count): items.append( ft.Container( content=ft.Text(value=str(i)), - alignment=ft.Alignment.center(), + alignment=ft.Alignment.CENTER, width=50, height=50, bgcolor=ft.Colors.AMBER, diff --git a/python/apps/controls-gallery/examples/layout/row/03_row_horizontal_alignment.py b/python/apps/controls-gallery/examples/layout/row/03_row_horizontal_alignment.py index 0a96d206..5c927213 100644 --- a/python/apps/controls-gallery/examples/layout/row/03_row_horizontal_alignment.py +++ b/python/apps/controls-gallery/examples/layout/row/03_row_horizontal_alignment.py @@ -11,7 +11,7 @@ def items(count): items.append( ft.Container( content=ft.Text(value=str(i)), - alignment=ft.Alignment.center(), + alignment=ft.Alignment.CENTER, width=50, height=50, bgcolor=ft.Colors.AMBER_500, diff --git a/python/apps/controls-gallery/examples/layout/row/04_row_vertical_alignment.py b/python/apps/controls-gallery/examples/layout/row/04_row_vertical_alignment.py index cc20e041..a20c2a8e 100644 --- a/python/apps/controls-gallery/examples/layout/row/04_row_vertical_alignment.py +++ b/python/apps/controls-gallery/examples/layout/row/04_row_vertical_alignment.py @@ -11,7 +11,7 @@ def items(count): items.append( ft.Container( content=ft.Text(value=str(i)), - alignment=ft.Alignment.center(), + alignment=ft.Alignment.CENTER, width=50, height=50, bgcolor=ft.Colors.AMBER_500, diff --git a/python/apps/controls-gallery/examples/layout/safearea/01_safearea_example.py b/python/apps/controls-gallery/examples/layout/safearea/01_safearea_example.py index ce20a7b0..56f7296d 100644 --- a/python/apps/controls-gallery/examples/layout/safearea/01_safearea_example.py +++ b/python/apps/controls-gallery/examples/layout/safearea/01_safearea_example.py @@ -17,7 +17,7 @@ def __init__(self): self.counter = ft.Text("0", size=50) self.content = ft.Container( content=self.counter, - alignment=ft.Alignment.center(), + alignment=ft.Alignment.CENTER, ) self.expand = True diff --git a/python/apps/controls-gallery/examples/layout/stack/01_transparent_title_over_an_image.py b/python/apps/controls-gallery/examples/layout/stack/01_transparent_title_over_an_image.py index adebce8f..af80475a 100644 --- a/python/apps/controls-gallery/examples/layout/stack/01_transparent_title_over_an_image.py +++ b/python/apps/controls-gallery/examples/layout/stack/01_transparent_title_over_an_image.py @@ -2,15 +2,16 @@ name = "Transparent title over an image" + def example(): st = ft.Stack( [ ft.Image( - src=f"https://picsum.photos/300/300", + src="https://picsum.photos/300/300", width=300, height=300, - fit=ft.ImageFit.CONTAIN, + fit=ft.BoxFit.CONTAIN, ), ft.Row( [ @@ -29,4 +30,4 @@ def example(): height=300, ) - return st \ No newline at end of file + return st diff --git a/python/apps/controls-gallery/examples/layout/tabs/01_tabs_example.py b/python/apps/controls-gallery/examples/layout/tabs/01_tabs_example.py index da2436e8..c1ae4d52 100644 --- a/python/apps/controls-gallery/examples/layout/tabs/01_tabs_example.py +++ b/python/apps/controls-gallery/examples/layout/tabs/01_tabs_example.py @@ -11,7 +11,7 @@ def example(): ft.Tab( label="Tab 1", content=ft.Container( - content=ft.Text("This is Tab 1"), alignment=ft.Alignment.center() + content=ft.Text("This is Tab 1"), alignment=ft.Alignment.CENTER ), ), ft.Tab( diff --git a/python/apps/controls-gallery/examples/layout/verticaldivider/01_verticaldivider_example.py b/python/apps/controls-gallery/examples/layout/verticaldivider/01_verticaldivider_example.py index 1f544c93..e062273e 100644 --- a/python/apps/controls-gallery/examples/layout/verticaldivider/01_verticaldivider_example.py +++ b/python/apps/controls-gallery/examples/layout/verticaldivider/01_verticaldivider_example.py @@ -9,25 +9,25 @@ def example(): [ ft.Container( bgcolor=ft.Colors.ORANGE_300, - alignment=ft.Alignment.center(), + alignment=ft.Alignment.CENTER, expand=1, ), ft.VerticalDivider(), ft.Container( bgcolor=ft.Colors.BROWN_400, - alignment=ft.Alignment.center(), + alignment=ft.Alignment.CENTER, expand=1, ), ft.VerticalDivider(width=1, color="white"), ft.Container( bgcolor=ft.Colors.BLUE_300, - alignment=ft.Alignment.center(), + alignment=ft.Alignment.CENTER, expand=1, ), ft.VerticalDivider(width=9, thickness=3), ft.Container( bgcolor=ft.Colors.GREEN_300, - alignment=ft.Alignment.center(), + alignment=ft.Alignment.CENTER, expand=1, ), ], diff --git a/python/apps/controls-gallery/examples/layout/verticaldivider/02_draggable_verticaldivider.py b/python/apps/controls-gallery/examples/layout/verticaldivider/02_draggable_verticaldivider.py index 4914bf6c..01da591c 100644 --- a/python/apps/controls-gallery/examples/layout/verticaldivider/02_draggable_verticaldivider.py +++ b/python/apps/controls-gallery/examples/layout/verticaldivider/02_draggable_verticaldivider.py @@ -15,7 +15,7 @@ def show_draggable_cursor(e: ft.HoverEvent): c = ft.Container( bgcolor=ft.Colors.ORANGE_300, - alignment=ft.Alignment.center(), + alignment=ft.Alignment.CENTER, width=100, # expand=1, ) @@ -31,7 +31,7 @@ def show_draggable_cursor(e: ft.HoverEvent): ), ft.Container( bgcolor=ft.Colors.BROWN_400, - alignment=ft.Alignment.center(), + alignment=ft.Alignment.CENTER, expand=1, ), ], diff --git a/python/apps/controls-gallery/examples/navigation/menubar/01_menubar_example.py b/python/apps/controls-gallery/examples/navigation/menubar/01_menubar_example.py index 5ddd3f4b..7c92de7b 100644 --- a/python/apps/controls-gallery/examples/navigation/menubar/01_menubar_example.py +++ b/python/apps/controls-gallery/examples/navigation/menubar/01_menubar_example.py @@ -10,7 +10,7 @@ def handle_menu_item_click(e): menubar = ft.MenuBar( expand=True, style=ft.MenuStyle( - alignment=ft.Alignment.top_left(), + alignment=ft.Alignment.TOP_LEFT, bgcolor=ft.Colors.RED_100, mouse_cursor={ ft.ControlState.HOVERED: ft.MouseCursor.WAIT, diff --git a/python/apps/controls-gallery/examples/utility/shadermask/01_adding_a_pink_glow_around_image_edges.py b/python/apps/controls-gallery/examples/utility/shadermask/01_adding_a_pink_glow_around_image_edges.py index 33d641ab..2d403a97 100644 --- a/python/apps/controls-gallery/examples/utility/shadermask/01_adding_a_pink_glow_around_image_edges.py +++ b/python/apps/controls-gallery/examples/utility/shadermask/01_adding_a_pink_glow_around_image_edges.py @@ -12,11 +12,11 @@ def example(): src="https://picsum.photos/200/200?1", width=200, height=200, - fit=ft.ImageFit.FILL, + fit=ft.BoxFit.FILL, ), blend_mode=ft.BlendMode.MULTIPLY, shader=ft.RadialGradient( - center=ft.Alignment.center(), + center=ft.Alignment.CENTER, radius=2.0, colors=[ft.Colors.WHITE, ft.Colors.PINK], tile_mode=ft.GradientTileMode.CLAMP, diff --git a/python/apps/controls-gallery/examples/utility/shadermask/02_gradually_fade_out_image_to_the_bottom_edge.py b/python/apps/controls-gallery/examples/utility/shadermask/02_gradually_fade_out_image_to_the_bottom_edge.py index 9925cb3a..ab01bad1 100644 --- a/python/apps/controls-gallery/examples/utility/shadermask/02_gradually_fade_out_image_to_the_bottom_edge.py +++ b/python/apps/controls-gallery/examples/utility/shadermask/02_gradually_fade_out_image_to_the_bottom_edge.py @@ -11,8 +11,8 @@ def example(): content=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(), + begin=ft.Alignment.top_CENTER, + end=ft.Alignment.bottom_CENTER, colors=[ft.Colors.BLACK, ft.Colors.TRANSPARENT], stops=[0.5, 1.0], ), diff --git a/python/apps/counter-flutter/main.py b/python/apps/counter-flutter/main.py index 7229bc64..2d15d95f 100644 --- a/python/apps/counter-flutter/main.py +++ b/python/apps/counter-flutter/main.py @@ -14,7 +14,7 @@ def add_click(e): counter.update() page.floating_action_button = ft.FloatingActionButton( - icon=ft.icons.ADD, on_click=add_click + icon=ft.Icons.ADD, on_click=add_click ) page.add( ft.SafeArea( diff --git a/python/apps/counter/counter-accessible.py b/python/apps/counter/counter-accessible.py index 643ceaf7..a84c417b 100644 --- a/python/apps/counter/counter-accessible.py +++ b/python/apps/counter/counter-accessible.py @@ -31,14 +31,14 @@ def button_click(e): ft.Row( [ ft.IconButton( - ft.icons.REMOVE, + ft.Icons.REMOVE, tooltip="Decrement", on_click=button_click, data="-", ), sem, ft.IconButton( - ft.icons.ADD, tooltip="Increment", on_click=button_click, data="+" + ft.Icons.ADD, tooltip="Increment", on_click=button_click, data="+" ), ], alignment=ft.MainAxisAlignment.CENTER, diff --git a/python/apps/counter/counter-async.py b/python/apps/counter/counter-async.py index a081d381..74ca99ec 100644 --- a/python/apps/counter/counter-async.py +++ b/python/apps/counter/counter-async.py @@ -18,9 +18,9 @@ async def plus_click(e): await page.add_async( ft.Row( [ - ft.IconButton(ft.icons.REMOVE, on_click=minus_click), + ft.IconButton(ft.Icons.REMOVE, on_click=minus_click), txt_number, - ft.IconButton(ft.icons.ADD, on_click=plus_click), + ft.IconButton(ft.Icons.ADD, on_click=plus_click), ], alignment=ft.MainAxisAlignment.CENTER, ) diff --git a/python/apps/counter/counter.py b/python/apps/counter/counter.py index aa5f5a32..41d7c3bf 100644 --- a/python/apps/counter/counter.py +++ b/python/apps/counter/counter.py @@ -18,9 +18,9 @@ def plus_click(e): page.add( ft.Row( [ - ft.IconButton(ft.icons.REMOVE, on_click=minus_click), + ft.IconButton(ft.Icons.REMOVE, on_click=minus_click), txt_number, - ft.IconButton(ft.icons.ADD, on_click=plus_click), + ft.IconButton(ft.Icons.ADD, on_click=plus_click), ], alignment=ft.MainAxisAlignment.CENTER, ) diff --git a/python/apps/studio-gallery/audio_player.py b/python/apps/studio-gallery/audio_player.py index d3d91bbb..23ea76f4 100644 --- a/python/apps/studio-gallery/audio_player.py +++ b/python/apps/studio-gallery/audio_player.py @@ -33,7 +33,7 @@ def __init__(self, audio, on_change_volume): y=0, height=4, border_radius=3, - paint=ft.Paint(color=ft.colors.GREY_500), + paint=ft.Paint(color=ft.Colors.GREY_500), width=100, ), cv.Rect( @@ -41,14 +41,14 @@ def __init__(self, audio, on_change_volume): y=0, height=4, border_radius=3, - paint=ft.Paint(color=ft.colors.GREY_900), + paint=ft.Paint(color=ft.Colors.GREY_900), width=100, ), cv.Circle( x=100, y=2, radius=6, - paint=ft.Paint(color=ft.colors.GREY_900), + paint=ft.Paint(color=ft.Colors.GREY_900), ), ] ), @@ -100,7 +100,7 @@ def __init__(self, audio, on_change_position): y=0, height=5, border_radius=3, - paint=ft.Paint(color=ft.colors.GREY_500), + paint=ft.Paint(color=ft.Colors.GREY_500), width=100, ), cv.Rect( @@ -108,7 +108,7 @@ def __init__(self, audio, on_change_position): y=0, height=5, border_radius=3, - paint=ft.Paint(color=ft.colors.GREY_900), + paint=ft.Paint(color=ft.Colors.GREY_900), width=0, ), ], @@ -160,12 +160,12 @@ def __init__(self, url): audio=self.audio1, on_change_position=self.seek_position ) self.play_button = ft.IconButton( - icon=ft.icons.PLAY_ARROW, + icon=ft.Icons.PLAY_ARROW, visible=False, on_click=self.play, ) self.pause_button = ft.IconButton( - icon=ft.icons.PAUSE, + icon=ft.Icons.PAUSE, visible=False, on_click=self.pause, ) @@ -175,7 +175,7 @@ def __init__(self, url): audio=self.audio1, on_change_volume=self.check_mute ) self.volume_icon = ft.IconButton( - icon=ft.icons.VOLUME_UP, + icon=ft.Icons.VOLUME_UP, visible=False, on_click=self.volume_icon_clicked, ) @@ -256,27 +256,27 @@ def change_position(self, e): e.control.page.update() def volume_icon_clicked(self, e): - if e.control.icon == ft.icons.VOLUME_UP: - e.control.icon = ft.icons.VOLUME_OFF + if e.control.icon == ft.Icons.VOLUME_UP: + e.control.icon = ft.Icons.VOLUME_OFF self.volume_slider.mute() else: - e.control.icon = ft.icons.VOLUME_UP + e.control.icon = ft.Icons.VOLUME_UP self.volume_slider.unmute() e.control.page.update() def check_mute(self): if ( int(self.audio1.volume * 100) == 0 - and self.volume_icon.icon == ft.icons.VOLUME_UP + and self.volume_icon.icon == ft.Icons.VOLUME_UP ): - self.volume_icon.icon = ft.icons.VOLUME_OFF + self.volume_icon.icon = ft.Icons.VOLUME_OFF self.volume_slider.mute() self.volume_icon.update() elif ( int(self.audio1.volume * 100) != 0 - and self.volume_icon.icon == ft.icons.VOLUME_OFF + and self.volume_icon.icon == ft.Icons.VOLUME_OFF ): - self.volume_icon.icon = ft.icons.VOLUME_UP + self.volume_icon.icon = ft.Icons.VOLUME_UP self.volume_slider.unmute() self.volume_icon.update() diff --git a/python/apps/studio-gallery/buttons.py b/python/apps/studio-gallery/buttons.py index a18daf75..41155c28 100644 --- a/python/apps/studio-gallery/buttons.py +++ b/python/apps/studio-gallery/buttons.py @@ -12,7 +12,7 @@ def example(page): [ ft.Text("Common buttons"), ft.IconButton( - ft.icons.INFO_OUTLINED, + ft.Icons.INFO_OUTLINED, tooltip="There are five types of common buttons: elevated, filled, filled tonal, outlined, and text", ), ], @@ -52,7 +52,7 @@ def example(page): [ ft.Text("Icon buttons"), ft.IconButton( - ft.icons.INFO_OUTLINED, + ft.Icons.INFO_OUTLINED, tooltip="Icon buttons help people take supplementary actions with a single tap", ), ], @@ -60,9 +60,9 @@ def example(page): ), ft.Row( controls=[ - ft.IconButton(icon=ft.icons.BOOKMARK), + ft.IconButton(icon=ft.Icons.BOOKMARK), ft.IconButton( - icon=ft.icons.BOOKMARK, + icon=ft.Icons.BOOKMARK, disabled=True, ), ], @@ -72,7 +72,7 @@ def example(page): [ ft.Text("Floating action buttons"), ft.IconButton( - ft.icons.INFO_OUTLINED, + ft.Icons.INFO_OUTLINED, tooltip="The FAB represents the most important action on a screen. It puts key actions within reach", ), ], @@ -80,12 +80,12 @@ def example(page): ), ft.Row( controls=[ - ft.FloatingActionButton(icon=ft.icons.ADD, tooltip="Standard"), + ft.FloatingActionButton(icon=ft.Icons.ADD, tooltip="Standard"), ft.FloatingActionButton( - icon=ft.icons.ADD, text="Extended", tooltip="Extended" + icon=ft.Icons.ADD, text="Extended", tooltip="Extended" ), ft.FloatingActionButton( - icon=ft.icons.ADD, mini=True, tooltip="Mini" + icon=ft.Icons.ADD, mini=True, tooltip="Mini" ), ], alignment=ft.MainAxisAlignment.CENTER, diff --git a/python/apps/studio-gallery/charts.py b/python/apps/studio-gallery/charts.py index b80e0ad7..4a5e47fd 100644 --- a/python/apps/studio-gallery/charts.py +++ b/python/apps/studio-gallery/charts.py @@ -19,7 +19,7 @@ class State: ft.LineChartDataPoint(13, 1.8), ], stroke_width=8, - color=ft.colors.LIGHT_GREEN, + color=ft.Colors.LIGHT_GREEN, curved=True, stroke_cap_round=True, ), @@ -32,8 +32,8 @@ class State: ft.LineChartDataPoint(12, 2.6), ft.LineChartDataPoint(13, 3.9), ], - color=ft.colors.PINK, - below_line_bgcolor=ft.colors.with_opacity(0, ft.colors.PINK), + color=ft.Colors.PINK, + below_line_bgcolor=ft.Colors.with_opacity(0, ft.Colors.PINK), stroke_width=8, curved=True, stroke_cap_round=True, @@ -46,7 +46,7 @@ class State: ft.LineChartDataPoint(10, 1.3), ft.LineChartDataPoint(13, 2.5), ], - color=ft.colors.CYAN, + color=ft.Colors.CYAN, stroke_width=8, curved=True, stroke_cap_round=True, @@ -65,7 +65,7 @@ class State: ft.LineChartDataPoint(13, 1.8), ], stroke_width=4, - color=ft.colors.with_opacity(0.5, ft.colors.LIGHT_GREEN), + color=ft.Colors.with_opacity(0.5, ft.Colors.LIGHT_GREEN), stroke_cap_round=True, ), ft.LineChartData( @@ -77,8 +77,8 @@ class State: ft.LineChartDataPoint(12, 2.6), ft.LineChartDataPoint(13, 3.9), ], - color=ft.colors.with_opacity(0.5, ft.colors.PINK), - below_line_bgcolor=ft.colors.with_opacity(0.2, ft.colors.PINK), + color=ft.Colors.with_opacity(0.5, ft.Colors.PINK), + below_line_bgcolor=ft.Colors.with_opacity(0.2, ft.Colors.PINK), stroke_width=4, curved=True, stroke_cap_round=True, @@ -91,7 +91,7 @@ class State: ft.LineChartDataPoint(10, 3.3), ft.LineChartDataPoint(13, 4.5), ], - color=ft.colors.with_opacity(0.5, ft.colors.CYAN), + color=ft.Colors.with_opacity(0.5, ft.Colors.CYAN), stroke_width=4, stroke_cap_round=True, ), @@ -100,7 +100,7 @@ class State: chart = ft.LineChart( data_series=data_1, border=ft.Border( - bottom=ft.BorderSide(4, ft.colors.with_opacity(0.5, ft.colors.ON_SURFACE)) + bottom=ft.BorderSide(4, ft.Colors.with_opacity(0.5, ft.Colors.ON_SURFACE)) ), left_axis=ft.ChartAxis( labels=[ @@ -140,7 +140,7 @@ class State: "SEP", size=16, weight=ft.FontWeight.BOLD, - color=ft.colors.with_opacity(0.5, ft.colors.ON_SURFACE), + color=ft.Colors.with_opacity(0.5, ft.Colors.ON_SURFACE), ), margin=ft.margin.only(top=10), ), @@ -152,7 +152,7 @@ class State: "OCT", size=16, weight=ft.FontWeight.BOLD, - color=ft.colors.with_opacity(0.5, ft.colors.ON_SURFACE), + color=ft.Colors.with_opacity(0.5, ft.Colors.ON_SURFACE), ), margin=ft.margin.only(top=10), ), @@ -164,7 +164,7 @@ class State: "DEC", size=16, weight=ft.FontWeight.BOLD, - color=ft.colors.with_opacity(0.5, ft.colors.ON_SURFACE), + color=ft.Colors.with_opacity(0.5, ft.Colors.ON_SURFACE), ), margin=ft.margin.only(top=10), ), @@ -172,7 +172,7 @@ class State: ], labels_size=32, ), - tooltip_bgcolor=ft.colors.with_opacity(0.8, ft.colors.BLUE_GREY), + tooltip_bgcolor=ft.Colors.with_opacity(0.8, ft.Colors.BLUE_GREY), min_y=0, max_y=4, min_x=0, @@ -197,7 +197,7 @@ def toggle_data(e): chart.update() return ft.Column( - controls=[ft.IconButton(ft.icons.REFRESH, on_click=toggle_data), chart], + controls=[ft.IconButton(ft.Icons.REFRESH, on_click=toggle_data), chart], ) @@ -211,7 +211,7 @@ def bar_chart(): from_y=0, to_y=40, width=40, - color=ft.colors.AMBER, + color=ft.Colors.AMBER, tooltip="Apple", border_radius=0, ), @@ -224,7 +224,7 @@ def bar_chart(): from_y=0, to_y=100, width=40, - color=ft.colors.BLUE, + color=ft.Colors.BLUE, tooltip="Blueberry", border_radius=0, ), @@ -237,7 +237,7 @@ def bar_chart(): from_y=0, to_y=30, width=40, - color=ft.colors.RED, + color=ft.Colors.RED, tooltip="Cherry", border_radius=0, ), @@ -250,14 +250,14 @@ def bar_chart(): from_y=0, to_y=60, width=40, - color=ft.colors.ORANGE, + color=ft.Colors.ORANGE, tooltip="Orange", border_radius=0, ), ], ), ], - border=ft.border.all(1, ft.colors.GREY_400), + border=ft.border.all(1, ft.Colors.GREY_400), left_axis=ft.ChartAxis( labels_size=40, title=ft.Text("Fruit supply"), title_size=40 ), @@ -279,9 +279,9 @@ def bar_chart(): labels_size=40, ), horizontal_grid_lines=ft.ChartGridLines( - color=ft.colors.GREY_300, width=1, dash_pattern=[3, 3] + color=ft.Colors.GREY_300, width=1, dash_pattern=[3, 3] ), - tooltip_bgcolor=ft.colors.with_opacity(0.5, ft.colors.GREY_300), + tooltip_bgcolor=ft.Colors.with_opacity(0.5, ft.Colors.GREY_300), max_y=110, interactive=True, # expand=True, @@ -300,13 +300,13 @@ def pie_chart(): normal_radius = 100 hover_radius = 110 normal_title_style = ft.TextStyle( - size=12, color=ft.colors.WHITE, weight=ft.FontWeight.BOLD + size=12, color=ft.Colors.WHITE, weight=ft.FontWeight.BOLD ) hover_title_style = ft.TextStyle( size=16, - color=ft.colors.WHITE, + color=ft.Colors.WHITE, weight=ft.FontWeight.BOLD, - shadow=ft.BoxShadow(blur_radius=2, color=ft.colors.BLACK54), + shadow=ft.BoxShadow(blur_radius=2, color=ft.Colors.BLACK54), ) normal_badge_size = 40 hover_badge_size = 50 @@ -316,9 +316,9 @@ def badge(icon, size): ft.Icon(icon), width=size, height=size, - border=ft.border.all(1, ft.colors.BROWN), + border=ft.border.all(1, ft.Colors.BROWN), border_radius=size / 2, - bgcolor=ft.colors.WHITE, + bgcolor=ft.Colors.WHITE, ) def on_chart_event(e: ft.PieChartEvent): @@ -337,9 +337,9 @@ def on_chart_event(e: ft.PieChartEvent): 40, title="40%", title_style=normal_title_style, - color=ft.colors.BLUE, + color=ft.Colors.BLUE, radius=normal_radius, - badge=badge(ft.icons.AC_UNIT, normal_badge_size), + badge=badge(ft.Icons.AC_UNIT, normal_badge_size), badge_position=0.98, ), ft.PieChartSection( @@ -348,7 +348,7 @@ def on_chart_event(e: ft.PieChartEvent): title_style=normal_title_style, color=ft.colors.YELLOW, radius=normal_radius, - badge=badge(ft.icons.ACCESS_ALARM, normal_badge_size), + badge=badge(ft.Icons.ACCESS_ALARM, normal_badge_size), badge_position=0.98, ), ft.PieChartSection( @@ -357,7 +357,7 @@ def on_chart_event(e: ft.PieChartEvent): title_style=normal_title_style, color=ft.colors.PURPLE, radius=normal_radius, - badge=badge(ft.icons.APPLE, normal_badge_size), + badge=badge(ft.Icons.APPLE, normal_badge_size), badge_position=0.98, ), ft.PieChartSection( @@ -366,7 +366,7 @@ def on_chart_event(e: ft.PieChartEvent): title_style=normal_title_style, color=ft.colors.GREEN, radius=normal_radius, - badge=badge(ft.icons.PEDAL_BIKE, normal_badge_size), + badge=badge(ft.Icons.PEDAL_BIKE, normal_badge_size), badge_position=0.98, ), ], diff --git a/python/apps/studio-gallery/counter.py b/python/apps/studio-gallery/counter.py index c6e0ba23..1e38794a 100644 --- a/python/apps/studio-gallery/counter.py +++ b/python/apps/studio-gallery/counter.py @@ -18,9 +18,9 @@ def plus_click(e): controls=[ ft.Row( [ - ft.IconButton(ft.icons.REMOVE, on_click=minus_click), + ft.IconButton(ft.Icons.REMOVE, on_click=minus_click), txt_number, - ft.IconButton(ft.icons.ADD, on_click=plus_click), + ft.IconButton(ft.Icons.ADD, on_click=plus_click), ], alignment=ft.MainAxisAlignment.CENTER, ) diff --git a/python/apps/studio-gallery/drawing_tool.py b/python/apps/studio-gallery/drawing_tool.py index 9cac364e..89095b48 100644 --- a/python/apps/studio-gallery/drawing_tool.py +++ b/python/apps/studio-gallery/drawing_tool.py @@ -28,7 +28,7 @@ class State: def color_changed(e): state.color = e.control.bgcolor for color_button in color_buttons: - color_button.border = ft.border.all(1, ft.colors.BLACK12) + color_button.border = ft.border.all(1, ft.Colors.BLACK12) color_button.update() e.control.border = ft.border.all(3) e.control.update() @@ -40,7 +40,7 @@ def color_changed(e): height=30, border_radius=30, bgcolor=color, - border=ft.border.all(1, ft.colors.BLACK12), + border=ft.border.all(1, ft.Colors.BLACK12), on_click=color_changed, ) ) @@ -70,7 +70,7 @@ def pan_update(e: ft.DragUpdateEvent): cp = cv.Canvas( [ - cv.Fill(ft.Paint(color=ft.colors.WHITE)), + cv.Fill(ft.Paint(color=ft.Colors.WHITE)), ], content=ft.Container( ft.GestureDetector( @@ -79,7 +79,7 @@ def pan_update(e: ft.DragUpdateEvent): drag_interval=10, ), border_radius=5, - border=ft.border.all(2, ft.colors.BLACK38), + border=ft.border.all(2, ft.Colors.BLACK38), ), expand=False, ) diff --git a/python/apps/studio-gallery/main.py b/python/apps/studio-gallery/main.py index 489a32a3..209bd39a 100644 --- a/python/apps/studio-gallery/main.py +++ b/python/apps/studio-gallery/main.py @@ -14,7 +14,7 @@ class AppTile(ft.ListTile): def __init__(self, name, view, icon_name, file_name): super().__init__() self.view = view - self.bgcolor = ft.colors.SURFACE_VARIANT + self.bgcolor = ft.Colors.SURFACE_VARIANT self.title = ft.Text(name) self.leading = ft.Icon(icon_name) self.on_click = self.app_button_clicked @@ -52,55 +52,55 @@ def main(page: ft.Page): name="Counter", file_name="counter.py", view=counter.example(page), - icon_name=ft.icons.ADD, + icon_name=ft.Icons.ADD, ), AppTile( name="To-Do", file_name="to_do.py", view=to_do.example(page), - icon_name=ft.icons.CHECK_BOX_OUTLINED, + icon_name=ft.Icons.CHECK_BOX_OUTLINED, ), AppTile( name="Calculator", file_name="calculator.py", view=calculator.example(page), - icon_name=ft.icons.CALCULATE_OUTLINED, + icon_name=ft.Icons.CALCULATE_OUTLINED, ), AppTile( name="Drawing Tool", file_name="drawing_tool.py", view=drawing_tool.example(page), - icon_name=ft.icons.DRAW_OUTLINED, + icon_name=ft.Icons.DRAW_OUTLINED, ), AppTile( name="Buttons", file_name="buttons.py", view=buttons.example(page), - icon_name=ft.icons.SMART_BUTTON_OUTLINED, + icon_name=ft.Icons.SMART_BUTTON_OUTLINED, ), AppTile( name="Entry Form", file_name="entry_form.py", view=entry_form.example(page), - icon_name=ft.icons.LOGIN, + icon_name=ft.Icons.LOGIN, ), AppTile( name="Charts", file_name="charts.py", view=charts.example(page), - icon_name=ft.icons.INSERT_CHART_OUTLINED, + icon_name=ft.Icons.INSERT_CHART_OUTLINED, ), AppTile( name="Flet Animation", file_name="flet_animation.py", view=flet_animation.example(page), - icon_name=ft.icons.ANIMATION, + icon_name=ft.Icons.ANIMATION, ), AppTile( name="Audio Player", file_name="audio_player.py", view=audio_player.example(page), - icon_name=ft.icons.AUDIOTRACK, + icon_name=ft.Icons.AUDIOTRACK, ), ] ) diff --git a/python/apps/studio-gallery/to_do.py b/python/apps/studio-gallery/to_do.py index bf56e602..9fe0e835 100644 --- a/python/apps/studio-gallery/to_do.py +++ b/python/apps/studio-gallery/to_do.py @@ -25,12 +25,12 @@ def build(self): spacing=0, controls=[ ft.IconButton( - icon=ft.icons.CREATE_OUTLINED, + icon=ft.Icons.CREATE_OUTLINED, tooltip="Edit To-Do", on_click=self.edit_clicked, ), ft.IconButton( - ft.icons.DELETE_OUTLINE, + ft.Icons.DELETE_OUTLINE, tooltip="Delete To-Do", on_click=self.delete_clicked, ), @@ -46,8 +46,8 @@ def build(self): controls=[ self.edit_name, ft.IconButton( - icon=ft.icons.DONE_OUTLINE_OUTLINED, - icon_color=ft.colors.GREEN, + icon=ft.Icons.DONE_OUTLINE_OUTLINED, + icon_color=ft.Colors.GREEN, tooltip="Update To-Do", on_click=self.save_clicked, ), @@ -105,7 +105,7 @@ def build(self): controls=[ self.new_task, ft.FloatingActionButton( - icon=ft.icons.ADD, on_click=self.add_clicked + icon=ft.Icons.ADD, on_click=self.add_clicked ), ], ), diff --git a/python/apps/todo-async/todo.py b/python/apps/todo-async/todo.py index 4998ff92..12ce4820 100644 --- a/python/apps/todo-async/todo.py +++ b/python/apps/todo-async/todo.py @@ -24,12 +24,12 @@ def build(self): spacing=0, controls=[ ft.IconButton( - icon=ft.icons.CREATE_OUTLINED, + icon=ft.Icons.CREATE_OUTLINED, tooltip="Edit To-Do", on_click=self.edit_clicked, ), ft.IconButton( - ft.icons.DELETE_OUTLINE, + ft.Icons.DELETE_OUTLINE, tooltip="Delete To-Do", on_click=self.delete_clicked, ), @@ -45,8 +45,8 @@ def build(self): controls=[ self.edit_name, ft.IconButton( - icon=ft.icons.DONE_OUTLINE_OUTLINED, - icon_color=ft.colors.GREEN, + icon=ft.Icons.DONE_OUTLINE_OUTLINED, + icon_color=ft.Colors.GREEN, tooltip="Update To-Do", on_click=self.save_clicked, ), @@ -100,7 +100,7 @@ def build(self): controls=[ self.new_task, ft.FloatingActionButton( - icon=ft.icons.ADD, on_click=self.add_clicked + icon=ft.Icons.ADD, on_click=self.add_clicked ), ], ), diff --git a/python/apps/trolli/src/app_layout.py b/python/apps/trolli/src/app_layout.py index efb3d79b..5c41b65b 100644 --- a/python/apps/trolli/src/app_layout.py +++ b/python/apps/trolli/src/app_layout.py @@ -30,7 +30,7 @@ def __init__(self, app, page: ft.Page, store: DataStore, *args, **kwargs): theme_style=ft.TextThemeStyle.HEADLINE_MEDIUM, ), expand=True, - padding=ft.padding.only(top=15), + padding=ft.Padding.only(top=15), ), ft.Container( ft.TextButton( @@ -49,7 +49,7 @@ def __init__(self, app, page: ft.Page, store: DataStore, *args, **kwargs): }, ), ), - padding=ft.padding.only(right=50, top=15), + padding=ft.Padding.only(right=50, top=15), ), ] ), @@ -58,7 +58,7 @@ def __init__(self, app, page: ft.Page, store: DataStore, *args, **kwargs): ft.TextField( hint_text="Search all boards", autofocus=False, - content_padding=ft.padding.only(left=10), + content_padding=ft.Padding.only(left=10), width=200, height=40, text_size=12, @@ -148,7 +148,7 @@ def hydrate_all_boards_view(self): ), ] ), - padding=ft.padding.only(right=-10), + padding=ft.Padding.only(right=-10), border_radius=ft.border_radius.all(3), ), ], @@ -157,7 +157,7 @@ def hydrate_all_boards_view(self): border=ft.border.all(1, ft.Colors.BLACK38), border_radius=ft.border_radius.all(5), bgcolor=ft.Colors.WHITE60, - padding=ft.padding.all(10), + padding=ft.Padding.all(10), width=250, data=b, ) diff --git a/python/apps/trolli/src/board.py b/python/apps/trolli/src/board.py index 65b14f9d..179ddb4d 100644 --- a/python/apps/trolli/src/board.py +++ b/python/apps/trolli/src/board.py @@ -32,7 +32,7 @@ def __init__(self, app, store: DataStore, name: str, page: ft.Page): content=self.board_lists, data=self, margin=ft.margin.all(0), - padding=ft.padding.only(top=10, right=0), + padding=ft.Padding.only(top=10, right=0), height=self.app.page.height, ) @@ -110,7 +110,7 @@ def textfield_change(e): content=ft.Column( [ ft.Container( - content=dialog_text, padding=ft.padding.symmetric(horizontal=5) + content=dialog_text, padding=ft.Padding.symmetric(horizontal=5) ), color_options, ft.Row( @@ -145,7 +145,7 @@ def color_option_creator(self, color: str): border_radius=ft.border_radius.all(50), height=10, width=10, - padding=ft.padding.all(5), + padding=ft.Padding.all(5), alignment=ft.alignment.center, data=color, ) diff --git a/python/apps/trolli/src/board_list.py b/python/apps/trolli/src/board_list.py index 7b454c4c..cbd8cf39 100644 --- a/python/apps/trolli/src/board_list.py +++ b/python/apps/trolli/src/board_list.py @@ -48,7 +48,7 @@ def __init__( value=self.title, width=150, height=40, - content_padding=ft.padding.only(left=10, bottom=10), + content_padding=ft.Padding.only(left=10, bottom=10), ), ft.TextButton(text="Save", on_click=self.save_title), ] @@ -96,7 +96,7 @@ def __init__( ), ], ), - padding=ft.padding.only(right=-10), + padding=ft.Padding.only(right=-10), ), ], alignment=ft.MainAxisAlignment.SPACE_BETWEEN, @@ -128,7 +128,7 @@ def __init__( border=ft.border.all(2, ft.Colors.BLACK12), border_radius=ft.border_radius.all(5), bgcolor=self.color if (self.color != "") else ft.Colors.BACKGROUND, - padding=ft.padding.only(bottom=10, right=10, left=10, top=5), + padding=ft.Padding.only(bottom=10, right=10, left=10, top=5), ) self.view = ft.DragTarget( diff --git a/python/apps/trolli/src/main.py b/python/apps/trolli/src/main.py index fe8321f7..4f540622 100644 --- a/python/apps/trolli/src/main.py +++ b/python/apps/trolli/src/main.py @@ -4,7 +4,6 @@ from user import User from data_store import DataStore from memory_store import InMemoryStore -from user import User class TrelloApp(AppLayout): @@ -24,7 +23,7 @@ def __init__(self, page: ft.Page, store: DataStore): leading=ft.Icon(ft.Icons.GRID_GOLDENRATIO_ROUNDED), leading_width=100, title=ft.Text( - f"Trolli", + "Trolli", font_family="Pacifico", size=32, text_align=ft.TextAlign.START, @@ -56,7 +55,7 @@ def initialize(self): ft.View( "/", [self.appbar, self], - padding=ft.padding.all(0), + padding=ft.Padding.all(0), bgcolor=ft.Colors.BLUE_GREY_200, ) ) diff --git a/python/apps/trolli/src/sidebar.py b/python/apps/trolli/src/sidebar.py index f8edacf1..89c8c61a 100644 --- a/python/apps/trolli/src/sidebar.py +++ b/python/apps/trolli/src/sidebar.py @@ -73,7 +73,7 @@ def __init__(self, app_layout, store: DataStore): ], tight=True, ), - padding=ft.padding.all(15), + padding=ft.Padding.all(15), margin=ft.margin.all(0), width=250, bgcolor=ft.Colors.BLUE_GREY, diff --git a/python/community/datepicker/example.py b/python/community/datepicker/example.py index 11b74c1a..046b3bb4 100644 --- a/python/community/datepicker/example.py +++ b/python/community/datepicker/example.py @@ -3,13 +3,19 @@ from datepicker.selection_type import SelectionType from datetime import datetime + class Example(ft.UserControl): def __init__(self): super().__init__() self.datepicker = None - self.holidays = [datetime(2023, 1, 1), datetime(2023, 8, 15), datetime(2023, 12, 25), datetime(2023, 12, 26)] + self.holidays = [ + datetime(2023, 1, 1), + datetime(2023, 8, 15), + datetime(2023, 12, 25), + datetime(2023, 12, 26), + ] self.locales = ["en_US", "fr_FR", "it_IT", "es_ES"] self.selected_locale = None @@ -26,22 +32,29 @@ def __init__(self): ], actions_alignment=ft.MainAxisAlignment.END, actions_padding=5, - content_padding=0 + content_padding=0, ) - self.tf = ft.TextField(label="Select Date", dense=True, hint_text="yyyy-mm-ddThh:mm:ss", width=260, height=40) + self.tf = ft.TextField( + label="Select Date", + dense=True, + hint_text="yyyy-mm-ddThh:mm:ss", + width=260, + height=40, + ) self.cal_ico = ft.TextButton( - icon=ft.icons.CALENDAR_MONTH, - on_click=self.open_dlg_modal, + icon=ft.Icons.CALENDAR_MONTH, + on_click=self.open_dlg_modal, height=40, width=40, right=0, style=ft.ButtonStyle( - padding=ft.Padding(4,0,0,0), + padding=ft.Padding(4, 0, 0, 0), shape={ - ft.MaterialState.DEFAULT: ft.RoundedRectangleBorder(radius=1), - }, - )) + ft.MaterialState.DEFAULT: ft.RoundedRectangleBorder(radius=1), + }, + ), + ) self.st = ft.Stack( [ @@ -50,18 +63,43 @@ def __init__(self): ] ) - self.cg = ft.RadioGroup(content=ft.Row( - [ - ft.Text("Selction Type"), - ft.Radio(value=SelectionType.SINGLE.value, label=SelectionType.SINGLE.name), - ft.Radio(value=SelectionType.RANGE.value, label=SelectionType.RANGE.name), - ft.Radio(value=SelectionType.MULTIPLE.value, label=SelectionType.MULTIPLE.name) - ]), value=SelectionType.SINGLE.value + self.cg = ft.RadioGroup( + content=ft.Row( + [ + ft.Text("Selction Type"), + ft.Radio( + value=SelectionType.SINGLE.value, + label=SelectionType.SINGLE.name, + ), + ft.Radio( + value=SelectionType.RANGE.value, label=SelectionType.RANGE.name + ), + ft.Radio( + value=SelectionType.MULTIPLE.value, + label=SelectionType.MULTIPLE.name, + ), + ] + ), + value=SelectionType.SINGLE.value, ) self.c1 = ft.Switch(label="With hours and minutes", value=False) - self.tf1 = ft.TextField(label="Disable days until date", dense=True, hint_text="yyyy-mm-dd hh:mm:ss", width=260, height=40) - self.tf2 = ft.TextField(label="Disable days from date", dense=True, hint_text="yyyy-mm-dd hh:mm:ss", width=260, height=40) - self.c2 = ft.Switch(label="Hide previous and next month days from current", value=False) + self.tf1 = ft.TextField( + label="Disable days until date", + dense=True, + hint_text="yyyy-mm-dd hh:mm:ss", + width=260, + height=40, + ) + self.tf2 = ft.TextField( + label="Disable days from date", + dense=True, + hint_text="yyyy-mm-dd hh:mm:ss", + width=260, + height=40, + ) + self.c2 = ft.Switch( + label="Hide previous and next month days from current", value=False + ) self.c3 = ft.Switch(label="Shows three months", value=False) self.dd = ft.Dropdown( @@ -69,7 +107,7 @@ def __init__(self): width=200, options=self.locales_opts, dense=True, - on_change=self.set_locale + on_change=self.set_locale, ) self.from_to_text = ft.Text(visible=False) @@ -77,20 +115,24 @@ def __init__(self): def build(self): return ft.Column( [ - ft.Text("Datepicker options", size=24), - ft.Divider(), - self.cg, - self.c1, - self.c2, - self.c3, - ft.Row([self.tf1, self.tf2,]), - self.dd, - ft.Divider(), - self.st, - self.from_to_text + ft.Text("Datepicker options", size=24), + ft.Divider(), + self.cg, + self.c1, + self.c2, + self.c3, + ft.Row( + [ + self.tf1, + self.tf2, + ] + ), + self.dd, + ft.Divider(), + self.st, + self.from_to_text, ] ) - def callback(self, e): if int(self.cg.value) == SelectionType.SINGLE.value: @@ -101,12 +143,12 @@ def callback(self, e): elif int(self.cg.value) == SelectionType.RANGE.value and len(e) > 0: self.from_to_text.value = f"From: {e[0]} To: {e[1]}" self.from_to_text.visible = True - + def confirm_dlg(self, e): self.dlg_modal.open = False self.update() self.page.update() - + def cancel_dlg(self, e): self.dlg_modal.open = False self.page.update() @@ -122,8 +164,8 @@ def open_dlg_modal(self, e): holidays=self.holidays, show_three_months=self.c3.value, locale=self.selected_locale, - on_change=self.callback - ) + on_change=self.callback, + ) self.page.dialog = self.dlg_modal self.dlg_modal.content = self.datepicker self.dlg_modal.open = True @@ -134,6 +176,6 @@ def _to_datetime(self, date_str=None): return datetime.strptime(date_str, "%Y-%m-%d %H:%M:%S") else: return None - + def set_locale(self, e): - self.selected_locale = self.dd.value if self.dd.value else None \ No newline at end of file + self.selected_locale = self.dd.value if self.dd.value else None diff --git a/python/community/flet_animations/AppBar_bubbled.py b/python/community/flet_animations/AppBar_bubbled.py index 7b8e097e..20039469 100644 --- a/python/community/flet_animations/AppBar_bubbled.py +++ b/python/community/flet_animations/AppBar_bubbled.py @@ -1,66 +1,78 @@ import flet as ft - - + + def main(page: ft.Page): def resize_app_bar(i): - row_.spacing=page.width/3; - page.update(); + row_.spacing = page.width / 3 + page.update() + def change_pos(i): - - if(i==1): - page.floating_action_button_location = ft.FloatingActionButtonLocation.START_DOCKED; - fab.icon=ft.icons.MENU; - row_.controls=[nothing,second,third]; - elif(i==2): - page.floating_action_button_location = ft.FloatingActionButtonLocation.CENTER_DOCKED; - fab.icon=ft.icons.SEARCH; - row_.controls=[first,nothing,third]; + + if i == 1: + page.floating_action_button_location = ( + ft.FloatingActionButtonLocation.START_DOCKED + ) + fab.icon = ft.Icons.MENU + row_.controls = [nothing, second, third] + elif i == 2: + page.floating_action_button_location = ( + ft.FloatingActionButtonLocation.CENTER_DOCKED + ) + fab.icon = ft.Icons.SEARCH + row_.controls = [first, nothing, third] else: - page.floating_action_button_location = ft.FloatingActionButtonLocation.END_DOCKED; - fab.icon=ft.icons.FAVORITE; - row_.controls=[first,second,nothing]; - page.update(); + page.floating_action_button_location = ( + ft.FloatingActionButtonLocation.END_DOCKED + ) + fab.icon = ft.Icons.FAVORITE + row_.controls = [first, second, nothing] + page.update() + page.horizontal_alignment = page.vertical_alignment = "center" - fab=ft.FloatingActionButton(icon=ft.icons.SEARCH,shape=ft.RoundedRectangleBorder(radius=40),) - page.floating_action_button = fab; - page.floating_action_button_location = ft.FloatingActionButtonLocation.CENTER_DOCKED; - + fab = ft.FloatingActionButton( + icon=ft.Icons.SEARCH, + shape=ft.RoundedRectangleBorder(radius=40), + ) + page.floating_action_button = fab + page.floating_action_button_location = ft.FloatingActionButtonLocation.CENTER_DOCKED + page.appbar = ft.AppBar( title=ft.Text("Bottom AppBar Demo"), center_title=True, - bgcolor=ft.colors.GREEN_300, + bgcolor=ft.Colors.GREEN_300, automatically_imply_leading=False, ) - first=ft.IconButton( - icon=ft.icons.MENU, - icon_size=30, - tooltip="Menu", - on_click=lambda i:[change_pos(1)], - ) - second=ft.IconButton( - icon=ft.icons.SEARCH, - icon_size=30, - tooltip="Search", - on_click=lambda i:[change_pos(2)], - ) - third=ft.IconButton( - icon=ft.icons.FAVORITE, - icon_size=30, - tooltip="Favourties", - on_click=lambda i:[change_pos(3)], - ) - nothing=ft.Text(" "); - row_=ft.Row(spacing=((page.width/100)*129.1)/3,controls=[first,nothing,third]) + first = ft.IconButton( + icon=ft.Icons.MENU, + icon_size=30, + tooltip="Menu", + on_click=lambda i: [change_pos(1)], + ) + second = ft.IconButton( + icon=ft.Icons.SEARCH, + icon_size=30, + tooltip="Search", + on_click=lambda i: [change_pos(2)], + ) + third = ft.IconButton( + icon=ft.Icons.FAVORITE, + icon_size=30, + tooltip="Favourties", + on_click=lambda i: [change_pos(3)], + ) + nothing = ft.Text(" ") + row_ = ft.Row( + spacing=((page.width / 100) * 129.1) / 3, controls=[first, nothing, third] + ) page.bottom_appbar = ft.BottomAppBar( - bgcolor=ft.colors.BLUE, + bgcolor=ft.Colors.BLUE, shape=ft.NotchShape.CIRCULAR, notch_margin=5, - content=row_ + content=row_, ) - page.on_resize=resize_app_bar; - + page.on_resize = resize_app_bar + page.add(ft.Text("Body!")) - - + + ft.app(target=main) - diff --git a/python/community/flet_animations/Sliding_AppBar.py b/python/community/flet_animations/Sliding_AppBar.py index e2538f04..ed62ba5e 100644 --- a/python/community/flet_animations/Sliding_AppBar.py +++ b/python/community/flet_animations/Sliding_AppBar.py @@ -1,65 +1,123 @@ import flet as ft - - + + def main(page: ft.Page): - page.bgcolor="#5946A7"; + page.bgcolor = "#5946A7" + def change(i): - home.content.icon_color="#060806"; - search.content.icon_color="#060806"; - per.content.icon_color="#060806"; - fav.content.icon_color="#060806"; - home.width=50; - search.width=50; - per.width=50; - fav.width=50; - home.content.bgcolor="#FBFFFD"; - search.content.bgcolor="#FBFFFD"; - per.content.bgcolor="#FBFFFD"; - fav.content.bgcolor="#FBFFFD"; - home.content.text="‎ "; - search.content.text="‎ "; - per.content.text="‎ "; - fav.content.text="‎ "; - if(i=="home"): - home.width=117; - home.content.text="Home"; - page.bgcolor="#5946A7"; - home.content.icon_color="#5946A7"; - home.content.bgcolor="#DFD9F2"; - elif(i=="fav"): - fav.width=117; - fav.content.text="Liked"; - page.bgcolor="#B45386"; - fav.content.icon_color="#B45386"; - fav.content.bgcolor="#F8DAEB"; - elif(i=="search"): - search.width=117; - search.content.text="Search"; - page.bgcolor="#E1A01D"; - search.content.icon_color="#E1A01D"; - search.content.bgcolor="#FCEED2"; - elif(i=="per"): - per.width=117; - per.content.text="Profile"; - page.bgcolor="#1684A0"; - per.content.icon_color="#1684A0"; - per.content.bgcolor="#CEE8ED"; - page.update(); - home=ft.Container(animate=ft.animation.Animation(1000, "bounceOut"),width=117,height=100,content=ft.ElevatedButton(elevation=0,icon=ft.icons.HOME, icon_color="#5946A7", color="#5946A7", text="Home", bgcolor="#DFD9F2", on_click=lambda i:[change("home")])); - fav=ft.Container(animate=ft.animation.Animation(1000, "bounceOut"),width=50,height=100,content=ft.ElevatedButton(elevation=0,icon=ft.icons.FAVORITE, icon_color="#060806", color="#B45386", text="Liked", bgcolor="#FBFFFD", on_click=lambda i:[change("fav")])); - search=ft.Container(animate=ft.animation.Animation(1000, "bounceOut"),width=50,height=100,content=ft.ElevatedButton(elevation=0,icon=ft.icons.SEARCH, icon_color="#060806", color="#E1A01D", text="Search", bgcolor="#FBFFFD", on_click=lambda i:[change("search")])); - per=ft.Container(animate=ft.animation.Animation(1000, "bounceOut"),width=50, height=100,content=ft.ElevatedButton(elevation=0,icon=ft.icons.PERSON_ROUNDED, icon_color="#060806", color="#1684A0", text="Profile", bgcolor="#FBFFFD", on_click=lambda i:[change("per")])); + home.content.icon_color = "#060806" + search.content.icon_color = "#060806" + per.content.icon_color = "#060806" + fav.content.icon_color = "#060806" + home.width = 50 + search.width = 50 + per.width = 50 + fav.width = 50 + home.content.bgcolor = "#FBFFFD" + search.content.bgcolor = "#FBFFFD" + per.content.bgcolor = "#FBFFFD" + fav.content.bgcolor = "#FBFFFD" + home.content.text = "‎ " + search.content.text = "‎ " + per.content.text = "‎ " + fav.content.text = "‎ " + if i == "home": + home.width = 117 + home.content.text = "Home" + page.bgcolor = "#5946A7" + home.content.icon_color = "#5946A7" + home.content.bgcolor = "#DFD9F2" + elif i == "fav": + fav.width = 117 + fav.content.text = "Liked" + page.bgcolor = "#B45386" + fav.content.icon_color = "#B45386" + fav.content.bgcolor = "#F8DAEB" + elif i == "search": + search.width = 117 + search.content.text = "Search" + page.bgcolor = "#E1A01D" + search.content.icon_color = "#E1A01D" + search.content.bgcolor = "#FCEED2" + elif i == "per": + per.width = 117 + per.content.text = "Profile" + page.bgcolor = "#1684A0" + per.content.icon_color = "#1684A0" + per.content.bgcolor = "#CEE8ED" + page.update() + + home = ft.Container( + animate=ft.animation.Animation(1000, "bounceOut"), + width=117, + height=100, + content=ft.ElevatedButton( + elevation=0, + icon=ft.Icons.HOME, + icon_color="#5946A7", + color="#5946A7", + text="Home", + bgcolor="#DFD9F2", + on_click=lambda i: [change("home")], + ), + ) + fav = ft.Container( + animate=ft.animation.Animation(1000, "bounceOut"), + width=50, + height=100, + content=ft.ElevatedButton( + elevation=0, + icon=ft.Icons.FAVORITE, + icon_color="#060806", + color="#B45386", + text="Liked", + bgcolor="#FBFFFD", + on_click=lambda i: [change("fav")], + ), + ) + search = ft.Container( + animate=ft.animation.Animation(1000, "bounceOut"), + width=50, + height=100, + content=ft.ElevatedButton( + elevation=0, + icon=ft.Icons.SEARCH, + icon_color="#060806", + color="#E1A01D", + text="Search", + bgcolor="#FBFFFD", + on_click=lambda i: [change("search")], + ), + ) + per = ft.Container( + animate=ft.animation.Animation(1000, "bounceOut"), + width=50, + height=100, + content=ft.ElevatedButton( + elevation=0, + icon=ft.Icons.PERSON_ROUNDED, + icon_color="#060806", + color="#1684A0", + text="Profile", + bgcolor="#FBFFFD", + on_click=lambda i: [change("per")], + ), + ) page.bottom_appbar = ft.BottomAppBar( - bgcolor=ft.colors.WHITE, + bgcolor=ft.Colors.WHITE, shape=ft.NotchShape.CIRCULAR, content=ft.Row( - controls=[ft.Row(alignment=ft.MainAxisAlignment.CENTER,spacing=30,controls=[ - home,fav,search,per - ])] + controls=[ + ft.Row( + alignment=ft.MainAxisAlignment.CENTER, + spacing=30, + controls=[home, fav, search, per], + ) + ] ), ) - + page.add(ft.Text("")) - - + + ft.app(target=main) diff --git a/python/community/flet_animations/animted_login_page.py b/python/community/flet_animations/animted_login_page.py index 791b475f..94ddec75 100644 --- a/python/community/flet_animations/animted_login_page.py +++ b/python/community/flet_animations/animted_login_page.py @@ -1,82 +1,163 @@ import flet as ft -import time - + + def main(page: ft.Page): - global dic; - dic={}; - page.vertical_alignment=ft.MainAxisAlignment.END; - page.horizontal_alignment=ft.MainAxisAlignment.END; - page.padding=0; - global def_,animated_container; - def_=0; + global dic + dic = {} + page.vertical_alignment = ft.MainAxisAlignment.END + page.horizontal_alignment = ft.MainAxisAlignment.END + page.padding = 0 + global def_, animated_container + def_ = 0 + def change(i): - global def_,animated_container; - if(def_==0): - animated_container.content=side_bar_right; + global def_, animated_container + if def_ == 0: + animated_container.content = side_bar_right animated_container.update() - init=-1; - a=20;b=300;c=20;d=300; - step=0; - page.update(); - while(True): - init+=0.1; - login_register_page.alignment=ft.alignment.Alignment(init, 0); - a+=14; - b-=14; - c+=14; - d-=14; - login_register_page.content.content.border_radius=ft.border_radius.only(a,b,c,d); - if(init>=1): - break; - if(init>=0): + init = -1 + a = 20 + b = 300 + c = 20 + d = 300 + step = 0 + page.update() + while True: + init += 0.1 + login_register_page.alignment = ft.alignment.Alignment(init, 0) + a += 14 + b -= 14 + c += 14 + d -= 14 + login_register_page.content.content.border_radius = ( + ft.border_radius.only(a, b, c, d) + ) + if init >= 1: + break + if init >= 0: pass - page.update(); - def_=1; + page.update() + def_ = 1 else: - init=1; - - a=300;b=20;c=300;d=20; - side_bar_left.border_radius=ft.border_radius.only(300, 20, 300, 20); - page.update(); - animated_container.content=side_bar_left; + init = 1 + + a = 300 + b = 20 + c = 300 + d = 20 + side_bar_left.border_radius = ft.border_radius.only(300, 20, 300, 20) + page.update() + animated_container.content = side_bar_left animated_container.update() - while(True): - init-=0.1; - login_register_page.alignment=ft.alignment.Alignment(init, 0); - a-=14; - b+=14; - c-=14; - d+=14; - login_register_page.content.content.border_radius=ft.border_radius.only(a,b,c,d); - if(init<=-1): - break; - if(init<=0): + while True: + init -= 0.1 + login_register_page.alignment = ft.alignment.Alignment(init, 0) + a -= 14 + b += 14 + c -= 14 + d += 14 + login_register_page.content.content.border_radius = ( + ft.border_radius.only(a, b, c, d) + ) + if init <= -1: + break + if init <= 0: pass - page.update(); + page.update() + + def_ = 0 - def_=0; img = ft.Image( src="D:/download_d_temp/colorful-abstract-wave-background-colorful-paper-cut/paper_cut_background_2.jpg", - fit=ft.ImageFit.CONTAIN, + fit=ft.BoxFit.CONTAIN, ) - shadow_=ft.BoxShadow( + shadow_ = ft.BoxShadow( spread_radius=10, blur_radius=20, - color=ft.colors.BLACK, + color=ft.Colors.BLACK, offset=ft.Offset(0, 0), blur_style=ft.ShadowBlurStyle.OUTER, ) - text_login=ft.Row(alignment="center",controls=[ft.Text("Welcome Back.", size=45, weight=ft.FontWeight.W_700)]); - text_login_2=ft.Row(alignment="center",controls=[ft.Text("Login to your account.", size=20, weight=ft.FontWeight.W_400)]); - login_button=ft.Row(alignment="center",controls=[ft.ElevatedButton(height=40, width=100,text="Login",bgcolor="black", color="white", on_click=change)]); - text_register=ft.Row(alignment="center",controls=[ft.Text("Hi, welcome to", size=45, weight=ft.FontWeight.W_700)]); - text_register_2=ft.Row(alignment="center",controls=[ft.Text("our website.", size=45, weight=ft.FontWeight.W_700)]); - text_register_3=ft.Row(alignment="center",controls=[ft.Text("Register to use our website.", size=20, weight=ft.FontWeight.W_400)]); - register_button=ft.Row(alignment="center",controls=[ft.ElevatedButton(height=40, width=110,text="Register",bgcolor="black", color="white", on_click=change)]); - side_bar_right=ft.Container(animate=ft.animation.Animation(600, "easein"),expand=True, width=430, border_radius=ft.border_radius.only(20, 300,20, 300), bgcolor="white", content=ft.Column(spacing=20,alignment="center", controls=[ft.Column(spacing=0,controls=[text_register, text_register_2]),text_register_3, register_button])); - side_bar_left=ft.Container(animate=ft.animation.Animation(600, "easein"),expand=True, width=430, border_radius=ft.border_radius.only(20, 300, 20, 300), bgcolor="white", content=ft.Column(spacing=20,alignment="center", controls=[text_login, text_login_2, login_button])); - register_form=ft.Container(bgcolor="black", height=500, expand=True); - login_form=ft.Container(bgcolor="black", height=500, expand=True); + text_login = ft.Row( + alignment="center", + controls=[ft.Text("Welcome Back.", size=45, weight=ft.FontWeight.W_700)], + ) + text_login_2 = ft.Row( + alignment="center", + controls=[ + ft.Text("Login to your account.", size=20, weight=ft.FontWeight.W_400) + ], + ) + login_button = ft.Row( + alignment="center", + controls=[ + ft.ElevatedButton( + height=40, + width=100, + text="Login", + bgcolor="black", + color="white", + on_click=change, + ) + ], + ) + text_register = ft.Row( + alignment="center", + controls=[ft.Text("Hi, welcome to", size=45, weight=ft.FontWeight.W_700)], + ) + text_register_2 = ft.Row( + alignment="center", + controls=[ft.Text("our website.", size=45, weight=ft.FontWeight.W_700)], + ) + text_register_3 = ft.Row( + alignment="center", + controls=[ + ft.Text("Register to use our website.", size=20, weight=ft.FontWeight.W_400) + ], + ) + register_button = ft.Row( + alignment="center", + controls=[ + ft.ElevatedButton( + height=40, + width=110, + text="Register", + bgcolor="black", + color="white", + on_click=change, + ) + ], + ) + side_bar_right = ft.Container( + animate=ft.animation.Animation(600, "easein"), + expand=True, + width=430, + border_radius=ft.border_radius.only(20, 300, 20, 300), + bgcolor="white", + content=ft.Column( + spacing=20, + alignment="center", + controls=[ + ft.Column(spacing=0, controls=[text_register, text_register_2]), + text_register_3, + register_button, + ], + ), + ) + side_bar_left = ft.Container( + animate=ft.animation.Animation(600, "easein"), + expand=True, + width=430, + border_radius=ft.border_radius.only(20, 300, 20, 300), + bgcolor="white", + content=ft.Column( + spacing=20, + alignment="center", + controls=[text_login, text_login_2, login_button], + ), + ) + register_form = ft.Container(bgcolor="black", height=500, expand=True) + login_form = ft.Container(bgcolor="black", height=500, expand=True) animated_container = ft.AnimatedSwitcher( content=side_bar_left, transition="scale", @@ -85,9 +166,29 @@ def change(i): switch_in_curve="easein", switch_out_curve="easeout", ) - login_register_page=ft.Container(animate=ft.animation.Animation(600, "easein"),border=ft.border.all(0.2,"white"), alignment=ft.alignment.Alignment(-1,0),height=500, width=800, blur=30, border_radius=20, shadow=shadow_,content=animated_container); - page.overlay.append(ft.Row(alignment="center", controls=[ft.Column(alignment="center",controls=[ft.Stack([login_register_page])])])); - page.update(); - page.add(img); + login_register_page = ft.Container( + animate=ft.animation.Animation(600, "easein"), + border=ft.border.all(0.2, "white"), + alignment=ft.alignment.Alignment(-1, 0), + height=500, + width=800, + blur=30, + border_radius=20, + shadow=shadow_, + content=animated_container, + ) + page.overlay.append( + ft.Row( + alignment="center", + controls=[ + ft.Column( + alignment="center", controls=[ft.Stack([login_register_page])] + ) + ], + ) + ) + page.update() + page.add(img) + ft.app(target=main) diff --git a/python/community/flet_animations/bouncing_ball_loading.py b/python/community/flet_animations/bouncing_ball_loading.py index 200105e2..81ea28fd 100644 --- a/python/community/flet_animations/bouncing_ball_loading.py +++ b/python/community/flet_animations/bouncing_ball_loading.py @@ -1,63 +1,98 @@ import flet as ft import time - + + def main(page: ft.Page): - global dic; - dic={}; - page.bgcolor="black"; - page.vertical_alignment=ft.MainAxisAlignment.CENTER; - page.horizontal_alignment=ft.MainAxisAlignment.CENTER; - global def_; - def_=0; + global dic + dic = {} + page.bgcolor = "black" + page.vertical_alignment = ft.MainAxisAlignment.CENTER + page.horizontal_alignment = ft.MainAxisAlignment.CENTER + global def_ + def_ = 0 + def animate(init, i): - dic[f"container{i}"].alignment=ft.alignment.Alignment(0,init); + dic[f"container{i}"].alignment = ft.alignment.Alignment(0, init) + def animate_squeeze(i): - pass; + pass + def change(): - while(True): - global def_; - if(def_==0): - init=1; - while(True): - init-=0.1; - animate(init,0); - animate(init,1); - animate(init,2); - page.update(); - if(init<=-0.9): - break; - def_=1; + while True: + global def_ + if def_ == 0: + init = 1 + while True: + init -= 0.1 + animate(init, 0) + animate(init, 1) + animate(init, 2) + page.update() + if init <= -0.9: + break + def_ = 1 else: - init=-1; - while(True): - init+=0.1; - animate(init,0); - animate(init,1); - animate(init,2); - page.update(); - if(init>=0.9): - animate_squeeze(0); - animate_squeeze(1); - animate_squeeze(2); - break; - def_=0; - time.sleep(0.5); - dic['container0']=ft.Container(animate=ft.animation.Animation(300, "easeInOut"),height=140, width=30, bgcolor="black", alignment=ft.alignment.Alignment(0,1)); - ball=ft.Container(height=25,width=25, bgcolor="white", border_radius=40); - dic['container1']=ft.Container(animate=ft.animation.Animation(500, "easeInOut"),height=140, width=30, bgcolor="black", alignment=ft.alignment.Alignment(0,1)); - ball1=ft.Container(height=25,width=25, bgcolor="white", border_radius=40); - dic['container2']=ft.Container(animate=ft.animation.Animation(700, "easeInOut"),height=140, width=30, bgcolor="black", alignment=ft.alignment.Alignment(0,1)); - ball2=ft.Container(height=25,width=25, bgcolor="white", border_radius=40); - dic['container0'].content=ball; - dic['container1'].content=ball1; - dic['container2'].content=ball2; - text_=ft.Text( - "Loading...", - size=35, - color=ft.colors.WHITE, - weight=ft.FontWeight.BOLD, - ); - page.add(ft.Column(alignment="center",controls=[ft.Row(alignment="center",controls=[dic['container0'], dic['container1'], dic['container2']]), ft.Row(alignment="center",controls=[text_])])); - change(); - -ft.app(target=main) + init = -1 + while True: + init += 0.1 + animate(init, 0) + animate(init, 1) + animate(init, 2) + page.update() + if init >= 0.9: + animate_squeeze(0) + animate_squeeze(1) + animate_squeeze(2) + break + def_ = 0 + time.sleep(0.5) + + dic["container0"] = ft.Container( + animate=ft.animation.Animation(300, "easeInOut"), + height=140, + width=30, + bgcolor="black", + alignment=ft.alignment.Alignment(0, 1), + ) + ball = ft.Container(height=25, width=25, bgcolor="white", border_radius=40) + dic["container1"] = ft.Container( + animate=ft.animation.Animation(500, "easeInOut"), + height=140, + width=30, + bgcolor="black", + alignment=ft.alignment.Alignment(0, 1), + ) + ball1 = ft.Container(height=25, width=25, bgcolor="white", border_radius=40) + dic["container2"] = ft.Container( + animate=ft.animation.Animation(700, "easeInOut"), + height=140, + width=30, + bgcolor="black", + alignment=ft.alignment.Alignment(0, 1), + ) + ball2 = ft.Container(height=25, width=25, bgcolor="white", border_radius=40) + dic["container0"].content = ball + dic["container1"].content = ball1 + dic["container2"].content = ball2 + text_ = ft.Text( + "Loading...", + size=35, + color=ft.Colors.WHITE, + weight=ft.FontWeight.BOLD, + ) + page.add( + ft.Column( + alignment="center", + controls=[ + ft.Row( + alignment="center", + controls=[dic["container0"], dic["container1"], dic["container2"]], + ), + ft.Row(alignment="center", controls=[text_]), + ], + ) + ) + change() + + +ft.app(target=main) diff --git a/python/community/flet_animations/dark_light_switch.py b/python/community/flet_animations/dark_light_switch.py index 3d7a9bbc..05a25816 100644 --- a/python/community/flet_animations/dark_light_switch.py +++ b/python/community/flet_animations/dark_light_switch.py @@ -1,56 +1,91 @@ import flet as ft -import time - + + def main(page: ft.Page): - global dic; - dic={}; - page.bgcolor="white"; - page.padding=0; - angel_=0; - page.vertical_alignment=ft.MainAxisAlignment.CENTER; - page.horizontal_alignment=ft.MainAxisAlignment.CENTER; - global def_; - def_=0; + global dic + dic = {} + page.bgcolor = "white" + page.padding = 0 + angel_ = 0 + page.vertical_alignment = ft.MainAxisAlignment.CENTER + page.horizontal_alignment = ft.MainAxisAlignment.CENTER + global def_ + def_ = 0 + def change(i): - global def_; - if(def_==0): - init=-1; - page.bgcolor="#2C2B2C"; - while(True): - init+=0.1; - dark_ligt_switch.controls[0].alignment=ft.alignment.Alignment(init, 0); - dark_ligt_switch.controls[0].content.rotate=ft.Rotate(angle=init, alignment=ft.alignment.center); - if(init>=1): - break; - if(init>=0): - dark_ligt_switch.controls[0].content.content.name=ft.icons.DARK_MODE; - dark_ligt_switch.controls[0].content.content.color="white"; - dark_ligt_switch.controls[0].content.bgcolor="#2C2B2C"; - page.update(); - def_=1; + global def_ + if def_ == 0: + init = -1 + page.bgcolor = "#2C2B2C" + while True: + init += 0.1 + dark_ligt_switch.controls[0].alignment = ft.alignment.Alignment(init, 0) + dark_ligt_switch.controls[0].content.rotate = ft.Rotate( + angle=init, alignment=ft.alignment.center + ) + if init >= 1: + break + if init >= 0: + dark_ligt_switch.controls[0].content.content.name = ( + ft.Icons.DARK_MODE + ) + dark_ligt_switch.controls[0].content.content.color = "white" + dark_ligt_switch.controls[0].content.bgcolor = "#2C2B2C" + page.update() + def_ = 1 else: - init=1; - page.bgcolor="white"; - while(True): - init-=0.1; - dark_ligt_switch.controls[0].alignment=ft.alignment.Alignment(init, 0); - dark_ligt_switch.controls[0].content.rotate=ft.Rotate(angle=init, alignment=ft.alignment.center); - if(init<=-1): - break; - if(init<=0): - dark_ligt_switch.controls[0].content.content.name=ft.icons.LIGHT_MODE; - dark_ligt_switch.controls[0].content.content.color="yellow"; - dark_ligt_switch.controls[0].content.bgcolor="white"; - page.update(); - def_=0; - shadow_=ft.BoxShadow( + init = 1 + page.bgcolor = "white" + while True: + init -= 0.1 + dark_ligt_switch.controls[0].alignment = ft.alignment.Alignment(init, 0) + dark_ligt_switch.controls[0].content.rotate = ft.Rotate( + angle=init, alignment=ft.alignment.center + ) + if init <= -1: + break + if init <= 0: + dark_ligt_switch.controls[0].content.content.name = ( + ft.Icons.LIGHT_MODE + ) + dark_ligt_switch.controls[0].content.content.color = "yellow" + dark_ligt_switch.controls[0].content.bgcolor = "white" + page.update() + def_ = 0 + + shadow_ = ft.BoxShadow( spread_radius=1, blur_radius=15, - color=ft.colors.BLUE_GREY_300, + color=ft.Colors.BLUE_GREY_300, offset=ft.Offset(0, 0), blur_style=ft.ShadowBlurStyle.OUTER, ) - dark_ligt_switch=ft.Row(alignment="center",controls=[ft.Container(shadow=shadow_,animate=ft.animation.Animation(600, "easeInOut"),alignment=ft.alignment.Alignment(-1, 0),padding=ft.padding.only(left=5,right=5),content=ft.Container(animate_rotation=ft.animation.Animation(600, "easeInOut"),content=ft.Icon(name=ft.icons.LIGHT_MODE,color='#FFDC5D', size=27),height=40,width=40, border_radius=100,bgcolor="white", shadow=shadow_),height=50, width=100, border_radius=100, bgcolor="#FEFDFE", on_click=change)]); - page.add(dark_ligt_switch); + dark_ligt_switch = ft.Row( + alignment="center", + controls=[ + ft.Container( + shadow=shadow_, + animate=ft.animation.Animation(600, "easeInOut"), + alignment=ft.alignment.Alignment(-1, 0), + padding=ft.Padding.only(left=5, right=5), + content=ft.Container( + animate_rotation=ft.animation.Animation(600, "easeInOut"), + content=ft.Icon(name=ft.Icons.LIGHT_MODE, color="#FFDC5D", size=27), + height=40, + width=40, + border_radius=100, + bgcolor="white", + shadow=shadow_, + ), + height=50, + width=100, + border_radius=100, + bgcolor="#FEFDFE", + on_click=change, + ) + ], + ) + page.add(dark_ligt_switch) + ft.app(target=main) diff --git a/python/community/url_shortner/urlShortner.py b/python/community/url_shortner/urlShortner.py index 8bd5cde2..58e30afe 100644 --- a/python/community/url_shortner/urlShortner.py +++ b/python/community/url_shortner/urlShortner.py @@ -1,7 +1,8 @@ import flet as ft import pyshorteners -def main(page): + +def main(page: ft.Page): def btn_click(e): if not txt_name.value: txt_name.error_text = "Please enter the url" @@ -16,5 +17,6 @@ def btn_click(e): page.add(txt_name, ft.ElevatedButton("Create URL!", on_click=btn_click)) + ft.app(target=main) -# ft.app(target=main, view=ft.WEB_BROWSER) \ No newline at end of file +# ft.app(target=main, view=ft.WEB_BROWSER) diff --git a/python/community/weather_widget/README.md b/python/community/weather_widget/README.md index 54d9f0ba..09a8a7db 100644 --- a/python/community/weather_widget/README.md +++ b/python/community/weather_widget/README.md @@ -32,7 +32,7 @@ ft.app(main) ### `color` -Background [color](https://flet.dev/docs/guides/python/colors#hex-value) of the Weather widget. The default value is `ft.colors.BLUE_200`. +Background [color](https://flet.dev/docs/guides/python/colors#hex-value) of the Weather widget. The default value is `ft.Colors.BLUE_200`. ### `height` diff --git a/python/community/weather_widget/weather_widget/weather_widget.py b/python/community/weather_widget/weather_widget/weather_widget.py index 2f53957a..da2795bc 100644 --- a/python/community/weather_widget/weather_widget/weather_widget.py +++ b/python/community/weather_widget/weather_widget/weather_widget.py @@ -9,7 +9,7 @@ class Weather(ft.Container): - def __init__(self, height=200, width=200, bgcolor=ft.colors.BLUE_200): + def __init__(self, height=200, width=200, bgcolor=ft.Colors.BLUE_200): super().__init__() self.OWM_Endpoint = "https://api.openweathermap.org/data/2.5/weather" self._api_key = os.environ.get("OWM_API_KEY") @@ -78,7 +78,7 @@ def display_temp(self, temp): class WeatherAsync(ft.Container): - def __init__(self, height=200, width=200, bgcolor=ft.colors.BLUE_200): + def __init__(self, height=200, width=200, bgcolor=ft.Colors.BLUE_200): super().__init__() self.OWM_Endpoint = "https://api.openweathermap.org/data/2.5/weather" self._api_key = os.environ.get("OWM_API_KEY") diff --git a/python/controls/alert-dialog/media/modal-and-non-modal.gif b/python/controls/alert-dialog/media/modal-and-non-modal.gif new file mode 100644 index 00000000..796e5af5 Binary files /dev/null and b/python/controls/alert-dialog/media/modal-and-non-modal.gif differ diff --git a/python/controls/dialogs-alerts-panels/alert-dialog/dialogs.py b/python/controls/alert-dialog/modal-and-non-modal.py similarity index 69% rename from python/controls/dialogs-alerts-panels/alert-dialog/dialogs.py rename to python/controls/alert-dialog/modal-and-non-modal.py index 305b8ccc..c6b5b77b 100644 --- a/python/controls/dialogs-alerts-panels/alert-dialog/dialogs.py +++ b/python/controls/alert-dialog/modal-and-non-modal.py @@ -4,15 +4,15 @@ def main(page: ft.Page): page.title = "AlertDialog examples" - dlg = ft.AlertDialog( + dialog = ft.AlertDialog( title=ft.Text("Hello"), content=ft.Text("You are notified!"), - alignment=ft.Alignment.center(), + alignment=ft.Alignment.CENTER, on_dismiss=lambda e: print("Dialog dismissed!"), title_padding=ft.Padding.all(25), ) - dlg_modal = ft.AlertDialog( + modal_dialog = ft.AlertDialog( modal=True, title=ft.Text("Please confirm"), content=ft.Text("Do you really want to delete all those files?"), @@ -25,9 +25,13 @@ def main(page: ft.Page): ) page.add( - ft.ElevatedButton("Open dialog", on_click=lambda e: page.show_dialog(dlg)), ft.ElevatedButton( - "Open modal dialog", on_click=lambda e: page.show_dialog(dlg_modal) + content="Open dialog", + on_click=lambda e: page.show_dialog(dialog), + ), + ft.ElevatedButton( + content="Open modal dialog", + on_click=lambda e: page.show_dialog(modal_dialog), ), ) diff --git a/python/controls/animations/animated-switcher/animate-image-switch-buffered.py b/python/controls/animated-switcher/image-switch-buffered.py similarity index 85% rename from python/controls/animations/animated-switcher/animate-image-switch-buffered.py rename to python/controls/animated-switcher/image-switch-buffered.py index d79c26c7..b9fc779b 100644 --- a/python/controls/animations/animated-switcher/animate-image-switch-buffered.py +++ b/python/controls/animated-switcher/image-switch-buffered.py @@ -29,7 +29,6 @@ def animate(self, e): async def fill_queue(self): while len(self.image_queue) < 10: - self.image_queue.append( await self.image_to_base64( f"https://picsum.photos/200/300?{time.time()}" @@ -46,24 +45,24 @@ async def image_to_base64(self, url): return base64_str else: print(f"Image request failed with {response.status_code}") + return None def before_update(self): - self.page.run_task(self.fill_queue) print(len(self.image_queue)) def main(page: ft.Page): - - i = ft.Image( - src=f"https://picsum.photos/200/300?{time.time()}", width=200, height=300 + switcher = BufferingSwitcher( + ft.Image( + src=f"https://picsum.photos/200/300?{time.time()}", width=200, height=300 + ), + page, ) - sw = BufferingSwitcher(i, page) - page.add( - sw, - ft.ElevatedButton("Animate!", on_click=sw.animate), + switcher, + ft.ElevatedButton("Animate!", on_click=switcher.animate), ) diff --git a/python/controls/animated-switcher/image-switch.py b/python/controls/animated-switcher/image-switch.py new file mode 100644 index 00000000..5ececc33 --- /dev/null +++ b/python/controls/animated-switcher/image-switch.py @@ -0,0 +1,32 @@ +import time + +import flet as ft + + +def main(page: ft.Page): + def animate(e: ft.Event[ft.ElevatedButton]): + switcher.content = ft.Image( + src=f"https://picsum.photos/200/300?{time.time()}", + width=200, + height=300, + ) + page.update() + + page.add( + switcher := ft.AnimatedSwitcher( + content=ft.Image( + src="https://picsum.photos/200/300", + width=200, + height=300, + ), + transition=ft.AnimatedSwitcherTransition.SCALE, + duration=500, + reverse_duration=100, + switch_in_curve=ft.AnimationCurve.BOUNCE_OUT, + switch_out_curve=ft.AnimationCurve.BOUNCE_IN, + ), + ft.ElevatedButton("Animate!", on_click=animate), + ) + + +ft.run(main) diff --git a/python/controls/animated-switcher/media/scale-effect.gif b/python/controls/animated-switcher/media/scale-effect.gif new file mode 100644 index 00000000..70010844 Binary files /dev/null and b/python/controls/animated-switcher/media/scale-effect.gif differ diff --git a/python/controls/animated-switcher/scale-effect.py b/python/controls/animated-switcher/scale-effect.py new file mode 100644 index 00000000..aeaa9620 --- /dev/null +++ b/python/controls/animated-switcher/scale-effect.py @@ -0,0 +1,51 @@ +import flet as ft + + +def main(page: ft.Page): + c1 = ft.Container( + content=ft.Text("Hello!", theme_style=ft.TextThemeStyle.HEADLINE_MEDIUM), + alignment=ft.Alignment.CENTER, + width=200, + height=200, + bgcolor=ft.Colors.GREEN, + ) + c2 = ft.Container( + content=ft.Text("Bye!", size=50), + alignment=ft.Alignment.CENTER, + width=200, + height=200, + bgcolor=ft.Colors.YELLOW, + ) + switcher = 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 scale(e): + switcher.content = c2 if switcher.content == c1 else c1 + switcher.transition = ft.AnimatedSwitcherTransition.SCALE + switcher.update() + + def fade(e): + switcher.content = c2 if switcher.content == c1 else c1 + switcher.transition = ft.AnimatedSwitcherTransition.FADE + switcher.update() + + def rotate(e): + switcher.content = c2 if switcher.content == c1 else c1 + switcher.transition = ft.AnimatedSwitcherTransition.ROTATION + switcher.update() + + page.add( + switcher, + ft.ElevatedButton("Scale", on_click=scale), + ft.ElevatedButton("Fade", on_click=fade), + ft.ElevatedButton("Rotate", on_click=rotate), + ) + + +ft.run(main) diff --git a/python/controls/animations/animate-button-on-hover.py b/python/controls/animations/animate-button-on-hover.py deleted file mode 100644 index bca623af..00000000 --- a/python/controls/animations/animate-button-on-hover.py +++ /dev/null @@ -1,23 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - - def animate(e): - b.rotate = 0.1 if e.data == "true" else 0 - page.update() - - t = ft.Text() - b = ft.ElevatedButton( - "Hover over me, I'm animated!", - rotate=0, - animate_rotation=100, - on_hover=animate, - on_click=lambda e: page.add(ft.Text("Clicked! Try a long press!")), - on_long_press=lambda e: page.add(ft.Text("I knew you could do it!")), - ) - - page.add(b) - - -ft.run(main) diff --git a/python/controls/animations/animate-container.py b/python/controls/animations/animate-container.py deleted file mode 100644 index 2cea3e68..00000000 --- a/python/controls/animations/animate-container.py +++ /dev/null @@ -1,52 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - - g1 = ft.LinearGradient( - begin=ft.alignment.top_center, - end=ft.alignment.bottom_center, - colors=[ft.Colors.GREEN, ft.Colors.BLUE], - stops=[0.5, 1.0], - ) - - g2 = ft.RadialGradient( - center=ft.alignment.top_left, - radius=1.0, - colors=[ft.Colors.YELLOW, ft.Colors.DEEP_ORANGE_900], - tile_mode=ft.GradientTileMode.CLAMP, - ) - t = ft.Text("Animate me!") - c = ft.Container( - t, - width=250, - height=250, - gradient=g1, - alignment=ft.alignment.top_left, - animate=ft.Animation(1000, ft.AnimationCurve.BOUNCE_OUT), - border=ft.border.all(2, "blue"), - border_radius=10, - padding=10, - ) - - def animate_container(e): - t.value = "Animate me back!" if t.value == "Animate me!" else "Animate me!" - c.width = 150 if c.width == 250 else 250 - c.height = 150 if c.height == 250 else 250 - c.gradient = g2 if c.gradient == g1 else g1 - if c.alignment == ft.alignment.top_left: - c.alignment = ft.alignment.bottom_right - else: - c.alignment = ft.alignment.top_left - c.border_radius = 30 if c.border_radius == 10 else 10 - c.border = ( - ft.border.all(2, "black") - if c.border == ft.border.all(2, "blue") - else ft.border.all(2, "blue") - ) - c.update() - - page.add(c, ft.ElevatedButton("Animate container", on_click=animate_container)) - - -ft.run(main) diff --git a/python/controls/animations/animate-offset.py b/python/controls/animations/animate-offset.py deleted file mode 100644 index 2b1c81c7..00000000 --- a/python/controls/animations/animate-offset.py +++ /dev/null @@ -1,24 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - - c = ft.Image( - src="https://picsum.photos/200/300?1", - width=200, - height=300, - offset=ft.transform.Offset(-2, 0), - animate_offset=ft.Animation(300, ft.AnimationCurve.BOUNCE_OUT), - ) - - def animate(e): - c.offset = ft.transform.Offset(0, 0) - c.update() - - page.add( - c, - ft.ElevatedButton("Reveal the image!", on_click=animate), - ) - - -ft.run(main) diff --git a/python/controls/animations/animate-opacity.py b/python/controls/animations/animate-opacity.py deleted file mode 100644 index ec7f4112..00000000 --- a/python/controls/animations/animate-opacity.py +++ /dev/null @@ -1,21 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - - c = ft.Image(src="https://picsum.photos/200/300", opacity=None, animate_opacity=300) - - def animate_opacity(e): - c.opacity = 0 if c.opacity == 1 else 1 - c.update() - - page.add( - c, - ft.ElevatedButton( - "Animate opacity", - on_click=animate_opacity, - ), - ) - - -ft.run(main) diff --git a/python/controls/animations/animate-position.py b/python/controls/animations/animate-position.py deleted file mode 100644 index f3ae47fa..00000000 --- a/python/controls/animations/animate-position.py +++ /dev/null @@ -1,31 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - - c1 = ft.Container(width=50, height=50, bgcolor="red", animate_position=1000) - - c2 = ft.Container( - width=50, height=50, bgcolor="green", top=60, left=0, animate_position=500 - ) - - c3 = ft.Container( - width=50, height=50, bgcolor="blue", top=120, left=0, animate_position=1000 - ) - - def animate_container(e): - c1.top = 20 - c1.left = 200 - c2.top = 100 - c2.left = 40 - c3.top = 180 - c3.left = 100 - page.update() - - page.add( - ft.Stack([c1, c2, c3], height=400), - ft.ElevatedButton("Animate!", on_click=animate_container), - ) - - -ft.run(main) diff --git a/python/controls/animations/animate-rotation.py b/python/controls/animations/animate-rotation.py deleted file mode 100644 index ce87af81..00000000 --- a/python/controls/animations/animate-rotation.py +++ /dev/null @@ -1,37 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - - c1 = ft.Container( - width=140, - height=100, - left=200, - top=100, - bgcolor=ft.Colors.RED, - border_radius=5, - rotate=1, - animate_rotation=1000, - ) - - c2 = ft.Container( - width=100, - height=70, - bgcolor=ft.Colors.BLUE, - border_radius=5, - rotate=ft.transform.Rotate(-1, alignment=ft.Alignment.center()_left), - animate_rotation=ft.Animation(duration=300), - ) - - def animate(e): - c1.rotate += 1 - c2.rotate.angle -= 1 - page.update() - - page.add( - ft.Stack([c1, c2], width=500, height=300), - ft.ElevatedButton("Animate!", on_click=animate), - ) - - -ft.run(main) diff --git a/python/controls/animations/animate-scale-docs.py b/python/controls/animations/animate-scale-docs.py deleted file mode 100644 index 86345dfc..00000000 --- a/python/controls/animations/animate-scale-docs.py +++ /dev/null @@ -1,28 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - - c = ft.Container( - width=100, - height=100, - bgcolor=ft.Colors.BLUE, - border_radius=5, - scale=1, - animate_scale=ft.Animation(600, ft.AnimationCurve.BOUNCE_OUT), - ) - - def animate(e): - c.scale = 2 if c.scale == 1 else 1 - page.update() - - page.vertical_alignment = ft.MainAxisAlignment.CENTER - page.horizontal_alignment = ft.CrossAxisAlignment.CENTER - page.spacing = 30 - page.add( - c, - ft.ElevatedButton("Animate!", on_click=animate), - ) - - -ft.run(main) diff --git a/python/controls/animations/animate-scale.py b/python/controls/animations/animate-scale.py deleted file mode 100644 index 187acd64..00000000 --- a/python/controls/animations/animate-scale.py +++ /dev/null @@ -1,36 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - - c1 = ft.ShaderMask( - content=ft.Image( - src="https://picsum.photos/140/100?1", - width=140, - height=100, - fit=ft.ImageFit.FILL, - ), - blend_mode=ft.BlendMode.COLOR_BURN, - shader=ft.RadialGradient( - center=ft.alignment.top_left, - radius=1.0, - colors=[ft.Colors.YELLOW, ft.Colors.DEEP_ORANGE_900], - tile_mode=ft.GradientTileMode.CLAMP, - ), - border_radius=5, - animate_rotation=300, - animate_scale=ft.Animation(600, ft.AnimationCurve.BOUNCE_OUT), - ) - - def animate(e): - c1.rotate = 1 - c1.scale = 3 - page.update() - - page.add( - ft.Stack([c1], width=500, height=300), - ft.ElevatedButton("Animate!", on_click=animate), - ) - - -ft.run(main) diff --git a/python/controls/animations/animate-single-container.py b/python/controls/animations/animate-single-container.py deleted file mode 100644 index 41a28a8a..00000000 --- a/python/controls/animations/animate-single-container.py +++ /dev/null @@ -1,22 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - - c = ft.Container( - width=150, - height=150, - bgcolor=ft.Colors.RED, - animate=ft.Animation(1000, ft.AnimationCurve.BOUNCE_OUT), - ) - - def animate_container(e): - c.width = 100 if c.width == 150 else 150 - c.height = 50 if c.height == 150 else 150 - c.bgcolor = ft.Colors.BLUE if c.bgcolor == ft.Colors.RED else ft.Colors.RED - c.update() - - page.add(c, ft.ElevatedButton("Animate container", on_click=animate_container)) - - -ft.run(main) diff --git a/python/controls/animations/animated-left-menu.py b/python/controls/animations/animated-left-menu.py deleted file mode 100644 index e7e1ce5c..00000000 --- a/python/controls/animations/animated-left-menu.py +++ /dev/null @@ -1,46 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - def show_menu(e): - c.offset = ft.transform.Offset(0, 0) - c.update() - - def hide_menu(e): - c.offset = ft.transform.Offset(-2, 0) - c.update() - - c = ft.Container( - content=ft.Column( - [ - ft.Row( - [ft.IconButton(icon=ft.Icons.CLOSE, on_click=hide_menu)], - alignment=ft.MainAxisAlignment.END, - ), - ft.ListTile( - title=ft.Text("Menu A"), - on_click=lambda _: print("Menu A clicked"), - ), - ft.ListTile( - title=ft.Text("Menu B"), - on_click=lambda _: print("Menu B clicked"), - ), - ] - ), - left=10, - top=10, - width=200, - height=300, - bgcolor=ft.Colors.SURFACE_CONTAINER_HIGHEST, - border_radius=5, - offset=ft.transform.Offset(-2, 0), - animate_offset=ft.Animation(300, ft.AnimationCurve.EASE_IN), - ) - - page.overlay.append(c) - page.add( - ft.ElevatedButton("Show menu", on_click=show_menu), - ) - - -ft.run(main) diff --git a/python/controls/animations/animated-switcher/animate-image-switch.py b/python/controls/animations/animated-switcher/animate-image-switch.py deleted file mode 100644 index 14c7e4ef..00000000 --- a/python/controls/animations/animated-switcher/animate-image-switch.py +++ /dev/null @@ -1,31 +0,0 @@ -import time - -import flet as ft - - -def main(page: ft.Page): - - i = ft.Image(src="https://picsum.photos/200/300", width=200, height=300) - - def animate(e): - sw.content = ft.Image( - src=f"https://picsum.photos/200/300?{time.time()}", width=200, height=300 - ) - page.update() - - sw = ft.AnimatedSwitcher( - i, - transition=ft.AnimatedSwitcherTransition.SCALE, - duration=500, - reverse_duration=100, - switch_in_curve=ft.AnimationCurve.BOUNCE_OUT, - switch_out_curve=ft.AnimationCurve.BOUNCE_IN, - ) - - page.add( - sw, - ft.ElevatedButton("Animate!", on_click=animate), - ) - - -ft.run(main) diff --git a/python/controls/animations/animated-switcher/animated-switcher.py b/python/controls/animations/animated-switcher/animated-switcher.py deleted file mode 100644 index 8158ed5e..00000000 --- a/python/controls/animations/animated-switcher/animated-switcher.py +++ /dev/null @@ -1,53 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - page.title = "AnimatedSwitcher examples" - - c1 = ft.Container( - ft.Text("Hello!", theme_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( - 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 scale(e): - c.content = c2 if c.content == c1 else c1 - c.transition = ft.AnimatedSwitcherTransition.SCALE - c.update() - - def fade(e): - c.content = c2 if c.content == c1 else c1 - c.transition = ft.AnimatedSwitcherTransition.FADE - c.update() - - def rotate(e): - c.content = c2 if c.content == c1 else c1 - c.transition = ft.AnimatedSwitcherTransition.ROTATION - c.update() - - page.add( - c, - ft.ElevatedButton("Scale", on_click=scale), - ft.ElevatedButton("Fade", on_click=fade), - ft.ElevatedButton("Rotate", on_click=rotate), - ) - - -ft.run(main) diff --git a/python/controls/animations/bursting-flet.py b/python/controls/animations/bursting-flet.py deleted file mode 100644 index c59ac302..00000000 --- a/python/controls/animations/bursting-flet.py +++ /dev/null @@ -1,31 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - - c = ft.Image( - src="icons/icon-192.png", - width=100, - height=100, - scale=1.0, - animate_scale=ft.Animation(300, ft.AnimationCurve.EASE_IN_QUINT), - opacity=1.0, - animate_opacity=ft.Animation(300, ft.AnimationCurve.EASE_IN_QUINT), - ) - - def animate(e): - c.scale = 30 - c.opacity = 0 - c.update() - - page.vertical_alignment = ft.MainAxisAlignment.CENTER - page.horizontal_alignment = ft.CrossAxisAlignment.CENTER - page.add( - ft.Column( - [c, ft.ElevatedButton("Boom!", on_click=animate)], - horizontal_alignment=ft.CrossAxisAlignment.CENTER, - ) - ) - - -ft.run(main) diff --git a/python/controls/animations/image-slideshow.py b/python/controls/animations/image-slideshow.py deleted file mode 100644 index 61e50cca..00000000 --- a/python/controls/animations/image-slideshow.py +++ /dev/null @@ -1,32 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - - i1 = ft.Image( - src="https://picsum.photos/200/300?1", - animate_position=ft.Animation(300, ft.AnimationCurve.BOUNCE_OUT), - left=0, - ) - i2 = ft.Image( - src="https://picsum.photos/200/300?2", - animate_position=ft.Animation(300, ft.AnimationCurve.BOUNCE_OUT), - left=-400, - ) - - def animate(e): - i1.left = 400 if i1.left == 0 else 0 - i2.left = 0 if i2.left == -400 else -400 - page.update() - - page.add( - ft.Stack( - [i1, i2], - width=200, - height=300, - ), - ft.ElevatedButton("Slide!", on_click=animate), - ) - - -ft.run(main) diff --git a/python/controls/animations/lottie/lottie-basic.py b/python/controls/animations/lottie/lottie-basic.py deleted file mode 100644 index 4dbeec27..00000000 --- a/python/controls/animations/lottie/lottie-basic.py +++ /dev/null @@ -1,15 +0,0 @@ -import flet as ft -import flet_lottie as fl - - -def main(page: ft.Page): - l = fl.Lottie( - src="https://raw.githubusercontent.com/xvrh/lottie-flutter/refs/heads/master/example/assets/Logo/LogoSmall.json", - reverse=False, - animate=True, - ) - c1 = ft.Container(content=l, bgcolor=ft.Colors.AMBER_ACCENT, padding=50) - page.add(c1) - - -ft.run(main) diff --git a/python/controls/animations/rive/rive-basic.py b/python/controls/animations/rive/rive-basic.py deleted file mode 100644 index b997a3c2..00000000 --- a/python/controls/animations/rive/rive-basic.py +++ /dev/null @@ -1,16 +0,0 @@ -import flet as ft -import flet_rive as ftr - - -def main(page): - page.add( - ftr.Rive( - "https://cdn.rive.app/animations/vehicles.riv", - placeholder=ft.ProgressBar(), - width=300, - height=200, - ) - ) - - -ft.run(main) diff --git a/python/controls/animations/rocket.py b/python/controls/animations/rocket.py deleted file mode 100644 index 14068eff..00000000 --- a/python/controls/animations/rocket.py +++ /dev/null @@ -1,43 +0,0 @@ -from math import pi -import flet as ft - - -def main(page: ft.Page): - - c2 = ft.Container( - content=ft.Container( - ft.Icon(ft.Icons.ROCKET, size=40, color=ft.Colors.BLACK), - scale=1.0, - animate_scale=1000, - opacity=1.0, - animate_opacity=True, - ), - width=120, - height=70, - alignment=ft.Alignment.center()_right, - rotate=ft.transform.Rotate(0, alignment=ft.Alignment.center()_left), - animate_rotation=ft.Animation(duration=1000), - ) - - def animate(e): - c2.rotate.angle -= 0.5 * pi - c2.content.scale = 2.0 if c2.content.scale == 1.0 else 1.0 - c2.content.opacity = 0.4 if c2.content.scale == 1.0 else 1.0 - page.update() - - page.vertical_alignment = ft.MainAxisAlignment.CENTER - page.horizontal_alignment = ft.CrossAxisAlignment.CENTER - - page.add( - ft.Column( - [ - c2, - ft.ElevatedButton("Launch!", on_click=animate), - ], - alignment=ft.MainAxisAlignment.SPACE_BETWEEN, - height=300, - ) - ) - - -ft.run(main) diff --git a/python/controls/navigation/app-bar/appbar-simple.py b/python/controls/app-bar/actions-and-popup-menu.py similarity index 73% rename from python/controls/navigation/app-bar/appbar-simple.py rename to python/controls/app-bar/actions-and-popup-menu.py index 1458b981..330dabfb 100644 --- a/python/controls/navigation/app-bar/appbar-simple.py +++ b/python/controls/app-bar/actions-and-popup-menu.py @@ -4,7 +4,7 @@ def main(page: ft.Page): page.title = "AppBar Example" - def check_item_clicked(e): + def handle_checked_item_click(e: ft.Event[ft.PopupMenuItem]): e.control.checked = not e.control.checked page.update() @@ -19,10 +19,12 @@ def check_item_clicked(e): ft.IconButton(ft.Icons.FILTER_3), ft.PopupMenuButton( items=[ - ft.PopupMenuItem(text="Item 1"), + ft.PopupMenuItem(content="Item 1"), ft.PopupMenuItem(), # divider ft.PopupMenuItem( - text="Checked item", checked=False, on_click=check_item_clicked + content="Checked item", + checked=False, + on_click=handle_checked_item_click, ), ] ), diff --git a/python/controls/app-bar/media/actions-and-popup-menu.gif b/python/controls/app-bar/media/actions-and-popup-menu.gif new file mode 100644 index 00000000..3ce841fc Binary files /dev/null and b/python/controls/app-bar/media/actions-and-popup-menu.gif differ diff --git a/python/controls/navigation/app-bar/appbar-theme-material.py b/python/controls/app-bar/theme-and-material-mode-toggles.py similarity index 66% rename from python/controls/navigation/app-bar/appbar-theme-material.py rename to python/controls/app-bar/theme-and-material-mode-toggles.py index 9af6e8c5..7a3e6ca8 100644 --- a/python/controls/navigation/app-bar/appbar-theme-material.py +++ b/python/controls/app-bar/theme-and-material-mode-toggles.py @@ -7,7 +7,7 @@ def main(page: ft.Page): page.title = "AppBar Example" - def check_item_clicked(e): + def handle_checked_item_click(e: ft.Event[ft.PopupMenuItem]): e.control.checked = not e.control.checked page.update() @@ -16,21 +16,21 @@ def check_item_clicked(e): page.dark_theme = ft.Theme(color_scheme_seed=DARK_SEED_COLOR, use_material3=False) page.update() - def toggle_theme_mode(e): + def toggle_theme_mode(e: ft.Event[ft.IconButton]): page.theme_mode = ( ft.ThemeMode.DARK if page.theme_mode == ft.ThemeMode.LIGHT else ft.ThemeMode.LIGHT ) - lightMode.icon = ( + theme_mode_toggle.icon = ( ft.Icons.WB_SUNNY_OUTLINED if page.theme_mode == ft.ThemeMode.LIGHT else ft.Icons.WB_SUNNY ) page.update() - lightMode = ft.IconButton( - ( + theme_mode_toggle = ft.IconButton( + icon=( ft.Icons.WB_SUNNY_OUTLINED if page.theme_mode == ft.ThemeMode.LIGHT else ft.Icons.WB_SUNNY @@ -38,7 +38,7 @@ def toggle_theme_mode(e): on_click=toggle_theme_mode, ) - def toggle_material(e): + def toggle_material(e: ft.Event[ft.IconButton]): use_material3 = not page.theme.use_material3 page.theme = ft.Theme( color_scheme_seed=LIGHT_SEED_COLOR, use_material3=use_material3 @@ -46,13 +46,13 @@ def toggle_material(e): page.dark_theme = ft.Theme( color_scheme_seed=DARK_SEED_COLOR, use_material3=use_material3 ) - materialMode.icon = ( + material_mode_toggle.icon = ( ft.Icons.FILTER_3 if page.theme.use_material3 else ft.Icons.FILTER_2 ) page.update() - materialMode = ft.IconButton( - ft.Icons.FILTER_3 if page.theme.use_material3 else ft.Icons.FILTER_2, + material_mode_toggle = ft.IconButton( + icon=ft.Icons.FILTER_3 if page.theme.use_material3 else ft.Icons.FILTER_2, on_click=toggle_material, ) @@ -65,26 +65,28 @@ def toggle_material(e): title=ft.Text("AppBar Example"), center_title=False, actions=[ - lightMode, - materialMode, + theme_mode_toggle, + material_mode_toggle, ft.PopupMenuButton( items=[ - ft.PopupMenuItem(text="Item 1"), - ft.PopupMenuItem(icon=ft.Icons.POWER_INPUT, text="Check power"), + ft.PopupMenuItem(content="Item 1"), + ft.PopupMenuItem(icon=ft.Icons.POWER_INPUT, content="Check power"), ft.PopupMenuItem( + on_click=lambda _: print( + "Button with a custom content clicked!" + ), content=ft.Row( - [ + controls=[ 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 + content="Checked item", + checked=False, + on_click=handle_checked_item_click, ), ] ), @@ -92,7 +94,7 @@ def toggle_material(e): ) page.add( ft.Text( - "Flet is a framework that allows building web, desktop and mobile applications in Python without prior experience in frontend development.You can build a UI for your program with Flet controls which are based on Flutter by Google. Flet goes beyond merely wrapping Flutter widgets. It adds its own touch by combining smaller widgets, simplifying complexities, implementing UI best practices, and applying sensible defaults. This ensures that your applications look stylish and polished without requiring additional design efforts on your part.", + value="Flet is a framework that allows building web, desktop and mobile applications in Python without prior experience in frontend development.You can build a UI for your program with Flet controls which are based on Flutter by Google. Flet goes beyond merely wrapping Flutter widgets. It adds its own touch by combining smaller widgets, simplifying complexities, implementing UI best practices, and applying sensible defaults. This ensures that your applications look stylish and polished without requiring additional design efforts on your part.", text_align=ft.TextAlign.END, ), ft.ElevatedButton("Click me!"), diff --git a/python/controls/input-and-selections/auto-complete/auto-complete-example.py b/python/controls/auto-complete/basic.py similarity index 100% rename from python/controls/input-and-selections/auto-complete/auto-complete-example.py rename to python/controls/auto-complete/basic.py index d7059327..d0dbe909 100644 --- a/python/controls/input-and-selections/auto-complete/auto-complete-example.py +++ b/python/controls/auto-complete/basic.py @@ -4,12 +4,12 @@ def main(page: ft.Page): page.add( ft.AutoComplete( + on_select=lambda e: print(e.control.selected_index, e.selection), suggestions=[ ft.AutoCompleteSuggestion(key="one 1", value="One"), ft.AutoCompleteSuggestion(key="two 2", value="Two"), ft.AutoCompleteSuggestion(key="three 3", value="Three"), ], - on_select=lambda e: print(e.control.selected_index, e.selection), ), ft.Text("Type in 1, 2 or 3 to receive suggestions."), ) diff --git a/python/controls/auto-complete/media/basic.gif b/python/controls/auto-complete/media/basic.gif new file mode 100644 index 00000000..ae7dbdd5 Binary files /dev/null and b/python/controls/auto-complete/media/basic.gif differ diff --git a/python/controls/input-and-selections/autofill-group/autofill-example.py b/python/controls/autofill-group/basic.py similarity index 95% rename from python/controls/input-and-selections/autofill-group/autofill-example.py rename to python/controls/autofill-group/basic.py index b961051e..0d630481 100644 --- a/python/controls/input-and-selections/autofill-group/autofill-example.py +++ b/python/controls/autofill-group/basic.py @@ -4,7 +4,7 @@ def main(page: ft.Page): page.add( ft.AutofillGroup( - ft.Column( + content=ft.Column( controls=[ ft.TextField( label="Name", @@ -32,5 +32,4 @@ def main(page: ft.Page): ) -# run with 'flet run -w' ft.run(main) diff --git a/python/controls/autofill-group/media/basic.gif b/python/controls/autofill-group/media/basic.gif new file mode 100644 index 00000000..ccbbf5c4 Binary files /dev/null and b/python/controls/autofill-group/media/basic.gif differ diff --git a/python/controls/dialogs-alerts-panels/banner/banner-test.py b/python/controls/banner/basic.py similarity index 67% rename from python/controls/dialogs-alerts-panels/banner/banner-test.py rename to python/controls/banner/basic.py index c200ee7d..f9fc7c4f 100644 --- a/python/controls/dialogs-alerts-panels/banner/banner-test.py +++ b/python/controls/banner/basic.py @@ -4,7 +4,7 @@ def main(page: ft.Page): page.horizontal_alignment = ft.CrossAxisAlignment.CENTER - def close_banner(e): + def handle_banner_close(e: ft.Event[ft.TextButton]): page.pop_dialog() page.add(ft.Text("Action clicked: " + e.control.content)) @@ -18,13 +18,19 @@ def close_banner(e): ), actions=[ ft.TextButton( - content="Retry", style=action_button_style, on_click=close_banner + content="Retry", + style=action_button_style, + on_click=handle_banner_close, ), ft.TextButton( - content="Ignore", style=action_button_style, on_click=close_banner + content="Ignore", + style=action_button_style, + on_click=handle_banner_close, ), ft.TextButton( - content="Cancel", style=action_button_style, on_click=close_banner + content="Cancel", + style=action_button_style, + on_click=handle_banner_close, ), ], ) diff --git a/python/controls/banner/media/basic.gif b/python/controls/banner/media/basic.gif new file mode 100644 index 00000000..58271ae1 Binary files /dev/null and b/python/controls/banner/media/basic.gif differ diff --git a/python/controls/bottom-app-bar/media/notched-fab.png b/python/controls/bottom-app-bar/media/notched-fab.png new file mode 100644 index 00000000..4f40727a Binary files /dev/null and b/python/controls/bottom-app-bar/media/notched-fab.png differ diff --git a/python/controls/navigation/bottom-app-bar/bottom-appbar.py b/python/controls/bottom-app-bar/notched-fab.py similarity index 90% rename from python/controls/navigation/bottom-app-bar/bottom-appbar.py rename to python/controls/bottom-app-bar/notched-fab.py index b6782f75..1487e1f8 100644 --- a/python/controls/navigation/bottom-app-bar/bottom-appbar.py +++ b/python/controls/bottom-app-bar/notched-fab.py @@ -6,7 +6,8 @@ def main(page: ft.Page): page.horizontal_alignment = ft.CrossAxisAlignment.CENTER page.floating_action_button = ft.FloatingActionButton( - icon=ft.Icons.ADD, shape=ft.CircleBorder() + icon=ft.Icons.ADD, + shape=ft.CircleBorder(), ) page.floating_action_button_location = ft.FloatingActionButtonLocation.CENTER_DOCKED @@ -18,7 +19,7 @@ def main(page: ft.Page): ) page.bottom_appbar = ft.BottomAppBar( bgcolor=ft.Colors.BLUE, - shape=ft.NotchShape.CIRCULAR, + shape=ft.CircularRectangleNotchShape(), content=ft.Row( controls=[ ft.IconButton(icon=ft.Icons.MENU, icon_color=ft.Colors.WHITE), diff --git a/python/controls/dialogs-alerts-panels/bottom-sheet/modal-bottom-sheet.py b/python/controls/bottom-sheet/basic.py similarity index 58% rename from python/controls/dialogs-alerts-panels/bottom-sheet/modal-bottom-sheet.py rename to python/controls/bottom-sheet/basic.py index d23a287a..bc68ded0 100644 --- a/python/controls/dialogs-alerts-panels/bottom-sheet/modal-bottom-sheet.py +++ b/python/controls/bottom-sheet/basic.py @@ -2,31 +2,31 @@ def main(page: ft.Page): - page.title = "BottomSheet example" + page.title = "BottomSheet Example" page.horizontal_alignment = ft.CrossAxisAlignment.CENTER - def bs_dismissed(e): + def handle_sheet_dismissal(e: ft.Event[ft.BottomSheet]): page.add(ft.Text("Bottom sheet dismissed")) - bs = ft.BottomSheet( - ft.Container( - ft.Column( - [ + sheet = ft.BottomSheet( + on_dismiss=handle_sheet_dismissal, + content=ft.Container( + padding=50, + content=ft.Column( + horizontal_alignment=ft.CrossAxisAlignment.CENTER, + tight=True, + controls=[ ft.Text("Here is a bottom sheet!"), ft.ElevatedButton("Dismiss", on_click=lambda _: page.pop_dialog()), ], - horizontal_alignment=ft.CrossAxisAlignment.CENTER, - tight=True, ), - padding=50, ), - open=False, - on_dismiss=bs_dismissed, ) - page.overlay.append(bs) + page.overlay.append(sheet) page.add( ft.ElevatedButton( - "Display bottom sheet", on_click=lambda e: page.show_dialog(bs) + content="Display bottom sheet", + on_click=lambda e: page.show_dialog(sheet), ) ) diff --git a/python/controls/bottom-sheet/media/basic.gif b/python/controls/bottom-sheet/media/basic.gif new file mode 100644 index 00000000..c075b03e Binary files /dev/null and b/python/controls/bottom-sheet/media/basic.gif differ diff --git a/python/controls/bursting-flet.py b/python/controls/bursting-flet.py new file mode 100644 index 00000000..43c1b889 --- /dev/null +++ b/python/controls/bursting-flet.py @@ -0,0 +1,32 @@ +import flet as ft + + +def main(page: ft.Page): + page.vertical_alignment = ft.MainAxisAlignment.CENTER + page.horizontal_alignment = ft.CrossAxisAlignment.CENTER + + def animate(e: ft.Event[ft.ElevatedButton]): + image.scale = 30 + image.opacity = 0 + image.update() + + page.add( + ft.Column( + horizontal_alignment=ft.CrossAxisAlignment.CENTER, + controls=[ + image := ft.Image( + src="icons/icon-192.png", + width=100, + height=100, + scale=1.0, + animate_scale=ft.Animation(300, ft.AnimationCurve.EASE_IN_QUINT), + opacity=1.0, + animate_opacity=ft.Animation(300, ft.AnimationCurve.EASE_IN_QUINT), + ), + ft.ElevatedButton("Boom!", on_click=animate), + ], + ) + ) + + +ft.run(main) diff --git a/python/controls/buttons/elevated-button/button-shapes.py b/python/controls/buttons/elevated-button/button-shapes.py deleted file mode 100644 index e15792dc..00000000 --- a/python/controls/buttons/elevated-button/button-shapes.py +++ /dev/null @@ -1,39 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - page.padding = 30 - page.spacing = 30 - page.add( - ft.ElevatedButton( - "Stadium", - style=ft.ButtonStyle( - shape=ft.StadiumBorder(), - ), - ), - ft.ElevatedButton( - "Rounded rectangle", - style=ft.ButtonStyle( - shape=ft.RoundedRectangleBorder(radius=10), - ), - ), - ft.ElevatedButton( - "Continuous rectangle", - style=ft.ButtonStyle( - shape=ft.ContinuousRectangleBorder(radius=30), - ), - ), - ft.ElevatedButton( - "Beveled rectangle", - style=ft.ButtonStyle( - shape=ft.BeveledRectangleBorder(radius=10), - ), - ), - ft.ElevatedButton( - "Circle", - style=ft.ButtonStyle(shape=ft.CircleBorder(), padding=30), - ), - ) - - -ft.run(main) diff --git a/python/controls/buttons/elevated-button/elevated-button-with-click-event.py b/python/controls/buttons/elevated-button/elevated-button-with-click-event.py deleted file mode 100644 index ee83750b..00000000 --- a/python/controls/buttons/elevated-button/elevated-button-with-click-event.py +++ /dev/null @@ -1,19 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - page.title = "Elevated button with 'click' event" - page.theme_mode = ft.ThemeMode.LIGHT - - def button_clicked(e): - b.data += 1 - t.value = f"Button clicked {b.data} time(s)" - page.update() - - b = ft.ElevatedButton("Button with 'click' event", on_click=button_clicked, data=0) - t = ft.Text() - - page.add(b, t) - - -ft.run(main) diff --git a/python/controls/buttons/filled-button/filled-button-example.py b/python/controls/buttons/filled-button/filled-button-example.py deleted file mode 100644 index d2696793..00000000 --- a/python/controls/buttons/filled-button/filled-button-example.py +++ /dev/null @@ -1,13 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - page.title = "Basic filled buttons" - page.add( - ft.FilledButton(content="Filled button"), - ft.FilledButton("Disabled button", disabled=True), - ft.FilledButton("Button with icon", icon=ft.Icons.ADD_OUTLINED), - ) - - -ft.run(main) diff --git a/python/controls/buttons/filled-tonal-button/filled-tonal-button-example.py b/python/controls/buttons/filled-tonal-button/filled-tonal-button-example.py deleted file mode 100644 index 9b85b11f..00000000 --- a/python/controls/buttons/filled-tonal-button/filled-tonal-button-example.py +++ /dev/null @@ -1,13 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - page.title = "Basic filled tonal buttons" - page.add( - ft.FilledTonalButton(content="Filled tonal button"), - ft.FilledTonalButton("Disabled button", disabled=True), - ft.FilledTonalButton("Button with icon", icon=ft.Icons.ADD_OUTLINED), - ) - - -ft.run(main) diff --git a/python/controls/buttons/icon-button/icon-button-with-click-event.py b/python/controls/buttons/icon-button/icon-button-with-click-event.py deleted file mode 100644 index 2f389647..00000000 --- a/python/controls/buttons/icon-button/icon-button-with-click-event.py +++ /dev/null @@ -1,20 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - page.title = "Icon button with 'click' event" - - def button_clicked(e): - b.data += 1 - t.value = f"Button clicked {b.data} time(s)" - page.update() - - b = ft.IconButton( - icon=ft.Icons.PLAY_CIRCLE_FILL_OUTLINED, on_click=button_clicked, data=0 - ) - t = ft.Text() - - page.add(b, t) - - -ft.run(main) diff --git a/python/controls/buttons/icon-button/icon-buttons.py b/python/controls/buttons/icon-button/icon-buttons.py deleted file mode 100644 index 986af80d..00000000 --- a/python/controls/buttons/icon-button/icon-buttons.py +++ /dev/null @@ -1,32 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - page.title = "Icon buttons" - - sby = ft.SnackBar(ft.Icon(ft.Icons.CHECK_CIRCLE, color=ft.Colors.GREEN_300)) - sbn = ft.SnackBar(ft.Icon(ft.Icons.CANCEL, color=ft.Colors.PINK_700)) - page.add( - ft.Row( - [ - ft.IconButton( - icon=ft.Icons.CHECK_CIRCLE, - icon_color=ft.Colors.GREEN_300, - icon_size=40, - tooltip="Yep", - on_click=lambda e: page.show_dialog(sby), - ), - ft.IconButton( - icon=ft.Icons.CANCEL, - icon_color=ft.Colors.PINK_700, - icon_size=40, - tooltip="Nope", - on_click=lambda e: page.show_dialog(sbn), - ), - ], - alignment=ft.MainAxisAlignment.CENTER, - ), - ) - - -ft.run(main) diff --git a/python/controls/buttons/outlined-button/outlined-button-with-click-event.py b/python/controls/buttons/outlined-button/outlined-button-with-click-event.py deleted file mode 100644 index 2e3ae3cb..00000000 --- a/python/controls/buttons/outlined-button/outlined-button-with-click-event.py +++ /dev/null @@ -1,21 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - page.title = "Outlined button with 'click' event" - page.theme_mode = ft.ThemeMode.LIGHT - - def button_clicked(e): - b.data += 1 - t.value = f"Button clicked {b.data} time(s)" - page.update() - - b = ft.OutlinedButton( - content="Button with 'click' event", on_click=button_clicked, data=0 - ) - t = ft.Text() - - page.add(b, t) - - -ft.run(main) diff --git a/python/controls/buttons/popup-menu-button/popup-button-example.py b/python/controls/buttons/popup-menu-button/popup-button-example.py deleted file mode 100644 index 6e6641e9..00000000 --- a/python/controls/buttons/popup-menu-button/popup-button-example.py +++ /dev/null @@ -1,31 +0,0 @@ -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 custom content clicked!"), - ), - ft.PopupMenuItem(), # divider - ft.PopupMenuItem( - text="Checked item", checked=False, on_click=check_item_clicked - ), - ] - ) - page.add(pb) - - -ft.run(main) diff --git a/python/controls/buttons/text-button/text-button-with-click-event.py b/python/controls/buttons/text-button/text-button-with-click-event.py deleted file mode 100644 index b843a24e..00000000 --- a/python/controls/buttons/text-button/text-button-with-click-event.py +++ /dev/null @@ -1,18 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - page.title = "Text button with 'click' event" - - def button_clicked(e): - b.data += 1 - t.value = f"Button clicked {b.data} time(s)" - page.update() - - b = ft.TextButton("Button with 'click' event", on_click=button_clicked, data=0) - t = ft.Text() - - page.add(b, t) - - -ft.run(main) diff --git a/python/controls/information-displays/canvas/canvas-path-bezier.py b/python/controls/canvas/bezier-curves.py similarity index 78% rename from python/controls/information-displays/canvas/canvas-path-bezier.py rename to python/controls/canvas/bezier-curves.py index 0241e8ac..896ff10b 100644 --- a/python/controls/information-displays/canvas/canvas-path-bezier.py +++ b/python/controls/canvas/bezier-curves.py @@ -1,14 +1,15 @@ -import math - import flet as ft import flet.canvas as cv def main(page: ft.Page): cp = cv.Canvas( - [ + width=float("inf"), + expand=True, + shapes=[ cv.Path( - [ + paint=ft.Paint(stroke_width=2, style=ft.PaintingStyle.STROKE), + elements=[ cv.Path.MoveTo(75, 25), cv.Path.QuadraticTo(25, 25, 25, 62.5), cv.Path.QuadraticTo(25, 100, 50, 100), @@ -17,15 +18,13 @@ def main(page: ft.Page): cv.Path.QuadraticTo(125, 100, 125, 62.5), cv.Path.QuadraticTo(125, 25, 75, 25), ], - paint=ft.Paint( - stroke_width=2, - style=ft.PaintingStyle.STROKE, - ), ), cv.Path( - [ + elements=[ cv.Path.SubPath( - [ + x=100, + y=100, + elements=[ cv.Path.MoveTo(75, 40), cv.Path.CubicTo(75, 37, 70, 25, 50, 25), cv.Path.CubicTo(20, 25, 20, 62.5, 20, 62.5), @@ -34,20 +33,18 @@ def main(page: ft.Page): cv.Path.CubicTo(130, 62.5, 130, 25, 100, 25), cv.Path.CubicTo(85, 25, 75, 37, 75, 40), ], - 100, - 100, ) ], paint=ft.Paint( + style=ft.PaintingStyle.FILL, gradient=ft.PaintRadialGradient( - ft.Offset(150, 150), 50, [ft.Colors.PINK_100, ft.Colors.PINK] + center=ft.Offset(150, 150), + radius=50, + colors=[ft.Colors.PINK_100, ft.Colors.PINK], ), - style=ft.PaintingStyle.FILL, ), ), ], - width=float("inf"), - expand=True, ) page.add(cp) diff --git a/python/controls/information-displays/canvas/canvas-flet-brush-on-image.py b/python/controls/canvas/brush-on-image.py similarity index 57% rename from python/controls/information-displays/canvas/canvas-flet-brush-on-image.py rename to python/controls/canvas/brush-on-image.py index 89e803a2..22d53c43 100644 --- a/python/controls/information-displays/canvas/canvas-flet-brush-on-image.py +++ b/python/controls/canvas/brush-on-image.py @@ -13,39 +13,37 @@ class State: def main(page: ft.Page): page.title = "Flet Brush" - def pan_start(e: ft.DragStartEvent): + def handle_pan_start(e: ft.DragStartEvent): state.x = e.local_x state.y = e.local_y - def pan_update(e: ft.DragUpdateEvent): - cp.shapes.append( + def handle_pan_update(e: ft.DragUpdateEvent): + canvas.shapes.append( cv.Line( state.x, state.y, e.local_x, e.local_y, paint=ft.Paint(stroke_width=3) ) ) - cp.update() + canvas.update() state.x = e.local_x state.y = e.local_y - cp = cv.Canvas( - content=ft.GestureDetector( - on_pan_start=pan_start, - on_pan_update=pan_update, - drag_interval=10, - ), - expand=False, - ) - page.add( ft.Container( - ft.Stack( + content=ft.Stack( controls=[ ft.Image( src="https://picsum.photos/200/300", - fit=ft.ImageFit.FILL, + fit=ft.BoxFit.FILL, width=float("inf"), ), - cp, + canvas := cv.Canvas( + expand=False, + content=ft.GestureDetector( + on_pan_start=handle_pan_start, + on_pan_update=handle_pan_update, + drag_interval=10, + ), + ), ] ), border_radius=5, diff --git a/python/controls/information-displays/canvas/canvas-flet-brush.py b/python/controls/canvas/brush.py similarity index 52% rename from python/controls/information-displays/canvas/canvas-flet-brush.py rename to python/controls/canvas/brush.py index f435f2ec..0b226136 100644 --- a/python/controls/information-displays/canvas/canvas-flet-brush.py +++ b/python/controls/canvas/brush.py @@ -11,43 +11,49 @@ class State: def main(page: ft.Page): - page.title = "Flet Brush" + page.title = "Canvas Example" - def pan_start(e: ft.DragStartEvent): + def handle_pan_start(e: ft.DragStartEvent): state.x = e.local_x state.y = e.local_y - def pan_update(e: ft.DragUpdateEvent): - cp.shapes.append( + def handle_pan_update(e: ft.DragUpdateEvent): + canvas.shapes.append( cv.Line( - state.x, state.y, e.local_x, e.local_y, paint=ft.Paint(stroke_width=3) + x1=state.x, + y1=state.y, + x2=e.local_x, + y2=e.local_y, + paint=ft.Paint(stroke_width=3), ) ) - cp.update() + canvas.update() state.x = e.local_x state.y = e.local_y - cp = cv.Canvas( - [ + canvas = cv.Canvas( + expand=False, + shapes=[ cv.Fill( ft.Paint( gradient=ft.PaintLinearGradient( - (0, 0), (600, 600), colors=[ft.Colors.CYAN_50, ft.Colors.GREY] + begin=(0, 0), + end=(600, 600), + colors=[ft.Colors.CYAN_50, ft.Colors.GREY], ) ) ), ], content=ft.GestureDetector( - on_pan_start=pan_start, - on_pan_update=pan_update, + on_pan_start=handle_pan_start, + on_pan_update=handle_pan_update, drag_interval=10, ), - expand=False, ) page.add( ft.Container( - cp, + content=canvas, border_radius=5, width=float("inf"), expand=True, diff --git a/python/controls/canvas/flet-logo.py b/python/controls/canvas/flet-logo.py new file mode 100644 index 00000000..98099ab8 --- /dev/null +++ b/python/controls/canvas/flet-logo.py @@ -0,0 +1,44 @@ +import flet as ft +import flet.canvas as cv + + +def main(page: ft.Page): + page.theme_mode = ft.ThemeMode.LIGHT + + page.add( + cv.Canvas( + width=float("inf"), + expand=True, + shapes=[ + cv.Path( + elements=[ + cv.Path.MoveTo(25, 125), + cv.Path.QuadraticTo(50, 25, 135, 35, 0.35), + cv.Path.QuadraticTo(75, 115, 135, 215, 0.6), + cv.Path.QuadraticTo(50, 225, 25, 125, 0.35), + ], + paint=ft.Paint( + stroke_width=2, + style=ft.PaintingStyle.FILL, + color=ft.Colors.PINK_400, + ), + ), + cv.Path( + elements=[ + cv.Path.MoveTo(85, 125), + cv.Path.QuadraticTo(120, 85, 165, 75, 0.5), + cv.Path.QuadraticTo(120, 115, 165, 175, 0.3), + cv.Path.QuadraticTo(120, 165, 85, 125, 0.5), + ], + paint=ft.Paint( + stroke_width=2, + style=ft.PaintingStyle.FILL, + color=ft.Colors.with_opacity(0.5, ft.Colors.BLUE_400), + ), + ), + ], + ) + ) + + +ft.run(main) diff --git a/python/controls/canvas/gradients.py b/python/controls/canvas/gradients.py new file mode 100644 index 00000000..fe2b161b --- /dev/null +++ b/python/controls/canvas/gradients.py @@ -0,0 +1,71 @@ +import math + +import flet as ft +import flet.canvas as cv + + +def main(page: ft.Page): + page.add( + cv.Canvas( + width=float("inf"), + expand=True, + shapes=[ + cv.Rect( + x=10, + y=10, + width=100, + height=100, + border_radius=5, + paint=ft.Paint( + style=ft.PaintingStyle.FILL, + gradient=ft.PaintLinearGradient( + begin=(0, 10), + end=(100, 50), + colors=[ft.Colors.BLUE, ft.Colors.YELLOW], + ), + ), + ), + cv.Circle( + x=60, + y=170, + radius=50, + paint=ft.Paint( + style=ft.PaintingStyle.FILL, + gradient=ft.PaintRadialGradient( + radius=50, + center=(60, 170), + colors=[ft.Colors.YELLOW, ft.Colors.BLUE], + ), + ), + ), + cv.Path( + elements=[ + cv.Path.Arc( + x=10, + y=230, + width=100, + height=100, + start_angle=3 * math.pi / 4, + sweep_angle=3 * math.pi / 2, + ), + ], + paint=ft.Paint( + stroke_width=15, + stroke_join=ft.StrokeJoin.ROUND, + style=ft.PaintingStyle.STROKE, + gradient=ft.PaintSweepGradient( + start_angle=0, + end_angle=math.pi * 2, + rotation=3 * math.pi / 4, + center=(60, 280), + colors=[ft.Colors.YELLOW, ft.Colors.PURPLE], + color_stops=[0.0, 1.0], + ), + ), + ), + ], + ) + ) + + +ft.run(main) diff --git a/python/controls/canvas/media/bezier-curves.png b/python/controls/canvas/media/bezier-curves.png new file mode 100644 index 00000000..87424090 Binary files /dev/null and b/python/controls/canvas/media/bezier-curves.png differ diff --git a/python/controls/canvas/media/brush.gif b/python/controls/canvas/media/brush.gif new file mode 100644 index 00000000..7c3af11a Binary files /dev/null and b/python/controls/canvas/media/brush.gif differ diff --git a/python/controls/canvas/media/flet-logo.png b/python/controls/canvas/media/flet-logo.png new file mode 100644 index 00000000..d03648c6 Binary files /dev/null and b/python/controls/canvas/media/flet-logo.png differ diff --git a/python/controls/canvas/media/smiling-face.png b/python/controls/canvas/media/smiling-face.png new file mode 100644 index 00000000..024cff9c Binary files /dev/null and b/python/controls/canvas/media/smiling-face.png differ diff --git a/python/controls/canvas/media/text.png b/python/controls/canvas/media/text.png new file mode 100644 index 00000000..e046b77a Binary files /dev/null and b/python/controls/canvas/media/text.png differ diff --git a/python/controls/canvas/media/triangles.png b/python/controls/canvas/media/triangles.png new file mode 100644 index 00000000..593913df Binary files /dev/null and b/python/controls/canvas/media/triangles.png differ diff --git a/python/controls/canvas/resize.py b/python/controls/canvas/resize.py new file mode 100644 index 00000000..0751942a --- /dev/null +++ b/python/controls/canvas/resize.py @@ -0,0 +1,32 @@ +import flet as ft +import flet.canvas as cv + + +def main(page: ft.Page): + def paint_resize(e: cv.CanvasResizeEvent): + print("On resize:", e.width, e.height) + canvas.shapes[0].x2 = e.width + canvas.shapes[0].y2 = e.height + canvas.shapes[1].y1 = e.height + canvas.shapes[1].x2 = e.width + canvas.update() + + page.add( + ft.Container( + width=float("inf"), + expand=True, + content=( + canvas := cv.Canvas( + resize_interval=10, + on_resize=paint_resize, + shapes=[ + cv.Line(x1=0, y1=0, x2=100, y2=100), + cv.Line(x1=0, y1=100, x2=100, y2=0), + ], + ) + ), + ) + ) + + +ft.run(main) diff --git a/python/controls/canvas/smiling-face.py b/python/controls/canvas/smiling-face.py new file mode 100644 index 00000000..a1f55017 --- /dev/null +++ b/python/controls/canvas/smiling-face.py @@ -0,0 +1,27 @@ +import math + +import flet as ft +import flet.canvas as cv + + +def main(page: ft.Page): + stroke_paint = ft.Paint(stroke_width=2, style=ft.PaintingStyle.STROKE) + fill_paint = ft.Paint(style=ft.PaintingStyle.FILL) + + page.add( + cv.Canvas( + width=float("inf"), + expand=True, + shapes=[ + cv.Circle(100, 100, 50, stroke_paint), + cv.Circle(80, 90, 10, stroke_paint), + cv.Circle(84, 87, 5, fill_paint), + cv.Circle(120, 90, 10, stroke_paint), + cv.Circle(124, 87, 5, fill_paint), + cv.Arc(70, 95, 60, 40, 0, math.pi, paint=stroke_paint), + ], + ) + ) + + +ft.run(main) diff --git a/python/controls/canvas/text.py b/python/controls/canvas/text.py new file mode 100644 index 00000000..8a8d69e0 --- /dev/null +++ b/python/controls/canvas/text.py @@ -0,0 +1,95 @@ +import math + +import flet as ft +import flet.canvas as cv + + +def main(page: ft.Page): + page.add( + cv.Canvas( + width=float("inf"), + expand=True, + shapes=[ + cv.Text(x=0, y=0, value="Just a text"), + cv.Circle(x=200, y=100, radius=2, paint=ft.Paint(color=ft.Colors.RED)), + cv.Text( + x=200, + y=100, + style=ft.TextStyle(weight=ft.FontWeight.BOLD, size=30), + alignment=ft.Alignment.TOP_CENTER, + rotate=math.pi * 0.15, + value="Rotated", + spans=[ + ft.TextSpan( + text="around top_center", + style=ft.TextStyle( + italic=True, color=ft.Colors.GREEN, size=20 + ), + ) + ], + ), + cv.Circle(x=400, y=100, radius=2, paint=ft.Paint(color=ft.Colors.RED)), + cv.Text( + x=400, + y=100, + value="Rotated around top_left", + style=ft.TextStyle(size=20), + alignment=ft.Alignment.TOP_LEFT, + rotate=math.pi * -0.15, + ), + cv.Circle(x=600, y=200, radius=2, paint=ft.Paint(color=ft.Colors.RED)), + cv.Text( + x=600, + y=200, + value="Rotated around center", + style=ft.TextStyle(size=20), + alignment=ft.Alignment.CENTER, + rotate=math.pi / 2, + ), + cv.Text( + x=300, + y=400, + value="Limited to max_width and right-aligned.\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", + text_align=ft.TextAlign.RIGHT, + max_width=400, + ), + cv.Text( + x=200, + y=200, + value="WOW!", + style=ft.TextStyle( + weight=ft.FontWeight.BOLD, + size=100, + foreground=ft.Paint( + color=ft.Colors.PINK, + stroke_width=6, + style=ft.PaintingStyle.STROKE, + stroke_join=ft.StrokeJoin.ROUND, + stroke_cap=ft.StrokeCap.ROUND, + ), + ), + ), + cv.Text( + x=200, + y=200, + value="WOW!", + style=ft.TextStyle( + weight=ft.FontWeight.BOLD, + size=100, + foreground=ft.Paint( + gradient=ft.PaintLinearGradient( + begin=(200, 200), + end=(300, 300), + colors=[ft.Colors.YELLOW, ft.Colors.RED], + ), + stroke_join=ft.StrokeJoin.ROUND, + stroke_cap=ft.StrokeCap.ROUND, + ), + ), + ), + ], + ) + ) + + +ft.run(main) diff --git a/python/controls/canvas/triangles.py b/python/controls/canvas/triangles.py new file mode 100644 index 00000000..f5c5c5ad --- /dev/null +++ b/python/controls/canvas/triangles.py @@ -0,0 +1,33 @@ +import flet as ft +import flet.canvas as cv + + +def main(page: ft.Page): + page.add( + cv.Canvas( + width=float("inf"), + expand=True, + shapes=[ + cv.Path( + paint=ft.Paint(style=ft.PaintingStyle.FILL), + elements=[ + cv.Path.MoveTo(25, 25), + cv.Path.LineTo(105, 25), + cv.Path.LineTo(25, 105), + ], + ), + cv.Path( + paint=ft.Paint(stroke_width=2, style=ft.PaintingStyle.STROKE), + elements=[ + cv.Path.MoveTo(125, 125), + cv.Path.LineTo(125, 45), + cv.Path.LineTo(45, 125), + cv.Path.Close(), + ], + ), + ], + ) + ) + + +ft.run(main) diff --git a/python/controls/card/media/music-info.gif b/python/controls/card/media/music-info.gif new file mode 100644 index 00000000..63aff20e Binary files /dev/null and b/python/controls/card/media/music-info.gif differ diff --git a/python/controls/layout/card/card-with-buttons.py b/python/controls/card/music-info.py similarity index 81% rename from python/controls/layout/card/card-with-buttons.py rename to python/controls/card/music-info.py index 76f529cf..2ad378c1 100644 --- a/python/controls/layout/card/card-with-buttons.py +++ b/python/controls/card/music-info.py @@ -4,29 +4,33 @@ def main(page: ft.Page): page.title = "Card Example" page.theme_mode = ft.ThemeMode.LIGHT + page.add( ft.Card( + shadow_color=ft.Colors.ON_SURFACE_VARIANT, content=ft.Container( + width=400, + padding=10, content=ft.Column( - [ + controls=[ ft.ListTile( + bgcolor=ft.Colors.GREY_400, leading=ft.Icon(ft.Icons.ALBUM), title=ft.Text("The Enchanted Nightingale"), subtitle=ft.Text( "Music by Julie Gable. Lyrics by Sidney Stein." ), - bgcolor=ft.Colors.GREY_400, ), ft.Row( - [ft.TextButton("Buy tickets"), ft.TextButton("Listen")], alignment=ft.MainAxisAlignment.END, + controls=[ + ft.TextButton("Buy tickets"), + ft.TextButton("Listen"), + ], ), ] ), - width=400, - padding=10, ), - shadow_color=ft.Colors.ON_SURFACE_VARIANT, ) ) diff --git a/python/controls/charts/bar-chart/barchart-example.py b/python/controls/charts/bar-chart/barchart-example.py deleted file mode 100644 index 0f805309..00000000 --- a/python/controls/charts/bar-chart/barchart-example.py +++ /dev/null @@ -1,93 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - chart = ft.BarChart( - bar_groups=[ - ft.BarChartGroup( - x=0, - bar_rods=[ - ft.BarChartRod( - from_y=0, - to_y=40, - width=40, - color=ft.Colors.GREEN, - # tooltip="Apple", - border_radius=0, - ), - ], - ), - ft.BarChartGroup( - x=1, - bar_rods=[ - ft.BarChartRod( - from_y=0, - to_y=100, - width=40, - color=ft.Colors.BLUE, - # tooltip="Blueberry", - border_radius=0, - ), - ], - ), - ft.BarChartGroup( - x=2, - bar_rods=[ - ft.BarChartRod( - from_y=0, - to_y=30, - width=40, - color=ft.Colors.RED, - # tooltip="Cherry", - border_radius=0, - ), - ], - ), - ft.BarChartGroup( - x=3, - bar_rods=[ - ft.BarChartRod( - from_y=0, - to_y=60, - width=40, - color=ft.Colors.ORANGE, - # tooltip="Orange", - border_radius=0, - ), - ], - ), - ], - border=ft.Border.all(1, ft.Colors.GREY_400), - left_axis=ft.ChartAxis( - labels_size=40, title=ft.Text("Fruit supply"), title_size=40 - ), - bottom_axis=ft.ChartAxis( - labels=[ - ft.ChartAxisLabel( - value=0, label=ft.Container(ft.Text("Apple"), padding=10) - ), - ft.ChartAxisLabel( - value=1, label=ft.Container(ft.Text("Blueberry"), padding=10) - ), - ft.ChartAxisLabel( - value=2, label=ft.Container(ft.Text("Cherry"), padding=10) - ), - ft.ChartAxisLabel( - value=3, label=ft.Container(ft.Text("Orange"), padding=10) - ), - ], - labels_size=40, - ), - horizontal_grid_lines=ft.ChartGridLines( - color=ft.Colors.GREY_300, width=1, dash_pattern=[3, 3] - ), - tooltip_bgcolor=ft.Colors.with_opacity(0.5, ft.Colors.GREY_300), - max_y=110, - interactive=True, - expand=True, - ) - - page.add(chart) - - -ft.run(main) diff --git a/python/controls/charts/bar-chart/barchart-with-event.py b/python/controls/charts/bar-chart/barchart-with-event.py deleted file mode 100644 index e1154e1a..00000000 --- a/python/controls/charts/bar-chart/barchart-with-event.py +++ /dev/null @@ -1,86 +0,0 @@ -import flet as ft - - -class SampleRod(ft.BarChartRod): - def __init__(self, y: float, hovered: bool = False): - super().__init__() - self.hovered = hovered - self.y = y - # self.tooltip = f"{self.y}" - self.width = 22 - self.color = ft.Colors.WHITE - self.bg_to_y = 20 - self.bg_color = ft.Colors.GREEN_300 - - def before_update(self): - self.to_y = self.y + 0.5 if self.hovered else self.y - self.color = ft.Colors.YELLOW if self.hovered else ft.Colors.WHITE - self.border_side = ( - ft.BorderSide(width=1, color=ft.Colors.GREEN_400) - if self.hovered - else ft.BorderSide(width=0, color=ft.Colors.WHITE) - ) - super().before_update() - - -def main(page: ft.Page): - def on_chart_event(e: ft.BarChartEvent): - for group_index, group in enumerate(chart.bar_groups): - for rod_index, rod in enumerate(group.bar_rods): - rod.hovered = e.group_index == group_index and e.rod_index == rod_index - chart.update() - - chart = ft.BarChart( - bar_groups=[ - ft.BarChartGroup( - x=0, - bar_rods=[SampleRod(5)], - ), - ft.BarChartGroup( - x=1, - bar_rods=[SampleRod(6.5)], - ), - ft.BarChartGroup( - x=2, - bar_rods=[SampleRod(15)], - ), - ft.BarChartGroup( - x=3, - bar_rods=[SampleRod(7.5)], - ), - ft.BarChartGroup( - x=4, - bar_rods=[SampleRod(9)], - ), - ft.BarChartGroup( - x=5, - bar_rods=[SampleRod(11.5)], - ), - ft.BarChartGroup( - x=6, - bar_rods=[SampleRod(6)], - ), - ], - bottom_axis=ft.ChartAxis( - labels=[ - ft.ChartAxisLabel(value=0, label=ft.Text("M")), - ft.ChartAxisLabel(value=1, label=ft.Text("T")), - ft.ChartAxisLabel(value=2, label=ft.Text("W")), - ft.ChartAxisLabel(value=3, label=ft.Text("T")), - ft.ChartAxisLabel(value=4, label=ft.Text("F")), - ft.ChartAxisLabel(value=5, label=ft.Text("S")), - ft.ChartAxisLabel(value=6, label=ft.Text("S")), - ], - ), - on_chart_event=on_chart_event, - interactive=True, - ) - - page.add( - ft.Container( - chart, bgcolor=ft.Colors.GREEN_200, padding=10, border_radius=5, expand=True - ) - ) - - -ft.run(main) diff --git a/python/controls/charts/line-chart/line-chart-example.py b/python/controls/charts/line-chart/line-chart-example.py deleted file mode 100644 index f55a19c2..00000000 --- a/python/controls/charts/line-chart/line-chart-example.py +++ /dev/null @@ -1,210 +0,0 @@ -import flet as ft - - -class State: - toggle = True - - -s = State() - - -def main(page: ft.Page): - data_1 = [ - ft.LineChartData( - data_points=[ - ft.LineChartDataPoint(1, 1), - ft.LineChartDataPoint(3, 1.5), - ft.LineChartDataPoint(5, 1.4), - ft.LineChartDataPoint(7, 3.4), - ft.LineChartDataPoint(10, 2), - ft.LineChartDataPoint(12, 2.2), - ft.LineChartDataPoint(13, 1.8), - ], - stroke_width=8, - color=ft.Colors.LIGHT_GREEN, - curved=True, - stroke_cap_round=True, - ), - ft.LineChartData( - data_points=[ - ft.LineChartDataPoint(1, 1), - ft.LineChartDataPoint(3, 2.8), - ft.LineChartDataPoint(7, 1.2), - ft.LineChartDataPoint(10, 2.8), - ft.LineChartDataPoint(12, 2.6), - ft.LineChartDataPoint(13, 3.9), - ], - color=ft.Colors.PINK, - below_line_bgcolor=ft.Colors.with_opacity(0, ft.Colors.PINK), - stroke_width=8, - curved=True, - stroke_cap_round=True, - ), - ft.LineChartData( - data_points=[ - ft.LineChartDataPoint(1, 2.8), - ft.LineChartDataPoint(3, 1.9), - ft.LineChartDataPoint(6, 3), - ft.LineChartDataPoint(10, 1.3), - ft.LineChartDataPoint(13, 2.5), - ], - color=ft.Colors.CYAN, - stroke_width=8, - curved=True, - stroke_cap_round=True, - ), - ] - - data_2 = [ - ft.LineChartData( - data_points=[ - ft.LineChartDataPoint(1, 1), - ft.LineChartDataPoint(3, 4), - ft.LineChartDataPoint(5, 1.8), - ft.LineChartDataPoint(7, 5), - ft.LineChartDataPoint(10, 2), - ft.LineChartDataPoint(12, 2.2), - ft.LineChartDataPoint(13, 1.8), - ], - stroke_width=4, - color=ft.Colors.with_opacity(0.5, ft.Colors.LIGHT_GREEN), - stroke_cap_round=True, - ), - ft.LineChartData( - data_points=[ - ft.LineChartDataPoint(1, 1), - ft.LineChartDataPoint(3, 2.8), - ft.LineChartDataPoint(7, 1.2), - ft.LineChartDataPoint(10, 2.8), - ft.LineChartDataPoint(12, 2.6), - ft.LineChartDataPoint(13, 3.9), - ], - color=ft.Colors.with_opacity(0.5, ft.Colors.PINK), - below_line_bgcolor=ft.Colors.with_opacity(0.2, ft.Colors.PINK), - stroke_width=4, - curved=True, - stroke_cap_round=True, - ), - ft.LineChartData( - data_points=[ - ft.LineChartDataPoint(1, 3.8), - ft.LineChartDataPoint(3, 1.9), - ft.LineChartDataPoint(6, 5), - ft.LineChartDataPoint(10, 3.3), - ft.LineChartDataPoint(13, 4.5), - ], - color=ft.Colors.with_opacity(0.5, ft.Colors.CYAN), - stroke_width=4, - stroke_cap_round=True, - ), - ] - - chart = ft.LineChart( - data_series=data_1, - border=ft.Border( - bottom=ft.BorderSide( - 4, ft.Colors.with_opacity(0.5, ft.Colors.ON_SURFACE_VARIANT) - ) - ), - left_axis=ft.ChartAxis( - labels=[ - ft.ChartAxisLabel( - value=1, - label=ft.Text("1m", size=14, weight=ft.FontWeight.BOLD), - ), - ft.ChartAxisLabel( - value=2, - label=ft.Text("2m", size=14, weight=ft.FontWeight.BOLD), - ), - ft.ChartAxisLabel( - value=3, - label=ft.Text("3m", size=14, weight=ft.FontWeight.BOLD), - ), - ft.ChartAxisLabel( - value=4, - label=ft.Text("4m", size=14, weight=ft.FontWeight.BOLD), - ), - ft.ChartAxisLabel( - value=5, - label=ft.Text("5m", size=14, weight=ft.FontWeight.BOLD), - ), - ft.ChartAxisLabel( - value=6, - label=ft.Text("6m", size=14, weight=ft.FontWeight.BOLD), - ), - ], - labels_size=40, - ), - bottom_axis=ft.ChartAxis( - labels=[ - ft.ChartAxisLabel( - value=2, - label=ft.Container( - ft.Text( - "SEP", - size=16, - weight=ft.FontWeight.BOLD, - color=ft.Colors.with_opacity( - 0.5, ft.Colors.ON_SURFACE_VARIANT - ), - ), - margin=ft.Margin.only(top=10), - ), - ), - ft.ChartAxisLabel( - value=7, - label=ft.Container( - ft.Text( - "OCT", - size=16, - weight=ft.FontWeight.BOLD, - color=ft.Colors.with_opacity( - 0.5, ft.Colors.ON_SURFACE_VARIANT - ), - ), - margin=ft.Margin.only(top=10), - ), - ), - ft.ChartAxisLabel( - value=12, - label=ft.Container( - ft.Text( - "DEC", - size=16, - weight=ft.FontWeight.BOLD, - color=ft.Colors.with_opacity( - 0.5, ft.Colors.ON_SURFACE_VARIANT - ), - ), - margin=ft.Margin.only(top=10), - ), - ), - ], - labels_size=32, - ), - tooltip_bgcolor=ft.Colors.with_opacity(0.8, ft.Colors.BLUE_GREY), - min_y=0, - max_y=4, - min_x=0, - max_x=14, - # animate=5000, - expand=True, - ) - - def toggle_data(e): - if s.toggle: - chart.data_series = data_2 - chart.data_series[2].point = True - chart.max_y = 6 - chart.interactive = False - else: - chart.data_series = data_1 - chart.max_y = 4 - chart.interactive = True - s.toggle = not s.toggle - chart.update() - - page.add(ft.IconButton(ft.Icons.REFRESH, on_click=toggle_data), chart) - - -ft.run(main) diff --git a/python/controls/charts/line-chart/line-chart-single-toggle.py b/python/controls/charts/line-chart/line-chart-single-toggle.py deleted file mode 100644 index 2806a4ce..00000000 --- a/python/controls/charts/line-chart/line-chart-single-toggle.py +++ /dev/null @@ -1,149 +0,0 @@ -import flet as ft - - -class State: - toggle = True - - -s = State() - - -def main(page: ft.Page): - data_1 = [ - ft.LineChartData( - data_points=[ - ft.LineChartDataPoint(0, 3), - ft.LineChartDataPoint(2.6, 2), - ft.LineChartDataPoint(4.9, 5), - ft.LineChartDataPoint(6.8, 3.1), - ft.LineChartDataPoint(8, 4), - ft.LineChartDataPoint(9.5, 3), - ft.LineChartDataPoint(11, 4), - ], - stroke_width=5, - color=ft.Colors.CYAN, - curved=True, - stroke_cap_round=True, - ) - ] - - data_2 = [ - ft.LineChartData( - data_points=[ - ft.LineChartDataPoint(0, 3.44), - ft.LineChartDataPoint(2.6, 3.44), - ft.LineChartDataPoint(4.9, 3.44), - ft.LineChartDataPoint(6.8, 3.44), - ft.LineChartDataPoint(8, 3.44), - ft.LineChartDataPoint(9.5, 3.44), - ft.LineChartDataPoint(11, 3.44), - ], - stroke_width=5, - color=ft.Colors.CYAN, - curved=True, - stroke_cap_round=True, - ) - ] - - chart = ft.LineChart( - data_series=data_1, - border=ft.Border.all( - 3, ft.Colors.with_opacity(0.2, ft.Colors.ON_SURFACE_VARIANT) - ), - horizontal_grid_lines=ft.ChartGridLines( - interval=1, - color=ft.Colors.with_opacity(0.2, ft.Colors.ON_SURFACE_VARIANT), - width=1, - ), - vertical_grid_lines=ft.ChartGridLines( - interval=1, - color=ft.Colors.with_opacity(0.2, ft.Colors.ON_SURFACE_VARIANT), - width=1, - ), - left_axis=ft.ChartAxis( - labels=[ - ft.ChartAxisLabel( - value=1, - label=ft.Text("10K", size=14, weight=ft.FontWeight.BOLD), - ), - ft.ChartAxisLabel( - value=3, - label=ft.Text("30K", size=14, weight=ft.FontWeight.BOLD), - ), - ft.ChartAxisLabel( - value=5, - label=ft.Text("50K", size=14, weight=ft.FontWeight.BOLD), - ), - ], - labels_size=40, - ), - bottom_axis=ft.ChartAxis( - labels=[ - ft.ChartAxisLabel( - value=2, - label=ft.Container( - ft.Text( - "MAR", - size=16, - weight=ft.FontWeight.BOLD, - color=ft.Colors.with_opacity( - 0.5, ft.Colors.ON_SURFACE_VARIANT - ), - ), - margin=ft.Margin.only(top=10), - ), - ), - ft.ChartAxisLabel( - value=5, - label=ft.Container( - ft.Text( - "JUN", - size=16, - weight=ft.FontWeight.BOLD, - color=ft.Colors.with_opacity( - 0.5, ft.Colors.ON_SURFACE_VARIANT - ), - ), - margin=ft.Margin.only(top=10), - ), - ), - ft.ChartAxisLabel( - value=8, - label=ft.Container( - ft.Text( - "SEP", - size=16, - weight=ft.FontWeight.BOLD, - color=ft.Colors.with_opacity( - 0.5, ft.Colors.ON_SURFACE_VARIANT - ), - ), - margin=ft.Margin.only(top=10), - ), - ), - ], - labels_size=32, - ), - tooltip_bgcolor=ft.Colors.with_opacity(0.8, ft.Colors.BLUE_GREY), - min_y=0, - max_y=6, - min_x=0, - max_x=11, - # animate=5000, - expand=True, - ) - - def toggle_data(e): - if s.toggle: - chart.data_series = data_2 - chart.interactive = False - else: - chart.data_series = data_1 - chart.interactive = True - s.toggle = not s.toggle - chart.update() - - page.add(ft.ElevatedButton("avg", on_click=toggle_data), chart) - - -ft.run(main) diff --git a/python/controls/charts/matplotlib-chart/mpl-barchart-example.py b/python/controls/charts/matplotlib-chart/mpl-barchart-example.py deleted file mode 100644 index 6c5bb768..00000000 --- a/python/controls/charts/matplotlib-chart/mpl-barchart-example.py +++ /dev/null @@ -1,28 +0,0 @@ -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(figure=fig, expand=True)) - - -ft.run(main) diff --git a/python/controls/charts/matplotlib-chart/mpl-contour.py b/python/controls/charts/matplotlib-chart/mpl-contour.py deleted file mode 100644 index 775b381e..00000000 --- a/python/controls/charts/matplotlib-chart/mpl-contour.py +++ /dev/null @@ -1,74 +0,0 @@ -import matplotlib -import matplotlib.pyplot as plt -import matplotlib.tri as tri -import numpy as np - -import flet as ft -from flet.matplotlib_chart import MatplotlibChart - -matplotlib.use("svg") - - -def main(page: ft.Page): - - np.random.seed(19680801) - npts = 200 - ngridx = 100 - ngridy = 200 - x = np.random.uniform(-2, 2, npts) - y = np.random.uniform(-2, 2, npts) - z = x * np.exp(-(x**2) - y**2) - - fig, (ax1, ax2) = plt.subplots(nrows=2) - - # ----------------------- - # Interpolation on a grid - # ----------------------- - # A contour plot of irregularly spaced data coordinates - # via interpolation on a grid. - - # Create grid values first. - xi = np.linspace(-2.1, 2.1, ngridx) - yi = np.linspace(-2.1, 2.1, ngridy) - - # Linearly interpolate the data (x, y) on a grid defined by (xi, yi). - triang = tri.Triangulation(x, y) - interpolator = tri.LinearTriInterpolator(triang, z) - Xi, Yi = np.meshgrid(xi, yi) - zi = interpolator(Xi, Yi) - - # Note that scipy.interpolate provides means to interpolate data on a grid - # as well. The following would be an alternative to the four lines above: - # from scipy.interpolate import griddata - # zi = griddata((x, y), z, (xi[None, :], yi[:, None]), method='linear') - - ax1.contour(xi, yi, zi, levels=14, linewidths=0.5, colors="k") - cntr1 = ax1.contourf(xi, yi, zi, levels=14, cmap="RdBu_r") - - fig.colorbar(cntr1, ax=ax1) - ax1.plot(x, y, "ko", ms=3) - ax1.set(xlim=(-2, 2), ylim=(-2, 2)) - ax1.set_title( - "grid and contour (%d points, %d grid points)" % (npts, ngridx * ngridy) - ) - - # ---------- - # Tricontour - # ---------- - # Directly supply the unordered, irregularly spaced coordinates - # to tricontour. - - ax2.tricontour(x, y, z, levels=14, linewidths=0.5, colors="k") - cntr2 = ax2.tricontourf(x, y, z, levels=14, cmap="RdBu_r") - - fig.colorbar(cntr2, ax=ax2) - ax2.plot(x, y, "ko", ms=3) - ax2.set(xlim=(-2, 2), ylim=(-2, 2)) - ax2.set_title("tricontour (%d points)" % npts) - - plt.subplots_adjust(hspace=0.5) - - page.add(MatplotlibChart(figure=fig, expand=True)) - - -ft.run(main) diff --git a/python/controls/charts/matplotlib-chart/mpl-finance.py b/python/controls/charts/matplotlib-chart/mpl-finance.py deleted file mode 100644 index 2619642e..00000000 --- a/python/controls/charts/matplotlib-chart/mpl-finance.py +++ /dev/null @@ -1,29 +0,0 @@ -import os -import matplotlib -import mplfinance as mpf -import pandas as pd - -import flet as ft -from flet.matplotlib_chart import MatplotlibChart - -matplotlib.use("svg") - - -def main(page: ft.Page): - - csv_path = os.path.join( - os.path.dirname(os.path.abspath(__file__)), "assets/SP500_NOV2019_Hist.csv" - ) - print(csv_path) - daily = pd.read_csv(csv_path, index_col=0, parse_dates=True) - daily.index.name = "Date" - daily.shape - daily.head(3) - daily.tail(3) - - fig, axlist = mpf.plot(daily, type="candle", mav=(3, 6, 9), returnfig=True) - - page.add(MatplotlibChart(figure=fig, expand=True)) - - -ft.run(main) diff --git a/python/controls/charts/matplotlib-chart/mpl-linechart-example.py b/python/controls/charts/matplotlib-chart/mpl-linechart-example.py deleted file mode 100644 index e2ba6c84..00000000 --- a/python/controls/charts/matplotlib-chart/mpl-linechart-example.py +++ /dev/null @@ -1,40 +0,0 @@ -import matplotlib -import matplotlib.pyplot as plt -import numpy as np - -import flet as ft -from flet.matplotlib_chart import MatplotlibChart - -matplotlib.use("svg") - - -def main(page: ft.Page): - - # Fixing random state for reproducibility - np.random.seed(19680801) - - dt = 0.01 - t = np.arange(0, 30, dt) - nse1 = np.random.randn(len(t)) # white noise 1 - nse2 = np.random.randn(len(t)) # white noise 2 - - # Two signals with a coherent part at 10Hz and a random part - s1 = np.sin(2 * np.pi * 10 * t) + nse1 - s2 = np.sin(2 * np.pi * 10 * t) + nse2 - - fig, axs = plt.subplots(2, 1) - axs[0].plot(t, s1, t, s2) - axs[0].set_xlim(0, 2) - axs[0].set_xlabel("time") - axs[0].set_ylabel("s1 and s2") - axs[0].grid(True) - - cxy, f = axs[1].cohere(s1, s2, NFFT=256, Fs=1.0 / dt) - axs[1].set_ylabel("coherence") - - fig.tight_layout() - - page.add(MatplotlibChart(figure=fig, expand=True)) - - -ft.run(main) diff --git a/python/controls/charts/matplotlib-chart/mpl-scatter.py b/python/controls/charts/matplotlib-chart/mpl-scatter.py deleted file mode 100644 index 76793ad2..00000000 --- a/python/controls/charts/matplotlib-chart/mpl-scatter.py +++ /dev/null @@ -1,33 +0,0 @@ -import matplotlib -import matplotlib.pyplot as plt -import numpy as np - -import flet as ft -from flet.matplotlib_chart import MatplotlibChart - -matplotlib.use("svg") - - -def main(page: ft.Page): - - N = 45 - x, y = np.random.rand(2, N) - c = np.random.randint(1, 5, size=N) - s = np.random.randint(10, 220, size=N) - - fig, ax = plt.subplots() - - scatter = ax.scatter(x, y, c=c, s=s) - - # produce a legend with the unique colors from the scatter - legend1 = ax.legend(*scatter.legend_elements(), loc="lower left", title="Classes") - ax.add_artist(legend1) - - # produce a legend with a cross section of sizes from the scatter - handles, labels = scatter.legend_elements(prop="sizes", alpha=0.6) - legend2 = ax.legend(handles, labels, loc="upper right", title="Sizes") - - page.add(MatplotlibChart(figure=fig, expand=True)) - - -ft.run(main) diff --git a/python/controls/charts/pie-chart/piechart-example.py b/python/controls/charts/pie-chart/piechart-example.py deleted file mode 100644 index f1a6184e..00000000 --- a/python/controls/charts/pie-chart/piechart-example.py +++ /dev/null @@ -1,51 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - normal_border = ft.BorderSide(0, ft.Colors.with_opacity(0, ft.Colors.WHITE)) - hovered_border = ft.BorderSide(6, ft.Colors.WHITE) - - def on_chart_event(e: ft.PieChartEvent): - for idx, section in enumerate(chart.sections): - section.border_side = ( - hovered_border if idx == e.section_index else normal_border - ) - chart.update() - - chart = ft.PieChart( - sections=[ - ft.PieChartSection( - 25, - color=ft.Colors.BLUE, - radius=80, - border_side=normal_border, - ), - ft.PieChartSection( - 25, - color=ft.Colors.YELLOW, - radius=65, - border_side=normal_border, - ), - ft.PieChartSection( - 25, - color=ft.Colors.PINK, - radius=60, - border_side=normal_border, - ), - ft.PieChartSection( - 25, - color=ft.Colors.GREEN, - radius=70, - border_side=normal_border, - ), - ], - sections_space=1, - center_space_radius=0, - on_chart_event=on_chart_event, - expand=True, - ) - - page.add(chart) - - -ft.run(main) diff --git a/python/controls/charts/pie-chart/piechart-with-icons.py b/python/controls/charts/pie-chart/piechart-with-icons.py deleted file mode 100644 index 98a7ea9d..00000000 --- a/python/controls/charts/pie-chart/piechart-with-icons.py +++ /dev/null @@ -1,87 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - normal_radius = 100 - hover_radius = 110 - normal_title_style = ft.TextStyle( - size=12, color=ft.Colors.WHITE, weight=ft.FontWeight.BOLD - ) - hover_title_style = ft.TextStyle( - size=16, - color=ft.Colors.WHITE, - weight=ft.FontWeight.BOLD, - shadow=ft.BoxShadow(blur_radius=2, color=ft.Colors.BLACK54), - ) - normal_badge_size = 40 - hover_badge_size = 50 - - def badge(icon, size): - return ft.Container( - ft.Icon(icon), - width=size, - height=size, - border=ft.Border.all(1, ft.Colors.BROWN), - border_radius=size / 2, - bgcolor=ft.Colors.WHITE, - ) - - def on_chart_event(e: ft.PieChartEvent): - for idx, section in enumerate(chart.sections): - if idx == e.section_index: - section.radius = hover_radius - section.title_style = hover_title_style - else: - section.radius = normal_radius - section.title_style = normal_title_style - chart.update() - - chart = ft.PieChart( - sections=[ - ft.PieChartSection( - 40, - title="40%", - title_style=normal_title_style, - color=ft.Colors.BLUE, - radius=normal_radius, - badge_content=badge(ft.Icons.AC_UNIT, normal_badge_size), - badge_position=0.98, - ), - ft.PieChartSection( - 30, - title="30%", - title_style=normal_title_style, - color=ft.Colors.YELLOW, - radius=normal_radius, - badge_content=badge(ft.Icons.ACCESS_ALARM, normal_badge_size), - badge_position=0.98, - ), - ft.PieChartSection( - 15, - title="15%", - title_style=normal_title_style, - color=ft.Colors.PURPLE, - radius=normal_radius, - badge_content=badge(ft.Icons.APPLE, normal_badge_size), - badge_position=0.98, - ), - ft.PieChartSection( - 15, - title="15%", - title_style=normal_title_style, - color=ft.Colors.GREEN, - radius=normal_radius, - badge_content=badge(ft.Icons.PEDAL_BIKE, normal_badge_size), - badge_position=0.98, - ), - ], - sections_space=0, - center_space_radius=0, - on_chart_event=on_chart_event, - expand=True, - ) - - page.add(chart) - - -ft.run(main) diff --git a/python/controls/charts/pie-chart/piechart-with-titles.py b/python/controls/charts/pie-chart/piechart-with-titles.py deleted file mode 100644 index 504af45d..00000000 --- a/python/controls/charts/pie-chart/piechart-with-titles.py +++ /dev/null @@ -1,67 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - normal_radius = 50 - hover_radius = 60 - normal_title_style = ft.TextStyle( - size=16, color=ft.Colors.WHITE, weight=ft.FontWeight.BOLD - ) - hover_title_style = ft.TextStyle( - size=22, - color=ft.Colors.WHITE, - weight=ft.FontWeight.BOLD, - shadow=ft.BoxShadow(blur_radius=2, color=ft.Colors.BLACK54), - ) - - def on_chart_event(e: ft.PieChartEvent): - for idx, section in enumerate(chart.sections): - if idx == e.section_index: - section.radius = hover_radius - section.title_style = hover_title_style - else: - section.radius = normal_radius - section.title_style = normal_title_style - chart.update() - - chart = ft.PieChart( - sections=[ - ft.PieChartSection( - 40, - title="40%", - title_style=normal_title_style, - color=ft.Colors.BLUE, - radius=normal_radius, - ), - ft.PieChartSection( - 30, - title="30%", - title_style=normal_title_style, - color=ft.Colors.YELLOW, - radius=normal_radius, - ), - ft.PieChartSection( - 15, - title="15%", - title_style=normal_title_style, - color=ft.Colors.PURPLE, - radius=normal_radius, - ), - ft.PieChartSection( - 15, - title="15%", - title_style=normal_title_style, - color=ft.Colors.GREEN, - radius=normal_radius, - ), - ], - sections_space=0, - center_space_radius=40, - on_chart_event=on_chart_event, - expand=True, - ) - - page.add(chart) - - -ft.run(main) diff --git a/python/controls/charts/plotly-chart/plotly-barchart.py b/python/controls/charts/plotly-chart/plotly-barchart.py deleted file mode 100644 index 287f86f3..00000000 --- a/python/controls/charts/plotly-chart/plotly-barchart.py +++ /dev/null @@ -1,23 +0,0 @@ -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.bar( - df, - x="year", - y="pop", - hover_data=["lifeExp", "gdpPercap"], - color="country", - labels={"pop": "population of Canada"}, - height=400, - ) - - page.add(PlotlyChart(figure=fig, expand=True)) - - -ft.run(main) diff --git a/python/controls/charts/plotly-chart/plotly-boxchart.py b/python/controls/charts/plotly-chart/plotly-boxchart.py deleted file mode 100644 index 3d26853e..00000000 --- a/python/controls/charts/plotly-chart/plotly-boxchart.py +++ /dev/null @@ -1,59 +0,0 @@ -import plotly.graph_objects as go - -import flet as ft -from flet.plotly_chart import PlotlyChart - - -def main(page: ft.Page): - - x = [ - "day 1", - "day 1", - "day 1", - "day 1", - "day 1", - "day 1", - "day 2", - "day 2", - "day 2", - "day 2", - "day 2", - "day 2", - ] - - fig = go.Figure() - - fig.add_trace( - go.Box( - y=[0.2, 0.2, 0.6, 1.0, 0.5, 0.4, 0.2, 0.7, 0.9, 0.1, 0.5, 0.3], - x=x, - name="kale", - marker_color="#3D9970", - ) - ) - fig.add_trace( - go.Box( - y=[0.6, 0.7, 0.3, 0.6, 0.0, 0.5, 0.7, 0.9, 0.5, 0.8, 0.7, 0.2], - x=x, - name="radishes", - marker_color="#FF4136", - ) - ) - fig.add_trace( - go.Box( - y=[0.1, 0.3, 0.1, 0.9, 0.6, 0.6, 0.9, 1.0, 0.3, 0.6, 0.8, 0.5], - x=x, - name="carrots", - marker_color="#FF851B", - ) - ) - - fig.update_layout( - yaxis_title="normalized moisture", - boxmode="group", # group together boxes of the different traces for each value of x - ) - - page.add(PlotlyChart(figure=fig, expand=True)) - - -ft.run(main) diff --git a/python/controls/charts/plotly-chart/plotly-linechart.py b/python/controls/charts/plotly-chart/plotly-linechart.py deleted file mode 100644 index df808fec..00000000 --- a/python/controls/charts/plotly-chart/plotly-linechart.py +++ /dev/null @@ -1,15 +0,0 @@ -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(figure=fig, expand=True)) - - -ft.run(main) diff --git a/python/controls/charts/plotly-chart/plotly-piechart.py b/python/controls/charts/plotly-chart/plotly-piechart.py deleted file mode 100644 index f2b70178..00000000 --- a/python/controls/charts/plotly-chart/plotly-piechart.py +++ /dev/null @@ -1,17 +0,0 @@ -import plotly.graph_objects as go - -import flet as ft -from flet.plotly_chart import PlotlyChart - - -def main(page: ft.Page): - - labels = ["Oxygen", "Hydrogen", "Carbon_Dioxide", "Nitrogen"] - values = [4500, 2500, 1053, 500] - - fig = go.Figure(data=[go.Pie(labels=labels, values=values)]) - - page.add(PlotlyChart(figure=fig, expand=True)) - - -ft.run(main) diff --git a/python/controls/checkbox/basic.py b/python/controls/checkbox/basic.py new file mode 100644 index 00000000..445f0a18 --- /dev/null +++ b/python/controls/checkbox/basic.py @@ -0,0 +1,25 @@ +import flet as ft + + +def main(page: ft.Page): + def handle_button_click(e: ft.Event[ft.ElevatedButton]): + message.value = f"Checkboxes values are: {c1.value}, {c2.value}, {c3.value}, {c4.value}, {c5.value}." + page.update() + + page.add( + 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 LEFT label_position", + label_position=ft.LabelPosition.LEFT, + ), + ft.ElevatedButton(content="Submit", on_click=handle_button_click), + message := ft.Text(), + ) + + +ft.run(main) diff --git a/python/controls/checkbox/handling-events.py b/python/controls/checkbox/handling-events.py new file mode 100644 index 00000000..61fa6fdf --- /dev/null +++ b/python/controls/checkbox/handling-events.py @@ -0,0 +1,17 @@ +import flet as ft + + +def main(page: ft.Page): + def handle_checkbox_change(e: ft.Event[ft.Checkbox]): + page.add(ft.Text(f"Checkbox value changed to {e.control.value}")) + page.update() + + page.add( + ft.Checkbox( + label="Checkbox with 'change' event", + on_change=handle_checkbox_change, + ) + ) + + +ft.run(main) diff --git a/python/controls/checkbox/media/basic.gif b/python/controls/checkbox/media/basic.gif new file mode 100644 index 00000000..392020d1 Binary files /dev/null and b/python/controls/checkbox/media/basic.gif differ diff --git a/python/controls/checkbox/media/handling-events.gif b/python/controls/checkbox/media/handling-events.gif new file mode 100644 index 00000000..dd01bac2 Binary files /dev/null and b/python/controls/checkbox/media/handling-events.gif differ diff --git a/python/controls/input-and-selections/checkbox/styled-checkbox.py b/python/controls/checkbox/styled.py similarity index 100% rename from python/controls/input-and-selections/checkbox/styled-checkbox.py rename to python/controls/checkbox/styled.py diff --git a/python/controls/chip/assist-chips.py b/python/controls/chip/assist-chips.py new file mode 100644 index 00000000..ba013d45 --- /dev/null +++ b/python/controls/chip/assist-chips.py @@ -0,0 +1,37 @@ +import flet as ft + + +def main(page: ft.Page): + def handle_chip1_click(e: ft.Event[ft.Chip]): + e.control.label.value = "Saved to favorites" + e.control.leading = ft.Icon(ft.Icons.FAVORITE_OUTLINED) + e.control.disabled = True + page.update() + + def handle_chip2_click(e: ft.Event[ft.Chip]): + page.launch_url("https://maps.google.com") + page.update() + + page.add( + ft.Row( + controls=[ + ft.Chip( + label=ft.Text("Save to favourites"), + leading=ft.Icon(ft.Icons.FAVORITE_BORDER_OUTLINED), + bgcolor=ft.Colors.GREEN_200, + disabled_color=ft.Colors.GREEN_100, + autofocus=True, + on_click=handle_chip1_click, + ), + ft.Chip( + label=ft.Text("9 min walk"), + leading=ft.Icon(ft.Icons.MAP_SHARP), + bgcolor=ft.Colors.GREEN_200, + on_click=handle_chip2_click, + ), + ] + ) + ) + + +ft.run(main) diff --git a/python/controls/chip/filter-chips.py b/python/controls/chip/filter-chips.py new file mode 100644 index 00000000..e865067f --- /dev/null +++ b/python/controls/chip/filter-chips.py @@ -0,0 +1,27 @@ +import flet as ft + + +def main(page: ft.Page): + def handle_amenity_selection(e: ft.Event[ft.Chip]): + page.update() + + amenities = ["Washer / Dryer", "Ramp access", "Dogs OK", "Cats OK", "Smoke-free"] + + page.add( + ft.Row(controls=[ft.Icon(ft.Icons.HOTEL_CLASS), ft.Text("Amenities")]), + ft.Row( + controls=[ + ft.Chip( + label=ft.Text(amenity), + bgcolor=ft.Colors.GREEN_200, + disabled_color=ft.Colors.GREEN_100, + autofocus=True, + on_select=handle_amenity_selection, + ) + for amenity in amenities + ] + ), + ) + + +ft.run(main) diff --git a/python/controls/chip/media/assist-chips.png b/python/controls/chip/media/assist-chips.png new file mode 100644 index 00000000..9c086f24 Binary files /dev/null and b/python/controls/chip/media/assist-chips.png differ diff --git a/python/controls/chip/media/filter-chips.png b/python/controls/chip/media/filter-chips.png new file mode 100644 index 00000000..77d6ce28 Binary files /dev/null and b/python/controls/chip/media/filter-chips.png differ diff --git a/python/controls/circle-avatar/media/user-avatars.png b/python/controls/circle-avatar/media/user-avatars.png new file mode 100644 index 00000000..a5143c1c Binary files /dev/null and b/python/controls/circle-avatar/media/user-avatars.png differ diff --git a/python/controls/circle-avatar/user-avatars.py b/python/controls/circle-avatar/user-avatars.py new file mode 100644 index 00000000..8841c52d --- /dev/null +++ b/python/controls/circle-avatar/user-avatars.py @@ -0,0 +1,41 @@ +import flet as ft + + +def main(page: ft.Page): + page.add( + # a "normal" avatar with background image + ft.CircleAvatar( + foreground_image_src="https://avatars.githubusercontent.com/u/5041459?s=88&v=4", + content=ft.Text("FF"), + ), + # avatar with failing foreground image and fallback text + ft.CircleAvatar( + foreground_image_src="https://avatars.githubusercontent.com/u/_5041459?s=88&v=4", + content=ft.Text("FF"), + ), + # avatar with icon, aka icon with inverse background + ft.CircleAvatar(content=ft.Icon(ft.Icons.ABC)), + # avatar with icon and custom colors + ft.CircleAvatar( + content=ft.Icon(ft.Icons.WARNING_ROUNDED), + color=ft.Colors.YELLOW_200, + bgcolor=ft.Colors.AMBER_700, + ), + # avatar with online status + ft.Stack( + width=40, + height=40, + controls=[ + ft.CircleAvatar( + foreground_image_src="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, + ), + ], + ), + ) + + +ft.run(main) diff --git a/python/controls/column/alignment.py b/python/controls/column/alignment.py new file mode 100644 index 00000000..d0238ba9 --- /dev/null +++ b/python/controls/column/alignment.py @@ -0,0 +1,49 @@ +import flet as ft + + +class ColumnFromVerticalAlignment(ft.Column): + def __init__(self, alignment: ft.MainAxisAlignment): + super().__init__() + self.controls = [ + ft.Text(str(alignment), size=10), + ft.Container( + content=ft.Column(self.generate_items(3), alignment=alignment), + bgcolor=ft.Colors.AMBER_100, + height=400, + ), + ] + + @staticmethod + def generate_items(count: int): + """Generates a list of custom Containers with length `count`.""" + return [ + ft.Container( + content=ft.Text(value=str(i)), + alignment=ft.Alignment.CENTER, + width=50, + height=50, + bgcolor=ft.Colors.AMBER_500, + ) + for i in range(1, count + 1) + ] + + +def main(page: ft.Page): + page.add( + ft.Row( + spacing=30, + alignment=ft.MainAxisAlignment.START, + scroll=ft.ScrollMode.AUTO, + controls=[ + ColumnFromVerticalAlignment(ft.MainAxisAlignment.START), + ColumnFromVerticalAlignment(ft.MainAxisAlignment.CENTER), + ColumnFromVerticalAlignment(ft.MainAxisAlignment.END), + ColumnFromVerticalAlignment(ft.MainAxisAlignment.SPACE_BETWEEN), + ColumnFromVerticalAlignment(ft.MainAxisAlignment.SPACE_AROUND), + ColumnFromVerticalAlignment(ft.MainAxisAlignment.SPACE_EVENLY), + ], + ) + ) + + +ft.run(main) diff --git a/python/controls/column/custom-scrollbar.py b/python/controls/column/custom-scrollbar.py new file mode 100644 index 00000000..23e54f88 --- /dev/null +++ b/python/controls/column/custom-scrollbar.py @@ -0,0 +1,28 @@ +import flet as ft + + +def main(page: ft.Page): + page.theme = ft.Theme( + scrollbar_theme=ft.ScrollbarTheme( + track_color={ + ft.ControlState.HOVERED: ft.Colors.AMBER, + ft.ControlState.DEFAULT: ft.Colors.TRANSPARENT, + }, + track_visibility=True, + track_border_color=ft.Colors.BLUE, + thumb_visibility=True, + thumb_color={ + ft.ControlState.HOVERED: ft.Colors.RED, + ft.ControlState.DEFAULT: ft.Colors.GREY_300, + }, + thickness=30, + radius=15, + main_axis_margin=5, + cross_axis_margin=10, + ) + ) + + # todo: finish example + + +ft.run(main) diff --git a/python/controls/column/horizontal-alignment.py b/python/controls/column/horizontal-alignment.py new file mode 100644 index 00000000..97145c48 --- /dev/null +++ b/python/controls/column/horizontal-alignment.py @@ -0,0 +1,49 @@ +import flet as ft + + +class ColumnFromHorizontalAlignment(ft.Column): + def __init__(self, alignment: ft.CrossAxisAlignment): + super().__init__() + self.controls = [ + ft.Text(str(alignment), size=16), + ft.Container( + bgcolor=ft.Colors.AMBER_100, + width=100, + content=ft.Column( + controls=self.generate_items(3), + alignment=ft.MainAxisAlignment.START, + horizontal_alignment=alignment, + ), + ), + ] + + @staticmethod + def generate_items(count: int): + """Generates a list of custom Containers with length `count`.""" + return [ + ft.Container( + content=ft.Text(value=str(i)), + alignment=ft.Alignment.CENTER, + width=50, + height=50, + bgcolor=ft.Colors.AMBER_500, + ) + for i in range(1, count + 1) + ] + + +def main(page: ft.Page): + page.add( + ft.Row( + spacing=30, + alignment=ft.MainAxisAlignment.START, + controls=[ + ColumnFromHorizontalAlignment(ft.CrossAxisAlignment.START), + ColumnFromHorizontalAlignment(ft.CrossAxisAlignment.CENTER), + ColumnFromHorizontalAlignment(ft.CrossAxisAlignment.END), + ], + ) + ) + + +ft.run(main) diff --git a/python/controls/layout/column/column-infinite-list.py b/python/controls/column/infinite-scrolling.py similarity index 100% rename from python/controls/layout/column/column-infinite-list.py rename to python/controls/column/infinite-scrolling.py diff --git a/python/controls/column/media/alignment.png b/python/controls/column/media/alignment.png new file mode 100644 index 00000000..5cb61b6d Binary files /dev/null and b/python/controls/column/media/alignment.png differ diff --git a/python/controls/column/media/horizontal-alignment.png b/python/controls/column/media/horizontal-alignment.png new file mode 100644 index 00000000..ff255796 Binary files /dev/null and b/python/controls/column/media/horizontal-alignment.png differ diff --git a/python/controls/column/media/programmatic-scroll.png b/python/controls/column/media/programmatic-scroll.png new file mode 100644 index 00000000..45f1dbd6 Binary files /dev/null and b/python/controls/column/media/programmatic-scroll.png differ diff --git a/python/controls/column/media/scroll-to-key.gif b/python/controls/column/media/scroll-to-key.gif new file mode 100644 index 00000000..fcacc701 Binary files /dev/null and b/python/controls/column/media/scroll-to-key.gif differ diff --git a/python/controls/column/media/spacing.gif b/python/controls/column/media/spacing.gif new file mode 100644 index 00000000..c826330f Binary files /dev/null and b/python/controls/column/media/spacing.gif differ diff --git a/python/controls/column/media/wrap.gif b/python/controls/column/media/wrap.gif new file mode 100644 index 00000000..15bbf7b1 Binary files /dev/null and b/python/controls/column/media/wrap.gif differ diff --git a/python/controls/column/programmatic-scroll.py b/python/controls/column/programmatic-scroll.py new file mode 100644 index 00000000..6cce4432 --- /dev/null +++ b/python/controls/column/programmatic-scroll.py @@ -0,0 +1,50 @@ +import flet as ft + + +def main(page: ft.Page): + column = ft.Column( + spacing=10, + height=200, + width=float("inf"), + scroll=ft.ScrollMode.ALWAYS, + controls=[ft.Text(f"Text line {i}", scroll_key=str(i)) for i in range(0, 100)], + ) + + def scroll_to_offset(e): + column.scroll_to(offset=500, duration=1000) + + def scroll_to_start(e): + column.scroll_to(offset=0, duration=1000) + + def scroll_to_end(e): + column.scroll_to(offset=-1, duration=2000, curve=ft.AnimationCurve.EASE_IN_OUT) + + def scroll_to_key(e): + column.scroll_to(scroll_key="20", duration=1000) + + def scroll_to_delta(e): + column.scroll_to(delta=100, duration=200) + + def scroll_to_minus_delta(e): + column.scroll_to(delta=-100, duration=200) + + page.add( + ft.Container(content=column, border=ft.Border.all(1)), + ft.ElevatedButton("Scroll to offset 500", on_click=scroll_to_offset), + ft.Row( + controls=[ + ft.ElevatedButton("Scroll -100", on_click=scroll_to_minus_delta), + ft.ElevatedButton("Scroll +100", on_click=scroll_to_delta), + ] + ), + ft.ElevatedButton("Scroll to key '20'", on_click=scroll_to_key), + ft.Row( + controls=[ + ft.ElevatedButton("Scroll to start", on_click=scroll_to_start), + ft.ElevatedButton("Scroll to end", on_click=scroll_to_end), + ] + ), + ) + + +ft.run(main) diff --git a/python/controls/column/scroll-events.py b/python/controls/column/scroll-events.py new file mode 100644 index 00000000..4fc39936 --- /dev/null +++ b/python/controls/column/scroll-events.py @@ -0,0 +1,26 @@ +import flet as ft + + +def main(page: ft.Page): + def handle_column_scroll(e: ft.OnScrollEvent[ft.Column]): + print(e) + + page.add( + ft.Container( + border=ft.Border.all(1), + content=ft.Column( + spacing=10, + height=200, + width=200, + scroll=ft.ScrollMode.ALWAYS, + on_scroll=handle_column_scroll, + controls=[ + ft.Text(f"Text line {i}", key=ft.ScrollKey(str(i))) + for i in range(0, 50) + ], + ), + ), + ) + + +ft.run(main) diff --git a/python/controls/column/scroll-to-key.py b/python/controls/column/scroll-to-key.py new file mode 100644 index 00000000..e66d6b26 --- /dev/null +++ b/python/controls/column/scroll-to-key.py @@ -0,0 +1,83 @@ +import flet as ft + + +def main(page: ft.Page): + page.add( + ft.Container( + border=ft.Border.all(1), + content=( + column1 := ft.Column( + spacing=10, + height=200, + width=300, + scroll=ft.ScrollMode.ALWAYS, + controls=[ + ft.Container( + content=ft.Text("Section A", color=ft.Colors.BLACK), + alignment=ft.Alignment.TOP_LEFT, + bgcolor=ft.Colors.YELLOW_200, + height=100, + key=ft.ScrollKey("A"), + ), + ft.Container( + content=ft.Text("Section B", color=ft.Colors.BLACK), + alignment=ft.Alignment.TOP_LEFT, + bgcolor=ft.Colors.GREEN_200, + height=100, + key=ft.ScrollKey("B"), + ), + ft.Container( + content=ft.Text("Section C", color=ft.Colors.BLACK), + alignment=ft.Alignment.TOP_LEFT, + bgcolor=ft.Colors.BLUE_200, + height=100, + key=ft.ScrollKey("C"), + ), + ft.Container( + content=ft.Text("Section D", color=ft.Colors.BLACK), + alignment=ft.Alignment.TOP_LEFT, + bgcolor=ft.Colors.PINK_200, + height=100, + key=ft.ScrollKey("D"), + ), + ], + ) + ), + ), + ft.Column( + controls=[ + ft.Text("Scroll to:"), + ft.Row( + controls=[ + ft.ElevatedButton( + content="Section A", + on_click=lambda _: column1.scroll_to( + scroll_key=ft.ScrollKey("A"), duration=1000 + ), + ), + ft.ElevatedButton( + content="Section B", + on_click=lambda _: column1.scroll_to( + scroll_key=ft.ScrollKey("B"), duration=1000 + ), + ), + ft.ElevatedButton( + content="Section C", + on_click=lambda _: column1.scroll_to( + scroll_key=ft.ScrollKey("C"), duration=1000 + ), + ), + ft.ElevatedButton( + content="Section D", + on_click=lambda _: column1.scroll_to( + scroll_key=ft.ScrollKey("D"), duration=1000 + ), + ), + ] + ), + ] + ), + ) + + +ft.run(main) diff --git a/python/controls/column/scroll.py b/python/controls/column/scroll.py new file mode 100644 index 00000000..16af3a03 --- /dev/null +++ b/python/controls/column/scroll.py @@ -0,0 +1,90 @@ +import flet as ft + + +def main(page: ft.Page): + def add_text_box(e: ft.Event[ft.ElevatedButton]): + text_field = ft.TextField( + label=f"Text Box {len(left_column.controls)}", + label_style=ft.TextStyle(color=ft.Colors.GREEN), + color=ft.Colors.GREEN, + value=str(len(left_column.controls)), + ) + left_column.controls.append(text_field) + page.update() + + def remove_text_box(e: ft.Event[ft.ElevatedButton]): + if left_column.controls: + left_column.controls.pop() + page.update() + + def scroll_generator(scroll_mode_list: list): + while True: + for mode in scroll_mode_list: + yield mode + + def change_scroll(_): + left_column.scroll = next(scroll_mode) + scroll_mode_text.value = str(left_column.scroll) + page.update() + + add_text_box_button = ft.ElevatedButton("Add TextBox", on_click=add_text_box) + remove_text_box_button = ft.ElevatedButton( + content="Remove TextBox", + on_click=remove_text_box, + ) + scroll_change_button = ft.ElevatedButton( + content="Change Scroll Mode", + on_click=change_scroll, + ) + + scroll_mode = scroll_generator( + [ + None, + ft.ScrollMode.AUTO, + ft.ScrollMode.ADAPTIVE, + ft.ScrollMode.ALWAYS, + ft.ScrollMode.HIDDEN, + ] + ) + + left_column = ft.Column( + controls=[ft.Text("THIS IS COL 1", color=ft.Colors.RED_400)], + scroll=next(scroll_mode), + ) + scroll_mode_text = ft.Text(str(left_column.scroll)) + + page.add( + ft.Row( + expand=True, + controls=[ + ft.Container( + content=left_column, + expand=True, + margin=10, + padding=10, + bgcolor=ft.Colors.AMBER_100, + border_radius=10, + alignment=ft.Alignment.TOP_CENTER, + ), + ft.Container( + margin=10, + padding=10, + bgcolor=ft.Colors.CYAN_500, + border_radius=10, + expand=True, + alignment=ft.Alignment.TOP_LEFT, + content=ft.Column( + controls=[ + add_text_box_button, + remove_text_box_button, + scroll_change_button, + scroll_mode_text, + ], + ), + ), + ], + ) + ) + + +ft.run(main) diff --git a/python/controls/column/spacing.py b/python/controls/column/spacing.py new file mode 100644 index 00000000..6baac249 --- /dev/null +++ b/python/controls/column/spacing.py @@ -0,0 +1,43 @@ +import flet as ft + + +def main(page: ft.Page): + def generate_items(count: int): + """Generates a list of custom Containers with length `count`.""" + return [ + ft.Container( + content=ft.Text(value=str(i)), + alignment=ft.Alignment.CENTER, + width=50, + height=50, + bgcolor=ft.Colors.AMBER, + border_radius=ft.BorderRadius.all(5), + ) + for i in range(1, count + 1) + ] + + def handle_slider_change(e: ft.Event[ft.Slider]): + """Updates the spacing between items based on slider value.""" + column.spacing = int(e.control.value) + column.update() + + page.add( + ft.Column( + controls=[ + ft.Text("Spacing between items"), + ft.Slider( + min=0, + max=100, + divisions=10, + value=0, + label="{value}", + width=500, + on_change=handle_slider_change, + ), + ] + ), + column := ft.Column(spacing=0, controls=generate_items(5)), + ) + + +ft.run(main) diff --git a/python/controls/column/wrap.py b/python/controls/column/wrap.py new file mode 100644 index 00000000..f14daa0e --- /dev/null +++ b/python/controls/column/wrap.py @@ -0,0 +1,56 @@ +import flet as ft + +HEIGHT = 400 + + +def main(page: ft.Page): + def items(count: int): + return [ + ft.Container( + content=ft.Text(value=str(i)), + alignment=ft.Alignment.CENTER, + width=30, + height=30, + bgcolor=ft.Colors.AMBER, + border_radius=ft.BorderRadius.all(5), + ) + for i in range(1, count + 1) + ] + + def handle_slider_change(e: ft.Event[ft.Slider]): + col.height = float(e.control.value) + col.update() + + page.add( + ft.Column( + controls=[ + ft.Text( + "Change the column height to see how child items wrap onto multiple columns:" + ), + ft.Slider( + min=0, + max=HEIGHT, + divisions=20, + value=HEIGHT, + label="{value}", + width=500, + on_change=handle_slider_change, + ), + ] + ), + ft.Container( + bgcolor=ft.Colors.TRANSPARENT, + content=( + col := ft.Column( + wrap=True, + spacing=10, + run_spacing=10, + controls=items(10), + height=HEIGHT, + ) + ), + ), + ) + + +ft.run(main) diff --git a/python/controls/constrained-control/animate-opacity.py b/python/controls/constrained-control/animate-opacity.py new file mode 100644 index 00000000..10f2903a --- /dev/null +++ b/python/controls/constrained-control/animate-opacity.py @@ -0,0 +1,24 @@ +import flet as ft + + +def main(page: ft.Page): + def animate_opacity(e: ft.Event[ft.ElevatedButton]): + container.opacity = 0 if container.opacity == 1 else 1 + container.update() + + page.add( + container := ft.Container( + width=150, + height=150, + bgcolor=ft.Colors.BLUE, + border_radius=10, + animate_opacity=300, + ), + ft.ElevatedButton( + content="Animate opacity", + on_click=animate_opacity, + ), + ) + + +ft.run(main) diff --git a/python/controls/constrained-control/animate-position.py b/python/controls/constrained-control/animate-position.py new file mode 100644 index 00000000..44d5c30f --- /dev/null +++ b/python/controls/constrained-control/animate-position.py @@ -0,0 +1,43 @@ +import flet as ft + + +def main(page: ft.Page): + def animate_container(e: ft.Event[ft.ElevatedButton]): + c1.top = 20 + c1.left = 200 + c2.top = 100 + c2.left = 40 + c3.top = 180 + c3.left = 100 + page.update() + + page.add( + ft.Stack( + height=400, + controls=[ + c1 := ft.Container( + width=50, height=50, bgcolor="red", animate_position=1000 + ), + c2 := ft.Container( + width=50, + height=50, + bgcolor="green", + top=60, + left=0, + animate_position=500, + ), + c3 := ft.Container( + width=50, + height=50, + bgcolor="blue", + top=120, + left=0, + animate_position=1000, + ), + ], + ), + ft.ElevatedButton("Animate!", on_click=animate_container), + ) + + +ft.run(main) diff --git a/python/controls/constrained-control/animate-rotation.py b/python/controls/constrained-control/animate-rotation.py new file mode 100644 index 00000000..19b23468 --- /dev/null +++ b/python/controls/constrained-control/animate-rotation.py @@ -0,0 +1,29 @@ +from math import pi +import flet as ft + + +def main(page: ft.Page): + page.vertical_alignment = ft.MainAxisAlignment.CENTER + page.horizontal_alignment = ft.CrossAxisAlignment.CENTER + page.spacing = 30 + + def animate(e: ft.Event[ft.ElevatedButton]): + container.rotate.angle += pi / 2 + page.update() + + page.add( + container := ft.Container( + width=100, + height=70, + bgcolor=ft.Colors.BLUE, + border_radius=5, + rotate=ft.Rotate(angle=0, alignment=ft.Alignment.CENTER), + animate_rotation=ft.Animation( + duration=300, curve=ft.AnimationCurve.BOUNCE_OUT + ), + ), + ft.ElevatedButton("Animate!", on_click=animate), + ) + + +ft.run(main) diff --git a/python/controls/constrained-control/animate-scale.py b/python/controls/constrained-control/animate-scale.py new file mode 100644 index 00000000..13195a18 --- /dev/null +++ b/python/controls/constrained-control/animate-scale.py @@ -0,0 +1,29 @@ +import flet as ft + + +def main(page: ft.Page): + page.vertical_alignment = ft.MainAxisAlignment.CENTER + page.horizontal_alignment = ft.CrossAxisAlignment.CENTER + page.spacing = 30 + + def animate(e: ft.Event[ft.ElevatedButton]): + container.scale = 2 if container.scale == 1 else 1 + page.update() + + page.add( + container := ft.Container( + width=100, + height=100, + bgcolor=ft.Colors.BLUE, + border_radius=5, + scale=1, + animate_scale=ft.Animation( + duration=600, + curve=ft.AnimationCurve.BOUNCE_OUT, + ), + ), + ft.ElevatedButton("Animate!", on_click=animate), + ) + + +ft.run(main) diff --git a/python/controls/constrained-control/animated-offset.py b/python/controls/constrained-control/animated-offset.py new file mode 100644 index 00000000..a89f16c1 --- /dev/null +++ b/python/controls/constrained-control/animated-offset.py @@ -0,0 +1,22 @@ +import flet as ft + + +def main(page: ft.Page): + def animate(e: ft.Event[ft.ElevatedButton]): + container.offset = ft.Offset(0, 0) + container.update() + + page.add( + container := ft.Container( + width=150, + height=150, + bgcolor=ft.Colors.BLUE, + border_radius=ft.BorderRadius.all(10), + offset=ft.Offset(x=-2, y=0), + animate_offset=ft.Animation(duration=1000), + ), + ft.ElevatedButton("Reveal!", on_click=animate), + ) + + +ft.run(main) diff --git a/python/controls/constrained-control/media/animate-offset.gif b/python/controls/constrained-control/media/animate-offset.gif new file mode 100644 index 00000000..f3e4262f Binary files /dev/null and b/python/controls/constrained-control/media/animate-offset.gif differ diff --git a/python/controls/constrained-control/media/animate-opacity.gif b/python/controls/constrained-control/media/animate-opacity.gif new file mode 100644 index 00000000..8bc32fa3 Binary files /dev/null and b/python/controls/constrained-control/media/animate-opacity.gif differ diff --git a/python/controls/constrained-control/media/animate-position.gif b/python/controls/constrained-control/media/animate-position.gif new file mode 100644 index 00000000..7ebe705e Binary files /dev/null and b/python/controls/constrained-control/media/animate-position.gif differ diff --git a/python/controls/constrained-control/media/animate-rotation.gif b/python/controls/constrained-control/media/animate-rotation.gif new file mode 100644 index 00000000..1290682b Binary files /dev/null and b/python/controls/constrained-control/media/animate-rotation.gif differ diff --git a/python/controls/constrained-control/media/animate-scale.gif b/python/controls/constrained-control/media/animate-scale.gif new file mode 100644 index 00000000..58dce9b0 Binary files /dev/null and b/python/controls/constrained-control/media/animate-scale.gif differ diff --git a/python/controls/constrained-control/media/animated-switcher.gif b/python/controls/constrained-control/media/animated-switcher.gif new file mode 100644 index 00000000..f9429beb Binary files /dev/null and b/python/controls/constrained-control/media/animated-switcher.gif differ diff --git a/python/controls/constrained-control/switcher.py b/python/controls/constrained-control/switcher.py new file mode 100644 index 00000000..9ea3afcb --- /dev/null +++ b/python/controls/constrained-control/switcher.py @@ -0,0 +1,39 @@ +import flet as ft + + +def main(page: ft.Page): + def animate(e: ft.Event[ft.ElevatedButton]): + shader.rotate = 1 + shader.scale = 3 + page.update() + + page.add( + ft.Stack( + width=500, + height=300, + controls=[ + shader := ft.ShaderMask( + blend_mode=ft.BlendMode.COLOR_BURN, + border_radius=5, + animate_rotation=300, + animate_scale=ft.Animation(600, ft.AnimationCurve.BOUNCE_OUT), + shader=ft.RadialGradient( + center=ft.Alignment.TOP_LEFT, + radius=1.0, + colors=[ft.Colors.YELLOW, ft.Colors.DEEP_ORANGE_900], + tile_mode=ft.GradientTileMode.CLAMP, + ), + content=ft.Image( + src="https://picsum.photos/140/100?1", + width=140, + height=100, + fit=ft.BoxFit.FILL, + ), + ) + ], + ), + ft.ElevatedButton("Animate!", on_click=animate), + ) + + +ft.run(main) diff --git a/python/controls/container/animate-1.py b/python/controls/container/animate-1.py new file mode 100644 index 00000000..2e81ab96 --- /dev/null +++ b/python/controls/container/animate-1.py @@ -0,0 +1,24 @@ +import flet as ft + + +def main(page: ft.Page): + def animate_container(e: ft.Event[ft.ElevatedButton]): + container.width = 100 if container.width == 150 else 150 + container.height = 50 if container.height == 150 else 150 + container.bgcolor = ( + ft.Colors.BLUE if container.bgcolor == ft.Colors.RED else ft.Colors.RED + ) + container.update() + + page.add( + container := ft.Container( + width=150, + height=150, + bgcolor=ft.Colors.RED, + animate=ft.Animation(duration=1000, curve=ft.AnimationCurve.BOUNCE_OUT), + ), + ft.ElevatedButton("Animate container", on_click=animate_container), + ) + + +ft.run(main) diff --git a/python/controls/container/animate-2.py b/python/controls/container/animate-2.py new file mode 100644 index 00000000..ef7a9644 --- /dev/null +++ b/python/controls/container/animate-2.py @@ -0,0 +1,55 @@ +import flet as ft + + +def main(page: ft.Page): + gradient1 = ft.LinearGradient( + begin=ft.Alignment.TOP_CENTER, + end=ft.Alignment.BOTTOM_CENTER, + colors=[ft.Colors.GREEN, ft.Colors.BLUE], + stops=[0.5, 1.0], + ) + gradient2 = ft.RadialGradient( + center=ft.Alignment.TOP_LEFT, + radius=1.0, + colors=[ft.Colors.YELLOW, ft.Colors.DEEP_ORANGE_900], + tile_mode=ft.GradientTileMode.CLAMP, + ) + + message = ft.Text("Animate me!") + + def animate_container(e: ft.Event[ft.ElevatedButton]): + message.value = ( + "Animate me back!" if message.value == "Animate me!" else "Animate me!" + ) + container.width = 150 if container.width == 250 else 250 + container.height = 150 if container.height == 250 else 250 + container.gradient = gradient2 if container.gradient == gradient1 else gradient1 + if container.alignment == ft.Alignment.TOP_LEFT: + container.alignment = ft.Alignment.BOTTOM_RIGHT + else: + container.alignment = ft.Alignment.TOP_LEFT + container.border_radius = 30 if container.border_radius == 10 else 10 + container.border = ( + ft.Border.all(width=2, color=ft.Colors.BLACK) + if container.border == ft.Border.all(width=2, color=ft.Colors.BLUE) + else ft.Border.all(width=2, color=ft.Colors.BLUE) + ) + container.update() + + page.add( + container := ft.Container( + content=message, + width=250, + height=250, + gradient=gradient2, + alignment=ft.Alignment.TOP_LEFT, + animate=ft.Animation(duration=1000, curve=ft.AnimationCurve.BOUNCE_OUT), + border=ft.Border.all(width=2, color=ft.Colors.BLUE), + border_radius=10, + padding=10, + ), + ft.ElevatedButton("Animate container", on_click=animate_container), + ) + + +ft.run(main) diff --git a/python/controls/container/animate-3.py b/python/controls/container/animate-3.py new file mode 100644 index 00000000..50c43b63 --- /dev/null +++ b/python/controls/container/animate-3.py @@ -0,0 +1,24 @@ +import flet as ft + + +def main(page: ft.Page): + def animate(e: ft.Event[ft.ElevatedButton]): + container.width = 100 if container.width == 150 else 150 + container.height = 50 if container.height == 150 else 150 + container.bgcolor = ( + ft.Colors.BLUE if container.bgcolor == ft.Colors.RED else ft.Colors.RED + ) + container.update() + + page.add( + container := ft.Container( + width=150, + height=150, + bgcolor=ft.Colors.RED, + animate=ft.Animation(1000, ft.AnimationCurve.BOUNCE_OUT), + ), + ft.ElevatedButton("Animate container", on_click=animate), + ) + + +ft.run(main) diff --git a/python/controls/container/animated-4.py b/python/controls/container/animated-4.py new file mode 100644 index 00000000..a3267920 --- /dev/null +++ b/python/controls/container/animated-4.py @@ -0,0 +1,47 @@ +import flet as ft + + +def main(page: ft.Page): + def show_menu(e: ft.Event[ft.ElevatedButton]): + container.offset = ft.Offset(0, 0) + container.update() + + def hide_menu(e: ft.Event[ft.IconButton]): + container.offset = ft.Offset(-2, 0) + container.update() + + page.overlay.append( + container := ft.Container( + left=10, + top=10, + width=200, + height=300, + bgcolor=ft.Colors.SURFACE_CONTAINER_HIGHEST, + border_radius=5, + offset=ft.Offset(-2, 0), + animate_offset=ft.Animation(300, ft.AnimationCurve.EASE_IN), + content=ft.Column( + controls=[ + ft.Row( + alignment=ft.MainAxisAlignment.END, + controls=[ + ft.IconButton(icon=ft.Icons.CLOSE, on_click=hide_menu) + ], + ), + ft.ListTile( + title=ft.Text("Menu A"), + on_click=lambda _: print("Menu A clicked"), + ), + ft.ListTile( + title=ft.Text("Menu B"), + on_click=lambda _: print("Menu B clicked"), + ), + ] + ), + ) + ) + + page.add(ft.ElevatedButton("Show menu", on_click=show_menu)) + + +ft.run(main) diff --git a/python/controls/container/background-color.py b/python/controls/container/background-color.py new file mode 100644 index 00000000..2247c1cc --- /dev/null +++ b/python/controls/container/background-color.py @@ -0,0 +1,26 @@ +import flet as ft + + +def main(page: ft.Page): + page.title = "Containers with different background color" + + page.add( + ft.Container( + content=ft.Text("Container_1"), + bgcolor="#FFCC0000", + padding=5, + ), + ft.Container( + content=ft.Text("Container_2"), + bgcolor="#CC0000", + padding=5, + ), + ft.Container( + content=ft.Text("Container_3"), + bgcolor=ft.Colors.RED, + padding=5, + ), + ) + + +ft.run(main) diff --git a/python/controls/layout/container/clickable-container.py b/python/controls/container/clickable.py similarity index 87% rename from python/controls/layout/container/clickable-container.py rename to python/controls/container/clickable.py index 6a063cf6..793199cb 100644 --- a/python/controls/layout/container/clickable-container.py +++ b/python/controls/container/clickable.py @@ -2,19 +2,20 @@ def main(page: ft.Page): + page.title = "Container Example" page.theme_mode = ft.ThemeMode.LIGHT - page.title = "Containers - clickable and not" page.vertical_alignment = ft.MainAxisAlignment.CENTER page.horizontal_alignment = ft.CrossAxisAlignment.CENTER page.add( ft.Row( - [ + alignment=ft.MainAxisAlignment.CENTER, + controls=[ ft.Container( content=ft.Text("Non clickable"), margin=10, padding=10, - alignment=ft.Alignment.center(), + alignment=ft.Alignment.CENTER, bgcolor=ft.Colors.AMBER, width=150, height=150, @@ -24,7 +25,7 @@ def main(page: ft.Page): content=ft.Text("Clickable without Ink"), margin=10, padding=10, - alignment=ft.Alignment.center(), + alignment=ft.Alignment.CENTER, bgcolor=ft.Colors.GREEN_200, width=150, height=150, @@ -35,7 +36,7 @@ def main(page: ft.Page): content=ft.Text("Clickable with Ink"), margin=10, padding=10, - alignment=ft.Alignment.center(), + alignment=ft.Alignment.CENTER, bgcolor=ft.Colors.CYAN_200, width=150, height=150, @@ -47,7 +48,7 @@ def main(page: ft.Page): content=ft.Text("Clickable transparent with Ink"), margin=10, padding=10, - alignment=ft.Alignment.center(), + alignment=ft.Alignment.CENTER, width=150, height=150, border_radius=10, @@ -55,7 +56,6 @@ def main(page: ft.Page): on_click=lambda e: print("Clickable transparent with Ink clicked!"), ), ], - alignment=ft.MainAxisAlignment.CENTER, ), ) diff --git a/python/controls/layout/container/container-click-events.py b/python/controls/container/handling-clicks.py similarity index 74% rename from python/controls/layout/container/container-click-events.py rename to python/controls/container/handling-clicks.py index 5cbc8f13..8e0cfe6d 100644 --- a/python/controls/layout/container/container-click-events.py +++ b/python/controls/container/handling-clicks.py @@ -2,7 +2,6 @@ def main(page: ft.Page): - page.theme_mode = ft.ThemeMode.LIGHT page.vertical_alignment = ft.MainAxisAlignment.CENTER page.horizontal_alignment = ft.CrossAxisAlignment.CENTER @@ -14,17 +13,16 @@ def on_click(e): nonlocal cl_counter cl_counter += 1 t1.spans[-1] = ft.TextSpan( - f" {cl_counter} ", + text=f" {cl_counter} ", style=ft.TextStyle(size=16, bgcolor=ft.Colors.TEAL_300), ) - page.update() def on_long_press(e): nonlocal lp_counter lp_counter += 1 t3.spans[-1] = ft.TextSpan( - f" {lp_counter} ", + text=f" {lp_counter} ", style=ft.TextStyle(size=16, bgcolor=ft.Colors.TEAL_300), ) page.update() @@ -33,13 +31,20 @@ def on_tap_down(e): nonlocal td_counter td_counter += 1 t2.spans[-1] = ft.TextSpan( - f" {td_counter} ", + text=f" {td_counter} ", style=ft.TextStyle(size=16, bgcolor=ft.Colors.TEAL_300), ) page.update() c = ft.Container( bgcolor=ft.Colors.PINK_900, + alignment=ft.Alignment.CENTER, + padding=ft.Padding.all(10), + height=150, + width=150, + on_click=on_click, + on_long_press=on_long_press, + on_tap_down=on_tap_down, content=ft.Text( "Press Me!", text_align=ft.TextAlign.CENTER, @@ -56,22 +61,15 @@ def on_tap_down(e): ), theme_style=ft.TextThemeStyle.DISPLAY_MEDIUM, ), - alignment=ft.Alignment.center(), - padding=ft.Padding.all(10), - height=150, - width=150, - on_click=on_click, - on_long_press=on_long_press, - on_tap_down=on_tap_down, ) t1 = ft.Text( spans=[ ft.TextSpan( - "On Click", style=ft.TextStyle(size=16, weight=ft.FontWeight.BOLD) + text="On Click", style=ft.TextStyle(size=16, weight=ft.FontWeight.BOLD) ), - ft.TextSpan(" counter: ", style=ft.TextStyle(size=16, italic=True)), + ft.TextSpan(text=" counter: ", style=ft.TextStyle(size=16, italic=True)), ft.TextSpan( - f" {cl_counter} ", + text=f" {cl_counter} ", style=ft.TextStyle(size=16, bgcolor=ft.Colors.TEAL_300), ), ] @@ -79,11 +77,11 @@ def on_tap_down(e): t2 = ft.Text( spans=[ ft.TextSpan( - "Tap Down", style=ft.TextStyle(size=16, weight=ft.FontWeight.BOLD) + text="Tap Down", style=ft.TextStyle(size=16, weight=ft.FontWeight.BOLD) ), - ft.TextSpan(" counter: ", style=ft.TextStyle(size=16, italic=True)), + ft.TextSpan(text=" counter: ", style=ft.TextStyle(size=16, italic=True)), ft.TextSpan( - f" {td_counter} ", + text=f" {td_counter} ", style=ft.TextStyle(size=16, bgcolor=ft.Colors.TEAL_300), ), ] @@ -91,11 +89,12 @@ def on_tap_down(e): t3 = ft.Text( spans=[ ft.TextSpan( - "Long Press", style=ft.TextStyle(size=16, weight=ft.FontWeight.BOLD) + text="Long Press", + style=ft.TextStyle(size=16, weight=ft.FontWeight.BOLD), ), - ft.TextSpan(" counter: ", style=ft.TextStyle(size=16, italic=True)), + ft.TextSpan(text=" counter: ", style=ft.TextStyle(size=16, italic=True)), ft.TextSpan( - f" {lp_counter} ", + text=f" {lp_counter} ", style=ft.TextStyle(size=16, bgcolor=ft.Colors.TEAL_300), ), ] diff --git a/python/controls/container/handling-hovers.py b/python/controls/container/handling-hovers.py new file mode 100644 index 00000000..a53015a4 --- /dev/null +++ b/python/controls/container/handling-hovers.py @@ -0,0 +1,20 @@ +import flet as ft + + +def main(page: ft.Page): + def handle_hover(e: ft.Event[ft.Container]): + e.control.bgcolor = ft.Colors.BLUE if e.data else ft.Colors.RED + e.control.update() + + page.add( + ft.Container( + width=200, + height=200, + bgcolor=ft.Colors.RED, + ink=False, + on_hover=handle_hover, + ) + ) + + +ft.run(main) diff --git a/python/controls/container/media/animate-1.gif b/python/controls/container/media/animate-1.gif new file mode 100644 index 00000000..445264a5 Binary files /dev/null and b/python/controls/container/media/animate-1.gif differ diff --git a/python/controls/container/media/background-color.png b/python/controls/container/media/background-color.png new file mode 100644 index 00000000..ba240a0a Binary files /dev/null and b/python/controls/container/media/background-color.png differ diff --git a/python/controls/container/media/clickable.gif b/python/controls/container/media/clickable.gif new file mode 100644 index 00000000..0af1500d Binary files /dev/null and b/python/controls/container/media/clickable.gif differ diff --git a/python/controls/container/media/handling-clicks.gif b/python/controls/container/media/handling-clicks.gif new file mode 100644 index 00000000..99c1e5e3 Binary files /dev/null and b/python/controls/container/media/handling-clicks.gif differ diff --git a/python/controls/container/media/handling-hovers.gif b/python/controls/container/media/handling-hovers.gif new file mode 100644 index 00000000..708aa970 Binary files /dev/null and b/python/controls/container/media/handling-hovers.gif differ diff --git a/python/controls/container/media/nested-themes-3.gif b/python/controls/container/media/nested-themes-3.gif new file mode 100644 index 00000000..6428366e Binary files /dev/null and b/python/controls/container/media/nested-themes-3.gif differ diff --git a/python/controls/container/media/overview-padding-margin-border.png b/python/controls/container/media/overview-padding-margin-border.png new file mode 100644 index 00000000..d27a8664 Binary files /dev/null and b/python/controls/container/media/overview-padding-margin-border.png differ diff --git a/python/controls/layout/container/nested-themes-simple.py b/python/controls/container/nested-themes-1.py similarity index 100% rename from python/controls/layout/container/nested-themes-simple.py rename to python/controls/container/nested-themes-1.py diff --git a/python/controls/layout/container/nested-themes.py b/python/controls/container/nested-themes-2.py similarity index 95% rename from python/controls/layout/container/nested-themes.py rename to python/controls/container/nested-themes-2.py index 3833dc49..e9a244b7 100644 --- a/python/controls/layout/container/nested-themes.py +++ b/python/controls/container/nested-themes-2.py @@ -11,7 +11,7 @@ def main(page: ft.Page): page.add( ft.Row( - [ + controls=[ ft.ElevatedButton("Page theme"), ft.TextButton("Page theme text button"), ft.Text( @@ -21,26 +21,16 @@ def main(page: ft.Page): ] ), ft.Container( + height=100, + theme=ft.Theme(color_scheme=ft.ColorScheme(primary=ft.Colors.PINK)), content=ft.Row( - [ + controls=[ ft.ElevatedButton("Inherited theme with primary color overriden"), ft.TextButton("Button 2"), ] ), - height=100, - theme=ft.Theme(color_scheme=ft.ColorScheme(primary=ft.Colors.PINK)), ), ft.Container( - content=ft.Row( - [ - ft.ElevatedButton("Always DARK theme"), - ft.TextButton("Text button"), - ft.Text( - "Text in primary container color", - color=ft.Colors.PRIMARY_CONTAINER, - ), - ] - ), padding=20, bgcolor=ft.Colors.SURFACE_TINT, theme_mode=ft.ThemeMode.DARK, @@ -48,11 +38,9 @@ def main(page: ft.Page): color_scheme_seed=ft.Colors.GREEN, color_scheme=ft.ColorScheme(primary_container=ft.Colors.BLUE), ), - ), - ft.Container( content=ft.Row( - [ - ft.ElevatedButton("Always LIGHT theme"), + controls=[ + ft.ElevatedButton("Always DARK theme"), ft.TextButton("Text button"), ft.Text( "Text in primary container color", @@ -60,16 +48,16 @@ def main(page: ft.Page): ), ] ), + ), + ft.Container( padding=20, bgcolor=ft.Colors.SURFACE_TINT, border=ft.border.all(3, ft.Colors.OUTLINE), theme_mode=ft.ThemeMode.LIGHT, theme=ft.Theme(), - ), - ft.Container( content=ft.Row( - [ - ft.ElevatedButton("SYSTEM theme"), + controls=[ + ft.ElevatedButton("Always LIGHT theme"), ft.TextButton("Text button"), ft.Text( "Text in primary container color", @@ -77,12 +65,24 @@ def main(page: ft.Page): ), ] ), + ), + ft.Container( padding=20, bgcolor=ft.Colors.SURFACE_TINT, border=ft.border.all(3, ft.Colors.OUTLINE), border_radius=10, theme_mode=ft.ThemeMode.SYSTEM, theme=ft.Theme(), + content=ft.Row( + controls=[ + ft.ElevatedButton("SYSTEM theme"), + ft.TextButton("Text button"), + ft.Text( + "Text in primary container color", + color=ft.Colors.PRIMARY_CONTAINER, + ), + ] + ), ), ) diff --git a/python/controls/layout/container/nested-themes-switch.py b/python/controls/container/nested-themes-3.py similarity index 74% rename from python/controls/layout/container/nested-themes-switch.py rename to python/controls/container/nested-themes-3.py index 7f0f0fd7..bff19a36 100644 --- a/python/controls/layout/container/nested-themes-switch.py +++ b/python/controls/container/nested-themes-3.py @@ -4,24 +4,25 @@ def main(page: ft.Page): page.theme_mode = ft.ThemeMode.DARK - def change_theme_mode(e): + def handle_switch_change(e: ft.Event[ft.Switch]): if page.theme_mode == ft.ThemeMode.DARK: page.theme_mode = ft.ThemeMode.LIGHT - sw.thumb_icon = ft.Icons.LIGHT_MODE + switch.thumb_icon = ft.Icons.LIGHT_MODE else: - sw.thumb_icon = ft.Icons.DARK_MODE + switch.thumb_icon = ft.Icons.DARK_MODE page.theme_mode = ft.ThemeMode.DARK page.update() # Yellow page theme with SYSTEM (default) mode - page.theme = ft.Theme( - color_scheme_seed=ft.Colors.YELLOW, - ) - sw = ft.Switch(thumb_icon=ft.Icons.DARK_MODE, on_change=change_theme_mode) + page.theme = ft.Theme(color_scheme_seed=ft.Colors.YELLOW) + + switch = ft.Switch(thumb_icon=ft.Icons.DARK_MODE, on_change=handle_switch_change) + page.add( # Page theme ft.Row( - [ + alignment=ft.MainAxisAlignment.SPACE_BETWEEN, + controls=[ ft.Container( content=ft.ElevatedButton("Page theme button"), bgcolor=ft.Colors.SURFACE_TINT, @@ -29,12 +30,11 @@ def change_theme_mode(e): width=300, ), ft.Container( - content=sw, - padding=ft.padding.only(bottom=50), - alignment=ft.Alignment.top_right(), + content=switch, + padding=ft.Padding.only(bottom=50), + alignment=ft.Alignment.TOP_RIGHT, ), ], - alignment=ft.MainAxisAlignment.SPACE_BETWEEN, ), # Inherited theme with primary color overridden ft.Container( diff --git a/python/controls/layout/container/container-on-resize.py b/python/controls/container/size-aware.py similarity index 88% rename from python/controls/layout/container/container-on-resize.py rename to python/controls/container/size-aware.py index cc3a4c45..bece3931 100644 --- a/python/controls/layout/container/container-on-resize.py +++ b/python/controls/container/size-aware.py @@ -7,8 +7,8 @@ def __init__(self, color, expand): super().__init__(expand=expand) self.size = ft.Text() self.content = ft.Container( - self.size, - alignment=ft.Alignment.center(), + content=self.size, + alignment=ft.Alignment.CENTER, bgcolor=color, ) self.resize_interval = 100 @@ -22,18 +22,18 @@ def canvas_resize(self, e): def main(page: ft.Page): page.add( ft.Row( - [ + expand=2, + controls=[ SizeAwareContainer(ft.Colors.RED, expand=2), SizeAwareContainer(ft.Colors.GREEN, expand=4), ], - expand=2, ), ft.Row( - [ + expand=3, + controls=[ SizeAwareContainer(ft.Colors.YELLOW, expand=2), SizeAwareContainer(ft.Colors.BLUE, expand=4), ], - expand=3, ), ) diff --git a/python/controls/cupertino/cupertino-dialogs-alerts-panels/cupertino-action-sheet-example.py b/python/controls/cupertino-action-sheet/basic.py similarity index 85% rename from python/controls/cupertino/cupertino-dialogs-alerts-panels/cupertino-action-sheet-example.py rename to python/controls/cupertino-action-sheet/basic.py index 95ade289..a17a30c4 100644 --- a/python/controls/cupertino/cupertino-dialogs-alerts-panels/cupertino-action-sheet-example.py +++ b/python/controls/cupertino-action-sheet/basic.py @@ -1,7 +1,7 @@ import flet as ft -def main(page): +def main(page: ft.Page): page.horizontal_alignment = ft.CrossAxisAlignment.CENTER def handle_click(e): @@ -10,11 +10,11 @@ def handle_click(e): action_sheet = ft.CupertinoActionSheet( title=ft.Row( - [ft.Text("Title"), ft.Icon(ft.Icons.BEDTIME)], + controls=[ft.Text("Title"), ft.Icon(ft.Icons.BEDTIME)], alignment=ft.MainAxisAlignment.CENTER, ), message=ft.Row( - [ft.Text("Description"), ft.Icon(ft.Icons.AUTO_AWESOME)], + controls=[ft.Text("Description"), ft.Icon(ft.Icons.AUTO_AWESOME)], alignment=ft.MainAxisAlignment.CENTER, ), cancel=ft.CupertinoActionSheetAction( @@ -43,7 +43,7 @@ def handle_click(e): page.add( ft.CupertinoFilledButton( - "Open CupertinoBottomSheet", + content="Open CupertinoBottomSheet", on_click=lambda e: page.show_dialog(bottom_sheet), ) ) diff --git a/python/controls/cupertino-action-sheet/media/basic.png b/python/controls/cupertino-action-sheet/media/basic.png new file mode 100644 index 00000000..6288de3f Binary files /dev/null and b/python/controls/cupertino-action-sheet/media/basic.png differ diff --git a/python/controls/cupertino/cupertino-information-displays/cupertino-activity-indicator-example.py b/python/controls/cupertino-activity-indicator/basic.py similarity index 76% rename from python/controls/cupertino/cupertino-information-displays/cupertino-activity-indicator-example.py rename to python/controls/cupertino-activity-indicator/basic.py index 4dc02674..e0aaf62d 100644 --- a/python/controls/cupertino/cupertino-information-displays/cupertino-activity-indicator-example.py +++ b/python/controls/cupertino-activity-indicator/basic.py @@ -1,14 +1,12 @@ import flet as ft -def main(page): - page.theme_mode = ft.ThemeMode.LIGHT - +def main(page: ft.Page): page.add( ft.CupertinoActivityIndicator( - radius=50, - color=ft.Colors.RED, animating=True, + color=ft.Colors.RED, + radius=50, ) ) diff --git a/python/controls/cupertino-activity-indicator/media/basic.png b/python/controls/cupertino-activity-indicator/media/basic.png new file mode 100644 index 00000000..451a779e Binary files /dev/null and b/python/controls/cupertino-activity-indicator/media/basic.png differ diff --git a/python/controls/cupertino/cupertino-dialogs-alerts-panels/cupertino-alert-dialog-example.py b/python/controls/cupertino-alert-dialog/cupertino-material-and-adaptive.py similarity index 89% rename from python/controls/cupertino/cupertino-dialogs-alerts-panels/cupertino-alert-dialog-example.py rename to python/controls/cupertino-alert-dialog/cupertino-material-and-adaptive.py index 54e69e9e..8dc11056 100644 --- a/python/controls/cupertino/cupertino-dialogs-alerts-panels/cupertino-alert-dialog-example.py +++ b/python/controls/cupertino-alert-dialog/cupertino-material-and-adaptive.py @@ -1,3 +1,5 @@ +from typing import Union + import flet as ft @@ -5,11 +7,13 @@ def main(page: ft.Page): page.horizontal_alignment = ft.CrossAxisAlignment.CENTER page.scroll = ft.ScrollMode.AUTO - def handle_action_click(e): + def handle_action_click( + e: ft.Event[Union[ft.TextButton, ft.CupertinoDialogAction]], + ): page.add(ft.Text(f"Action clicked: {e.control.content}")) page.pop_dialog() - cupertino_actions: list[ft.Control] = [ + cupertino_actions = [ ft.CupertinoDialogAction( content="Yes", destructive=True, @@ -22,7 +26,7 @@ def handle_action_click(e): ), ] - material_actions: list[ft.Control] = [ + material_actions = [ ft.TextButton(content="Yes", on_click=handle_action_click), ft.TextButton(content="No", on_click=handle_action_click), ] @@ -59,7 +63,7 @@ def handle_action_click(e): content=ft.Text("Do you want to delete this file?"), actions=( cupertino_actions - if page.platform in [ft.PagePlatform.IOS, ft.PagePlatform.MACOS] + if page.platform.is_apple() else material_actions ), ) diff --git a/python/controls/cupertino/cupertino-dialogs-alerts-panels/cupertino-alert-dialog-simple.py b/python/controls/cupertino-alert-dialog/file-deletion-confirmation.py similarity index 83% rename from python/controls/cupertino/cupertino-dialogs-alerts-panels/cupertino-alert-dialog-simple.py rename to python/controls/cupertino-alert-dialog/file-deletion-confirmation.py index 3e4c076c..ac237211 100644 --- a/python/controls/cupertino/cupertino-dialogs-alerts-panels/cupertino-alert-dialog-simple.py +++ b/python/controls/cupertino-alert-dialog/file-deletion-confirmation.py @@ -4,17 +4,17 @@ def main(page: ft.Page): page.horizontal_alignment = ft.CrossAxisAlignment.CENTER - def dialog_dismissed(e): + def handle_dialog_dismissal(e: ft.Event[ft.CupertinoAlertDialog]): page.add(ft.Text("Dialog dismissed")) - def handle_action_click(e): + def handle_action_click(e: ft.Event[ft.CupertinoDialogAction]): page.add(ft.Text(f"Action clicked: {e.control.content}")) page.pop_dialog() cupertino_alert_dialog = ft.CupertinoAlertDialog( title=ft.Text("Cupertino Alert Dialog"), content=ft.Text("Do you want to delete this file?"), - on_dismiss=dialog_dismissed, + on_dismiss=handle_dialog_dismissal, actions=[ ft.CupertinoDialogAction( content="Yes", diff --git a/python/controls/cupertino-alert-dialog/media/file-deletion-confirmation.png b/python/controls/cupertino-alert-dialog/media/file-deletion-confirmation.png new file mode 100644 index 00000000..f7dd2149 Binary files /dev/null and b/python/controls/cupertino-alert-dialog/media/file-deletion-confirmation.png differ diff --git a/python/controls/cupertino/cupertino-navigation/cupertino-appbar-example.py b/python/controls/cupertino-app-bar/basic.py similarity index 89% rename from python/controls/cupertino/cupertino-navigation/cupertino-appbar-example.py rename to python/controls/cupertino-app-bar/basic.py index 4d98aed7..e6f56be9 100644 --- a/python/controls/cupertino/cupertino-navigation/cupertino-appbar-example.py +++ b/python/controls/cupertino-app-bar/basic.py @@ -5,13 +5,14 @@ def main(page: ft.Page): page.theme_mode = ft.ThemeMode.LIGHT page.appbar = ft.CupertinoAppBar( - automatic_background_visibility=False, leading=ft.Icon(ft.Icons.PALETTE, color=ft.Colors.ON_SECONDARY), - bgcolor=ft.Colors.SECONDARY, + title=ft.Text("CupertinoAppBar Example"), trailing=ft.Icon(ft.Icons.WB_SUNNY_OUTLINED, color=ft.Colors.ON_SECONDARY), - middle=ft.Text("CupertinoAppBar Example"), + automatic_background_visibility=False, + bgcolor=ft.Colors.SECONDARY, brightness=ft.Brightness.LIGHT, ) + page.add(ft.Text("Body!")) diff --git a/python/controls/cupertino-app-bar/media/basic.png b/python/controls/cupertino-app-bar/media/basic.png new file mode 100644 index 00000000..898643d2 Binary files /dev/null and b/python/controls/cupertino-app-bar/media/basic.png differ diff --git a/python/controls/cupertino/cupertino-navigation/cupertino-appbar-theme-example.py b/python/controls/cupertino-app-bar/theme-mode-toggle.py similarity index 72% rename from python/controls/cupertino/cupertino-navigation/cupertino-appbar-theme-example.py rename to python/controls/cupertino-app-bar/theme-mode-toggle.py index 3abf57b3..5376c73d 100644 --- a/python/controls/cupertino/cupertino-navigation/cupertino-appbar-theme-example.py +++ b/python/controls/cupertino-app-bar/theme-mode-toggle.py @@ -4,35 +4,37 @@ def main(page: ft.Page): page.theme_mode = ft.ThemeMode.LIGHT - def toggle_theme_mode(e): + def handle_theme_mode_toggle(e: ft.Event[ft.IconButton]): page.theme_mode = ( ft.ThemeMode.DARK if page.theme_mode == ft.ThemeMode.LIGHT else ft.ThemeMode.LIGHT ) - lightMode.icon = ( + theme_mode_button.icon = ( ft.Icons.WB_SUNNY_OUTLINED if page.theme_mode == ft.ThemeMode.LIGHT else ft.Icons.WB_SUNNY ) page.update() - lightMode = ft.IconButton( - ( + theme_mode_button = ft.IconButton( + icon=( ft.Icons.WB_SUNNY_OUTLINED if page.theme_mode == ft.ThemeMode.LIGHT else ft.Icons.WB_SUNNY ), icon_color=ft.Colors.ON_INVERSE_SURFACE, - on_click=toggle_theme_mode, + on_click=handle_theme_mode_toggle, ) + page.appbar = ft.CupertinoAppBar( automatic_background_visibility=False, leading=ft.Icon(ft.Icons.PALETTE, color=ft.Colors.ON_INVERSE_SURFACE), bgcolor=ft.Colors.INVERSE_SURFACE, - trailing=lightMode, - middle=ft.Text("CupertinoAppBar Example", color=ft.Colors.ON_INVERSE_SURFACE), + trailing=theme_mode_button, + title=ft.Text("CupertinoAppBar Example", color=ft.Colors.ON_INVERSE_SURFACE), ) + page.add(ft.Text("Body!")) diff --git a/python/controls/cupertino/cupertino-buttons/cupertino-button-example.py b/python/controls/cupertino-button/basic.py similarity index 88% rename from python/controls/cupertino/cupertino-buttons/cupertino-button-example.py rename to python/controls/cupertino-button/basic.py index da6242fa..d25d6bea 100644 --- a/python/controls/cupertino/cupertino-buttons/cupertino-button-example.py +++ b/python/controls/cupertino-button/basic.py @@ -4,38 +4,38 @@ def main(page: ft.Page): page.add( ft.CupertinoButton( - content=ft.Text( - "Normal CupertinoButton", - color=ft.CupertinoColors.DESTRUCTIVE_RED, - ), bgcolor=ft.CupertinoColors.LIGHT_BACKGROUND_GRAY, opacity_on_click=0.3, on_click=lambda e: print("Normal CupertinoButton clicked!"), + content=ft.Text( + value="Normal CupertinoButton", + color=ft.CupertinoColors.DESTRUCTIVE_RED, + ), ), ft.CupertinoButton( - content=ft.Text("Filled CupertinoButton", color=ft.Colors.YELLOW), bgcolor=ft.Colors.PRIMARY, - alignment=ft.Alignment.top_left(), + alignment=ft.Alignment.TOP_LEFT, border_radius=ft.border_radius.all(15), opacity_on_click=0.5, on_click=lambda e: print("Filled CupertinoButton clicked!"), + content=ft.Text("Filled CupertinoButton", color=ft.Colors.YELLOW), ), ft.CupertinoButton( - content=ft.Text("Disabled CupertinoButton"), bgcolor=ft.Colors.PRIMARY, disabled=True, - alignment=ft.Alignment.top_left(), + alignment=ft.Alignment.TOP_LEFT, opacity_on_click=0.5, + content=ft.Text("Disabled CupertinoButton"), ), ft.ElevatedButton( adaptive=True, # a CupertinoButton will be rendered when running on apple-platform bgcolor=ft.CupertinoColors.SYSTEM_TEAL, content=ft.Row( - [ + tight=True, + controls=[ ft.Icon(name=ft.Icons.FAVORITE, color="pink"), ft.Text("ElevatedButton+adaptive"), ], - tight=True, ), ), ) diff --git a/python/controls/cupertino-button/media/basic.png b/python/controls/cupertino-button/media/basic.png new file mode 100644 index 00000000..0f29e96f Binary files /dev/null and b/python/controls/cupertino-button/media/basic.png differ diff --git a/python/controls/cupertino-button/media/index.png b/python/controls/cupertino-button/media/index.png new file mode 100644 index 00000000..9beffe16 Binary files /dev/null and b/python/controls/cupertino-button/media/index.png differ diff --git a/python/controls/cupertino/cupertino-input-and-selections/cupertino-checkbox-example.py b/python/controls/cupertino-checkbox/cupertino-material-and-adaptive.py similarity index 74% rename from python/controls/cupertino/cupertino-input-and-selections/cupertino-checkbox-example.py rename to python/controls/cupertino-checkbox/cupertino-material-and-adaptive.py index 7164078b..d010a057 100644 --- a/python/controls/cupertino/cupertino-input-and-selections/cupertino-checkbox-example.py +++ b/python/controls/cupertino-checkbox/cupertino-material-and-adaptive.py @@ -7,7 +7,7 @@ def main(page: ft.Page): ft.Checkbox(label="Material Checkbox", value=True), ft.Container(height=20), ft.Text( - "Adaptive Checkbox shows as CupertinoCheckbox on macOS and iOS and as Checkbox on other platforms:" + value="Adaptive Checkbox shows as CupertinoCheckbox on macOS and iOS and as Checkbox on other platforms:" ), ft.Checkbox(adaptive=True, label="Adaptive Checkbox", value=True), ) diff --git a/python/controls/cupertino-checkbox/media/cupertino-material-and-adaptive.png b/python/controls/cupertino-checkbox/media/cupertino-material-and-adaptive.png new file mode 100644 index 00000000..d2a36f76 Binary files /dev/null and b/python/controls/cupertino-checkbox/media/cupertino-material-and-adaptive.png differ diff --git a/python/controls/cupertino-checkbox/styled.py b/python/controls/cupertino-checkbox/styled.py new file mode 100644 index 00000000..c2bbe8a2 --- /dev/null +++ b/python/controls/cupertino-checkbox/styled.py @@ -0,0 +1,49 @@ +import flet as ft + + +def main(page: ft.Page): + page.theme_mode = ft.ThemeMode.LIGHT + + page.add( + ft.Column( + controls=[ + ft.CupertinoCheckbox( + label="Cupertino Checkbox tristate", + value=True, + tristate=True, + check_color=ft.Colors.GREY_900, + fill_color={ + ft.ControlState.HOVERED: ft.Colors.PINK_200, + ft.ControlState.PRESSED: ft.Colors.LIME_ACCENT_200, + ft.ControlState.SELECTED: ft.Colors.DEEP_ORANGE_200, + ft.ControlState.DEFAULT: ft.Colors.TEAL_200, + }, + ), + ft.CupertinoCheckbox( + label="Cupertino Checkbox circle border", + value=True, + shape=ft.CircleBorder(), + # scale=ft.Scale(2, alignment=ft.Alignment(-1, 0)), + ), + ft.CupertinoCheckbox( + label="Cupertino Checkbox border states", + value=True, + # v1 bug - border_side renders grey box + # border_side={ + # ft.ControlState.HOVERED: ft.BorderSide(width=5), + # ft.ControlState.DEFAULT: ft.BorderSide(width=3), + # ft.ControlState.FOCUSED: ft.BorderSide(), + # }, + # scale=ft.Scale(2, alignment=ft.Alignment(-0.9, 0)), + ), + ft.CupertinoCheckbox( + label="Cupertino Checkbox label position", + value=True, + label_position=ft.LabelPosition.LEFT, + ), + ] + ) + ) + + +ft.run(main) diff --git a/python/controls/cupertino/cupertino-dialogs-alerts-panels/cupertino-context-menu-example.py b/python/controls/cupertino-context-menu/basic.py similarity index 97% rename from python/controls/cupertino/cupertino-dialogs-alerts-panels/cupertino-context-menu-example.py rename to python/controls/cupertino-context-menu/basic.py index feffa53c..aa3a6db3 100644 --- a/python/controls/cupertino/cupertino-dialogs-alerts-panels/cupertino-context-menu-example.py +++ b/python/controls/cupertino-context-menu/basic.py @@ -1,7 +1,7 @@ import flet as ft -def main(page): +def main(page: ft.Page): page.horizontal_alignment = ft.CrossAxisAlignment.CENTER page.vertical_alignment = ft.MainAxisAlignment.CENTER diff --git a/python/controls/cupertino-context-menu/media/basic.gif b/python/controls/cupertino-context-menu/media/basic.gif new file mode 100644 index 00000000..88e60f2a Binary files /dev/null and b/python/controls/cupertino-context-menu/media/basic.gif differ diff --git a/python/controls/cupertino/cupertino-dialogs-alerts-panels/cupertino-date-picker-example.py b/python/controls/cupertino-date-picker/basic.py similarity index 59% rename from python/controls/cupertino/cupertino-dialogs-alerts-panels/cupertino-date-picker-example.py rename to python/controls/cupertino-date-picker/basic.py index c349cc04..0a8105ab 100644 --- a/python/controls/cupertino/cupertino-dialogs-alerts-panels/cupertino-date-picker-example.py +++ b/python/controls/cupertino-date-picker/basic.py @@ -1,31 +1,33 @@ +from datetime import datetime + import flet as ft -def main(page): +def main(page: ft.Page): page.horizontal_alignment = ft.CrossAxisAlignment.CENTER - d = ft.Text(f"chosen Time: ") - - def handle_date_change(e: ft.ControlEvent): - d.value = f"Chosen Date: {e.control.value.strftime('%Y-%m-%d %H:%M %p')}" + def handle_date_change(e: ft.Event[ft.CupertinoDatePicker]): + message.value = f"Chosen Date: {e.control.value.strftime('%Y-%m-%d %H:%M %p')}" page.update() cupertino_date_picker = ft.CupertinoDatePicker( + value=datetime.now(), date_picker_mode=ft.CupertinoDatePickerMode.DATE_AND_TIME, on_change=handle_date_change, ) + page.add( ft.CupertinoFilledButton( - "Open CupertinoDatePicker", + content="Open CupertinoDatePicker", on_click=lambda e: page.show_dialog( ft.CupertinoBottomSheet( - cupertino_date_picker, + content=cupertino_date_picker, height=216, padding=ft.Padding.only(top=6), ) ), ), - d, + message := ft.Text("Chosen Time: "), ) diff --git a/python/controls/cupertino-date-picker/media/basic.png b/python/controls/cupertino-date-picker/media/basic.png new file mode 100644 index 00000000..79f0fea7 Binary files /dev/null and b/python/controls/cupertino-date-picker/media/basic.png differ diff --git a/python/controls/cupertino/cupertino-buttons/cupertino-filled-button-example.py b/python/controls/cupertino-filled-button/basic.py similarity index 81% rename from python/controls/cupertino/cupertino-buttons/cupertino-filled-button-example.py rename to python/controls/cupertino-filled-button/basic.py index 2490d741..37191fbd 100644 --- a/python/controls/cupertino/cupertino-buttons/cupertino-filled-button-example.py +++ b/python/controls/cupertino-filled-button/basic.py @@ -4,7 +4,7 @@ def main(page: ft.Page): page.add( ft.CupertinoFilledButton( - content=ft.Text("CupertinoFilled"), + content=ft.Text("CupertinoFilledButton"), opacity_on_click=0.3, on_click=lambda e: print("CupertinoFilledButton clicked!"), ), diff --git a/python/controls/cupertino-filled-button/media/basic.png b/python/controls/cupertino-filled-button/media/basic.png new file mode 100644 index 00000000..fbfbe5e8 Binary files /dev/null and b/python/controls/cupertino-filled-button/media/basic.png differ diff --git a/python/controls/cupertino-filled-button/media/index.png b/python/controls/cupertino-filled-button/media/index.png new file mode 100644 index 00000000..fbfbe5e8 Binary files /dev/null and b/python/controls/cupertino-filled-button/media/index.png differ diff --git a/python/controls/cupertino-list-tile/media/notched.png b/python/controls/cupertino-list-tile/media/notched.png new file mode 100644 index 00000000..9dbb15b1 Binary files /dev/null and b/python/controls/cupertino-list-tile/media/notched.png differ diff --git a/python/controls/cupertino/cupertino-layout/cupertino-list-tile-example.py b/python/controls/cupertino-list-tile/notched.py similarity index 85% rename from python/controls/cupertino/cupertino-layout/cupertino-list-tile-example.py rename to python/controls/cupertino-list-tile/notched.py index 710901da..0693fc12 100644 --- a/python/controls/cupertino/cupertino-layout/cupertino-list-tile-example.py +++ b/python/controls/cupertino-list-tile/notched.py @@ -2,7 +2,7 @@ def main(page: ft.Page): - def tile_clicked(e): + def handle_tile_click(e: ft.Event[ft.CupertinoListTile]): print("Tile clicked") page.add( @@ -13,7 +13,7 @@ def tile_clicked(e): title=ft.Text("CupertinoListTile: notched = False"), subtitle=ft.Text("Subtitle"), trailing=ft.Icon(name=ft.CupertinoIcons.ALARM), - on_click=tile_clicked, + on_click=handle_tile_click, ), ft.CupertinoListTile( notched=True, @@ -22,7 +22,7 @@ def tile_clicked(e): title=ft.Text("CupertinoListTile: notched = True"), subtitle=ft.Text("Subtitle"), trailing=ft.Icon(name=ft.CupertinoIcons.ALARM), - on_click=tile_clicked, + on_click=handle_tile_click, ), ) diff --git a/python/controls/cupertino/cupertino-navigation/cupertino-navigation-bar-example.py b/python/controls/cupertino-navigation-bar/basic.py similarity index 94% rename from python/controls/cupertino/cupertino-navigation/cupertino-navigation-bar-example.py rename to python/controls/cupertino-navigation-bar/basic.py index 7f019452..247b7976 100644 --- a/python/controls/cupertino/cupertino-navigation/cupertino-navigation-bar-example.py +++ b/python/controls/cupertino-navigation-bar/basic.py @@ -3,6 +3,7 @@ def main(page: ft.Page): page.title = "CupertinoNavigationBar Example" + page.navigation_bar = ft.CupertinoNavigationBar( bgcolor=ft.Colors.AMBER_100, inactive_color=ft.Colors.GREY, @@ -26,7 +27,8 @@ def main(page: ft.Page): ), ], ) - page.add(ft.SafeArea(ft.Text("Body!"))) + + page.add(ft.SafeArea(content=ft.Text("Body!"))) ft.run(main) diff --git a/python/controls/cupertino-navigation-bar/media/basic.png b/python/controls/cupertino-navigation-bar/media/basic.png new file mode 100644 index 00000000..4f530a9f Binary files /dev/null and b/python/controls/cupertino-navigation-bar/media/basic.png differ diff --git a/python/controls/cupertino/cupertino-navigation/cupertino-navbar-wired.py b/python/controls/cupertino-navigation-bar/wired.py similarity index 84% rename from python/controls/cupertino/cupertino-navigation/cupertino-navbar-wired.py rename to python/controls/cupertino-navigation-bar/wired.py index 3e8dc059..771e8b74 100644 --- a/python/controls/cupertino/cupertino-navigation/cupertino-navbar-wired.py +++ b/python/controls/cupertino-navigation-bar/wired.py @@ -4,8 +4,7 @@ def main(page: ft.Page): page.title = "CupertinoNavigationBar Example" - def on_nav_change(e): - # print(f"on_nav_change: {e.control}") + def handle_nav_destination_change(e: ft.Event[ft.CupertinoNavigationBar]): if e.control.selected_index == 0: body.content.value = "Explore!" elif e.control.selected_index == 1: @@ -14,12 +13,11 @@ def on_nav_change(e): body.content.value = "Your Favorites!" page.update() - body = ft.SafeArea(ft.Text("Explore!")) page.navigation_bar = ft.CupertinoNavigationBar( bgcolor=ft.Colors.AMBER_100, inactive_color=ft.Colors.GREY, active_color=ft.Colors.BLACK, - on_change=on_nav_change, + on_change=handle_nav_destination_change, destinations=[ ft.NavigationBarDestination( icon=ft.Icons.EXPLORE_OUTLINED, @@ -38,7 +36,10 @@ def on_nav_change(e): ), ], ) - page.add(body) + + page.add( + body := ft.SafeArea(content=ft.Text("Explore!")), + ) ft.run(main) diff --git a/python/controls/cupertino/cupertino-dialogs-alerts-panels/cupertino-picker-example.py b/python/controls/cupertino-picker/fruit-selection.py similarity index 64% rename from python/controls/cupertino/cupertino-dialogs-alerts-panels/cupertino-picker-example.py rename to python/controls/cupertino-picker/fruit-selection.py index 98578795..ad38f6a3 100644 --- a/python/controls/cupertino/cupertino-dialogs-alerts-panels/cupertino-picker-example.py +++ b/python/controls/cupertino-picker/fruit-selection.py @@ -1,21 +1,22 @@ import flet as ft +FRUITS = [ + "Apple", + "Mango", + "Banana", + "Orange", + "Pineapple", + "Strawberry", +] -def main(page): + +def main(page: ft.Page): page.horizontal_alignment = ft.CrossAxisAlignment.CENTER selected_fruit_ref = ft.Ref[ft.Text]() - fruits = [ - "Apple", - "Mango", - "Banana", - "Orange", - "Pineapple", - "Strawberry", - ] - - def handle_picker_change(e): - selected_fruit_ref.current.value = fruits[int(e.data)] + + def handle_selection_change(e: ft.Event[ft.CupertinoPicker]): + selected_fruit_ref.current.value = FRUITS[int(e.data)] page.update() cupertino_picker = ft.CupertinoPicker( @@ -23,8 +24,8 @@ def handle_picker_change(e): magnification=1.22, squeeze=1.2, use_magnifier=True, - on_change=handle_picker_change, - controls=[ft.Text(value=f) for f in fruits], + on_change=handle_selection_change, + controls=[ft.Text(value=f) for f in FRUITS], ) page.add( @@ -33,11 +34,11 @@ def handle_picker_change(e): controls=[ ft.Text("Selected Fruit:", size=23), ft.TextButton( - content=ft.Text(value=fruits[3], ref=selected_fruit_ref, size=23), + content=ft.Text(value=FRUITS[3], ref=selected_fruit_ref, size=23), style=ft.ButtonStyle(color=ft.Colors.BLUE), on_click=lambda e: page.show_dialog( ft.CupertinoBottomSheet( - cupertino_picker, + content=cupertino_picker, height=216, padding=ft.Padding.only(top=6), ) diff --git a/python/controls/cupertino-picker/media/fruit-selection.gif b/python/controls/cupertino-picker/media/fruit-selection.gif new file mode 100644 index 00000000..2afbe781 Binary files /dev/null and b/python/controls/cupertino-picker/media/fruit-selection.gif differ diff --git a/python/controls/cupertino-radio/cupertino-material-and-adaptive.py b/python/controls/cupertino-radio/cupertino-material-and-adaptive.py new file mode 100644 index 00000000..66d36ffb --- /dev/null +++ b/python/controls/cupertino-radio/cupertino-material-and-adaptive.py @@ -0,0 +1,39 @@ +import flet as ft + + +def main(page: ft.Page): + def handle_button_click(e: ft.Event[ft.ElevatedButton]): + message.value = f"Your favorite color is: {group.value}" + page.update() + + page.add( + ft.Text("Select your favorite color:"), + group := ft.RadioGroup( + content=ft.Column( + controls=[ + ft.CupertinoRadio( + value="red", + label="Red - Cupertino Radio", + active_color=ft.Colors.RED, + inactive_color=ft.Colors.RED, + ), + ft.Radio( + value="green", + label="Green - Material Radio", + fill_color=ft.Colors.GREEN, + ), + ft.Radio( + value="blue", + label="Blue - Adaptive Radio", + adaptive=True, + active_color=ft.Colors.BLUE, + ), + ] + ) + ), + ft.ElevatedButton(content="Submit", on_click=handle_button_click), + message := ft.Text(), + ) + + +ft.run(main) diff --git a/python/controls/cupertino-radio/media/cupertino-material-and-adaptive.png b/python/controls/cupertino-radio/media/cupertino-material-and-adaptive.png new file mode 100644 index 00000000..11c8eb3b Binary files /dev/null and b/python/controls/cupertino-radio/media/cupertino-material-and-adaptive.png differ diff --git a/python/controls/cupertino/cupertino-buttons/cupertino-segmented-button-example.py b/python/controls/cupertino-segmented-button/basic.py similarity index 68% rename from python/controls/cupertino/cupertino-buttons/cupertino-segmented-button-example.py rename to python/controls/cupertino-segmented-button/basic.py index 72e2a193..0dcd7d35 100644 --- a/python/controls/cupertino/cupertino-buttons/cupertino-segmented-button-example.py +++ b/python/controls/cupertino-segmented-button/basic.py @@ -1,7 +1,7 @@ import flet as ft -def main(page): +def main(page: ft.Page): page.theme_mode = ft.ThemeMode.LIGHT page.add( @@ -9,18 +9,18 @@ def main(page): selected_index=1, selected_color=ft.Colors.RED_400, on_change=lambda e: print(f"selected_index: {e.data}"), + padding=ft.Padding.symmetric(vertical=20, horizontal=50), controls=[ ft.Text("One"), ft.Container( - padding=ft.padding.symmetric(10, 30), + padding=ft.Padding.symmetric(vertical=10, horizontal=30), content=ft.Text("Two"), ), ft.Container( - padding=ft.padding.symmetric(5, 10), + padding=ft.Padding.symmetric(vertical=5, horizontal=10), content=ft.Text("Three"), ), ], - padding=ft.padding.symmetric(20, 50), ), ) diff --git a/python/controls/cupertino-segmented-button/media/basic.gif b/python/controls/cupertino-segmented-button/media/basic.gif new file mode 100644 index 00000000..8811892f Binary files /dev/null and b/python/controls/cupertino-segmented-button/media/basic.gif differ diff --git a/python/controls/cupertino-segmented-button/segments-padding.py b/python/controls/cupertino-segmented-button/segments-padding.py new file mode 100644 index 00000000..b7879b6e --- /dev/null +++ b/python/controls/cupertino-segmented-button/segments-padding.py @@ -0,0 +1,63 @@ +import flet as ft + + +def main(page: ft.Page): + page.theme_mode = ft.ThemeMode.LIGHT + + def handle_vertical_change(e: ft.Event[ft.Slider]): + segmented_button.controls[1].padding = ft.Padding.only( + top=e.control.value, bottom=e.control.value + ) + page.update() + + def handle_horizontal_change(e: ft.Event[ft.Slider]): + segmented_button.controls[2].padding = ft.Padding.only( + left=e.control.value, right=e.control.value + ) + page.update() + + page.add( + segmented_button := ft.CupertinoSegmentedButton( + selected_index=1, + selected_color=ft.Colors.RED_400, + unselected_color=ft.Colors.GREY_400, + on_change=lambda e: print(f"selected_index: {e.data}"), + controls=[ + ft.Text("All"), + ft.Container( + padding=ft.Padding.symmetric(vertical=30, horizontal=0), + content=ft.Text("None"), + ), + ft.Container( + padding=ft.Padding.symmetric(vertical=0, horizontal=30), + content=ft.Text("Some"), + ), + ], + ), + ft.Text("Vertical padding button 1: "), + ft.Slider( + label="{value}", + min=0, + max=50, + divisions=50, + value=30, + on_change=handle_vertical_change, + ), + ft.Text("Horizontal padding button 2:"), + ft.Slider( + label="{value}", + min=0, + max=50, + divisions=50, + value=30, + on_change=handle_horizontal_change, + ), + ft.Text( + value="*note that padding changes to one segment can effect padding on other segments*", + theme_style=ft.TextThemeStyle.LABEL_MEDIUM, + color=ft.Colors.ORANGE_ACCENT, + ), + ) + + +ft.run(main) diff --git a/python/controls/cupertino/cupertino-input-and-selections/cupertino-slider-example.py b/python/controls/cupertino-slider/handling-events.py similarity index 82% rename from python/controls/cupertino/cupertino-input-and-selections/cupertino-slider-example.py rename to python/controls/cupertino-slider/handling-events.py index 0dc02a23..01b4c31b 100644 --- a/python/controls/cupertino/cupertino-input-and-selections/cupertino-slider-example.py +++ b/python/controls/cupertino-slider/handling-events.py @@ -6,15 +6,15 @@ def main(page: ft.Page): page.vertical_alignment = ft.MainAxisAlignment.CENTER page.theme_mode = ft.ThemeMode.LIGHT - def handle_change_start(e): + def handle_change_start(e: ft.Event[ft.CupertinoSlider]): slider_status.value = "Sliding" page.update() - def handle_change(e): + def handle_change(e: ft.Event[ft.CupertinoSlider]): slider_value.value = str(e.control.value) page.update() - def handle_change_end(e): + def handle_change_end(e: ft.Event[ft.CupertinoSlider]): slider_status.value = "Finished sliding" page.update() diff --git a/python/controls/cupertino-slider/media/handling-events.gif b/python/controls/cupertino-slider/media/handling-events.gif new file mode 100644 index 00000000..6dcc4c70 Binary files /dev/null and b/python/controls/cupertino-slider/media/handling-events.gif differ diff --git a/python/controls/cupertino/cupertino-buttons/cupertino-sliding-segmented-button.py b/python/controls/cupertino-sliding-segmented-button/basic.py similarity index 51% rename from python/controls/cupertino/cupertino-buttons/cupertino-sliding-segmented-button.py rename to python/controls/cupertino-sliding-segmented-button/basic.py index cb029b46..94100bf7 100644 --- a/python/controls/cupertino/cupertino-buttons/cupertino-sliding-segmented-button.py +++ b/python/controls/cupertino-sliding-segmented-button/basic.py @@ -1,19 +1,20 @@ import flet as ft -def main(page): - page.title = "CupertinoSlidingSegmentedButton example" +def main(page: ft.Page): + page.title = "CupertinoSlidingSegmentedButton Example" page.theme_mode = ft.ThemeMode.LIGHT - def handle_change(e): - print(f"selected_index: {e.data}") - page.show_dialog(ft.SnackBar(ft.Text(f"segment {int(e.data) + 1} chosen"))) + def handle_selection_change(e: ft.Event[ft.CupertinoSlidingSegmentedButton]): + page.show_dialog( + ft.SnackBar(ft.Text(f"Segment {e.control.selected_index + 1} was chosen!")) + ) page.add( ft.CupertinoSlidingSegmentedButton( selected_index=1, thumb_color=ft.Colors.BLUE_400, - on_change=handle_change, + on_change=handle_selection_change, controls=[ ft.Text("One"), ft.Text("Two"), diff --git a/python/controls/cupertino-sliding-segmented-button/media/basic.gif b/python/controls/cupertino-sliding-segmented-button/media/basic.gif new file mode 100644 index 00000000..98d35551 Binary files /dev/null and b/python/controls/cupertino-sliding-segmented-button/media/basic.gif differ diff --git a/python/controls/cupertino/cupertino-input-and-selections/cupertino-switch-example.py b/python/controls/cupertino-switch/cupertino-material-and-adaptive.py similarity index 84% rename from python/controls/cupertino/cupertino-input-and-selections/cupertino-switch-example.py rename to python/controls/cupertino-switch/cupertino-material-and-adaptive.py index fc3f1851..b6849d3a 100644 --- a/python/controls/cupertino/cupertino-input-and-selections/cupertino-switch-example.py +++ b/python/controls/cupertino-switch/cupertino-material-and-adaptive.py @@ -16,7 +16,7 @@ def main(page: ft.Page): ), ft.Container(height=20), ft.Text( - "Adaptive Switch shows as CupertinoSwitch on macOS and iOS and as Switch on other platforms:" + value="Adaptive Switch shows as CupertinoSwitch on macOS and iOS and as Switch on other platforms:" ), ft.Switch( adaptive=True, diff --git a/python/controls/cupertino-switch/media/cupertino-material-and-adaptive.gif b/python/controls/cupertino-switch/media/cupertino-material-and-adaptive.gif new file mode 100644 index 00000000..f1719447 Binary files /dev/null and b/python/controls/cupertino-switch/media/cupertino-material-and-adaptive.gif differ diff --git a/python/controls/cupertino/cupertino-input-and-selections/cupertino-textfield-example.py b/python/controls/cupertino-textfield/cupertino-material-and-adaptive.py similarity index 99% rename from python/controls/cupertino/cupertino-input-and-selections/cupertino-textfield-example.py rename to python/controls/cupertino-textfield/cupertino-material-and-adaptive.py index 0745b5fe..c579381b 100644 --- a/python/controls/cupertino/cupertino-input-and-selections/cupertino-textfield-example.py +++ b/python/controls/cupertino-textfield/cupertino-material-and-adaptive.py @@ -2,7 +2,6 @@ def main(page: ft.Page): - page.add( ft.TextField( label="Material text field", diff --git a/python/controls/cupertino-textfield/media/cupertino-material-and-adaptive.png b/python/controls/cupertino-textfield/media/cupertino-material-and-adaptive.png new file mode 100644 index 00000000..73801427 Binary files /dev/null and b/python/controls/cupertino-textfield/media/cupertino-material-and-adaptive.png differ diff --git a/python/controls/cupertino/cupertino-dialogs-alerts-panels/cupertino-time-picker-example.py b/python/controls/cupertino-timer-picker/basic.py similarity index 89% rename from python/controls/cupertino/cupertino-dialogs-alerts-panels/cupertino-time-picker-example.py rename to python/controls/cupertino-timer-picker/basic.py index a5d36c63..b350c4ba 100644 --- a/python/controls/cupertino/cupertino-dialogs-alerts-panels/cupertino-time-picker-example.py +++ b/python/controls/cupertino-timer-picker/basic.py @@ -7,16 +7,14 @@ def main(page: ft.Page): timer_picker_value_ref = ft.Ref[ft.Text]() - def handle_timer_picker_change(e): - + def handle_timer_picker_change(e: ft.Event[ft.CupertinoTimerPicker]): timer_picker_value_ref.current.value = time.strftime( "%H:%M:%S", time.gmtime(e.data.in_seconds) ) # timer_picker_value_ref.current.value = f"{e.data.in_hours}:{(e.data.in_minutes % 60)}:{(e.data.in_seconds % 60) % 60}" - page.update() - cupertino_timer_picker = ft.CupertinoTimerPicker( + timer_picker = ft.CupertinoTimerPicker( value=300, second_interval=10, minute_interval=1, @@ -38,7 +36,7 @@ def handle_timer_picker_change(e): ), on_click=lambda e: page.show_dialog( ft.CupertinoBottomSheet( - cupertino_timer_picker, + content=timer_picker, height=216, padding=ft.Padding.only(top=6), ) diff --git a/python/controls/cupertino-timer-picker/media/basic.gif b/python/controls/cupertino-timer-picker/media/basic.gif new file mode 100644 index 00000000..75ac9f45 Binary files /dev/null and b/python/controls/cupertino-timer-picker/media/basic.gif differ diff --git a/python/controls/cupertino/cupertino-buttons/cupertino-segmented-button-padding.py b/python/controls/cupertino/cupertino-buttons/cupertino-segmented-button-padding.py deleted file mode 100644 index a8fab563..00000000 --- a/python/controls/cupertino/cupertino-buttons/cupertino-segmented-button-padding.py +++ /dev/null @@ -1,67 +0,0 @@ -import flet as ft - - -def main(page): - page.theme_mode = ft.ThemeMode.LIGHT - - def handle_vertical_change(e): - csb.controls[1].padding = ft.padding.only( - top=e.control.value, bottom=e.control.value - ) - page.update() - - def handle_horizontal_change(e): - csb.controls[2].padding = ft.padding.only( - left=e.control.value, right=e.control.value - ) - page.update() - - csb = ft.CupertinoSegmentedButton( - selected_index=1, - selected_color=ft.Colors.RED_400, - unselected_color=ft.Colors.GREY_400, - on_change=lambda e: print(f"selected_index: {e.data}"), - controls=[ - ft.Text("All"), - ft.Container( - padding=ft.padding.symmetric(30, 0), - content=ft.Text("None"), - ), - ft.Container( - padding=ft.padding.symmetric(0, 30), - content=ft.Text("Some"), - ), - ], - ) - - vs = ft.Slider( - label="{value}", - min=0, - max=50, - divisions=50, - value=30, - on_change=handle_vertical_change, - ) - hs = ft.Slider( - label="{value}", - min=0, - max=50, - divisions=50, - value=30, - on_change=handle_horizontal_change, - ) - page.add( - csb, - ft.Text("Vertical padding button 1: "), - vs, - ft.Text("Horizontal padding button 2:"), - hs, - ft.Text( - "*note that padding changes to one segment can effect padding on other segments*", - style=ft.TextThemeStyle.LABEL_MEDIUM, - color=ft.Colors.ORANGE_ACCENT, - ), - ) - - -ft.run(main) diff --git a/python/controls/cupertino/cupertino-input-and-selections/cupertino-checkbox-properties.py b/python/controls/cupertino/cupertino-input-and-selections/cupertino-checkbox-properties.py deleted file mode 100644 index 4255d89f..00000000 --- a/python/controls/cupertino/cupertino-input-and-selections/cupertino-checkbox-properties.py +++ /dev/null @@ -1,47 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - page.theme_mode = ft.ThemeMode.LIGHT - c = ft.Column( - [ - ft.CupertinoCheckbox( - label="Cupertino Checkbox tristate", - value=True, - tristate=True, - fill_color={ - ft.ControlState.HOVERED: ft.Colors.PINK_200, - ft.ControlState.PRESSED: ft.Colors.LIME_ACCENT_200, - ft.ControlState.SELECTED: ft.Colors.DEEP_ORANGE_200, - ft.ControlState.DEFAULT: ft.Colors.TEAL_200, - }, - check_color=ft.Colors.GREY_900, - ), - ft.CupertinoCheckbox( - label="Cupertino Checkbox circle border", - value=True, - shape=ft.CircleBorder(), - # scale=ft.Scale(2, alignment=ft.Alignment(-1, 0)), - ), - ft.CupertinoCheckbox( - label="Cupertino Checkbox border states", - value=True, - # v1 bug - border_side renders grey box - # border_side={ - # ft.ControlState.HOVERED: ft.BorderSide(width=5), - # ft.ControlState.DEFAULT: ft.BorderSide(width=3), - # ft.ControlState.FOCUSED: ft.BorderSide(), - # }, - # scale=ft.Scale(2, alignment=ft.Alignment(-0.9, 0)), - ), - ft.CupertinoCheckbox( - label="Cupertino Checkbox label position", - value=True, - label_position=ft.LabelPosition.LEFT, - ), - ] - ) - page.add(c) - - -ft.run(main) diff --git a/python/controls/cupertino/cupertino-input-and-selections/cupertino-radio-example.py b/python/controls/cupertino/cupertino-input-and-selections/cupertino-radio-example.py deleted file mode 100644 index 07cb1f13..00000000 --- a/python/controls/cupertino/cupertino-input-and-selections/cupertino-radio-example.py +++ /dev/null @@ -1,38 +0,0 @@ -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(content="Submit", on_click=button_clicked) - cg = ft.RadioGroup( - content=ft.Column( - [ - ft.CupertinoRadio( - value="red", - label="Red - Cupertino Radio", - active_color=ft.Colors.RED, - inactive_color=ft.Colors.RED, - ), - ft.Radio( - value="green", - label="Green - Material Radio", - fill_color=ft.Colors.GREEN, - ), - ft.Radio( - value="blue", - label="Blue - Adaptive Radio", - adaptive=True, - active_color=ft.Colors.BLUE, - ), - ] - ) - ) - - page.add(ft.Text("Select your favorite color:"), cg, b, t) - - -ft.run(main) diff --git a/python/controls/layout/data-table/simple-datatable.py b/python/controls/data-table/basic.py similarity index 83% rename from python/controls/layout/data-table/simple-datatable.py rename to python/controls/data-table/basic.py index 3f694c50..1f504316 100644 --- a/python/controls/layout/data-table/simple-datatable.py +++ b/python/controls/data-table/basic.py @@ -5,9 +5,9 @@ def main(page: ft.Page): page.add( ft.DataTable( columns=[ - ft.DataColumn(ft.Text("First name")), - ft.DataColumn(ft.Text("Last name")), - ft.DataColumn(ft.Text("Age"), numeric=True), + ft.DataColumn(label=ft.Text("First name")), + ft.DataColumn(label=ft.Text("Last name")), + ft.DataColumn(label=ft.Text("Age"), numeric=True), ], rows=[ ft.DataRow( diff --git a/python/controls/data-table/handling-events.py b/python/controls/data-table/handling-events.py new file mode 100644 index 00000000..8ab18599 --- /dev/null +++ b/python/controls/data-table/handling-events.py @@ -0,0 +1,82 @@ +import flet as ft + + +def main(page: ft.Page): + def handle_row_selection_change(e: ft.Event[ft.DataRow]): + match e.control.data: + case 1: + row1.selected = not row1.selected + case 2: + row2.selected = not row2.selected + case 3: + row3.selected = not row3.selected + page.update() + + def handle_column_sort(e: ft.DataColumnSortEvent): + match e.control.data: + case 1: + print(f"{e.column_index}, {e.ascending}") + # table.sort_column_index = 1 + table.sort_ascending = e.ascending + case 2: + print(f"{e.column_index}, {e.ascending}") + # table.sort_column_index = 2 + table.sort_ascending = e.ascending + page.update() + + page.add( + table := ft.DataTable( + width=700, + bgcolor=ft.Colors.TEAL_ACCENT_200, + border=ft.Border.all(2, ft.Colors.RED_ACCENT_200), + border_radius=10, + vertical_lines=ft.border.BorderSide(3, ft.Colors.BLUE_600), + horizontal_lines=ft.border.BorderSide(1, ft.Colors.GREEN_600), + sort_column_index=0, + sort_ascending=True, + heading_row_color=ft.Colors.BLACK12, + heading_row_height=100, + data_row_color={ft.ControlState.HOVERED: "0x30FF0000"}, + show_checkbox_column=True, + divider_thickness=0, + column_spacing=200, + columns=[ + ft.DataColumn( + label=ft.Text("Column 1"), + tooltip="This is the first column", + data=1, + on_sort=handle_column_sort, + ), + ft.DataColumn( + label=ft.Text("Column 2"), + tooltip="This is a second column", + numeric=True, + data=2, + on_sort=handle_column_sort, + ), + ], + rows=[ + row1 := ft.DataRow( + cells=[ft.DataCell(ft.Text("A")), ft.DataCell(ft.Text("1"))], + selected=True, + on_select_change=handle_row_selection_change, + data=1, + ), + row2 := ft.DataRow( + cells=[ft.DataCell(ft.Text("B")), ft.DataCell(ft.Text("2"))], + selected=False, + on_select_change=handle_row_selection_change, + data=2, + ), + row3 := ft.DataRow( + cells=[ft.DataCell(ft.Text("C")), ft.DataCell(ft.Text("3"))], + selected=False, + on_select_change=handle_row_selection_change, + data=3, + ), + ], + ) + ) + + +ft.run(main) diff --git a/python/controls/data-table/media/basic.png b/python/controls/data-table/media/basic.png new file mode 100644 index 00000000..2333349a Binary files /dev/null and b/python/controls/data-table/media/basic.png differ diff --git a/python/controls/data-table/media/sortable-and-selectable.png b/python/controls/data-table/media/sortable-and-selectable.png new file mode 100644 index 00000000..69d6346e Binary files /dev/null and b/python/controls/data-table/media/sortable-and-selectable.png differ diff --git a/python/controls/layout/data-table/datatable-no-source.py b/python/controls/data-table/sortable-and-selectable.py similarity index 78% rename from python/controls/layout/data-table/datatable-no-source.py rename to python/controls/data-table/sortable-and-selectable.py index 78e6707a..13330ed8 100644 --- a/python/controls/layout/data-table/datatable-no-source.py +++ b/python/controls/data-table/sortable-and-selectable.py @@ -14,17 +14,17 @@ def main(page: ft.Page): sort_ascending=True, heading_row_color=ft.Colors.BLACK12, heading_row_height=100, - data_row_color={"hovered": "0x30FF0000"}, + data_row_color={ft.ControlState.HOVERED: "0x30FF0000"}, show_checkbox_column=True, divider_thickness=0, column_spacing=200, columns=[ ft.DataColumn( - ft.Text("Column 1"), + label=ft.Text("Column 1"), on_sort=lambda e: print(f"{e.column_index}, {e.ascending}"), ), ft.DataColumn( - ft.Text("Column 2"), + label=ft.Text("Column 2"), tooltip="This is a second column", numeric=True, on_sort=lambda e: print(f"{e.column_index}, {e.ascending}"), @@ -32,9 +32,9 @@ def main(page: ft.Page): ], rows=[ ft.DataRow( - [ft.DataCell(ft.Text("A")), ft.DataCell(ft.Text("1"))], + cells=[ft.DataCell(ft.Text("A")), ft.DataCell(ft.Text("1"))], selected=True, - on_select_changed=lambda e: print(f"row select changed: {e.data}"), + on_select_change=lambda e: print(f"row select changed: {e.data}"), ), ft.DataRow([ft.DataCell(ft.Text("B")), ft.DataCell(ft.Text("2"))]), ], diff --git a/python/controls/dialogs-alerts-panels/date-picker/date-picker-basic.py b/python/controls/date-picker/basic.py similarity index 78% rename from python/controls/dialogs-alerts-panels/date-picker/date-picker-basic.py rename to python/controls/date-picker/basic.py index b2dbce88..b7419572 100644 --- a/python/controls/dialogs-alerts-panels/date-picker/date-picker-basic.py +++ b/python/controls/date-picker/basic.py @@ -5,15 +5,15 @@ def main(page: ft.Page): page.horizontal_alignment = ft.CrossAxisAlignment.CENTER - def handle_change(e): + def handle_change(e: ft.Event[ft.DatePicker]): page.add(ft.Text(f"Date changed: {e.control.value.strftime('%m/%d/%Y')}")) - def handle_dismissal(e): - page.add(ft.Text(f"DatePicker dismissed")) + def handle_dismissal(e: ft.Event[ft.DatePicker]): + page.add(ft.Text("DatePicker dismissed")) page.add( ft.ElevatedButton( - "Pick date", + content="Pick date", icon=ft.Icons.CALENDAR_MONTH, on_click=lambda e: page.show_dialog( ft.DatePicker( diff --git a/python/controls/date-picker/media/basic.png b/python/controls/date-picker/media/basic.png new file mode 100644 index 00000000..392bf883 Binary files /dev/null and b/python/controls/date-picker/media/basic.png differ diff --git a/python/controls/dialogs-alerts-panels/snack-bar/simple-snack.py b/python/controls/dialogs-alerts-panels/snack-bar/simple-snack.py deleted file mode 100644 index cbea5217..00000000 --- a/python/controls/dialogs-alerts-panels/snack-bar/simple-snack.py +++ /dev/null @@ -1,16 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - counter = 0 - - def on_click(e): - nonlocal counter - page.show_dialog(ft.SnackBar(ft.Text(f"Counter value at {counter}"))) - counter += 1 - page.update() - - page.add(ft.ElevatedButton("Open SnackBar", on_click=on_click)) - - -ft.run(main) diff --git a/python/controls/dialogs-alerts-panels/snack-bar/snack-counter-example.py b/python/controls/dialogs-alerts-panels/snack-bar/snack-counter-example.py deleted file mode 100644 index 3a596cc8..00000000 --- a/python/controls/dialogs-alerts-panels/snack-bar/snack-counter-example.py +++ /dev/null @@ -1,37 +0,0 @@ -import flet as ft - - -class Data: - def __init__(self) -> None: - self.counter = 0 - - def increment(self): - self.counter += 1 - - def decrement(self): - self.counter -= 1 - - -d = Data() - - -def main(page: ft.Page): - page.title = "SnackBar examples" - - sb = ft.SnackBar( - content=ft.Text(f"You did it!"), - action="Undo it!", - on_action=lambda e: d.decrement(), - ) - - def on_click(e): - d.increment() - sb.content.value = f"You did it x {d.counter}" - if not sb.open: - page.show_dialog(sb) - page.update() - - page.add(ft.ElevatedButton("Open SnackBar", on_click=on_click)) - - -ft.run(main) diff --git a/python/controls/layout/dismissable/dismissable-listview.py b/python/controls/dismissible/dismissable-list-tiles.py similarity index 80% rename from python/controls/layout/dismissable/dismissable-listview.py rename to python/controls/dismissible/dismissable-list-tiles.py index e5ff5836..39fd7184 100644 --- a/python/controls/layout/dismissable/dismissable-listview.py +++ b/python/controls/dismissible/dismissable-list-tiles.py @@ -1,8 +1,8 @@ import flet as ft -def main(page): - def handle_dlg_action_clicked(e): +def main(page: ft.Page): + def handle_dialog_action_click(e: ft.Event[ft.TextButton]): page.pop_dialog() dlg.data.confirm_dismiss(e.control.data) @@ -11,15 +11,15 @@ def handle_dlg_action_clicked(e): title=ft.Text("Please confirm"), content=ft.Text("Do you really want to delete this item?"), actions=[ - ft.TextButton("Yes", data=True, on_click=handle_dlg_action_clicked), - ft.TextButton("No", data=False, on_click=handle_dlg_action_clicked), + ft.TextButton("Yes", data=True, on_click=handle_dialog_action_click), + ft.TextButton("No", data=False, on_click=handle_dialog_action_click), ], actions_alignment=ft.MainAxisAlignment.CENTER, ) def handle_confirm_dismiss(e: ft.DismissibleDismissEvent): if e.direction == ft.DismissDirection.END_TO_START: # right-to-left slide - # save current dismissible to dialog's data, for confirmation in handle_dlg_action_clicked + # save current dismissible to dialog's data, for confirmation in handle_dialog_action_click dlg.data = e.control page.show_dialog(dlg) else: # left-to-right slide @@ -30,9 +30,7 @@ def handle_dismiss(e): page.update() def handle_update(e: ft.DismissibleUpdateEvent): - print( - f"Update - direction: {e.direction}, progress: {e.progress}, reached: {e.reached}, previous_reached: {e.previous_reached}" - ) + print(e) page.add( ft.ListView( diff --git a/python/controls/dismissible/media/dismissable-list-tiles.gif b/python/controls/dismissible/media/dismissable-list-tiles.gif new file mode 100644 index 00000000..bce1e453 Binary files /dev/null and b/python/controls/dismissible/media/dismissable-list-tiles.gif differ diff --git a/python/controls/layout/divider/divider-horiz.py b/python/controls/divider/basic.py similarity index 65% rename from python/controls/layout/divider/divider-horiz.py rename to python/controls/divider/basic.py index 0add2551..e910379c 100644 --- a/python/controls/layout/divider/divider-horiz.py +++ b/python/controls/divider/basic.py @@ -2,34 +2,35 @@ def main(page: ft.Page): - page.add( ft.Column( - [ + spacing=0, + expand=True, + controls=[ ft.Container( - bgcolor=ft.Colors.AMBER, - alignment=ft.Alignment.center(), expand=True, + bgcolor=ft.Colors.AMBER, + alignment=ft.Alignment.CENTER, ), ft.Divider(), ft.Container( - bgcolor=ft.Colors.PINK, alignment=ft.Alignment.center(), expand=True + expand=True, + bgcolor=ft.Colors.PINK, + alignment=ft.Alignment.CENTER, ), - ft.Divider(height=1, color="white"), + ft.Divider(height=1, color=ft.Colors.WHITE), ft.Container( - bgcolor=ft.Colors.BLUE_300, - alignment=ft.Alignment.center(), expand=True, + bgcolor=ft.Colors.BLUE_300, + alignment=ft.Alignment.CENTER, ), ft.Divider(height=9, thickness=3), ft.Container( - bgcolor=ft.Colors.DEEP_PURPLE_200, - alignment=ft.Alignment.center(), expand=True, + bgcolor=ft.Colors.DEEP_PURPLE_200, + alignment=ft.Alignment.CENTER, ), ], - spacing=0, - expand=True, ), ) diff --git a/python/controls/divider/media/basic.png b/python/controls/divider/media/basic.png new file mode 100644 index 00000000..c97e78cd Binary files /dev/null and b/python/controls/divider/media/basic.png differ diff --git a/python/controls/utility/drag-target-draggable/dragabble-target-example.py b/python/controls/drag-target-and-draggable/drag-and-drop-containers.py similarity index 86% rename from python/controls/utility/drag-target-draggable/dragabble-target-example.py rename to python/controls/drag-target-and-draggable/drag-and-drop-containers.py index 1aa72118..7bc86902 100644 --- a/python/controls/utility/drag-target-draggable/dragabble-target-example.py +++ b/python/controls/drag-target-and-draggable/drag-and-drop-containers.py @@ -2,30 +2,27 @@ def main(page: ft.Page): - page.title = "Drag and Drop example" - - def drag_will_accept(e: ft.DragWillAcceptEvent): - + def handle_drag_will_accept(e: ft.DragWillAcceptEvent): e.control.content.border = ft.Border.all( 2, ft.Colors.BLACK45 if e.accept else ft.Colors.RED ) e.control.update() - def drag_accept(e: ft.DragTargetEvent): + def handle_drag_accept(e: ft.DragTargetEvent): 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: ft.DragTargetLeaveEvent): + def handle_drag_leave(e: ft.DragTargetLeaveEvent): e.control.content.border = None e.control.update() page.add( ft.Row( - [ + controls=[ ft.Column( - [ + controls=[ ft.Draggable( group="color", content=ft.Container( @@ -64,15 +61,15 @@ def drag_leave(e: ft.DragTargetLeaveEvent): ft.Container(width=100), ft.DragTarget( group="color", + on_will_accept=handle_drag_will_accept, + on_accept=handle_drag_accept, + on_leave=handle_drag_leave, 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, ), ] ) diff --git a/python/controls/drag-target-and-draggable/media/drag-and-drop-containers.gif b/python/controls/drag-target-and-draggable/media/drag-and-drop-containers.gif new file mode 100644 index 00000000..96f639e4 Binary files /dev/null and b/python/controls/drag-target-and-draggable/media/drag-and-drop-containers.gif differ diff --git a/python/controls/utility/drag-target-draggable/drag-drop-ordering.py b/python/controls/drag-target-and-draggable/ordering.py similarity index 82% rename from python/controls/utility/drag-target-draggable/drag-drop-ordering.py rename to python/controls/drag-target-and-draggable/ordering.py index e83ec25f..6844dca8 100644 --- a/python/controls/utility/drag-target-draggable/drag-drop-ordering.py +++ b/python/controls/drag-target-and-draggable/ordering.py @@ -1,18 +1,13 @@ -import logging import flet as ft -# logging.basicConfig(level=logging.INFO) -# print("flet version: ", flet.version.version) - class ItemList(ft.Draggable): - def __init__(self, page: ft.Page, list_row, list_name, color): # self.page: ft.Page = page self.list_row = list_row self.list_name: str = list_name self.list_color = color - self.items = ft.Column([], tight=True, spacing=5) + self.items = ft.Column(tight=True, spacing=5) self.end_indicator = ft.Container( bgcolor=ft.Colors.BLACK26, border_radius=ft.border_radius.all(30), @@ -25,46 +20,46 @@ def __init__(self, page: ft.Page, list_row, list_name, color): width=200, height=50, bgcolor=ft.Colors.WHITE, - on_submit=self.add_item_handler, + on_submit=self.handle_item_addition, ) self.target = ft.DragTarget( group="items", + data=self, + on_accept=self.item_drag_accept, + on_will_accept=self.item_drag_will_accept, + on_leave=self.item_drag_leave, content=ft.DragTarget( group="lists", + data=self, + on_accept=self.handle_drag_accept, + on_will_accept=self.handle_drag_will_accept, + on_leave=self.handle_drag_leave, content=ft.Container( + border=ft.Border.all(2, ft.Colors.BLACK12), + border_radius=ft.border_radius.all(15), + bgcolor=self.list_color, + padding=ft.Padding.all(20), content=ft.Column( - [ + spacing=4, + tight=True, + expand=True, + controls=[ self.item_name, ft.TextButton( - "Add Item", + content="Add Item", icon=ft.Icons.ADD, - on_click=self.add_item_handler, + on_click=self.handle_item_addition, ), self.items, self.end_indicator, ], - spacing=4, - tight=True, - expand=True, ), - border=ft.border.all(2, ft.Colors.BLACK12), - border_radius=ft.border_radius.all(15), - bgcolor=self.list_color, - padding=ft.Padding.all(20), ), - data=self, - on_accept=self.drag_accept, - on_will_accept=self.drag_will_accept, - on_leave=self.drag_leave, ), - data=self, - on_accept=self.item_drag_accept, - on_will_accept=self.item_drag_will_accept, - on_leave=self.item_drag_leave, ) super().__init__(group="lists", content=self.target, data=self) - def add_item_handler(self, e): + def handle_item_addition(self, e): self.add_item() def add_item( @@ -73,7 +68,6 @@ def add_item( chosen_control: ft.Draggable = None, swap_control: ft.Draggable = None, ): - controls_list = [x.controls[1] for x in self.items.controls] to_index = ( controls_list.index(swap_control) if swap_control in controls_list else None @@ -84,12 +78,12 @@ def add_item( else None ) control_to_add = ft.Column( - [ + controls=[ ft.Container( bgcolor=ft.Colors.BLACK26, border_radius=ft.border_radius.all(30), height=3, - alignment=ft.Alignment.center_right(), + alignment=ft.Alignment.CENTER_RIGHT, width=200, opacity=0.0, ) @@ -98,28 +92,22 @@ def add_item( # rearrange (i.e. drag drop from same list) if (from_index is not None) and (to_index is not None): - print("rearrange: ", to_index, from_index) self.items.controls.insert(to_index, self.items.controls.pop(from_index)) self.set_indicator_opacity(swap_control, 0.0) # insert (drag from other list to middle of this list) elif to_index is not None: - print("insert: ", to_index) new_item = Item(self, item) control_to_add.controls.append(new_item) self.items.controls.insert(to_index, control_to_add) # add new (drag from other list to end of this list, or use add item button) else: - print("add new: ", item) - new_item = new_item = ( - Item(self, item) if item else Item(self, self.item_name.value) - ) + new_item = Item(self, item) if item else Item(self, self.item_name.value) control_to_add.controls.append(new_item) self.items.controls.append(control_to_add) self.item_name.value = "" - print("self.items: ", self.items.controls) self.update() self.page.update() @@ -133,7 +121,7 @@ def remove_item(self, item): del self.items.controls[controls_list.index(item)] self.update() - def drag_accept(self, e): + def handle_drag_accept(self, e: ft.DragTargetEvent): src = self.page.get_control(e.src_id) l = self.list_row.current.controls @@ -143,62 +131,61 @@ def drag_accept(self, e): self.end_indicator.opacity = 0.0 self.page.update() - def drag_will_accept(self, e): + def handle_drag_will_accept(self, e: ft.DragWillAcceptEvent): self.end_indicator.opacity = 0.0 self.page.update() - def drag_leave(self, e): + def handle_drag_leave(self, e: ft.DragTargetLeaveEvent): self.end_indicator.opacity = 0.0 self.page.update() - def item_drag_accept(self, e): + def item_drag_accept(self, e: ft.DragTargetEvent): src = self.page.get_control(e.src_id) self.add_item(src.data.item_text) src.data.list.remove_item(src) self.end_indicator.opacity = 0.0 self.page.update() - def item_drag_will_accept(self, e): + def item_drag_will_accept(self, e: ft.DragWillAcceptEvent): self.end_indicator.opacity = 1.0 self.page.update() - def item_drag_leave(self, e): + def item_drag_leave(self, e: ft.DragTargetLeaveEvent): self.end_indicator.opacity = 0.0 self.page.update() class Item(ft.Draggable): - def __init__(self, list: ItemList, item_text: str): self.list = list self.item_text = item_text self.card_item = ft.Card( + elevation=1, + data=self.list, content=ft.Container( + width=200, + padding=7, content=ft.Row( - [ + alignment=ft.MainAxisAlignment.START, + controls=[ ft.Icon(name=ft.Icons.CIRCLE_OUTLINED), ft.Text(value=f"{self.item_text}"), ], - alignment=ft.MainAxisAlignment.START, ), - width=200, - padding=7, ), - elevation=1, - data=self.list, ) self.target = ft.DragTarget( group="items", content=self.card_item, - on_accept=self.drag_accept, - on_leave=self.drag_leave, - on_will_accept=self.drag_will_accept, + on_accept=self.handle_drag_accept, + on_leave=self.handle_drag_leave, + on_will_accept=self.handle_drag_will_accept, ) super().__init__(group="items", content=self.target, data=self) - def drag_accept(self, e: ft.DragTargetEvent): + def handle_drag_accept(self, e: ft.DragTargetEvent): # this is the item picked up (Draggable control) - src = self.list.page.get_control(f"{e.src_id}") + src = self.list.page.get_control(e.src_id) # e.control is the DragTarget, i.e. This (self) Item in the list # skip if item is dropped on itself @@ -218,37 +205,37 @@ def drag_accept(self, e: ft.DragTargetEvent): # item added to different list self.list.add_item(src.data.item_text, swap_control=self) + # remove from the list to which draggable belongs src.data.list.remove_item(src) + self.list.set_indicator_opacity(self, 0.0) e.control.content.elevation = 1 e.control.update() - def drag_will_accept(self, e): + def handle_drag_will_accept(self, e: ft.DragWillAcceptEvent): self.list.set_indicator_opacity(self, 1.0) e.control.content.elevation = 20 if e.data == "true" else 1 e.control.update() - def drag_leave(self, e): + def handle_drag_leave(self, e: ft.DragTargetLeaveEvent): self.list.set_indicator_opacity(self, 0.0) e.control.content.elevation = 1 e.control.update() def main(page: ft.Page): - - page.title = "Drag and drop ordering" list_row = ft.Ref[ft.Row]() page.add( ft.Row( - [ + vertical_alignment=ft.CrossAxisAlignment.START, + ref=list_row, + controls=[ ItemList(page, list_row, "List 1", ft.Colors.DEEP_ORANGE_400), ItemList(page, list_row, "List 2", ft.Colors.PINK_400), ItemList(page, list_row, "List 3", ft.Colors.CYAN_400), ], - vertical_alignment=ft.CrossAxisAlignment.START, - ref=list_row, ) ) page.update() diff --git a/python/controls/utility/drag-target-draggable/drag-drop-nesting.py b/python/controls/drag-target-and-draggable/outer-inner.py similarity index 55% rename from python/controls/utility/drag-target-draggable/drag-drop-nesting.py rename to python/controls/drag-target-and-draggable/outer-inner.py index bc2af72b..e476c921 100644 --- a/python/controls/utility/drag-target-draggable/drag-drop-nesting.py +++ b/python/controls/drag-target-and-draggable/outer-inner.py @@ -2,12 +2,9 @@ class OuterContainer(ft.Draggable): - def __init__(self, color, list_ref): - self.list_ref = list_ref self.container_color = color - # inner_container is a draggable self.inner_container = InnerContainer(self) self.outer_container = ft.Container( content=self.inner_container, @@ -15,123 +12,111 @@ def __init__(self, color, list_ref): height=200, bgcolor=self.container_color, border_radius=5, - alignment=ft.Alignment.center(), + alignment=ft.Alignment.CENTER, border=ft.Border.all(4, ft.Colors.BLACK12), ) self.target = ft.DragTarget( group="inner", - content=ft.DragTarget( - group="outer", - content=self.outer_container, - data=self, - on_accept=self.drag_accept, - on_will_accept=self.drag_will_accept, - on_leave=self.drag_leave, - ), data=self, on_accept=self.inner_drag_accept, on_will_accept=self.inner_drag_will_accept, on_leave=self.inner_drag_leave, + content=ft.DragTarget( + group="outer", + content=self.outer_container, + on_accept=self.handle_drag_accept, + on_will_accept=self.handle_drag_will_accept, + on_leave=self.handle_drag_leave, + ), ) - super().__init__(content=self.target, group="outer", data=self) + super().__init__(content=self.target, group="outer") - def drag_accept(self, e): - print(f"e: {e}") - if e.data == "true": - print("drag_accept outer") + def handle_drag_accept(self, e: ft.DragTargetEvent): + if e.data: self.outer_container.border = ft.Border.all(4, ft.Colors.BLACK12) self.update() - def drag_will_accept(self, e): - print(f"e: {e}") - if e.data == "true": - print("drag_will_accept outer") + def handle_drag_will_accept(self, e: ft.DragWillAcceptEvent): + if e.data: self.outer_container.border = ft.Border.all(4, ft.Colors.BLACK54) self.update() - def drag_leave(self, e): - print(f"e: {e}") + def handle_drag_leave(self, e: ft.DragTargetLeaveEvent): self.outer_container.border = ft.Border.all(4, ft.Colors.BLACK12) self.update() def inner_drag_accept(self, e): - if e.data == "true": - print("drag_accept inner") + if e.data: self.outer_container.border_radius = 5 self.update() - def inner_drag_will_accept(self, e): - if e.data == "true": - print("drag_will_accept inner") + def inner_drag_will_accept(self, e: ft.DragWillAcceptEvent): + if e.data: self.outer_container.border_radius = 25 self.update() - def inner_drag_leave(self, e): + def inner_drag_leave(self, e: ft.DragTargetLeaveEvent): self.outer_container.border_radius = 5 self.update() class InnerContainer(ft.Draggable): - def __init__(self, outer: OuterContainer): self.outer = outer self.inner_icon = ft.Icon( - ft.Icons.CIRCLE, color=ft.Colors.WHITE54, size=100, tooltip="drag me!" + name=ft.Icons.CIRCLE, + color=ft.Colors.WHITE54, + size=100, + tooltip="drag me!", ) # self.data = self self.target = ft.DragTarget( group="inner", content=self.inner_icon, - on_accept=self.drag_accept, - on_leave=self.drag_leave, - on_will_accept=self.drag_will_accept, + on_accept=self.handle_drag_accept, + on_leave=self.handle_drag_leave, + on_will_accept=self.handle_drag_will_accept, ) - super().__init__(content=self.target, group="outer", data=self) + super().__init__(content=self.target, group="outer") - def change_color(self, color: str): + def set_color(self, color: str): self.inner_icon.color = color self.update() - def drag_accept(self, e): - if e.data == "true": - print("drag_accept from inner") - self.change_color(ft.Colors.WHITE54) - print("inner_drag_accept") + def handle_drag_accept(self, e: ft.DragTargetEvent): + if e.data: + self.set_color(ft.Colors.WHITE54) - def drag_will_accept(self, e): - if e.data == "true": - print("drag_will_accept from inner") - self.change_color(ft.Colors.BLUE_GREY) + def handle_drag_will_accept(self, e: ft.DragWillAcceptEvent): + if e.data: + self.set_color(ft.Colors.BLUE_GREY) self.update() - def drag_leave(self, e): - self.change_color(ft.Colors.WHITE54) + def handle_drag_leave(self, e: ft.DragTargetLeaveEvent): + self.set_color(ft.Colors.WHITE54) self.update() def main(page: ft.Page): + page.bgcolor = ft.Colors.BLUE_GREY_100 - page.title = "Drag and drop ordering" list_ref = ft.Ref[ft.Row]() - page.bgcolor = ft.Colors.BLUE_GREY_100 + page.add( ft.Row( - [ - OuterContainer(ft.Colors.DEEP_ORANGE_400, list_ref), - OuterContainer(ft.Colors.BLUE_400, list_ref), - ], + ref=list_ref, alignment=ft.MainAxisAlignment.SPACE_AROUND, vertical_alignment=ft.CrossAxisAlignment.CENTER, expand=True, - ref=list_ref, + controls=[ + OuterContainer(ft.Colors.DEEP_ORANGE_400, list_ref), + OuterContainer(ft.Colors.BLUE_400, list_ref), + ], ) ) page.update() -# print("flet path: ", flet.__file__) -# logging.basicConfig(level=logging.DEBUG, -# format='%(asctime)s.%(msecs)03d %(message)s', datefmt='%H:%M:%S') ft.run(main) diff --git a/python/controls/dropdown-m2/add-and-delete-options.py b/python/controls/dropdown-m2/add-and-delete-options.py new file mode 100644 index 00000000..9177f2c0 --- /dev/null +++ b/python/controls/dropdown-m2/add-and-delete-options.py @@ -0,0 +1,40 @@ +import flet as ft + + +def main(page: ft.Page): + def find_option(option_name): + for option in dropdown.options: + if option_name == option.key: + return option + return None + + def handle_addition(e: ft.Event[ft.ElevatedButton]): + dropdown.options.append(ft.dropdownm2.Option(input_field.value)) + dropdown.value = input_field.value + input_field.value = "" + page.update() + + def handle_deletion(e: ft.Event[ft.OutlinedButton]): + option = find_option(d.value) + if option is not None: + dropdown.options.remove(option) + # d.value = None + page.update() + + page.add( + dropdown := ft.DropdownM2(options=[], color=ft.Colors.BLUE_400), + ft.Row( + controls=[ + input_field := ft.TextField(hint_text="Enter item name"), + ft.ElevatedButton(content="Add", on_click=handle_addition), + ft.OutlinedButton( + content="Delete selected", + on_click=handle_deletion, + style=ft.ButtonStyle(bgcolor=ft.Colors.RED), + ), + ] + ), + ) + + +ft.run(main) diff --git a/python/controls/dropdown-m2/basic.py b/python/controls/dropdown-m2/basic.py new file mode 100644 index 00000000..d96d2087 --- /dev/null +++ b/python/controls/dropdown-m2/basic.py @@ -0,0 +1,25 @@ +import flet as ft + + +def main(page: ft.Page): + page.theme_mode = ft.ThemeMode.DARK + + def handle_button_click(e): + message.value = f"Dropdown value is: {dd.value}" + page.update() + + page.add( + dd := ft.DropdownM2( + width=100, + options=[ + ft.dropdownm2.Option("Red"), + ft.dropdownm2.Option("Green"), + ft.dropdownm2.Option("Blue"), + ], + ), + ft.ElevatedButton(content="Submit", on_click=handle_button_click), + message := ft.Text(), + ) + + +ft.run(main) diff --git a/python/controls/dropdown-m2/dropdown-random-icon.py b/python/controls/dropdown-m2/dropdown-random-icon.py new file mode 100644 index 00000000..76f0973b --- /dev/null +++ b/python/controls/dropdown-m2/dropdown-random-icon.py @@ -0,0 +1,31 @@ +import random +import flet as ft + + +def main(page: ft.Page): + def handle_dropdown_change(e: ft.Event[ft.DropdownM2]): + message.value = f"{e.control.value} chosen" + page.update() + + def handle_new_random_item(e: ft.Event[ft.ElevatedButton]): + icon = ft.Icon(ft.Icons.random()) + dd.options.append( + ft.dropdownm2.Option(text=f"{str(icon.name)[6:]}", content=icon) + ) + page.update() + + def handle_items_shuffle(e: ft.Event[ft.ElevatedButton]): + random.shuffle(dd.options) + page.update() + + page.add( + dd := ft.DropdownM2( + options=[], options_fill_horizontally=True, on_change=handle_dropdown_change + ), + ft.ElevatedButton("Add random Option", on_click=handle_new_random_item), + ft.ElevatedButton("Shuffle Options", on_click=handle_items_shuffle), + message := ft.Text(), + ) + + +ft.run(main) diff --git a/python/controls/dropdown-m2/handling-events.py b/python/controls/dropdown-m2/handling-events.py new file mode 100644 index 00000000..ce8558af --- /dev/null +++ b/python/controls/dropdown-m2/handling-events.py @@ -0,0 +1,24 @@ +import flet as ft + + +def main(page: ft.Page): + def dropdown_changed(e: ft.Event[ft.DropdownM2]): + message.value = f"Dropdown changed to {e.control.value}" + page.update() + + page.add( + ft.DropdownM2( + width=200, + color=ft.Colors.BLUE_GREY_700, + on_change=dropdown_changed, + options=[ + ft.dropdownm2.Option("Red"), + ft.dropdownm2.Option("Green"), + ft.dropdownm2.Option("Blue"), + ], + ), + message := ft.Text(), + ) + + +ft.run(main) diff --git a/python/controls/input-and-selections/dropdownM2/dropdown-label-and-hint.py b/python/controls/dropdown-m2/label-and-hint.py similarity index 100% rename from python/controls/input-and-selections/dropdownM2/dropdown-label-and-hint.py rename to python/controls/dropdown-m2/label-and-hint.py index a2e51a1b..6c75247f 100644 --- a/python/controls/input-and-selections/dropdownM2/dropdown-label-and-hint.py +++ b/python/controls/dropdown-m2/label-and-hint.py @@ -6,13 +6,13 @@ def main(page: ft.Page): ft.DropdownM2( label="Color", hint_text="Choose your favourite color?", + autofocus=True, + color=ft.Colors.BLACK, options=[ ft.dropdownm2.Option("Red"), ft.dropdownm2.Option("Green"), ft.dropdownm2.Option("Blue"), ], - autofocus=True, - color=ft.Colors.BLACK, ) ) diff --git a/python/controls/dropdown-m2/media/add-and-delete-options.gif b/python/controls/dropdown-m2/media/add-and-delete-options.gif new file mode 100644 index 00000000..68bd1025 Binary files /dev/null and b/python/controls/dropdown-m2/media/add-and-delete-options.gif differ diff --git a/python/controls/dropdown-m2/media/basic.gif b/python/controls/dropdown-m2/media/basic.gif new file mode 100644 index 00000000..1202c3ff Binary files /dev/null and b/python/controls/dropdown-m2/media/basic.gif differ diff --git a/python/controls/dropdown-m2/media/handling-events.gif b/python/controls/dropdown-m2/media/handling-events.gif new file mode 100644 index 00000000..15c3523f Binary files /dev/null and b/python/controls/dropdown-m2/media/handling-events.gif differ diff --git a/python/controls/dropdown-m2/media/label-and-hint.gif b/python/controls/dropdown-m2/media/label-and-hint.gif new file mode 100644 index 00000000..425ddd00 Binary files /dev/null and b/python/controls/dropdown-m2/media/label-and-hint.gif differ diff --git a/python/controls/dropdown-m2/media/search.gif b/python/controls/dropdown-m2/media/search.gif new file mode 100644 index 00000000..f8c162fd Binary files /dev/null and b/python/controls/dropdown-m2/media/search.gif differ diff --git a/python/controls/dropdown/color-selection-with-filtering.py b/python/controls/dropdown/color-selection-with-filtering.py new file mode 100644 index 00000000..c3cdf9aa --- /dev/null +++ b/python/controls/dropdown/color-selection-with-filtering.py @@ -0,0 +1,35 @@ +import flet as ft + + +def main(page: ft.Page): + def get_options(): + colors = [ + ft.Colors.RED, + ft.Colors.BLUE, + ft.Colors.YELLOW, + ft.Colors.PURPLE, + ft.Colors.LIME, + ] + return [ + ft.DropdownOption( + key=color.value, + content=ft.Text(value=color.value, color=color), + ) + for color in colors + ] + + def handle_dropdown_change(e: ft.Event[ft.Dropdown]): + e.control.color = e.control.value + page.update() + + page.add( + ft.Dropdown( + editable=True, + label="Color", + options=get_options(), + on_change=handle_dropdown_change, + ) + ) + + +ft.run(main) diff --git a/python/controls/dropdown/icon-selection.py b/python/controls/dropdown/icon-selection.py new file mode 100644 index 00000000..5b9ff25a --- /dev/null +++ b/python/controls/dropdown/icon-selection.py @@ -0,0 +1,29 @@ +import flet as ft + + +def main(page: ft.Page): + def get_options(): + icons = [ + {"name": "Smile", "icon": ft.Icons.SENTIMENT_SATISFIED_OUTLINED}, + {"name": "Cloud", "icon": ft.Icons.CLOUD_OUTLINED}, + {"name": "Brush", "icon": ft.Icons.BRUSH_OUTLINED}, + {"name": "Heart", "icon": ft.Icons.FAVORITE}, + ] + return [ + ft.DropdownOption(key=icon["name"], leading_icon=icon["icon"]) + for icon in icons + ] + + page.add( + ft.Dropdown( + border=ft.InputBorder.UNDERLINE, + enable_filter=True, + editable=True, + leading_icon=ft.Icons.SEARCH, + label="Icon", + options=get_options(), + ) + ) + + +ft.run(main) diff --git a/python/controls/dropdown/media/color-selection-with-filtering.gif b/python/controls/dropdown/media/color-selection-with-filtering.gif new file mode 100644 index 00000000..b02f1968 Binary files /dev/null and b/python/controls/dropdown/media/color-selection-with-filtering.gif differ diff --git a/python/controls/dropdown/media/icon-selection.png b/python/controls/dropdown/media/icon-selection.png new file mode 100644 index 00000000..55e01a05 Binary files /dev/null and b/python/controls/dropdown/media/icon-selection.png differ diff --git a/python/controls/dropdown/styled.py b/python/controls/dropdown/styled.py new file mode 100644 index 00000000..14f354fa --- /dev/null +++ b/python/controls/dropdown/styled.py @@ -0,0 +1,126 @@ +import flet as ft + + +def main(page: ft.Page): + page.add( + # 1 + ft.Dropdown( + text_size=20, + content_padding=10, + color=ft.Colors.PURPLE_200, + bgcolor=ft.Colors.BLUE_200, + filled=True, + border_radius=30, + border_color=ft.Colors.GREEN_800, + focused_border_color=ft.Colors.GREEN_ACCENT_400, + focused_border_width=5, + options=[ + ft.DropdownOption("a", "Item A"), + ft.DropdownOption("b", "Item B"), + ft.DropdownOption("c", "Item C"), + ], + ), + # 2 + ft.Dropdown( + border_radius=30, + filled=True, + fill_color=ft.Colors.RED_400, + border_color=ft.Colors.TRANSPARENT, + bgcolor=ft.Colors.RED_200, + color=ft.Colors.CYAN_400, + focused_border_color=ft.Colors.PINK_300, + focused_border_width=20, + options=[ + ft.DropdownOption("a", "Item A"), + ft.DropdownOption("b", "Item B"), + ft.DropdownOption("c", "Item C"), + ], + ), + # 3 + ft.Dropdown( + border_color=ft.Colors.PINK_ACCENT, + focused_border_color=ft.Colors.GREEN_ACCENT_400, + focused_border_width=25, + border_radius=30, + width=150, + border_width=5, + options=[ + ft.DropdownOption("a", "Item A"), + ft.DropdownOption("b", "Item B"), + ft.DropdownOption("c", "Item C"), + ], + ), + # 4 + ft.Container( + padding=ft.Padding.only(bottom=20), + content=ft.Dropdown( + text_size=30, + color=ft.Colors.ORANGE_ACCENT, + border_radius=20, + filled=True, + border_width=0, + autofocus=True, + focused_border_color=ft.Colors.GREEN_100, + focused_border_width=10, + width=200, + height=50, + options=[ + ft.dropdown.Option("a", "Item A"), + ft.dropdown.Option("b", "Item B"), + ft.dropdown.Option("c", "Item C"), + ], + ), + ), + # 5 + ft.Dropdown( + text_size=30, + border_radius=20, + filled=True, + border_width=0, + focused_border_color=ft.Colors.GREEN_100, + focused_border_width=10, + content_padding=20, + width=200, + options=[ + ft.DropdownOption( + key="a", + text="Item A", + style=ft.ButtonStyle( + shape=ft.BeveledRectangleBorder(radius=15), + color={ + ft.ControlState.HOVERED: ft.Colors.WHITE, + ft.ControlState.FOCUSED: ft.Colors.BLUE, + ft.ControlState.DEFAULT: ft.Colors.BLACK, + }, + ), + ), + ft.DropdownOption( + key="b", + text="Item B", + style=ft.ButtonStyle( + shape=ft.BeveledRectangleBorder(radius=15), + color={ + ft.ControlState.HOVERED: ft.Colors.WHITE, + ft.ControlState.FOCUSED: ft.Colors.BLUE, + ft.ControlState.DEFAULT: ft.Colors.BLACK, + }, + ), + ), + ft.DropdownOption( + key="c", + text="Item C", + style=ft.ButtonStyle( + shape=ft.BeveledRectangleBorder(radius=15), + color={ + ft.ControlState.HOVERED: ft.Colors.WHITE, + ft.ControlState.FOCUSED: ft.Colors.BLUE, + ft.ControlState.DEFAULT: ft.Colors.BLACK, + }, + ), + ), + ], + ), + ) + + +ft.run(main) diff --git a/python/controls/elevated-button/animate-on-hover.py b/python/controls/elevated-button/animate-on-hover.py new file mode 100644 index 00000000..138b15b0 --- /dev/null +++ b/python/controls/elevated-button/animate-on-hover.py @@ -0,0 +1,21 @@ +import flet as ft + + +def main(page: ft.Page): + def animate(e: ft.Event[ft.ElevatedButton]): + e.control.rotate = 0.1 if e.data else 0 + page.update() + + page.add( + ft.ElevatedButton( + content="Hover over me, I'm animated!", + rotate=0, + animate_rotation=100, + on_hover=animate, + on_click=lambda e: page.add(ft.Text("Clicked! Try a long press!")), + on_long_press=lambda e: page.add(ft.Text("I knew you could do it!")), + ) + ) + + +ft.run(main) diff --git a/python/controls/buttons/elevated-button/basic-elevated-buttons.py b/python/controls/elevated-button/basic.py similarity index 54% rename from python/controls/buttons/elevated-button/basic-elevated-buttons.py rename to python/controls/elevated-button/basic.py index bb550a1b..ebb1660b 100644 --- a/python/controls/buttons/elevated-button/basic-elevated-buttons.py +++ b/python/controls/elevated-button/basic.py @@ -2,11 +2,11 @@ def main(page: ft.Page): - page.title = "Basic elevated buttons" + page.title = "ElevatedButton Example" page.add( ft.ElevatedButton(content="Elevated button"), - ft.Button(content="Disabled button", disabled=True), + ft.ElevatedButton(content="Disabled button", disabled=True), ) diff --git a/python/controls/elevated-button/button-shapes.py b/python/controls/elevated-button/button-shapes.py new file mode 100644 index 00000000..e6d917b8 --- /dev/null +++ b/python/controls/elevated-button/button-shapes.py @@ -0,0 +1,32 @@ +import flet as ft + + +def main(page: ft.Page): + page.padding = 30 + page.spacing = 30 + + page.add( + ft.ElevatedButton( + content="Stadium", + style=ft.ButtonStyle(shape=ft.StadiumBorder()), + ), + ft.ElevatedButton( + content="Rounded rectangle", + style=ft.ButtonStyle(shape=ft.RoundedRectangleBorder(radius=10)), + ), + ft.ElevatedButton( + content="Continuous rectangle", + style=ft.ButtonStyle(shape=ft.ContinuousRectangleBorder(radius=30)), + ), + ft.ElevatedButton( + content="Beveled rectangle", + style=ft.ButtonStyle(shape=ft.BeveledRectangleBorder(radius=10)), + ), + ft.ElevatedButton( + content="Circle", + style=ft.ButtonStyle(shape=ft.CircleBorder(), padding=30), + ), + ) + + +ft.run(main) diff --git a/python/controls/buttons/elevated-button/elevated-buttons-with-custom-content.py b/python/controls/elevated-button/custom-content.py similarity index 90% rename from python/controls/buttons/elevated-button/elevated-buttons-with-custom-content.py rename to python/controls/elevated-button/custom-content.py index 4b6fe0ed..2acf2d98 100644 --- a/python/controls/buttons/elevated-button/elevated-buttons-with-custom-content.py +++ b/python/controls/elevated-button/custom-content.py @@ -2,30 +2,31 @@ def main(page: ft.Page): - page.title = "Elevated buttons with custom content" + page.title = "ElevatedButton Example" + page.add( ft.ElevatedButton( width=150, content=ft.Row( - [ + alignment=ft.MainAxisAlignment.SPACE_AROUND, + controls=[ ft.Icon(name=ft.Icons.FAVORITE, color=ft.Colors.PINK), ft.Icon(name=ft.Icons.AUDIOTRACK, color=ft.Colors.GREEN), ft.Icon(name=ft.Icons.BEACH_ACCESS, color=ft.Colors.BLUE), ], - alignment=ft.MainAxisAlignment.SPACE_AROUND, ), ), ft.ElevatedButton( content=ft.Container( + padding=ft.Padding.all(10), content=ft.Column( - [ + alignment=ft.MainAxisAlignment.CENTER, + spacing=5, + controls=[ ft.Text(value="Compound button", size=20), ft.Text(value="This is secondary text"), ], - alignment=ft.MainAxisAlignment.CENTER, - spacing=5, ), - padding=ft.Padding.all(10), ), ), ) diff --git a/python/controls/elevated-button/handling-clicks.py b/python/controls/elevated-button/handling-clicks.py new file mode 100644 index 00000000..771fc90c --- /dev/null +++ b/python/controls/elevated-button/handling-clicks.py @@ -0,0 +1,23 @@ +import flet as ft + + +def main(page: ft.Page): + page.title = "ElevatedButton Example" + page.theme_mode = ft.ThemeMode.LIGHT + + def button_clicked(e: ft.Event[ft.ElevatedButton]): + button.data += 1 + message.value = f"Button clicked {button.data} time(s)" + page.update() + + page.add( + button := ft.ElevatedButton( + content="Button with 'click' event", + data=0, + on_click=button_clicked, + ), + message := ft.Text(), + ) + + +ft.run(main) diff --git a/python/controls/buttons/elevated-button/elevated-buttons-with-icons.py b/python/controls/elevated-button/icons.py similarity index 53% rename from python/controls/buttons/elevated-button/elevated-buttons-with-icons.py rename to python/controls/elevated-button/icons.py index 976f542a..990d835e 100644 --- a/python/controls/buttons/elevated-button/elevated-buttons-with-icons.py +++ b/python/controls/elevated-button/icons.py @@ -2,12 +2,12 @@ def main(page: ft.Page): - page.title = "Elevated buttons with icons" + page.title = "ElevatedButton Example" page.add( - ft.ElevatedButton("Button with icon", icon=ft.Icons.WAVES_ROUNDED), + ft.ElevatedButton(content="Button with icon", icon=ft.Icons.WAVES_ROUNDED), ft.ElevatedButton( - "Button with colorful icon", + content="Button with colorful icon", icon=ft.Icons.PARK_ROUNDED, icon_color=ft.Colors.GREEN_400, ), diff --git a/python/controls/elevated-button/media/basic.png b/python/controls/elevated-button/media/basic.png new file mode 100644 index 00000000..93b513e4 Binary files /dev/null and b/python/controls/elevated-button/media/basic.png differ diff --git a/python/controls/elevated-button/media/custom-content.png b/python/controls/elevated-button/media/custom-content.png new file mode 100644 index 00000000..1786efb2 Binary files /dev/null and b/python/controls/elevated-button/media/custom-content.png differ diff --git a/python/controls/elevated-button/media/handling-clicks.gif b/python/controls/elevated-button/media/handling-clicks.gif new file mode 100644 index 00000000..de5963a7 Binary files /dev/null and b/python/controls/elevated-button/media/handling-clicks.gif differ diff --git a/python/controls/elevated-button/media/icons.png b/python/controls/elevated-button/media/icons.png new file mode 100644 index 00000000..f588eded Binary files /dev/null and b/python/controls/elevated-button/media/icons.png differ diff --git a/python/controls/elevated-button/media/index.png b/python/controls/elevated-button/media/index.png new file mode 100644 index 00000000..06857019 Binary files /dev/null and b/python/controls/elevated-button/media/index.png differ diff --git a/python/controls/buttons/elevated-button/styled-button.py b/python/controls/elevated-button/styling.py similarity index 99% rename from python/controls/buttons/elevated-button/styled-button.py rename to python/controls/elevated-button/styling.py index d5f311a1..05c94e5c 100644 --- a/python/controls/buttons/elevated-button/styled-button.py +++ b/python/controls/elevated-button/styling.py @@ -4,6 +4,7 @@ def main(page: ft.Page): page.padding = 50 page.theme_mode = ft.ThemeMode.LIGHT + page.add( ft.ElevatedButton( content="Styled button 1", diff --git a/python/controls/expansion-panel-list/basic.py b/python/controls/expansion-panel-list/basic.py new file mode 100644 index 00000000..60e9da6b --- /dev/null +++ b/python/controls/expansion-panel-list/basic.py @@ -0,0 +1,59 @@ +import flet as ft + + +def main(page: ft.Page): + page.theme_mode = ft.ThemeMode.LIGHT + + def handle_change(e: ft.Event[ft.ExpansionPanelList]): + print(f"change on panel with index {e.data}") + + def handle_delete(e: ft.Event[ft.IconButton]): + icon_button = e.control + tile = icon_button.parent + panel = tile.parent + + panel_list.controls.remove(panel) + page.update() + + panel_list = ft.ExpansionPanelList( + expand_icon_color=ft.Colors.AMBER, + elevation=8, + divider_color=ft.Colors.AMBER, + on_change=handle_change, + controls=[ + ft.ExpansionPanel( + # has no header and content - placeholders will be used + bgcolor=ft.Colors.BLUE_400, + expanded=True, + ), + ], + ) + + colors = [ + ft.Colors.GREEN_500, + ft.Colors.BLUE_800, + ft.Colors.RED_800, + ] + + for i in range(len(colors)): + bgcolor = colors[i % len(colors)] + panel_list.controls.append( + ft.ExpansionPanel( + bgcolor=bgcolor, + header=ft.ListTile(title=ft.Text(f"Panel {i}"), bgcolor=bgcolor), + content=ft.ListTile( + bgcolor=bgcolor, + title=ft.Text(f"This is in Panel {i}"), + subtitle=ft.Text(f"Press the icon to delete panel {i}"), + trailing=ft.IconButton( + icon=ft.Icons.DELETE, + on_click=handle_delete, + ), + ), + ) + ) + + page.add(panel_list) + + +ft.run(main) diff --git a/python/controls/expansion-panel-list/media/basic.gif b/python/controls/expansion-panel-list/media/basic.gif new file mode 100644 index 00000000..dbdfa0c2 Binary files /dev/null and b/python/controls/expansion-panel-list/media/basic.gif differ diff --git a/python/controls/layout/expansion-tile/expansion-tile.py b/python/controls/expansion-tile/basic.py similarity index 91% rename from python/controls/layout/expansion-tile/expansion-tile.py rename to python/controls/expansion-tile/basic.py index 0f7cf50b..702c1d2c 100644 --- a/python/controls/layout/expansion-tile/expansion-tile.py +++ b/python/controls/expansion-tile/basic.py @@ -6,13 +6,13 @@ def main(page: ft.Page): page.spacing = 0 page.padding = 0 - def handle_expansion_tile_change(e): + def handle_expansion_tile_change(e: ft.Event[ft.ExpansionTile]): page.show_dialog( ft.SnackBar( - ft.Text( - f"ExpansionTile was {'expanded' if e.data=='true' else 'collapsed'}" - ), duration=1000, + content=ft.Text( + value=f"ExpansionTile was {'expanded' if e.data == 'true' else 'collapsed'}" + ), ) ) if e.control.trailing: diff --git a/python/controls/layout/expansion-tile/expansion-tile-borders.py b/python/controls/expansion-tile/borders.py similarity index 95% rename from python/controls/layout/expansion-tile/expansion-tile-borders.py rename to python/controls/expansion-tile/borders.py index a9d8b0b4..d79374d7 100644 --- a/python/controls/layout/expansion-tile/expansion-tile-borders.py +++ b/python/controls/expansion-tile/borders.py @@ -20,7 +20,7 @@ def main(page: ft.Page): affinity=ft.TileAffinity.PLATFORM, maintain_state=True, shape=ft.RoundedRectangleBorder(radius=20), - collapsed_shape=ft.StadiumBorder(ft.BorderSide(width=2)), + collapsed_shape=ft.StadiumBorder(side=ft.BorderSide(width=2)), collapsed_text_color=ft.Colors.GREY_800, text_color=ft.Colors.GREY_800, controls=[ diff --git a/python/controls/expansion-tile/media/basic.png b/python/controls/expansion-tile/media/basic.png new file mode 100644 index 00000000..d28585f9 Binary files /dev/null and b/python/controls/expansion-tile/media/basic.png differ diff --git a/python/controls/layout/expansion-tile/expansion-tile-switch.py b/python/controls/expansion-tile/theme-mode-toggle.py similarity index 85% rename from python/controls/layout/expansion-tile/expansion-tile-switch.py rename to python/controls/expansion-tile/theme-mode-toggle.py index 4abf651d..17035344 100644 --- a/python/controls/layout/expansion-tile/expansion-tile-switch.py +++ b/python/controls/expansion-tile/theme-mode-toggle.py @@ -2,26 +2,25 @@ def main(page: ft.Page): - page.spacing = 0 page.padding = 0 - def change_theme_mode(e): + def handle_switch_change(e: ft.Event[ft.Switch]): if page.theme_mode == ft.ThemeMode.DARK: page.theme_mode = ft.ThemeMode.LIGHT - sw.thumb_icon = ft.Icons.LIGHT_MODE + switch.thumb_icon = ft.Icons.LIGHT_MODE else: - sw.thumb_icon = ft.Icons.DARK_MODE + switch.thumb_icon = ft.Icons.DARK_MODE page.theme_mode = ft.ThemeMode.DARK page.update() - def handle_expansion_tile_change(e): + def handle_expansion_tile_change(e: ft.Event[ft.ExpansionTile]): page.show_dialog( ft.SnackBar( - ft.Text( + duration=1000, + content=ft.Text( f"ExpansionTile was {'expanded' if e.data=='true' else 'collapsed'}" ), - duration=1000, ) ) if e.control.trailing: @@ -32,7 +31,7 @@ def handle_expansion_tile_change(e): ) page.update() - sw = ft.Switch(thumb_icon=ft.Icons.DARK_MODE, on_change=change_theme_mode) + switch = ft.Switch(thumb_icon=ft.Icons.DARK_MODE, on_change=handle_switch_change) page.add( ft.ExpansionTile( @@ -74,16 +73,16 @@ def handle_expansion_tile_change(e): ], ), ft.Row( - [ + expand=True, + alignment=ft.MainAxisAlignment.END, + controls=[ ft.Container( - content=sw, + content=switch, padding=ft.Padding.only(bottom=50), - alignment=ft.Alignment.bottom_right(), + alignment=ft.Alignment.BOTTOM_RIGHT, expand=True, ), ], - expand=True, - alignment=ft.MainAxisAlignment.END, ), ) diff --git a/python/controls/file-picker/media/pick-and-upload.png b/python/controls/file-picker/media/pick-and-upload.png new file mode 100644 index 00000000..97ee09aa Binary files /dev/null and b/python/controls/file-picker/media/pick-and-upload.png differ diff --git a/python/controls/file-picker/media/pick-save-and-get-directory-path.png b/python/controls/file-picker/media/pick-save-and-get-directory-path.png new file mode 100644 index 00000000..db9661a7 Binary files /dev/null and b/python/controls/file-picker/media/pick-save-and-get-directory-path.png differ diff --git a/python/controls/utility/file-picker/file-picker-upload-progress.py b/python/controls/file-picker/pick-and-upload.py similarity index 78% rename from python/controls/utility/file-picker/file-picker-upload-progress.py rename to python/controls/file-picker/pick-and-upload.py index bcd3e370..0986a2e5 100644 --- a/python/controls/utility/file-picker/file-picker-upload-progress.py +++ b/python/controls/file-picker/pick-and-upload.py @@ -10,11 +10,9 @@ def on_upload_progress(e: ft.FilePickerUploadEvent): prog_bars[e.file_name].value = e.progress # add to services - file_picker = ft.FilePicker(on_upload=on_upload_progress) - page.services.append(file_picker) + page.services.append(file_picker := ft.FilePicker(on_upload=on_upload_progress)) - async def pick_files(e): - # open pick files dialog + async def handle_files_pick(e: ft.Event[ft.ElevatedButton]): files = await file_picker.pick_files_async(allow_multiple=True) print("Picked files:", files) state["picked_files"] = files @@ -28,10 +26,10 @@ async def pick_files(e): prog_bars[f.name] = prog upload_progress.controls.append(ft.Row([prog, ft.Text(f.name)])) - async def upload_files(e): + async def handle_file_upload(e: ft.Event[ft.ElevatedButton]): upload_button.disabled = True file_picker.upload( - [ + files=[ ft.FilePickerUploadFile( name=file.name, upload_url=page.get_upload_url(f"dir/{file.name}", 60), @@ -43,15 +41,15 @@ async def upload_files(e): page.add( ft.Text("test"), ft.ElevatedButton( - "Select files...", + content="Select files...", icon=ft.Icons.FOLDER_OPEN, - on_click=pick_files, + on_click=handle_files_pick, ), upload_progress := ft.Column(), upload_button := ft.ElevatedButton( - "Upload", + content="Upload", icon=ft.Icons.UPLOAD, - on_click=upload_files, + on_click=handle_file_upload, disabled=True, ), ) diff --git a/python/controls/utility/file-picker/file-picker-all-modes.py b/python/controls/file-picker/pick-save-and-get-directory-path.py similarity index 56% rename from python/controls/utility/file-picker/file-picker-all-modes.py rename to python/controls/file-picker/pick-save-and-get-directory-path.py index 587592e7..7a83a4c5 100644 --- a/python/controls/utility/file-picker/file-picker-all-modes.py +++ b/python/controls/file-picker/pick-save-and-get-directory-path.py @@ -2,53 +2,49 @@ def main(page: ft.Page): - file_picker = ft.FilePicker() - page.services.append(file_picker) + page.services.append(file_picker := ft.FilePicker()) - # Pick files dialog - async def open_pick_files_dialog(e): + async def handle_pick_files(e: ft.Event[ft.Button]): files = await file_picker.pick_files_async(allow_multiple=True) selected_files.value = ( ", ".join(map(lambda f: f.name, files)) if files else "Cancelled!" ) - # Save file dialog - async def open_save_file_dialog(e): + async def handle_save_file(e: ft.Event[ft.Button]): save_file_path.value = await file_picker.save_file_async() - # Open directory dialog - async def open_get_directory_dialog(e): + async def handle_get_directory_path(e: ft.Event[ft.Button]): directory_path.value = await file_picker.get_directory_path_async() page.add( ft.Row( - [ + controls=[ ft.Button( - "Pick files", + content="Pick files", icon=ft.Icons.UPLOAD_FILE, - on_click=open_pick_files_dialog, + on_click=handle_pick_files, ), selected_files := ft.Text(), ] ), ft.Row( - [ + controls=[ ft.Button( - "Save file", + content="Save file", icon=ft.Icons.SAVE, - on_click=open_save_file_dialog, - disabled=page.web, + on_click=handle_save_file, + disabled=page.web, # disable this button on web ), save_file_path := ft.Text(), ] ), ft.Row( - [ + controls=[ ft.Button( - "Open directory", + content="Open directory", icon=ft.Icons.FOLDER_OPEN, - on_click=open_get_directory_dialog, - disabled=page.web, + on_click=handle_get_directory_path, + disabled=page.web, # disable this button on web ), directory_path := ft.Text(), ] diff --git a/python/controls/filled-button/basic.py b/python/controls/filled-button/basic.py new file mode 100644 index 00000000..0f3db593 --- /dev/null +++ b/python/controls/filled-button/basic.py @@ -0,0 +1,14 @@ +import flet as ft + + +def main(page: ft.Page): + page.title = "FilledButton Example" + + page.add( + ft.FilledButton(content="Filled button"), + ft.FilledButton(content="Disabled button", disabled=True), + ft.FilledButton(content="Button with icon", icon=ft.Icons.ADD_OUTLINED), + ) + + +ft.run(main) diff --git a/python/controls/filled-button/media/basic.png b/python/controls/filled-button/media/basic.png new file mode 100644 index 00000000..a65ee79d Binary files /dev/null and b/python/controls/filled-button/media/basic.png differ diff --git a/python/controls/filled-button/media/index.png b/python/controls/filled-button/media/index.png new file mode 100644 index 00000000..d1b2fabd Binary files /dev/null and b/python/controls/filled-button/media/index.png differ diff --git a/python/controls/filled-tonal-button/basic.py b/python/controls/filled-tonal-button/basic.py new file mode 100644 index 00000000..28335a79 --- /dev/null +++ b/python/controls/filled-tonal-button/basic.py @@ -0,0 +1,14 @@ +import flet as ft + + +def main(page: ft.Page): + page.title = "FilledTonalButton Example" + + page.add( + ft.FilledTonalButton(content="Filled tonal button"), + ft.FilledTonalButton(content="Disabled button", disabled=True), + ft.FilledTonalButton(content="Button with icon", icon=ft.Icons.ADD_OUTLINED), + ) + + +ft.run(main) diff --git a/python/controls/filled-tonal-button/media/basic.png b/python/controls/filled-tonal-button/media/basic.png new file mode 100644 index 00000000..f08773f0 Binary files /dev/null and b/python/controls/filled-tonal-button/media/basic.png differ diff --git a/python/controls/filled-tonal-button/media/index.png b/python/controls/filled-tonal-button/media/index.png new file mode 100644 index 00000000..e8c9c428 Binary files /dev/null and b/python/controls/filled-tonal-button/media/index.png differ diff --git a/python/controls/buttons/floating-action-button/floating-action-button.py b/python/controls/floating-action-button/handling-clicks.py similarity index 82% rename from python/controls/buttons/floating-action-button/floating-action-button.py rename to python/controls/floating-action-button/handling-clicks.py index 2708a262..d60358f0 100644 --- a/python/controls/buttons/floating-action-button/floating-action-button.py +++ b/python/controls/floating-action-button/handling-clicks.py @@ -11,7 +11,7 @@ def main(page: ft.Page): # keeps track of the number of tiles already added count = 1 - def fab_pressed(e): + def handle_fab_click(e: ft.Event[ft.FloatingActionButton]): nonlocal count # to modify the count variable found in the outer scope page.add( ft.ListTile( @@ -27,21 +27,24 @@ def fab_pressed(e): count += 1 page.floating_action_button = ft.FloatingActionButton( - icon=ft.Icons.ADD, on_click=fab_pressed, bgcolor=ft.Colors.LIME_300 + icon=ft.Icons.ADD, + on_click=handle_fab_click, + bgcolor=ft.Colors.LIME_300, ) + page.add( ft.Container( - ft.Row( - [ + bgcolor=ft.Colors.BLUE, + padding=ft.Padding.all(20), + content=ft.Row( + alignment=ft.MainAxisAlignment.CENTER, + controls=[ ft.Text( - "Floating Action Button Example", + value="Floating Action Button Example", style=ft.TextStyle(size=20, weight=ft.FontWeight.W_500), ) ], - alignment=ft.MainAxisAlignment.CENTER, ), - bgcolor=ft.Colors.BLUE, - padding=ft.Padding.all(20), ), ft.Text("Press the FAB to add a tile!"), ) diff --git a/python/controls/floating-action-button/media/handling-clicks.gif b/python/controls/floating-action-button/media/handling-clicks.gif new file mode 100644 index 00000000..430c8eef Binary files /dev/null and b/python/controls/floating-action-button/media/handling-clicks.gif differ diff --git a/python/controls/floating-action-button/media/index.png b/python/controls/floating-action-button/media/index.png new file mode 100644 index 00000000..6b0b6d9a Binary files /dev/null and b/python/controls/floating-action-button/media/index.png differ diff --git a/python/controls/form-controls-misc.py b/python/controls/form-controls-misc.py new file mode 100644 index 00000000..823489a9 --- /dev/null +++ b/python/controls/form-controls-misc.py @@ -0,0 +1,135 @@ +import flet as ft + + +def main(page: ft.Page): + page.title = "Form Example" + page.theme_mode = ft.ThemeMode.LIGHT + page.padding = ft.Padding.all(20) + + results = ft.Column(scroll=ft.ScrollMode.ALWAYS, height=100) + + checkboxes = ft.Column( + controls=[ + ft.Checkbox(value=True), + ft.Checkbox(label="A simple checkbox with a label"), + ft.Checkbox(label="Checkbox with tristate", tristate=True), + ft.Checkbox(label="Disabled checkbox", disabled=True), + ft.Checkbox( + label="Label on the left", label_position=ft.LabelPosition.LEFT + ), + ] + ) + + switches = ft.Column( + controls=[ + ft.Switch(value=True), + ft.Switch(value=False), + ft.Switch(label="Switch with a label"), + ft.Switch(label="Disabled switch", disabled=True), + ft.Switch(label="Label on the left", label_position=ft.LabelPosition.LEFT), + ] + ) + + radio_group1 = ft.RadioGroup( + content=ft.Column( + controls=[ + ft.Radio(value="red", label="Red color"), + ft.Radio(value="green", label="Green color"), + ft.Radio(value="blue", label="Blue color"), + ] + ) + ) + + def handle_rg2_change(e: ft.Event[ft.RadioGroup]): + results.controls.append(ft.Text(f"Selected value: {e.data}")) + page.update() + + radio_group2 = ft.RadioGroup( + value="two", + on_change=handle_rg2_change, + content=ft.Row( + controls=[ + ft.Radio(value="one", label="One"), + ft.Radio(value="two", label="Two"), + ft.Radio(value="three", label="Three"), + ] + ), + ) + + dd = ft.Dropdown( + value="b", + content_padding=ft.Padding.all(5), + height=35, + options=[ + ft.dropdown.Option("a", "Item A"), + ft.dropdown.Option("b", "Item B"), + ft.dropdown.Option("c", "Item C"), + ], + ) + + dd1 = ft.Dropdown( + options=[ + ft.dropdown.Option("r", "Red"), + ft.dropdown.Option("g", "Green"), + ft.dropdown.Option("b", "Blue"), + ] + ) + dd2 = ft.DropdownM2( + label="My favorite number", + icon=ft.Icons.FORMAT_SIZE, + hint_text="Choose your favorite color", + helper="You can choose only one color", + counter="0 colors selected", + prefix_icon=ft.Icons.COLOR_LENS, + suffix="...is your color", + options=[ + ft.dropdownm2.Option("1", "One"), + ft.dropdownm2.Option("2", "Two"), + ft.dropdownm2.Option("3", "Three"), + ], + ) + + page.add( + ft.Column( + scroll=ft.ScrollMode.ALWAYS, + expand=1, + controls=[ + ft.Text("Checkboxes", theme_style=ft.TextThemeStyle.HEADLINE_MEDIUM), + checkboxes, + ft.Text("Switches", theme_style=ft.TextThemeStyle.HEADLINE_MEDIUM), + switches, + ft.Text("Radio", theme_style=ft.TextThemeStyle.HEADLINE_MEDIUM), + radio_group1, + ft.Text( + value="Radio with on_change", + theme_style=ft.TextThemeStyle.HEADLINE_MEDIUM, + ), + radio_group2, + ft.Container( + content=results, + padding=10, + border=ft.border.all(1, "black12"), + border_radius=ft.border_radius.all(10), + bgcolor="black12", + ), + ft.Text( + value="Dropdown with pre-selected value", + theme_style=ft.TextThemeStyle.HEADLINE_MEDIUM, + ), + dd, + ft.Text("Dropdown", theme_style=ft.TextThemeStyle.HEADLINE_MEDIUM), + dd1, + ft.Text( + value="Dropdown with all decoration", + theme_style=ft.TextThemeStyle.HEADLINE_MEDIUM, + ), + dd2, + ft.Text("Slider", theme_style=ft.TextThemeStyle.HEADLINE_MEDIUM), + ft.Slider(value=0.5), + ft.Slider(min=0, max=100, divisions=10, value=30, label="{value}%"), + ], + ), + ) + + +ft.run(main) diff --git a/python/controls/gesture-detector/draggable-containers.py b/python/controls/gesture-detector/draggable-containers.py new file mode 100644 index 00000000..88326f82 --- /dev/null +++ b/python/controls/gesture-detector/draggable-containers.py @@ -0,0 +1,46 @@ +import flet as ft + + +def main(page: ft.Page): + def handle_pan_update1(e: ft.DragUpdateEvent[ft.GestureDetector]): + container = e.control.parent + container.top = max(0.0, container.top + e.delta_y) + container.left = max(0.0, container.left + e.delta_x) + container.update() + + def handle_pan_update2(e: ft.DragUpdateEvent[ft.GestureDetector]): + e.control.top = max(0.0, e.control.top + e.delta_y) + e.control.left = max(0.0, e.control.left + e.delta_x) + e.control.update() + + page.add( + ft.Stack( + width=1000, + height=500, + controls=[ + ft.Container( + bgcolor=ft.Colors.AMBER, + width=50, + height=50, + left=0, + top=0, + content=ft.GestureDetector( + mouse_cursor=ft.MouseCursor.MOVE, + drag_interval=50, + on_pan_update=handle_pan_update1, + ), + ), + ft.GestureDetector( + mouse_cursor=ft.MouseCursor.MOVE, + drag_interval=10, + on_vertical_drag_update=handle_pan_update2, + left=100, + top=100, + content=ft.Container(bgcolor=ft.Colors.BLUE, width=50, height=50), + ), + ], + ) + ) + + +ft.run(main) diff --git a/python/controls/gesture-detector/handling-events.py b/python/controls/gesture-detector/handling-events.py new file mode 100644 index 00000000..e35643cc --- /dev/null +++ b/python/controls/gesture-detector/handling-events.py @@ -0,0 +1,31 @@ +import flet as ft + + +def main(page: ft.Page): + page.add( + ft.GestureDetector( + content=ft.Container(bgcolor=ft.Colors.GREEN, width=200, height=200), + hover_interval=50, + on_tap=lambda e: print(e), + on_tap_down=lambda e: print(e), + on_tap_up=lambda e: print(e), + on_secondary_tap=lambda e: print(e), + on_secondary_tap_down=lambda e: print(e), + on_secondary_tap_up=lambda e: print(e), + on_long_press_start=lambda e: print(e), + on_long_press_end=lambda e: print(e), + on_secondary_long_press_start=lambda e: print(e), + on_secondary_long_press_end=lambda e: print(e), + on_double_tap=lambda e: print(e), + on_double_tap_down=lambda e: print(e), + on_pan_start=lambda e: print(e), + on_pan_update=lambda e: print(e), + on_pan_end=lambda e: print(e), + on_hover=lambda e: print(e), + on_enter=lambda e: print(e), + on_exit=lambda e: print(e), + ) + ) + + +ft.run(main) diff --git a/python/controls/gesture-detector/media/draggable-containers.gif b/python/controls/gesture-detector/media/draggable-containers.gif new file mode 100644 index 00000000..88ae3784 Binary files /dev/null and b/python/controls/gesture-detector/media/draggable-containers.gif differ diff --git a/python/controls/gesture-detector/mouse-cursors.py b/python/controls/gesture-detector/mouse-cursors.py new file mode 100644 index 00000000..b1c1e7f5 --- /dev/null +++ b/python/controls/gesture-detector/mouse-cursors.py @@ -0,0 +1,43 @@ +import flet as ft + + +def main(page: ft.Page): + def on_pan_update(event: ft.DragUpdateEvent[ft.GestureDetector]): + container.top = max(0.0, container.top + event.delta_y) + container.left = max(0.0, container.left + event.delta_x) + container.update() + + gesture_detector = ft.GestureDetector( + mouse_cursor=ft.MouseCursor.BASIC, + drag_interval=50, + on_pan_update=on_pan_update, + ) + container = ft.Container( + content=gesture_detector, + bgcolor=ft.Colors.AMBER, + width=150, + height=150, + left=0, + top=0, + ) + + def handle_button_click(e: ft.Event[ft.ElevatedButton]): + gesture_detector.mouse_cursor = next( + generate_mouse_cursors(list(ft.MouseCursor)) + ) + text.value = f"Mouse Cursor: {gesture_detector.mouse_cursor}" + page.update() + + def generate_mouse_cursors(m_list): + while True: + for i in m_list: + yield i + + page.add( + ft.Stack(controls=[container], width=1000, height=500), + ft.ElevatedButton("Change mouse Cursor", on_click=handle_button_click), + text := ft.Text(f"Mouse Cursor: {gesture_detector.mouse_cursor}"), + ) + + +ft.run(main) diff --git a/python/controls/grid-view/media/photo-gallery.png b/python/controls/grid-view/media/photo-gallery.png new file mode 100644 index 00000000..723434a0 Binary files /dev/null and b/python/controls/grid-view/media/photo-gallery.png differ diff --git a/python/controls/grid-view/photo-gallery.py b/python/controls/grid-view/photo-gallery.py new file mode 100644 index 00000000..bbeb1dae --- /dev/null +++ b/python/controls/grid-view/photo-gallery.py @@ -0,0 +1,30 @@ +import flet as ft + + +def main(page: ft.Page): + page.title = "GridView Example" + page.theme_mode = ft.ThemeMode.DARK + page.padding = 50 + + page.add( + ft.GridView( + expand=1, + runs_count=5, + max_extent=150, + child_aspect_ratio=1.0, + spacing=5, + run_spacing=5, + controls=[ + ft.Image( + src=f"https://picsum.photos/150/150?{i}", + fit=ft.BoxFit.NONE, + repeat=ft.ImageRepeat.NO_REPEAT, + border_radius=ft.BorderRadius.all(10), + ) + for i in range(0, 60) + ], + ) + ) + + +ft.run(main) diff --git a/python/controls/utility/haptic-feedback/haptic-feedback-example.py b/python/controls/haptic-feedback/basic.py similarity index 87% rename from python/controls/utility/haptic-feedback/haptic-feedback-example.py rename to python/controls/haptic-feedback/basic.py index 0a37f42d..9cf02094 100644 --- a/python/controls/utility/haptic-feedback/haptic-feedback-example.py +++ b/python/controls/haptic-feedback/basic.py @@ -2,8 +2,7 @@ def main(page: ft.Page): - hf = ft.HapticFeedback() - page.overlay.append(hf) + page.overlay.append(hf := ft.HapticFeedback()) page.add( ft.ElevatedButton("Heavy impact", on_click=lambda _: hf.heavy_impact()), diff --git a/python/controls/icon-button/handling-clicks.py b/python/controls/icon-button/handling-clicks.py new file mode 100644 index 00000000..b306db47 --- /dev/null +++ b/python/controls/icon-button/handling-clicks.py @@ -0,0 +1,22 @@ +import flet as ft + + +def main(page: ft.Page): + page.title = "IconButton Example" + + def button_clicked(e: ft.Event[ft.IconButton]): + button.data += 1 + message.value = f"Button clicked {button.data} time(s)" + page.update() + + page.add( + button := ft.IconButton( + icon=ft.Icons.PLAY_CIRCLE_FILL_OUTLINED, + data=0, + on_click=button_clicked, + ), + message := ft.Text(), + ) + + +ft.run(main) diff --git a/python/controls/icon-button/media/handling-clicks.gif b/python/controls/icon-button/media/handling-clicks.gif new file mode 100644 index 00000000..8acd3e5b Binary files /dev/null and b/python/controls/icon-button/media/handling-clicks.gif differ diff --git a/python/controls/icon-button/media/index.png b/python/controls/icon-button/media/index.png new file mode 100644 index 00000000..45079c22 Binary files /dev/null and b/python/controls/icon-button/media/index.png differ diff --git a/python/controls/buttons/icon-button/toggle-icon-button.py b/python/controls/icon-button/selected-icon.py similarity index 84% rename from python/controls/buttons/icon-button/toggle-icon-button.py rename to python/controls/icon-button/selected-icon.py index 114ca877..8a0a7b2c 100644 --- a/python/controls/buttons/icon-button/toggle-icon-button.py +++ b/python/controls/icon-button/selected-icon.py @@ -2,11 +2,12 @@ def main(page: ft.Page): + page.title = "IconButton Example" page.padding = 10 page.horizontal_alignment = ft.CrossAxisAlignment.CENTER page.vertical_alignment = ft.MainAxisAlignment.CENTER - def toggle_icon_button(e): + def handle_click(e: ft.Event[ft.IconButton]): e.control.selected = not e.control.selected e.control.update() @@ -15,7 +16,7 @@ def toggle_icon_button(e): icon=ft.Icons.BATTERY_1_BAR, selected_icon=ft.Icons.BATTERY_FULL, scale=5, - on_click=toggle_icon_button, + on_click=handle_click, selected=False, style=ft.ButtonStyle( color={ diff --git a/python/controls/information-displays/icon/icons-example.py b/python/controls/icon/basic.py similarity index 94% rename from python/controls/information-displays/icon/icons-example.py rename to python/controls/icon/basic.py index e866032a..652e9b0c 100644 --- a/python/controls/information-displays/icon/icons-example.py +++ b/python/controls/icon/basic.py @@ -4,7 +4,7 @@ def main(page: ft.Page): page.add( ft.Row( - [ + controls=[ 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), diff --git a/python/controls/icon/media/basic.png b/python/controls/icon/media/basic.png new file mode 100644 index 00000000..7b7cb64a Binary files /dev/null and b/python/controls/icon/media/basic.png differ diff --git a/python/controls/image-slideshow.py b/python/controls/image-slideshow.py new file mode 100644 index 00000000..bea4349a --- /dev/null +++ b/python/controls/image-slideshow.py @@ -0,0 +1,37 @@ +import flet as ft + + +def main(page: ft.Page): + def animate(e: ft.Event[ft.ElevatedButton]): + image1.left = 400 if image1.left == 0 else 0 + image2.left = 0 if image2.left == -400 else -400 + page.update() + + page.add( + ft.Stack( + width=200, + height=300, + controls=[ + image1 := ft.Image( + src="https://picsum.photos/200/300?1", + left=0, + animate_position=ft.Animation( + duration=300, + curve=ft.AnimationCurve.BOUNCE_OUT, + ), + ), + image2 := ft.Image( + src="https://picsum.photos/200/300?2", + left=-400, + animate_position=ft.Animation( + duration=300, + curve=ft.AnimationCurve.BOUNCE_OUT, + ), + ), + ], + ), + ft.ElevatedButton("Slide!", on_click=animate), + ) + + +ft.run(main) diff --git a/python/controls/information-displays/image/image-base64.py b/python/controls/image/base64.py similarity index 100% rename from python/controls/information-displays/image/image-base64.py rename to python/controls/image/base64.py diff --git a/python/controls/information-displays/image/custom-svg-animation.py b/python/controls/image/dynamic-svg.py similarity index 71% rename from python/controls/information-displays/image/custom-svg-animation.py rename to python/controls/image/dynamic-svg.py index 8968d412..d90b1cf7 100644 --- a/python/controls/information-displays/image/custom-svg-animation.py +++ b/python/controls/image/dynamic-svg.py @@ -3,22 +3,21 @@ async def main(page: ft.Page): - - svg_content = """ + svg_image = """ """ - img = ft.Image(src=svg_content.format(0, 0)) + + img = ft.Image(src=svg_image.format(0, 0)) page.add(img) for c in range(0, 10): for i in range(0, 10): - img.src = svg_content.format(i * 10, i * 10) + img.src = svg_image.format(i * 10, i * 10) img.update() - # page.update() await asyncio.sleep(0.1) diff --git a/python/controls/information-displays/image/images-example.py b/python/controls/image/gallery.py similarity index 60% rename from python/controls/information-displays/image/images-example.py rename to python/controls/image/gallery.py index 1760346a..a57a300d 100644 --- a/python/controls/information-displays/image/images-example.py +++ b/python/controls/image/gallery.py @@ -2,23 +2,22 @@ def main(page: ft.Page): - page.title = "Images Example" + page.title = "Image Example" page.theme_mode = ft.ThemeMode.LIGHT page.padding = 50 - page.update() - img = ft.Image( - src=f"/icons/icon-512.png", - width=100, - height=100, - fit=ft.BoxFit.CONTAIN, + page.add( + ft.Image( + src="/icons/icon-512.png", + width=100, + height=100, + fit=ft.BoxFit.CONTAIN, + ), + gallery := ft.Row(expand=1, wrap=False, scroll=ft.ScrollMode.ALWAYS), ) - images = ft.Row(expand=1, wrap=False, scroll=ft.ScrollMode.ALWAYS) - - page.add(img, images) for i in range(0, 30): - images.controls.append( + gallery.controls.append( ft.Image( src=f"https://picsum.photos/200/200?{i}", width=200, diff --git a/python/controls/information-displays/image/svg-lucide.py b/python/controls/image/lucide-icons.py similarity index 90% rename from python/controls/information-displays/image/svg-lucide.py rename to python/controls/image/lucide-icons.py index dcb3b4f4..08f4b967 100644 --- a/python/controls/information-displays/image/svg-lucide.py +++ b/python/controls/image/lucide-icons.py @@ -1,9 +1,9 @@ import flet as ft -# Browse icons: -# https://lucide.dev/ -# -# Copy selected icon +""" +- Browse Lucide icons: https://lucide.dev/ +- Copy SVG and use it as value for `Image.src` +""" def main(page: ft.Page): diff --git a/python/controls/image/media/gallery.gif b/python/controls/image/media/gallery.gif new file mode 100644 index 00000000..60aa24c0 Binary files /dev/null and b/python/controls/image/media/gallery.gif differ diff --git a/python/controls/information-displays/image/svg-image.py b/python/controls/image/static-svg.py similarity index 81% rename from python/controls/information-displays/image/svg-image.py rename to python/controls/image/static-svg.py index 7b1469fc..633d0a0f 100644 --- a/python/controls/information-displays/image/svg-image.py +++ b/python/controls/image/static-svg.py @@ -2,7 +2,7 @@ def main(page: ft.Page): - svg_content = """ + svg_image = """ @@ -24,18 +24,24 @@ def main(page: ft.Page): C24.93234,5.50982,24.53972,5.11637,24.06196,5.11637z"/> """ + page.add( ft.Image( - src=f"https://raw.githubusercontent.com/dnfield/flutter_svg/master/packages/flutter_svg/example/assets/wikimedia/Firefox_Logo_2017.svg", + src="https://raw.githubusercontent.com/dnfield/flutter_svg/master/packages/flutter_svg/example/assets/wikimedia/Firefox_Logo_2017.svg", width=200, height=200, ), - ft.Image(src=svg_content, width=100, height=100, color=ft.Colors.RED), - ft.Image(src=svg_content, width=100, height=100, color=ft.Colors.BLUE), + ft.Image(src=svg_image, width=100, height=100, color=ft.Colors.RED), + ft.Image(src=svg_image, width=100, height=100, color=ft.Colors.BLUE), ft.Container( - ft.Image(src=svg_content, width=100, height=100, color=ft.Colors.WHITE), bgcolor=ft.Colors.BLACK87, border_radius=5, + content=ft.Image( + src=svg_image, + width=100, + height=100, + color=ft.Colors.WHITE, + ), ), ) diff --git a/python/controls/information-displays/ads/ads-basic-example.py b/python/controls/information-displays/ads/ads-basic-example.py deleted file mode 100644 index 8d370857..00000000 --- a/python/controls/information-displays/ads/ads-basic-example.py +++ /dev/null @@ -1,70 +0,0 @@ -import flet as ft -import flet_ads as ads - - -def main(page: ft.Page): - page.horizontal_alignment = ft.CrossAxisAlignment.CENTER - - id_interstitial = ( - "ca-app-pub-3940256099942544/1033173712" - if page.platform == ft.PagePlatform.ANDROID - else "ca-app-pub-3940256099942544/4411468910" - ) - - id_banner = ( - "ca-app-pub-3940256099942544/6300978111" - if page.platform == ft.PagePlatform.ANDROID - else "ca-app-pub-3940256099942544/2934735716" - ) - - def handle_interstitial_close(e): - nonlocal iad - print("InterstitialAd closed") - page.overlay.remove(e.control) - page.overlay.append(iad := get_new_interstitial_ad()) - page.update() - - def get_new_interstitial_ad(): - return ads.InterstitialAd( - unit_id=id_interstitial, - on_load=lambda e: print("InterstitialAd loaded"), - on_error=lambda e: print("InterstitialAd error", e.data), - on_open=lambda e: print("InterstitialAd opened"), - on_close=handle_interstitial_close, - on_impression=lambda e: print("InterstitialAd impression"), - on_click=lambda e: print("InterstitialAd clicked"), - ) - - def display_new_banner_ad(): - page.add( - ft.Container( - content=ads.BannerAd( - unit_id=id_banner, - on_click=lambda e: print("BannerAd clicked"), - on_load=lambda e: print("BannerAd loaded"), - on_error=lambda e: print("BannerAd error", e.data), - on_open=lambda e: print("BannerAd opened"), - on_close=lambda e: print("BannerAd closed"), - on_impression=lambda e: print("BannerAd impression"), - on_will_dismiss=lambda e: print("BannerAd will dismiss"), - ), - width=320, - height=50, - bgcolor=ft.Colors.TRANSPARENT, - ) - ) - - iad = get_new_interstitial_ad() - page.overlay.append(iad) - page.appbar = ft.AppBar( - adaptive=True, - title=ft.Text("Mobile Ads Playground"), - bgcolor=ft.Colors.LIGHT_BLUE_300, - ) - page.add( - ft.OutlinedButton("Show InterstitialAd", on_click=lambda e: iad.show()), - ft.OutlinedButton("Show BannerAd", on_click=lambda e: display_new_banner_ad()), - ) - - -ft.run(main) diff --git a/python/controls/information-displays/canvas/canvas-face.py b/python/controls/information-displays/canvas/canvas-face.py deleted file mode 100644 index b5aa5d16..00000000 --- a/python/controls/information-displays/canvas/canvas-face.py +++ /dev/null @@ -1,26 +0,0 @@ -import math - -import flet as ft -import flet.canvas as cv - - -def main(page: ft.Page): - stroke_paint = ft.Paint(stroke_width=2, style=ft.PaintingStyle.STROKE) - fill_paint = ft.Paint(style=ft.PaintingStyle.FILL) - cp = cv.Canvas( - [ - cv.Circle(100, 100, 50, stroke_paint), - cv.Circle(80, 90, 10, stroke_paint), - cv.Circle(84, 87, 5, fill_paint), - cv.Circle(120, 90, 10, stroke_paint), - cv.Circle(124, 87, 5, fill_paint), - cv.Arc(70, 95, 60, 40, 0, math.pi, paint=stroke_paint), - ], - width=float("inf"), - expand=True, - ) - - page.add(cp) - - -ft.run(main) diff --git a/python/controls/information-displays/canvas/canvas-flet-logo.py b/python/controls/information-displays/canvas/canvas-flet-logo.py deleted file mode 100644 index a3b3b988..00000000 --- a/python/controls/information-displays/canvas/canvas-flet-logo.py +++ /dev/null @@ -1,45 +0,0 @@ -import math - -import flet as ft -import flet.canvas as cv - - -def main(page: ft.Page): - page.theme_mode = ft.ThemeMode.LIGHT - cp = cv.Canvas( - [ - cv.Path( - [ - cv.Path.MoveTo(25, 125), - cv.Path.QuadraticTo(50, 25, 135, 35, 0.35), - cv.Path.QuadraticTo(75, 115, 135, 215, 0.6), - cv.Path.QuadraticTo(50, 225, 25, 125, 0.35), - ], - paint=ft.Paint( - stroke_width=2, - style=ft.PaintingStyle.FILL, - color=ft.Colors.PINK_400, - ), - ), - cv.Path( - [ - cv.Path.MoveTo(85, 125), - cv.Path.QuadraticTo(120, 85, 165, 75, 0.5), - cv.Path.QuadraticTo(120, 115, 165, 175, 0.3), - cv.Path.QuadraticTo(120, 165, 85, 125, 0.5), - ], - paint=ft.Paint( - stroke_width=2, - style=ft.PaintingStyle.FILL, - color=ft.Colors.with_opacity(0.5, ft.Colors.BLUE_400), - ), - ), - ], - width=float("inf"), - expand=True, - ) - - page.add(cp) - - -ft.run(main) diff --git a/python/controls/information-displays/canvas/canvas-gradients.py b/python/controls/information-displays/canvas/canvas-gradients.py deleted file mode 100644 index 44b8d0c8..00000000 --- a/python/controls/information-displays/canvas/canvas-gradients.py +++ /dev/null @@ -1,60 +0,0 @@ -import math - -import flet as ft -import flet.canvas as cv - - -def main(page: ft.Page): - cp = cv.Canvas( - [ - cv.Rect( - 10, - 10, - 100, - 100, - 5, - ft.Paint( - gradient=ft.PaintLinearGradient( - (0, 10), - (100, 50), - colors=[ft.Colors.BLUE, ft.Colors.YELLOW], - ), - style=ft.PaintingStyle.FILL, - ), - ), - cv.Circle( - 60, - 170, - 50, - ft.Paint( - gradient=ft.PaintRadialGradient( - (60, 170), 50, colors=[ft.Colors.YELLOW, ft.Colors.BLUE] - ), - style=ft.PaintingStyle.FILL, - ), - ), - cv.Path( - [cv.Path.Arc(10, 230, 100, 100, 3 * math.pi / 4, 3 * math.pi / 2)], - ft.Paint( - gradient=ft.PaintSweepGradient( - (60, 280), - colors=[ft.Colors.YELLOW, ft.Colors.PURPLE], - color_stops=[0.0, 1.0], - start_angle=0, - end_angle=math.pi * 2, - rotation=3 * math.pi / 4, - ), - stroke_width=15, - stroke_join=ft.StrokeJoin.ROUND, - style=ft.PaintingStyle.STROKE, - ), - ), - ], - width=float("inf"), - expand=True, - ) - - page.add(cp) - - -ft.run(main) diff --git a/python/controls/information-displays/canvas/canvas-path-triangles.py b/python/controls/information-displays/canvas/canvas-path-triangles.py deleted file mode 100644 index 73328a3e..00000000 --- a/python/controls/information-displays/canvas/canvas-path-triangles.py +++ /dev/null @@ -1,40 +0,0 @@ -import math - -import flet as ft -import flet.canvas as cv - - -def main(page: ft.Page): - cp = cv.Canvas( - [ - cv.Path( - [ - cv.Path.MoveTo(25, 25), - cv.Path.LineTo(105, 25), - cv.Path.LineTo(25, 105), - ], - paint=ft.Paint( - style=ft.PaintingStyle.FILL, - ), - ), - cv.Path( - [ - cv.Path.MoveTo(125, 125), - cv.Path.LineTo(125, 45), - cv.Path.LineTo(45, 125), - cv.Path.Close(), - ], - paint=ft.Paint( - stroke_width=2, - style=ft.PaintingStyle.STROKE, - ), - ), - ], - width=float("inf"), - expand=True, - ) - - page.add(cp) - - -ft.run(main) diff --git a/python/controls/information-displays/canvas/canvas-resize.py b/python/controls/information-displays/canvas/canvas-resize.py deleted file mode 100644 index 8fcc78a0..00000000 --- a/python/controls/information-displays/canvas/canvas-resize.py +++ /dev/null @@ -1,42 +0,0 @@ -import flet as ft -import flet.canvas as cv - - -def main(page: ft.Page): - def paint_resize(e: cv.CanvasResizeEvent): - print("On resize:", e.width, e.height) - cp.shapes[0].x2 = e.width - cp.shapes[0].y2 = e.height - cp.shapes[1].y1 = e.height - cp.shapes[1].x2 = e.width - cp.update() - - cp = cv.Canvas( - [ - cv.Line( - 0, - 0, - 100, - 100, - ), - cv.Line( - 0, - 100, - 100, - 0, - ), - ], - resize_interval=10, - on_resize=paint_resize, - ) - - page.add( - ft.Container( - cp, - width=float("inf"), - expand=True, - ) - ) - - -ft.run(main) diff --git a/python/controls/information-displays/canvas/canvas-text.py b/python/controls/information-displays/canvas/canvas-text.py deleted file mode 100644 index aadb263e..00000000 --- a/python/controls/information-displays/canvas/canvas-text.py +++ /dev/null @@ -1,93 +0,0 @@ -import math - -import flet as ft -import flet.canvas as cv - - -def main(page: ft.Page): - cp = cv.Canvas( - [ - cv.Text(0, 0, "Just a text"), - cv.Circle(200, 100, 2, ft.Paint(color=ft.Colors.RED)), - cv.Text( - 200, - 100, - "Rotated", - ft.TextStyle(weight=ft.FontWeight.BOLD, size=30), - spans=[ - ft.TextSpan( - "around top_center", - ft.TextStyle(italic=True, color=ft.Colors.GREEN, size=20), - ) - ], - alignment=ft.Alignment.top_center(), - rotate=math.pi * 0.15, - ), - cv.Circle(400, 100, 2, ft.Paint(color=ft.Colors.RED)), - cv.Text( - 400, - 100, - "Rotated around top_left", - ft.TextStyle(size=20), - alignment=ft.Alignment.top_left(), - rotate=math.pi * -0.15, - ), - cv.Circle(600, 200, 2, ft.Paint(color=ft.Colors.RED)), - cv.Text( - 600, - 200, - "Rotated around center", - ft.TextStyle(size=20), - alignment=ft.Alignment.center(), - rotate=math.pi / 2, - ), - cv.Text( - 300, - 400, - "Limited to max_width and right-aligned.\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", - text_align=ft.TextAlign.RIGHT, - max_width=400, - ), - cv.Text( - 200, - 200, - "WOW!", - ft.TextStyle( - weight=ft.FontWeight.BOLD, - size=100, - foreground=ft.Paint( - color=ft.Colors.PINK, - stroke_width=6, - style=ft.PaintingStyle.STROKE, - stroke_join=ft.StrokeJoin.ROUND, - stroke_cap=ft.StrokeCap.ROUND, - ), - ), - ), - cv.Text( - 200, - 200, - "WOW!", - ft.TextStyle( - weight=ft.FontWeight.BOLD, - size=100, - foreground=ft.Paint( - gradient=ft.PaintLinearGradient( - (200, 200), - (300, 300), - colors=[ft.Colors.YELLOW, ft.Colors.RED], - ), - stroke_join=ft.StrokeJoin.ROUND, - stroke_cap=ft.StrokeCap.ROUND, - ), - ), - ), - ], - width=float("inf"), - expand=True, - ) - - page.add(cp) - - -ft.run(main) diff --git a/python/controls/information-displays/circle-avatar/avatar-test.py b/python/controls/information-displays/circle-avatar/avatar-test.py deleted file mode 100644 index cf7ccbd3..00000000 --- a/python/controls/information-displays/circle-avatar/avatar-test.py +++ /dev/null @@ -1,42 +0,0 @@ -import flet as ft - - -def main(page): - # a "normal" avatar with background image - a1 = ft.CircleAvatar( - foreground_image_src="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_src="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_src="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.run(main) diff --git a/python/controls/information-displays/map/map-layers-example.py b/python/controls/information-displays/map/map-layers-example.py deleted file mode 100644 index 6bde7b32..00000000 --- a/python/controls/information-displays/map/map-layers-example.py +++ /dev/null @@ -1,141 +0,0 @@ -import random -import flet as ft -import flet_map as map - - -def main(page: ft.Page): - marker_layer_ref = ft.Ref[map.MarkerLayer]() - circle_layer_ref = ft.Ref[map.CircleLayer]() - - def handle_tap(e: map.MapTapEvent): - # print(e) - if e.name == "tap": - marker_layer_ref.current.markers.append( - map.Marker( - content=ft.Icon( - ft.Icons.LOCATION_ON, color=ft.CupertinoColors.DESTRUCTIVE_RED - ), - coordinates=e.coordinates, - ) - ) - elif e.name == "long_press": - circle_layer_ref.current.circles.append( - map.CircleMarker( - radius=random.randint(5, 10), - coordinates=e.coordinates, - color=ft.Colors.random(), - border_color=ft.Colors.random(), - border_stroke_width=4, - ) - ) - page.update() - - # def handle_event(e: map.MapEvent): - # print(e) - - page.add( - ft.Text("Click anywhere to add a Marker, long-click to add a CircleMarker."), - map.Map( - expand=True, - initial_center=map.MapLatitudeLongitude(15, 10), - initial_zoom=4.2, - interaction_configuration=map.MapInteractionConfiguration( - flags=map.MapInteractiveFlag.ALL - ), - on_init=lambda e: print(f"Initialized Map"), - on_tap=handle_tap, - on_secondary_tap=handle_tap, - on_long_press=handle_tap, - # on_event=lambda e: print(e), - layers=[ - map.TileLayer( - url_template="https://tile.openstreetmap.org/{z}/{x}/{y}.png", - on_image_error=lambda e: print("TileLayer Error"), - ), - map.RichAttribution( - attributions=[ - map.TextSourceAttribution( - text="OpenStreetMap Contributors", - on_click=lambda e: e.page.launch_url( - "https://openstreetmap.org/copyright" - ), - ), - map.TextSourceAttribution( - text="Flet", - on_click=lambda e: e.page.launch_url("https://flet.dev"), - ), - ] - ), - map.SimpleAttribution( - text="Flet", - alignment=ft.alignment.top_right, - on_click=lambda e: print("Clicked SimpleAttribution"), - ), - map.MarkerLayer( - ref=marker_layer_ref, - markers=[ - map.Marker( - content=ft.Icon(ft.Icons.LOCATION_ON), - coordinates=map.MapLatitudeLongitude(30, 15), - ), - map.Marker( - content=ft.Icon(ft.Icons.LOCATION_ON), - coordinates=map.MapLatitudeLongitude(10, 10), - ), - map.Marker( - content=ft.Icon(ft.Icons.LOCATION_ON), - coordinates=map.MapLatitudeLongitude(25, 45), - ), - ], - ), - map.CircleLayer( - ref=circle_layer_ref, - circles=[ - map.CircleMarker( - radius=10, - coordinates=map.MapLatitudeLongitude(30.05, 31.25), - color=ft.Colors.RED, - border_color=ft.Colors.BLUE, - border_stroke_width=4, - ), - ], - ), - map.PolygonLayer( - polygons=[ - map.PolygonMarker( - label="Popular Touristic Area", - label_text_style=ft.TextStyle( - color=ft.Colors.BLACK, - size=15, - weight=ft.FontWeight.BOLD, - ), - color=ft.Colors.with_opacity(0.3, ft.Colors.BLUE), - coordinates=[ - map.MapLatitudeLongitude(10, 10), - map.MapLatitudeLongitude(30, 15), - map.MapLatitudeLongitude(25, 45), - ], - ), - ], - ), - map.PolylineLayer( - polylines=[ - map.PolylineMarker( - border_stroke_width=3, - border_color=ft.Colors.RED, - gradient_colors=[ft.Colors.BLACK, ft.Colors.BLACK], - color=ft.Colors.with_opacity(0.6, ft.Colors.GREEN), - coordinates=[ - map.MapLatitudeLongitude(10, 10), - map.MapLatitudeLongitude(30, 15), - map.MapLatitudeLongitude(25, 45), - ], - ), - ], - ), - ], - ), - ) - - -ft.run(main) diff --git a/python/controls/information-displays/markdown/markdown-event-example.py b/python/controls/information-displays/markdown/markdown-event-example.py deleted file mode 100644 index d2b2b18e..00000000 --- a/python/controls/information-displays/markdown/markdown-event-example.py +++ /dev/null @@ -1,18 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - def open_url(e): - page.launch_url(e.data) - - page.add( - ft.Markdown( - "[inline-style](https://www.google.com)", - extension_set=ft.MarkdownExtensionSet.GITHUB_WEB, - on_tap_link=open_url, - expand=True, - ), - ) - - -ft.run(main) diff --git a/python/controls/information-displays/progress-bar/progress-bar.py b/python/controls/information-displays/progress-bar/progress-bar.py deleted file mode 100644 index 9d581f91..00000000 --- a/python/controls/information-displays/progress-bar/progress-bar.py +++ /dev/null @@ -1,33 +0,0 @@ -import asyncio - -import flet as ft - - -async def main(page: ft.Page): - pb = ft.ProgressBar(width=400) - pbl = ft.Text("Doing something...") - - page.add( - ft.Text( - "Linear progress indicator", theme_style=ft.TextThemeStyle.HEADLINE_SMALL - ), - ft.Column([pbl, pb]), - ft.Text( - "Indeterminate progress bar", theme_style=ft.TextThemeStyle.HEADLINE_SMALL - ), - ft.ProgressBar( - width=400, - color=ft.Colors.AMBER, - ), - ) - - for i in range(0, 101): - - pb.value = i * 0.01 - await asyncio.sleep(0.1) - if i == 100: - pbl.value = "Finished!" - page.update() - - -ft.run(main) diff --git a/python/controls/information-displays/progress-ring/gauge-with-progress.py b/python/controls/information-displays/progress-ring/gauge-with-progress.py deleted file mode 100644 index f6bcc4d7..00000000 --- a/python/controls/information-displays/progress-ring/gauge-with-progress.py +++ /dev/null @@ -1,22 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - - page.add( - ft.Stack( - [ - ft.Container(ft.Text("60%"), alignment=ft.Alignment.center()), - ft.ProgressRing( - value=0.6, - width=100, - height=100, - ), - ], - width=100, - height=100, - ) - ) - - -ft.run(main) diff --git a/python/controls/information-displays/progress-ring/progress-ring.py b/python/controls/information-displays/progress-ring/progress-ring.py deleted file mode 100644 index 744c64f0..00000000 --- a/python/controls/information-displays/progress-ring/progress-ring.py +++ /dev/null @@ -1,28 +0,0 @@ -import asyncio -import flet as ft - - -async def main(page: ft.Page): - pr = ft.ProgressRing(width=16, height=16, stroke_width=2) - prl = ft.Text("Wait for the completion...") - page.add( - ft.Text("Circular progress indicator", style=ft.TextThemeStyle.HEADLINE_SMALL), - ft.Row([pr, prl]), - ft.Text( - "Indeterminate cicrular progress", style=ft.TextThemeStyle.HEADLINE_SMALL - ), - 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 - await asyncio.sleep(0.1) - if i == 100: - prl.value = "Finished!" - page.update() - - -ft.run(main) diff --git a/python/controls/information-displays/text/text-custom-styles.py b/python/controls/information-displays/text/text-custom-styles.py deleted file mode 100644 index 1c10f8ea..00000000 --- a/python/controls/information-displays/text/text-custom-styles.py +++ /dev/null @@ -1,68 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - page.title = "Text custom styles" - page.scroll = ft.ScrollMode.ADAPTIVE - - page.add( - ft.Text("Size 10", size=10), - ft.Text("Size 30, Italic", size=30, color=ft.Colors.PINK_600, italic=True), - ft.Text( - "Size 40, w100", - size=40, - color=ft.Colors.WHITE, - bgcolor=ft.Colors.BLUE_600, - weight=ft.FontWeight.W_100, - ), - ft.Text( - "Size 50, Normal", - size=50, - color=ft.Colors.WHITE, - bgcolor=ft.Colors.ORANGE_800, - weight=ft.FontWeight.NORMAL, - ), - ft.Text( - "Size 60, Bold, Italic", - size=50, - color=ft.Colors.WHITE, - bgcolor=ft.Colors.GREEN_700, - weight=ft.FontWeight.BOLD, - italic=True, - ), - ft.Text( - "Size 70, w900, selectable", - size=70, - weight=ft.FontWeight.W_900, - selectable=True, - ), - ft.Text( - "Limit long text to 1 line with ellipsis", - theme_style=ft.TextThemeStyle.HEADLINE_SMALL, - ), - ft.Text( - "Proin rutrum, purus sit amet elementum volutpat, nunc lacus vulputate orci, cursus ultrices neque dui quis purus. Ut ultricies purus nec nibh bibendum, eget vestibulum metus various. Duis convallis maximus justo, eu rutrum libero maximus id. Donec ullamcorper arcu in sapien molestie, non pellentesque tellus pellentesque. Nulla nec tristique ex. Maecenas euismod nisl enim, a convallis arcu laoreet at. Ut at tortor finibus, rutrum massa sit amet, pulvinar velit. Phasellus diam lorem, viverra vitae leo vitae, consequat suscipit lorem.", - max_lines=1, - overflow=ft.TextOverflow.ELLIPSIS, - ), - ft.Text( - "Limit long text to 2 lines and fading", - theme_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. Name various 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.Text( - "Limit the width and height of long text", - theme_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. Name various at metus vitae vulputate. Praesent faucibus nibh lorem, eu pretium dolor dictum nec. Phasellus eget dui laoreet, viverra magna vitae, pellentesque diam.", - width=700, - height=100, - ), - ) - - -ft.run(main) diff --git a/python/controls/information-displays/text/variable-weight-font.py b/python/controls/information-displays/text/variable-weight-font.py deleted file mode 100644 index 97e9ade0..00000000 --- a/python/controls/information-displays/text/variable-weight-font.py +++ /dev/null @@ -1,33 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - page.fonts = { - "RobotoSlab": "https://github.com/google/fonts/raw/main/apache/robotoslab/RobotoSlab%5Bwght%5D.ttf" - } - - t = ft.Text( - "This is rendered with Roboto Slab", - size=30, - font_family="RobotoSlab", - weight=ft.FontWeight.W_100, - ) - - def width_changed(e): - t.weight = f"w{int(e.control.value)}" - t.update() - - page.add( - t, - ft.Slider( - min=100, - max=900, - divisions=8, - label="{value}", - width=500, - on_change=width_changed, - ), - ) - - -ft.run(main) diff --git a/python/controls/information-displays/web-view/web-view-example.py b/python/controls/information-displays/web-view/web-view-example.py deleted file mode 100644 index 25b242e3..00000000 --- a/python/controls/information-displays/web-view/web-view-example.py +++ /dev/null @@ -1,16 +0,0 @@ -import flet as ft -import flet_webview as ftwv - - -def main(page: ft.Page): - wv = ftwv.WebView( - url="https://flet.dev", - on_page_started=lambda _: print("Page started"), - on_page_ended=lambda _: print("Page ended"), - on_web_resource_error=lambda e: print("Page error:", e.data), - expand=True, - ) - page.add(wv) - - -ft.run(main) diff --git a/python/controls/input-and-selections/checkbox/checkbox-basic.py b/python/controls/input-and-selections/checkbox/checkbox-basic.py deleted file mode 100644 index 429bd0de..00000000 --- a/python/controls/input-and-selections/checkbox/checkbox-basic.py +++ /dev/null @@ -1,22 +0,0 @@ -import flet as ft - - -def main(page: ft.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(content="Submit", on_click=button_clicked) - page.add(c1, c2, c3, c4, c5, b, t) - - -ft.run(main) diff --git a/python/controls/input-and-selections/checkbox/checkbox-with-event.py b/python/controls/input-and-selections/checkbox/checkbox-with-event.py deleted file mode 100644 index 0b6f8e7b..00000000 --- a/python/controls/input-and-selections/checkbox/checkbox-with-event.py +++ /dev/null @@ -1,14 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - def checkbox_changed(e): - page.add(ft.Text(f"Checkbox value changed to {c.value}")) - page.update() - - c = ft.Checkbox(label="Checkbox with 'change' event", on_change=checkbox_changed) - - page.add(c) - - -ft.run(main) diff --git a/python/controls/input-and-selections/chip/chip-example.py b/python/controls/input-and-selections/chip/chip-example.py deleted file mode 100644 index 3789b8cd..00000000 --- a/python/controls/input-and-selections/chip/chip-example.py +++ /dev/null @@ -1,34 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - def save_to_favorites_clicked(e): - e.control.label.value = "Saved to favorites" - e.control.leading = ft.Icon(ft.Icons.FAVORITE_OUTLINED) - e.control.disabled = True - page.update() - - def open_google_maps(e): - page.launch_url("https://maps.google.com") - page.update() - - save_to_favourites = ft.Chip( - label=ft.Text("Save to favourites"), - leading=ft.Icon(ft.Icons.FAVORITE_BORDER_OUTLINED), - bgcolor=ft.Colors.GREEN_200, - disabled_color=ft.Colors.GREEN_100, - autofocus=True, - on_click=save_to_favorites_clicked, - ) - - open_in_maps = ft.Chip( - label=ft.Text("9 min walk"), - leading=ft.Icon(ft.Icons.MAP_SHARP), - bgcolor=ft.Colors.GREEN_200, - on_click=open_google_maps, - ) - - page.add(ft.Row([save_to_favourites, open_in_maps])) - - -ft.run(main) diff --git a/python/controls/input-and-selections/chip/chip-filter-example.py b/python/controls/input-and-selections/chip/chip-filter-example.py deleted file mode 100644 index 9881b36c..00000000 --- a/python/controls/input-and-selections/chip/chip-filter-example.py +++ /dev/null @@ -1,26 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - def amenity_selected(e): - page.update() - - title = ft.Row([ft.Icon(ft.Icons.HOTEL_CLASS), ft.Text("Amenities")]) - amenities = ["Washer / Dryer", "Ramp access", "Dogs OK", "Cats OK", "Smoke-free"] - amenity_chips = [] - - for amenity in amenities: - amenity_chips.append( - ft.Chip( - label=ft.Text(amenity), - bgcolor=ft.Colors.GREEN_200, - disabled_color=ft.Colors.GREEN_100, - autofocus=True, - on_select=amenity_selected, - ) - ) - - page.add(title, ft.Row(amenity_chips)) - - -ft.run(main) diff --git a/python/controls/input-and-selections/dropdown/dropdown-example.py b/python/controls/input-and-selections/dropdown/dropdown-example.py deleted file mode 100644 index e4451729..00000000 --- a/python/controls/input-and-selections/dropdown/dropdown-example.py +++ /dev/null @@ -1,41 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - colors = [ - ft.Colors.RED, - ft.Colors.BLUE, - ft.Colors.YELLOW, - ft.Colors.PURPLE, - ft.Colors.LIME, - ] - - def get_options(): - options = [] - for color in colors: - options.append( - ft.DropdownOption( - key=color.value, - content=ft.Text( - value=color.value, - color=color, - ), - ) - ) - return options - - def dropdown_changed(e): - e.control.color = e.control.value - page.update() - - dd = ft.Dropdown( - editable=True, - label="Color", - options=get_options(), - on_change=dropdown_changed, - ) - - page.add(dd) - - -ft.run(main) diff --git a/python/controls/input-and-selections/dropdown/dropdown-icon-example.py b/python/controls/input-and-selections/dropdown/dropdown-icon-example.py deleted file mode 100644 index 35e2a9d0..00000000 --- a/python/controls/input-and-selections/dropdown/dropdown-icon-example.py +++ /dev/null @@ -1,33 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - - icons = [ - {"name": "Smile", "icon_name": ft.Icons.SENTIMENT_SATISFIED_OUTLINED}, - {"name": "Cloud", "icon_name": ft.Icons.CLOUD_OUTLINED}, - {"name": "Brush", "icon_name": ft.Icons.BRUSH_OUTLINED}, - {"name": "Heart", "icon_name": ft.Icons.FAVORITE}, - ] - - def get_options(): - options = [] - for icon in icons: - options.append( - ft.DropdownOption(key=icon["name"], leading_icon=icon["icon_name"]) - ) - return options - - dd = ft.Dropdown( - border=ft.InputBorder.UNDERLINE, - enable_filter=True, - editable=True, - leading_icon=ft.Icons.SEARCH, - label="Icon", - options=get_options(), - ) - - page.add(dd) - - -ft.run(main) diff --git a/python/controls/input-and-selections/dropdown/styled-dropdowns.py b/python/controls/input-and-selections/dropdown/styled-dropdowns.py deleted file mode 100644 index 4885fde2..00000000 --- a/python/controls/input-and-selections/dropdown/styled-dropdowns.py +++ /dev/null @@ -1,122 +0,0 @@ -import flet as ft - - -def main(page): - dd1 = ft.Dropdown( - options=[ - ft.dropdown.Option("a", "Item A"), - ft.dropdown.Option("b", "Item B"), - ft.dropdown.Option("c", "Item C"), - ], - text_size=20, - content_padding=10, - color=ft.Colors.PURPLE_200, - bgcolor=ft.Colors.BLUE_200, - filled=True, - border_radius=30, - border_color=ft.Colors.GREEN_800, - focused_border_color=ft.Colors.GREEN_ACCENT_400, - focused_border_width=5, - ) - - dd2 = ft.Dropdown( - options=[ - ft.dropdown.Option("a", "Item A"), - ft.dropdown.Option("b", "Item B"), - ft.dropdown.Option("c", "Item C"), - ], - border_radius=30, - filled=True, - fill_color=ft.Colors.RED_400, - border_color=ft.Colors.TRANSPARENT, - bgcolor=ft.Colors.RED_200, - color=ft.Colors.CYAN_400, - focused_border_color=ft.Colors.PINK_300, - focused_border_width=20, - ) - - dd3 = ft.Dropdown( - options=[ - ft.dropdown.Option("a", "Item A"), - ft.dropdown.Option("b", "Item B"), - ft.dropdown.Option("c", "Item C"), - ], - border_color=ft.Colors.PINK_ACCENT, - focused_border_color=ft.Colors.GREEN_ACCENT_400, - focused_border_width=25, - border_radius=30, - width=150, - border_width=5, - ) - - dd4 = ft.Dropdown( - options=[ - ft.dropdown.Option("a", "Item A"), - ft.dropdown.Option("b", "Item B"), - ft.dropdown.Option("c", "Item C"), - ], - text_size=30, - color=ft.Colors.ORANGE_ACCENT, - border_radius=20, - filled=True, - border_width=0, - autofocus=True, - focused_border_color=ft.Colors.GREEN_100, - focused_border_width=10, - width=200, - height=50, - ) - - dd5 = ft.Dropdown( - options=[ - ft.dropdown.Option( - "a", - "Item A", - style=ft.ButtonStyle( - color={ - ft.ControlState.HOVERED: ft.Colors.WHITE, - ft.ControlState.FOCUSED: ft.Colors.BLUE, - ft.ControlState.DEFAULT: ft.Colors.BLACK, - }, - shape=ft.BeveledRectangleBorder(radius=15), - ), - ), - ft.dropdown.Option( - "b", - "Item B", - style=ft.ButtonStyle( - color={ - ft.ControlState.HOVERED: ft.Colors.WHITE, - ft.ControlState.FOCUSED: ft.Colors.BLUE, - ft.ControlState.DEFAULT: ft.Colors.BLACK, - }, - shape=ft.BeveledRectangleBorder(radius=15), - ), - ), - ft.dropdown.Option( - "c", - "Item C", - style=ft.ButtonStyle( - color={ - ft.ControlState.HOVERED: ft.Colors.WHITE, - ft.ControlState.FOCUSED: ft.Colors.BLUE, - ft.ControlState.DEFAULT: ft.Colors.BLACK, - }, - shape=ft.BeveledRectangleBorder(radius=15), - ), - ), - ], - text_size=30, - border_radius=20, - filled=True, - border_width=0, - focused_border_color=ft.Colors.GREEN_100, - focused_border_width=10, - content_padding=20, - width=200, - ) - - page.add(dd1, dd2, dd3, ft.Container(dd4, padding=ft.padding.only(bottom=20)), dd5) - - -ft.run(main) diff --git a/python/controls/input-and-selections/dropdownM2/basic-dropdown.py b/python/controls/input-and-selections/dropdownM2/basic-dropdown.py deleted file mode 100644 index 466d82d0..00000000 --- a/python/controls/input-and-selections/dropdownM2/basic-dropdown.py +++ /dev/null @@ -1,24 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - page.theme_mode = ft.ThemeMode.DARK - - def button_clicked(e): - t.value = f"Dropdown value is: {dd.value}" - page.update() - - t = ft.Text() - b = ft.ElevatedButton(content="Submit", on_click=button_clicked) - dd = ft.DropdownM2( - width=100, - options=[ - ft.dropdownm2.Option("Red"), - ft.dropdownm2.Option("Green"), - ft.dropdownm2.Option("Blue"), - ], - ) - page.add(dd, b, t) - - -ft.run(main) diff --git a/python/controls/input-and-selections/dropdownM2/dropdown-change-items.py b/python/controls/input-and-selections/dropdownM2/dropdown-change-items.py deleted file mode 100644 index 0224a610..00000000 --- a/python/controls/input-and-selections/dropdownM2/dropdown-change-items.py +++ /dev/null @@ -1,35 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - def find_option(option_name): - for option in d.options: - if option_name == option.key: - return option - return None - - def add_clicked(e): - d.options.append(ft.dropdown.Option(option_textbox.value)) - d.value = option_textbox.value - option_textbox.value = "" - page.update() - - def delete_clicked(e): - option = find_option(d.value) - if option != None: - d.options.remove(option) - # d.value = None - page.update() - - d = ft.DropdownM2(options=[], color=ft.Colors.BLUE_400) - option_textbox = ft.TextField(hint_text="Enter item name") - add = ft.ElevatedButton(content="Add", on_click=add_clicked) - delete = ft.OutlinedButton( - content="Delete selected", - on_click=delete_clicked, - style=ft.ButtonStyle(bgcolor=ft.Colors.RED), - ) - page.add(d, ft.Row(controls=[option_textbox, add, delete])) - - -ft.run(main) diff --git a/python/controls/input-and-selections/dropdownM2/dropdown-on-change-event.py b/python/controls/input-and-selections/dropdownM2/dropdown-on-change-event.py deleted file mode 100644 index 60d1bded..00000000 --- a/python/controls/input-and-selections/dropdownM2/dropdown-on-change-event.py +++ /dev/null @@ -1,23 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - def dropdown_changed(e): - t.value = f"Dropdown changed to {dd.value}" - page.update() - - t = ft.Text() - dd = ft.DropdownM2( - on_change=dropdown_changed, - options=[ - ft.dropdownm2.Option("Red"), - ft.dropdownm2.Option("Green"), - ft.dropdownm2.Option("Blue"), - ], - width=200, - color=ft.Colors.BLUE_GREY_700, - ) - page.add(dd, t) - - -ft.run(main) diff --git a/python/controls/input-and-selections/dropdownM2/dropdown-random-icon.py b/python/controls/input-and-selections/dropdownM2/dropdown-random-icon.py deleted file mode 100644 index 129950a5..00000000 --- a/python/controls/input-and-selections/dropdownM2/dropdown-random-icon.py +++ /dev/null @@ -1,30 +0,0 @@ -import random -import flet as ft - - -def main(page: ft.Page): - - def dd_choice(e): - t.value = f"{dd.value} chosen" - page.update() - - def btn1_click(e): - icon = ft.Icon(ft.Icons.random()) - dd.options.append( - ft.dropdownm2.Option(text=f"{str(icon.name)[6:]}", content=icon) - ) - page.update() - - def btn2_click(e): - random.shuffle(dd.options) - page.update() - - btn1 = ft.ElevatedButton("Add random item to dropdown!", on_click=btn1_click) - btn2 = ft.ElevatedButton("Shuffle Dropdown items", on_click=btn2_click) - dd = ft.DropdownM2(options=[], options_fill_horizontally=True, on_change=dd_choice) - t = ft.Text() - - page.add(dd, btn1, btn2, t) - - -ft.run(main) diff --git a/python/controls/input-and-selections/form-controls-misc.py b/python/controls/input-and-selections/form-controls-misc.py deleted file mode 100644 index 08f30286..00000000 --- a/python/controls/input-and-selections/form-controls-misc.py +++ /dev/null @@ -1,144 +0,0 @@ -import flet -from flet import ( - Checkbox, - Column, - Container, - Dropdown, - ElevatedButton, - Image, - Page, - Radio, - RadioGroup, - Row, - Slider, - Switch, - Text, - Theme, - border, - border_radius, - dropdown, - padding, -) - - -def main(page: Page): - page.title = "Form Example" - page.theme_mode = "light" - page.padding = Padding.all(20) - - results = Column(scroll="always", height=100) - - checkboxes = Column( - [ - Checkbox(value=True), - Checkbox(label="A simple checkbox with a label"), - Checkbox(label="Checkbox with tristate", tristate=True), - Checkbox(label="Disabled checkbox", disabled=True), - Checkbox(label="Label on the left", label_position="left"), - ] - ) - - switches = Column( - [ - Switch(value=True), - Switch(value=False), - Switch(label="Switch with a label"), - Switch(label="Disabled switch", disabled=True), - Switch(label="Label on the left", label_position="left"), - ] - ) - - rg = RadioGroup( - content=Column( - [ - Radio(value="red", label="Red color"), - Radio(value="green", label="Green color"), - Radio(value="blue", label="Blue color"), - ] - ) - ) - - def rg1_on_change(e): - results.controls.append(Text(f"Selected value: {rg1.value}")) - page.update() - - rg1 = RadioGroup( - content=Row( - [ - Radio(value="one", label="One"), - Radio(value="two", label="Two"), - Radio(value="three", label="Three"), - ] - ), - value="two", - on_change=rg1_on_change, - ) - - dd = Dropdown( - options=[ - dropdown.Option("a", "Item A"), - dropdown.Option("b", "Item B"), - dropdown.Option("c", "Item C"), - ], - value="b", - content_padding=Padding.all(5), - height=35, - ) - - dd1 = Dropdown( - options=[ - dropdown.Option("r", "Red"), - dropdown.Option("g", "Green"), - dropdown.Option("b", "Blue"), - ] - ) - dd2 = Dropdown( - options=[ - dropdown.Option("1", "One"), - dropdown.Option("2", "Two"), - dropdown.Option("3", "Three"), - ], - label="My favorite number", - icon="format_size", - hint_text="Choose your favorite color", - helper_text="You can choose only one color", - counter_text="0 colors selected", - prefix_icon="color_lens", - suffix_text="...is your color", - ) - - page.add( - Column( - [ - Text("Checkboxes", style="headlineMedium"), - checkboxes, - Text("Switches", style="headlineMedium"), - switches, - Text("Radio", style="headlineMedium"), - rg, - Text("Radio with on_change", style="headlineMedium"), - rg1, - Container( - content=results, - padding=10, - border=border.all(1, "black12"), - border_radius=border_radius.all(10), - bgcolor="black12", - ), - Text("Dropdown with pre-selected value", style="headlineMedium"), - dd, - Text("Dropdown", style="headlineMedium"), - dd1, - Text("Dropdown with all decoration", style="headlineMedium"), - dd2, - Text("Slider", style="headlineMedium"), - Slider(value=0.5), - Slider(min=0, max=100, divisions=10, value=30, label="{value}%"), - ], - scroll="always", - expand=1, - ), - ) - - -flet.app(main) diff --git a/python/controls/input-and-selections/radio/radiogroup-basic.py b/python/controls/input-and-selections/radio/radiogroup-basic.py deleted file mode 100644 index 5e1f2672..00000000 --- a/python/controls/input-and-selections/radio/radiogroup-basic.py +++ /dev/null @@ -1,24 +0,0 @@ -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(content="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.run(main) diff --git a/python/controls/input-and-selections/radio/radiogroup-with-event.py b/python/controls/input-and-selections/radio/radiogroup-with-event.py deleted file mode 100644 index 2ef24e55..00000000 --- a/python/controls/input-and-selections/radio/radiogroup-with-event.py +++ /dev/null @@ -1,24 +0,0 @@ -import flet as ft - - -def main(page): - def radiogroup_changed(e): - t.value = f"Your favorite color is: {e.control.value}" - page.update() - - t = ft.Text() - cg = ft.RadioGroup( - content=ft.Column( - [ - ft.Radio(value="red", label="Red"), - ft.Radio(value="green", label="Green"), - ft.Radio(value="blue", label="Blue"), - ] - ), - on_change=radiogroup_changed, - ) - - page.add(ft.Text("Select your favorite color:"), cg, t) - - -ft.run(main) diff --git a/python/controls/input-and-selections/range-slider/range-slider-example.py b/python/controls/input-and-selections/range-slider/range-slider-example.py deleted file mode 100644 index 45f2f9e2..00000000 --- a/python/controls/input-and-selections/range-slider/range-slider-example.py +++ /dev/null @@ -1,33 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - range_slider = ft.RangeSlider( - min=0, - max=50, - start_value=10, - divisions=10, - end_value=20, - inactive_color=ft.Colors.GREEN_300, - active_color=ft.Colors.GREEN_700, - overlay_color=ft.Colors.GREEN_100, - label="{value}%", - ) - - page.add( - ft.Column( - horizontal_alignment=ft.CrossAxisAlignment.CENTER, - controls=[ - ft.Text( - "Range slider with divisions and labels", - size=20, - weight=ft.FontWeight.BOLD, - ), - ft.Container(height=30), - range_slider, - ], - ) - ) - - -ft.run(main) diff --git a/python/controls/input-and-selections/range-slider/range-slider-with-event.py b/python/controls/input-and-selections/range-slider/range-slider-with-event.py deleted file mode 100644 index 4eb470a6..00000000 --- a/python/controls/input-and-selections/range-slider/range-slider-with-event.py +++ /dev/null @@ -1,48 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - page.scroll = ft.ScrollMode.AUTO - - def slider_change_start(e): - print(f"on_change_start: {e.control.start_value}, {e.control.end_value}") - - def slider_is_changing(e): - print(f"on_change: {e.control.start_value}, {e.control.end_value}") - - def slider_change_end(e): - print(f"on_change_end: {e.control.start_value}, {e.control.end_value}") - t.value = f"on_change_end: {e.control.start_value}, {e.control.end_value}" - page.update() - - t = ft.Text("") - - range_slider = ft.RangeSlider( - divisions=50, - min=0, - max=50, - start_value=10, - end_value=20, - on_change_start=slider_change_start, - on_change=slider_is_changing, - on_change_end=slider_change_end, - ) - - page.add( - ft.Column( - horizontal_alignment=ft.CrossAxisAlignment.CENTER, - controls=[ - ft.Text( - "Range slider with events", - size=20, - weight=ft.FontWeight.BOLD, - ), - ft.Container(height=30), - range_slider, - t, - ], - ) - ) - - -ft.run(main) diff --git a/python/controls/input-and-selections/search-bar/search-bar-example.py b/python/controls/input-and-selections/search-bar/search-bar-example.py deleted file mode 100644 index 24bc2b0f..00000000 --- a/python/controls/input-and-selections/search-bar/search-bar-example.py +++ /dev/null @@ -1,49 +0,0 @@ -import flet as ft - - -def main(page): - - def close_anchor(e): - text = f"Color {e.control.data}" - print(f"closing view from {text}") - anchor.close_view(text) - - def handle_change(e): - print(f"handle_change e.data: {e.data}") - - def handle_submit(e): - print(f"handle_submit e.data: {e.data}") - - def handle_tap(e): - print(f"handle_tap") - anchor.open_view() - - anchor = ft.SearchBar( - view_elevation=4, - divider_color=ft.Colors.AMBER, - bar_hint_text="Search colors...", - view_hint_text="Choose a color from the suggestions...", - on_change=handle_change, - on_submit=handle_submit, - on_tap=handle_tap, - controls=[ - ft.ListTile(title=ft.Text(f"Color {i}"), on_click=close_anchor, data=i) - for i in range(10) - ], - ) - - page.add( - ft.Row( - alignment=ft.MainAxisAlignment.CENTER, - controls=[ - ft.OutlinedButton( - content="Open Search View", - on_click=lambda _: anchor.open_view(), - ), - ], - ), - anchor, - ) - - -ft.run(main) diff --git a/python/controls/input-and-selections/search-bar/search-bar-toggle.py b/python/controls/input-and-selections/search-bar/search-bar-toggle.py deleted file mode 100644 index 05e40b7c..00000000 --- a/python/controls/input-and-selections/search-bar/search-bar-toggle.py +++ /dev/null @@ -1,68 +0,0 @@ -import flet as ft - - -def main(page): - - def close_anchor(e): - text = f"Color {e.control.data}" - print(f"closing view from {text}") - anchor.close_view(text) - ob.focus() - - def handle_change(e): - print(f"handle_change e.data: {e.data}") - - def handle_submit(e): - print(f"handle_submit e.data: {e.data}") - page.add(ft.Text(f"Search submitted for: {e.data}")) - page.update() - - def handle_tap(e): - print(f"handle_tap") - anchor.open_view() - - def toggle_open_view(e): - if ob.content == "Open Search View": - ob.content = "Close Search View" - anchor.open_view() - else: - ob.content = "Open Search View" - anchor.close_view(e.data) - page.update() - - def handle_tap_outside_bar(e): - print("handle_tap_outside_bar") - if ob.content == "Open Search View": - ob.content = "Close Search View" - anchor.open_view() - else: - ob.content = "Open Search View" - anchor.close_view(e.data) - page.update() - - anchor = ft.SearchBar( - view_elevation=4, - divider_color=ft.Colors.AMBER, - bar_hint_text="Search colors...", - view_hint_text="Choose a color from the suggestions...", - on_change=handle_change, - on_submit=handle_submit, - on_tap=handle_tap, - # on_tap_outside_bar=handle_tap_outside_bar, - controls=[ - ft.ListTile(title=ft.Text(f"Color {i}"), on_click=close_anchor, data=i) - for i in range(10) - ], - ) - ob = ft.OutlinedButton(content="Open Search View", on_click=toggle_open_view) - - page.add( - ft.Row( - alignment=ft.MainAxisAlignment.CENTER, - controls=[ob], - ), - anchor, - ) - - -ft.run(main) diff --git a/python/controls/input-and-selections/slider/slider-random-change.py b/python/controls/input-and-selections/slider/slider-random-change.py deleted file mode 100644 index 56a2daa9..00000000 --- a/python/controls/input-and-selections/slider/slider-random-change.py +++ /dev/null @@ -1,29 +0,0 @@ -import asyncio -import random -import flet as ft - - -async def main(page): - - def slider_changed(e): - t.value = f"Slider changed to {e.control.value}" - page.update() - - t = ft.Text() - s = ft.Slider(label="{value}", on_change=slider_changed) - - page.add( - ft.Text("Slider with 'on_change' event:"), - s, - t, - ) - - while True: - await asyncio.sleep(1) - val = s.value = random.random() - e = ft.ControlEvent("_", s, data=val) - slider_changed(e) - s.update() - - -ft.run(main) diff --git a/python/controls/input-and-selections/slider/slider-with-change.py b/python/controls/input-and-selections/slider/slider-with-change.py deleted file mode 100644 index 14746b96..00000000 --- a/python/controls/input-and-selections/slider/slider-with-change.py +++ /dev/null @@ -1,19 +0,0 @@ -import flet as ft - - -def main(page): - def slider_changed(e): - t.value = f"Slider changed to {e.control.value}" - page.update() - - t = ft.Text() - page.add( - ft.Text("Slider with 'on_change' event:"), - ft.Slider( - min=0, max=100, divisions=10, label="{value}%", on_change=slider_changed - ), - t, - ) - - -ft.run(main) diff --git a/python/controls/input-and-selections/switch/switch-basic.py b/python/controls/input-and-selections/switch/switch-basic.py deleted file mode 100644 index 862badb1..00000000 --- a/python/controls/input-and-selections/switch/switch-basic.py +++ /dev/null @@ -1,21 +0,0 @@ -import flet as ft - - -def main(page): - def button_clicked(e): - t.value = f"Switch values are: {c1.value}, {c2.value}, {c3.value}, {c4.value}." - page.update() - - t = ft.Text() - c1 = ft.Switch(label="Unchecked switch", value=False) - c2 = ft.Switch(label="Checked switch", value=True) - c3 = ft.Switch(label="Disabled switch", disabled=True) - c4 = ft.Switch( - label="Switch with rendered label_position='left'", - label_position=ft.LabelPosition.LEFT, - ) - b = ft.ElevatedButton(content="Submit", on_click=button_clicked) - page.add(c1, c2, c3, c4, b, t) - - -ft.run(main) diff --git a/python/controls/input-and-selections/text-field/basic-textfields.py b/python/controls/input-and-selections/text-field/basic-textfields.py deleted file mode 100644 index 47fea858..00000000 --- a/python/controls/input-and-selections/text-field/basic-textfields.py +++ /dev/null @@ -1,19 +0,0 @@ -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(content="Submit", on_click=button_clicked) - page.add(tb1, tb2, tb3, tb4, tb5, b, t) - - -ft.run(main) diff --git a/python/controls/input-and-selections/text-field/password.py b/python/controls/input-and-selections/text-field/password.py deleted file mode 100644 index 4335f347..00000000 --- a/python/controls/input-and-selections/text-field/password.py +++ /dev/null @@ -1,12 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - page.add( - ft.TextField( - label="Password with reveal button", password=True, can_reveal_password=True - ) - ) - - -ft.run(main) diff --git a/python/controls/input-and-selections/text-field/prefix-suffix.py b/python/controls/input-and-selections/text-field/prefix-suffix.py deleted file mode 100644 index aa54a134..00000000 --- a/python/controls/input-and-selections/text-field/prefix-suffix.py +++ /dev/null @@ -1,32 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - def button_clicked(e): - t.value = f"Textboxes values are: '{pr.value}', '{sf.value}', '{ps.value}', '{icon.value}'." - page.update() - - t = ft.Text() - b = ft.ElevatedButton(content="Submit", on_click=button_clicked) - pr = ft.TextField(label="With prefix", prefix="https://") - sf = ft.TextField(label="With suffix", suffix=".com") - ps = ft.TextField( - label="With prefix and suffix", - prefix="https://", - suffix=".com", - enable_interactive_selection=True, - ) - icon = ft.TextField( - label="My favorite color", - icon=ft.Icons.FORMAT_SIZE, - hint_text="Type your favorite color", - helper="You can type only one color", - counter="{value_length}/{max_length} chars used", - prefix_icon=ft.Icons.COLOR_LENS, - suffix="...is your color", - max_length=20, - ) - page.add(pr, sf, ps, icon, b, t) - - -ft.run(main) diff --git a/python/controls/input-and-selections/text-field/textfield-style.py b/python/controls/input-and-selections/text-field/textfield-style.py deleted file mode 100644 index 605e6308..00000000 --- a/python/controls/input-and-selections/text-field/textfield-style.py +++ /dev/null @@ -1,54 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - page.theme_mode = ft.ThemeMode.LIGHT - - def textbox_changed(e): - t.value = e.control.value - page.update() - - # ft.TextStyle object has 6 properties: size, weight, italic, font_family, color, bgcolor - tb = ft.TextField( - text_style=ft.TextStyle( - size=15, - italic=True, - color=ft.Colors.DEEP_ORANGE_600, - bgcolor="limeaccent200", - ), - label="Textbox with 'change' event and style:", - label_style=ft.TextStyle( - size=17, - weight=ft.FontWeight.BOLD, - italic=True, - color=ft.Colors.BLUE, - bgcolor=ft.Colors.RED_700, - ), - hint_text="hint", - hint_style=ft.TextStyle( - size=15, - weight=ft.FontWeight.BOLD, - italic=True, - color=ft.Colors.PINK_ACCENT, - bgcolor="brown400", - ), - helper="helper", - helper_style=ft.TextStyle( - size=14, - weight=ft.FontWeight.BOLD, - color=ft.Colors.DEEP_PURPLE, - bgcolor=ft.Colors.BLUE_50, - ), - counter="counter", - counter_style=ft.TextStyle( - size=14, italic=True, color=ft.Colors.YELLOW, bgcolor=ft.Colors.GREEN_500 - ), - on_change=textbox_changed, - ) - - t = ft.Text() - - page.add(tb, t) - - -ft.run(main) diff --git a/python/controls/input-and-selections/text-field/textfield-with-on-change.py b/python/controls/input-and-selections/text-field/textfield-with-on-change.py deleted file mode 100644 index 9a8b730a..00000000 --- a/python/controls/input-and-selections/text-field/textfield-with-on-change.py +++ /dev/null @@ -1,18 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - def textbox_changed(e): - t.value = e.control.value - page.update() - - t = ft.Text() - tb = ft.TextField( - label="Textbox with 'change' event:", - on_change=textbox_changed, - ) - - page.add(tb, t) - - -ft.run(main) diff --git a/python/controls/utility/interactive-viewer/interactive-viewer-example.py b/python/controls/interactive-viewer/handling-events.py similarity index 100% rename from python/controls/utility/interactive-viewer/interactive-viewer-example.py rename to python/controls/interactive-viewer/handling-events.py diff --git a/python/controls/layout/column/column-alignment.py b/python/controls/layout/column/column-alignment.py deleted file mode 100644 index e71c506d..00000000 --- a/python/controls/layout/column/column-alignment.py +++ /dev/null @@ -1,48 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - def items(count): - items = [] - for i in range(1, count + 1): - items.append( - ft.Container( - content=ft.Text(value=str(i)), - alignment=ft.Alignment.center(), - width=50, - height=50, - bgcolor=ft.Colors.AMBER_500, - ) - ) - return items - - def column_with_alignment(align: ft.MainAxisAlignment): - return ft.Column( - [ - ft.Text(str(align), size=10), - ft.Container( - content=ft.Column(items(3), alignment=align), - bgcolor=ft.Colors.AMBER_100, - height=400, - ), - ] - ) - - page.add( - ft.Row( - [ - column_with_alignment(ft.MainAxisAlignment.START), - column_with_alignment(ft.MainAxisAlignment.CENTER), - column_with_alignment(ft.MainAxisAlignment.END), - column_with_alignment(ft.MainAxisAlignment.SPACE_BETWEEN), - column_with_alignment(ft.MainAxisAlignment.SPACE_AROUND), - column_with_alignment(ft.MainAxisAlignment.SPACE_EVENLY), - ], - spacing=30, - alignment=ft.MainAxisAlignment.START, - scroll=ft.ScrollMode.AUTO, - ) - ) - - -ft.run(main) diff --git a/python/controls/layout/column/column-horiz-alignment.py b/python/controls/layout/column/column-horiz-alignment.py deleted file mode 100644 index 7214fedb..00000000 --- a/python/controls/layout/column/column-horiz-alignment.py +++ /dev/null @@ -1,48 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - def items(count): - items = [] - for i in range(1, count + 1): - items.append( - ft.Container( - content=ft.Text(value=str(i)), - alignment=ft.Alignment.center(), - width=50, - height=50, - bgcolor=ft.Colors.AMBER_500, - ) - ) - return items - - def column_with_horiz_alignment(align: ft.CrossAxisAlignment): - return ft.Column( - [ - ft.Text(str(align), size=16), - ft.Container( - content=ft.Column( - items(3), - alignment=ft.MainAxisAlignment.START, - horizontal_alignment=align, - ), - bgcolor=ft.Colors.AMBER_100, - width=100, - ), - ] - ) - - page.add( - ft.Row( - [ - column_with_horiz_alignment(ft.CrossAxisAlignment.START), - column_with_horiz_alignment(ft.CrossAxisAlignment.CENTER), - column_with_horiz_alignment(ft.CrossAxisAlignment.END), - ], - spacing=30, - alignment=ft.MainAxisAlignment.START, - ) - ) - - -ft.run(main) diff --git a/python/controls/layout/column/column-scroll-misc.py b/python/controls/layout/column/column-scroll-misc.py deleted file mode 100644 index 2ae7a3a1..00000000 --- a/python/controls/layout/column/column-scroll-misc.py +++ /dev/null @@ -1,71 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - # page.theme = ft.Theme( - # scrollbar_theme=ft.ScrollbarTheme( - # track_color={ - # ft.ControlState.HOVERED: ft.Colors.AMBER, - # ft.ControlState.DEFAULT: ft.Colors.TRANSPARENT, - # }, - # track_visibility=True, - # track_border_color=ft.Colors.BLUE, - # thumb_visibility=True, - # thumb_color={ - # ft.ControlState.HOVERED: ft.Colors.RED, - # ft.ControlState.DEFAULT: ft.Colors.GREY_300, - # }, - # thickness=30, - # radius=15, - # main_axis_margin=5, - # cross_axis_margin=10, - # ) - # ) - - cl = ft.Column( - spacing=10, - height=200, - width=float("inf"), - scroll=ft.ScrollMode.ALWAYS, - ) - for i in range(0, 100): - cl.controls.append(ft.Text(f"Text line {i}", scroll_key=str(i))) - - def scroll_to_offset(e): - cl.scroll_to(offset=500, duration=1000) - - def scroll_to_start(e): - cl.scroll_to(offset=0, duration=1000) - - def scroll_to_end(e): - cl.scroll_to(offset=-1, duration=2000, curve=ft.AnimationCurve.EASE_IN_OUT) - - def scroll_to_key(e): - cl.scroll_to(scroll_key="20", duration=1000) - - def scroll_to_delta(e): - cl.scroll_to(delta=100, duration=200) - - def scroll_to_minus_delta(e): - cl.scroll_to(delta=-100, duration=200) - - page.add( - ft.Container(cl, border=ft.Border.all(1)), - ft.ElevatedButton("Scroll to offset 500", on_click=scroll_to_offset), - ft.Row( - [ - ft.ElevatedButton("Scroll -100", on_click=scroll_to_minus_delta), - ft.ElevatedButton("Scroll +100", on_click=scroll_to_delta), - ] - ), - ft.ElevatedButton("Scroll to key '20'", on_click=scroll_to_key), - ft.Row( - [ - ft.ElevatedButton("Scroll to start", on_click=scroll_to_start), - ft.ElevatedButton("Scroll to end", on_click=scroll_to_end), - ] - ), - ) - - -ft.run(main) diff --git a/python/controls/layout/column/column-scroll-to-key.py b/python/controls/layout/column/column-scroll-to-key.py deleted file mode 100644 index 5619da8a..00000000 --- a/python/controls/layout/column/column-scroll-to-key.py +++ /dev/null @@ -1,80 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - cl = ft.Column( - spacing=10, - height=200, - width=300, - scroll=ft.ScrollMode.ALWAYS, - controls=[ - ft.Container( - ft.Text("Section A", color=ft.Colors.BLACK), - alignment=ft.Alignment.top_left(), - bgcolor=ft.Colors.YELLOW_200, - height=100, - scroll_key="A", - ), - ft.Container( - ft.Text("Section B", color=ft.Colors.BLACK), - alignment=ft.Alignment.top_left(), - bgcolor=ft.Colors.GREEN_200, - height=100, - scroll_key="B", - ), - ft.Container( - ft.Text("Section C", color=ft.Colors.BLACK), - alignment=ft.Alignment.top_left(), - bgcolor=ft.Colors.BLUE_200, - height=100, - scroll_key="C", - ), - ft.Container( - ft.Text("Section D", color=ft.Colors.BLACK), - alignment=ft.Alignment.top_left(), - bgcolor=ft.Colors.PINK_200, - height=100, - scroll_key="D", - ), - ], - ) - - page.add( - ft.Container(cl, border=ft.Border.all(1)), - ft.Column( - [ - ft.Text("Scroll to:"), - ft.Row( - [ - ft.ElevatedButton( - "Section A", - on_click=lambda _: cl.scroll_to( - scroll_key="A", duration=1000 - ), - ), - ft.ElevatedButton( - "Section B", - on_click=lambda _: cl.scroll_to( - scroll_key="B", duration=1000 - ), - ), - ft.ElevatedButton( - "Section C", - on_click=lambda _: cl.scroll_to( - scroll_key="C", duration=1000 - ), - ), - ft.ElevatedButton( - "Section D", - on_click=lambda _: cl.scroll_to( - scroll_key="D", duration=1000 - ), - ), - ] - ), - ] - ), - ) - - -ft.run(main) diff --git a/python/controls/layout/column/column-scroll.py b/python/controls/layout/column/column-scroll.py deleted file mode 100644 index c25a4a62..00000000 --- a/python/controls/layout/column/column-scroll.py +++ /dev/null @@ -1,83 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - def add_text_box(_): - text_field = ft.TextField( - label=f"Text Box {len(left_column.controls)}", - label_style=ft.TextStyle(color=ft.Colors.GREEN), - color=ft.Colors.GREEN, - value=str(len(left_column.controls)), - ) - left_column.controls.append(text_field) - page.update() - - def remove_text_box(_): - if left_column.controls: - left_column.controls.pop() - page.update() - - def scroll_generator(scroll_mode_list): - while True: - for scroll_mode in scroll_mode_list: - yield scroll_mode - - def change_scroll(_): - left_column.scroll = next(scroll_mode) - scroll_mode_text.value = str(left_column.scroll) - page.update() - - add_text_box_button = ft.ElevatedButton("Add TextBox", on_click=add_text_box) - remove_text_box_button = ft.ElevatedButton( - "Remove TextBox", on_click=remove_text_box - ) - scroll_change_button = ft.ElevatedButton( - "Change Scroll Mode", on_click=change_scroll - ) - - scroll_mode = scroll_generator( - [ - None, - ft.ScrollMode.AUTO, - ft.ScrollMode.ADAPTIVE, - ft.ScrollMode.ALWAYS, - ft.ScrollMode.HIDDEN, - ] - ) - - left_column = ft.Column( - [ft.Text("THIS IS COL 1", color=ft.Colors.RED_400)], - scroll=next(scroll_mode), - ) - left_container = ft.Container( - left_column, - expand=True, - margin=10, - padding=10, - bgcolor=ft.Colors.AMBER_100, - border_radius=10, - alignment=ft.Alignment.top_center(), - ) - scroll_mode_text = ft.Text(str(left_column.scroll)) - right_container = ft.Container( - ft.Column( - [ - add_text_box_button, - remove_text_box_button, - scroll_change_button, - scroll_mode_text, - ], - ), - margin=10, - padding=10, - bgcolor=ft.Colors.CYAN_500, - border_radius=10, - expand=True, - alignment=ft.Alignment.top_left(), - ) - - row = ft.Row([left_container, right_container], expand=True) - page.add(row) - - -ft.run(main) diff --git a/python/controls/layout/column/column-spacing.py b/python/controls/layout/column/column-spacing.py deleted file mode 100644 index f35c5f04..00000000 --- a/python/controls/layout/column/column-spacing.py +++ /dev/null @@ -1,39 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - def items(count): - items = [] - for i in range(1, count + 1): - items.append( - ft.Container( - content=ft.Text(value=str(i)), - alignment=ft.Alignment.center(), - width=50, - height=50, - bgcolor=ft.Colors.AMBER, - border_radius=ft.BorderRadius.all(5), - ) - ) - return items - - def spacing_slider_change(e): - col.spacing = int(e.control.value) - col.update() - - gap_slider = ft.Slider( - min=0, - max=100, - divisions=10, - value=0, - label="{value}", - width=500, - on_change=spacing_slider_change, - ) - - col = ft.Column(spacing=0, controls=items(5)) - - page.add(ft.Column([ft.Text("Spacing between items"), gap_slider]), col) - - -ft.run(main) diff --git a/python/controls/layout/column/column-wrap.py b/python/controls/layout/column/column-wrap.py deleted file mode 100644 index 3c1e5cd0..00000000 --- a/python/controls/layout/column/column-wrap.py +++ /dev/null @@ -1,58 +0,0 @@ -import flet as ft - -HEIGHT = 400 - - -def main(page: ft.Page): - - def items(count): - items = [] - for i in range(1, count + 1): - items.append( - ft.Container( - content=ft.Text(value=str(i)), - alignment=ft.Alignment.center(), - width=30, - height=30, - bgcolor=ft.Colors.AMBER, - border_radius=ft.BorderRadius.all(5), - ) - ) - return items - - def slider_change(e): - col.height = float(e.control.value) - col.update() - - width_slider = ft.Slider( - min=0, - max=HEIGHT, - divisions=20, - value=HEIGHT, - label="{value}", - width=500, - on_change=slider_change, - ) - - col = ft.Column( - wrap=True, - spacing=10, - run_spacing=10, - controls=items(10), - height=HEIGHT, - ) - - page.add( - ft.Column( - [ - ft.Text( - "Change the column height to see how child items wrap onto multiple columns:" - ), - width_slider, - ] - ), - ft.Container(content=col, bgcolor=ft.Colors.TRANSPARENT), - ) - - -ft.run(main) diff --git a/python/controls/layout/column/scroll-events.py b/python/controls/layout/column/scroll-events.py deleted file mode 100644 index 44949c03..00000000 --- a/python/controls/layout/column/scroll-events.py +++ /dev/null @@ -1,25 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - def on_column_scroll(e: ft.OnScrollEvent): - print( - f"Type: {e.event_type}, pixels: {e.pixels}, min_scroll_extent: {e.min_scroll_extent}, max_scroll_extent: {e.max_scroll_extent}" - ) - - cl = ft.Column( - spacing=10, - height=200, - width=200, - scroll=ft.ScrollMode.ALWAYS, - on_scroll=on_column_scroll, - ) - for i in range(0, 50): - cl.controls.append(ft.Text(f"Text line {i}", scroll_key=str(i))) - - page.add( - ft.Container(cl, border=ft.Border.all(1)), - ) - - -ft.run(main) diff --git a/python/controls/layout/container/container-margin.py b/python/controls/layout/container/container-margin.py deleted file mode 100644 index 47f748c6..00000000 --- a/python/controls/layout/container/container-margin.py +++ /dev/null @@ -1,47 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - page.title = "Containers with different margins" - - c1 = ft.Container( - content=ft.ElevatedButton("container_1"), - bgcolor=ft.Colors.AMBER, - # padding=ft.Padding.all(10), - margin=ft.Margin.all(10), - width=200, - height=200, - ) - - c2 = ft.Container( - content=ft.ElevatedButton("container_2"), - bgcolor=ft.Colors.AMBER, - # padding=ft.Padding.all(20), - margin=ft.Margin.all(20), - width=200, - height=200, - ) - - c3 = ft.Container( - content=ft.ElevatedButton("container_3"), - bgcolor=ft.Colors.AMBER, - # padding=ft.padding.symmetric(horizontal=10), - margin=ft.Margin.symmetric(vertical=10), - width=200, - height=200, - ) - - c4 = ft.Container( - content=ft.ElevatedButton("container_4"), - bgcolor=ft.Colors.AMBER, - # padding=ft.padding.only(left=10), - margin=ft.Margin.only(left=10), - width=200, - height=200, - ) - - r = ft.Row([c1, c2, c3, c4], spacing=0) - page.add(r) - - -ft.run(main) diff --git a/python/controls/layout/container/container-padding.py b/python/controls/layout/container/container-padding.py deleted file mode 100644 index 7ee056d5..00000000 --- a/python/controls/layout/container/container-padding.py +++ /dev/null @@ -1,43 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - page.title = "Containers with different padding" - - c1 = ft.Container( - content=ft.ElevatedButton("container_1"), - bgcolor=ft.Colors.AMBER, - padding=ft.Padding.all(10), - width=150, - height=150, - ) - - c2 = ft.Container( - content=ft.ElevatedButton("container_2"), - bgcolor=ft.Colors.AMBER, - padding=ft.Padding.all(20), - width=150, - height=150, - ) - - c3 = ft.Container( - content=ft.ElevatedButton("container_3"), - bgcolor=ft.Colors.AMBER, - padding=ft.padding.symmetric(horizontal=10), - width=150, - height=150, - ) - - c4 = ft.Container( - content=ft.ElevatedButton("container_4"), - bgcolor=ft.Colors.AMBER, - padding=ft.padding.only(left=10), - width=150, - height=150, - ) - - r = ft.Row([c1, c2, c3, c4]) - page.add(r) - - -ft.run(main) diff --git a/python/controls/layout/container/containers-alignment.py b/python/controls/layout/container/containers-alignment.py deleted file mode 100644 index 1e796deb..00000000 --- a/python/controls/layout/container/containers-alignment.py +++ /dev/null @@ -1,38 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - page.title = "Containers with different alignments" - - c1 = ft.Container( - content=ft.ElevatedButton("Center"), - bgcolor=ft.Colors.AMBER, - padding=15, - alignment=ft.Alignment.center(), - width=150, - height=150, - ) - - c2 = ft.Container( - content=ft.ElevatedButton("Top left"), - bgcolor=ft.Colors.AMBER, - padding=15, - alignment=ft.Alignment.top_left(), - width=150, - height=150, - ) - - c3 = ft.Container( - content=ft.ElevatedButton("-0.5, -0.5"), - bgcolor=ft.Colors.AMBER, - padding=15, - alignment=ft.alignment.Alignment(-0.5, -0.5), - width=150, - height=150, - ) - - r = ft.Row([c1, c2, c3]) - page.add(r) - - -ft.run(main) diff --git a/python/controls/layout/container/containers-background-color.py b/python/controls/layout/container/containers-background-color.py deleted file mode 100644 index f57b239a..00000000 --- a/python/controls/layout/container/containers-background-color.py +++ /dev/null @@ -1,27 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - page.title = "Containers with different background color" - - c1 = ft.Container( - content=ft.Text("Container_1"), - bgcolor="#FFCC0000", - padding=5, - ) - - c2 = ft.Container( - content=ft.Text("Container_2"), - bgcolor="#CC0000", - padding=5, - ) - - c3 = ft.Container( - content=ft.Text("Container_3"), - bgcolor=ft.Colors.RED, - padding=5, - ) - page.add(c1, c2, c3) - - -ft.run(main) diff --git a/python/controls/layout/container/containers-borders.py b/python/controls/layout/container/containers-borders.py deleted file mode 100644 index ba6c969c..00000000 --- a/python/controls/layout/container/containers-borders.py +++ /dev/null @@ -1,37 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - page.title = "Containers with different borders" - - c1 = ft.Container( - bgcolor=ft.Colors.AMBER, - padding=15, - border=ft.Border.all(10, ft.Colors.PINK_600), - border_radius=ft.border_radius.all(30), - width=150, - height=150, - ) - - c2 = ft.Container( - bgcolor=ft.Colors.DEEP_PURPLE, - padding=15, - border=ft.Border.all(3, ft.Colors.LIGHT_GREEN_ACCENT), - border_radius=ft.border_radius.only(top_left=10, bottom_right=10), - width=150, - height=150, - ) - - c3 = ft.Container( - bgcolor=ft.Colors.BLUE_GREY_900, - padding=15, - border=ft.Border.symmetric(vertical=ft.BorderSide(8, ft.Colors.YELLOW_800)), - width=150, - height=150, - ) - - r = ft.Row([c1, c2, c3]) - page.add(r) - - -ft.run(main) diff --git a/python/controls/layout/container/simple-hover.py b/python/controls/layout/container/simple-hover.py deleted file mode 100644 index d2243bea..00000000 --- a/python/controls/layout/container/simple-hover.py +++ /dev/null @@ -1,16 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - def on_hover(e): - print(e) - c.bgcolor = ft.Colors.BLUE if e.data else ft.Colors.RED - c.update() - - c = ft.Container( - width=200, height=200, bgcolor=ft.Colors.RED, ink=False, on_hover=on_hover - ) - page.add(c) - - -ft.run(main) diff --git a/python/controls/layout/data-table/datatable-selectable.py b/python/controls/layout/data-table/datatable-selectable.py deleted file mode 100644 index 8242a131..00000000 --- a/python/controls/layout/data-table/datatable-selectable.py +++ /dev/null @@ -1,83 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - def selection_change(e): - print(f"selection_change called with {e.control.data}") - match e.control.data: - case 1: - dr1.selected = not dr1.selected - case 2: - dr2.selected = not dr2.selected - case 3: - dr3.selected = not dr3.selected - page.update() - - def sort(e): - print(f"sort called with {e.control.data} {e.control}") - match e.control.data: - case 1: - print(f"{e.column_index}, {e.ascending}") - # dt.sort_column_index = 1 - dt.sort_ascending = e.ascending - case 2: - print(f"{e.column_index}, {e.ascending}") - # dt.sort_column_index = 2 - dt.sort_ascending = e.ascending - dt.update() - page.update() - - dr1 = ft.DataRow( - [ft.DataCell(ft.Text("A")), ft.DataCell(ft.Text("1"))], - selected=True, - on_select_changed=selection_change, - data=1, - ) - dr2 = ft.DataRow( - [ft.DataCell(ft.Text("B")), ft.DataCell(ft.Text("2"))], - selected=False, - on_select_changed=selection_change, - data=2, - ) - dr3 = ft.DataRow( - [ft.DataCell(ft.Text("C")), ft.DataCell(ft.Text("3"))], - selected=False, - on_select_changed=selection_change, - data=3, - ) - dc1 = ft.DataColumn( - ft.Text("Column 1"), - tooltip="This is the first column", - data=1, - on_sort=sort, - ) - dc2 = ft.DataColumn( - ft.Text("Column 2"), - tooltip="This is a second column", - numeric=True, - data=2, - on_sort=sort, - ) - dt = ft.DataTable( - width=700, - bgcolor=ft.Colors.TEAL_ACCENT_200, - border=ft.Border.all(2, ft.Colors.RED_ACCENT_200), - border_radius=10, - vertical_lines=ft.border.BorderSide(3, ft.Colors.BLUE_600), - horizontal_lines=ft.border.BorderSide(1, ft.Colors.GREEN_600), - sort_column_index=0, - sort_ascending=True, - heading_row_color=ft.Colors.BLACK12, - heading_row_height=100, - data_row_color={ft.ControlState.HOVERED: "0x30FF0000"}, - show_checkbox_column=True, - divider_thickness=0, - column_spacing=200, - columns=[dc1, dc2], - rows=[dr1, dr2, dr3], - ) - - page.add(dt) - - -ft.run(main) diff --git a/python/controls/layout/expansion-panel-list/expansion-panel-list.py b/python/controls/layout/expansion-panel-list/expansion-panel-list.py deleted file mode 100644 index 6586d536..00000000 --- a/python/controls/layout/expansion-panel-list/expansion-panel-list.py +++ /dev/null @@ -1,54 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - page.theme_mode = ft.ThemeMode.LIGHT - - def handle_change(e: ft.ControlEvent): - print(f"change on panel with index {e.data}") - - def handle_delete(e: ft.ControlEvent): - panel.controls.remove(e.control.data) - page.update() - - panel = ft.ExpansionPanelList( - expand_icon_color=ft.Colors.AMBER, - elevation=8, - divider_color=ft.Colors.AMBER, - on_change=handle_change, - controls=[ - ft.ExpansionPanel( - # has no header and content - placeholders will be used - bgcolor=ft.Colors.BLUE_400, - expanded=True, - ) - ], - ) - - colors = [ - ft.Colors.GREEN_500, - ft.Colors.BLUE_800, - ft.Colors.RED_800, - ] - - for i in range(3): - bgcolor = colors[i % len(colors)] - - exp = ft.ExpansionPanel( - bgcolor=bgcolor, - header=ft.ListTile(title=ft.Text(f"Panel {i}"), bgcolor=bgcolor), - ) - - exp.content = ft.ListTile( - title=ft.Text(f"This is in Panel {i}"), - subtitle=ft.Text(f"Press the icon to delete panel {i}"), - trailing=ft.IconButton(ft.Icons.DELETE, on_click=handle_delete, data=exp), - bgcolor=bgcolor, - ) - - panel.controls.append(exp) - - page.add(panel) - - -ft.run(main) diff --git a/python/controls/layout/grid-view/photo-gallery.py b/python/controls/layout/grid-view/photo-gallery.py deleted file mode 100644 index ab59dc4b..00000000 --- a/python/controls/layout/grid-view/photo-gallery.py +++ /dev/null @@ -1,33 +0,0 @@ -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.BoxFit.NONE, - repeat=ft.ImageRepeat.NO_REPEAT, - border_radius=ft.BorderRadius.all(10), - ) - ) - page.update() - - -ft.run(main) diff --git a/python/controls/layout/list-view/listview-scroll.py b/python/controls/layout/list-view/listview-scroll.py deleted file mode 100644 index 344d708d..00000000 --- a/python/controls/layout/list-view/listview-scroll.py +++ /dev/null @@ -1,25 +0,0 @@ -import asyncio -import flet as ft - - -async 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): - await asyncio.sleep(1) - lv.controls.append(ft.Text(f"Line {count}")) - count += 1 - page.update() - - -ft.run(main) diff --git a/python/controls/layout/list-view/listview-toggle-scroll.py b/python/controls/layout/list-view/listview-toggle-scroll.py deleted file mode 100644 index 72da916f..00000000 --- a/python/controls/layout/list-view/listview-toggle-scroll.py +++ /dev/null @@ -1,46 +0,0 @@ -import asyncio -import flet as ft - - -async def main(page: ft.Page): - - def change_auto_scroll(e): - print("Change auto scroll triggered") - lv.auto_scroll = not lv.auto_scroll - page.update() - - lv = ft.ListView(spacing=10, padding=20, width=150, auto_scroll=True) - lvc = ft.Container( - content=lv, - bgcolor=ft.Colors.GREY_500, - ) - sw = ft.Switch( - thumb_icon=ft.Icons.LIST_OUTLINED, - value=True, - label="Auto-scroll", - label_position=ft.LabelPosition.RIGHT, - on_change=change_auto_scroll, - ) - - c = ft.Row( - [lvc, sw], - expand=True, - vertical_alignment=ft.CrossAxisAlignment.START, - ) - - count = 1 - - for i in range(0, 60): - lv.controls.append(ft.Text(f"Line {count}", color=ft.Colors.ON_SECONDARY)) - count += 1 - - page.add(c) - - for i in range(0, 60): - await asyncio.sleep(1) - lv.controls.append(ft.Text(f"Line {count}", color=ft.Colors.ON_SECONDARY)) - count += 1 - page.update() - - -ft.run(main) diff --git a/python/controls/layout/pagelet/pagelet-example.py b/python/controls/layout/pagelet/pagelet-example.py deleted file mode 100644 index 95fcad78..00000000 --- a/python/controls/layout/pagelet/pagelet-example.py +++ /dev/null @@ -1,46 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - def open_pagelet_end_drawer(e): - pagelet.show_drawer(ed) - - ed = ft.NavigationDrawer( - controls=[ - ft.NavigationDrawerDestination( - icon=ft.Icons.ADD_TO_HOME_SCREEN_SHARP, label="Item 1" - ), - ft.NavigationDrawerDestination(icon=ft.Icons.ADD_COMMENT, label="Item 2"), - ], - ) - pagelet = ft.Pagelet( - appbar=ft.AppBar( - title=ft.Text("Pagelet AppBar Title"), bgcolor=ft.Colors.AMBER_ACCENT - ), - content=ft.Container(ft.Text("Pagelet Body"), padding=ft.Padding.all(16)), - bgcolor=ft.Colors.AMBER_100, - bottom_appbar=ft.BottomAppBar( - bgcolor=ft.Colors.BLUE, - shape=ft.NotchShape.CIRCULAR, - content=ft.Row( - controls=[ - ft.IconButton(icon=ft.Icons.MENU, icon_color=ft.Colors.WHITE), - ft.Container(expand=True), - ft.IconButton(icon=ft.Icons.SEARCH, icon_color=ft.Colors.WHITE), - ft.IconButton(icon=ft.Icons.FAVORITE, icon_color=ft.Colors.WHITE), - ] - ), - ), - end_drawer=ed, - floating_action_button=ft.FloatingActionButton( - "Open", on_click=open_pagelet_end_drawer, shape=ft.CircleBorder() - ), - floating_action_button_location=ft.FloatingActionButtonLocation.CENTER_DOCKED, - width=400, - height=400, - ) - - page.add(pagelet) - - -ft.run(main) diff --git a/python/controls/layout/placeholder/placeholder-example.py b/python/controls/layout/placeholder/placeholder-example.py deleted file mode 100644 index b3582699..00000000 --- a/python/controls/layout/placeholder/placeholder-example.py +++ /dev/null @@ -1,10 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - page.add( - ft.Placeholder(expand=True, color=ft.Colors.random()) # random material color - ) - - -ft.run(main) diff --git a/python/controls/layout/reorderable-list-view/reorderable-list-view-example.py b/python/controls/layout/reorderable-list-view/reorderable-list-view-example.py deleted file mode 100644 index 3f74ebd6..00000000 --- a/python/controls/layout/reorderable-list-view/reorderable-list-view-example.py +++ /dev/null @@ -1,56 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - # page.title = "ReorderableListView Demo" - - # the primary color is the color of the reorder handle - # page.theme = page.dark_theme = ft.Theme( - # color_scheme=ft.ColorScheme(primary=ft.Colors.BLUE) - # ) - - def handle_reorder(e: ft.OnReorderEvent): - print(f"Reordered from {e.old_index} to {e.new_index}") - e.control.controls.insert(e.new_index, e.control.controls.pop(e.old_index)) - - get_color = lambda i: ( - ft.Colors.ERROR if i % 2 == 0 else ft.Colors.ON_ERROR_CONTAINER - ) - - # horizontal - h = ft.ReorderableListView( - expand=True, - horizontal=True, - on_reorder=handle_reorder, - controls=[ - ft.Container( - content=ft.Text(f"Item {i}", color=ft.Colors.BLACK), - bgcolor=get_color(i), - # bgcolor=ft.Colors.RED, - margin=ft.Margin.symmetric(horizontal=5, vertical=10), - width=100, - alignment=ft.Alignment.center(), - ) - for i in range(10) - ], - ) - - # vertical - v = ft.ReorderableListView( - expand=True, - on_reorder=handle_reorder, - controls=[ - ft.ListTile( - title=ft.Text(f"Item {i}", color=ft.Colors.BLACK), - leading=ft.Icon(ft.Icons.CHECK, color=ft.Colors.RED), - bgcolor=get_color(i), - # bgcolor=ft.Colors.GREEN, - ) - for i in range(10) - ], - ) - - page.add(h, v) - - -ft.run(main) diff --git a/python/controls/layout/row/row-alignment.py b/python/controls/layout/row/row-alignment.py deleted file mode 100644 index 44442301..00000000 --- a/python/controls/layout/row/row-alignment.py +++ /dev/null @@ -1,47 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - page.scroll = ft.ScrollMode.AUTO - - def items(count): - items = [] - for i in range(1, count + 1): - items.append( - ft.Container( - content=ft.Text(value=str(i)), - alignment=ft.Alignment.center(), - width=50, - height=50, - bgcolor=ft.Colors.AMBER_500, - ) - ) - return items - - def row_with_alignment(align: ft.MainAxisAlignment): - return ft.Column( - [ - ft.Text(str(align), size=16), - ft.Container( - content=ft.Row(items(3), alignment=align), - bgcolor=ft.Colors.AMBER_100, - ), - ], - ) - - page.add( - ft.Column( - [ - row_with_alignment(ft.MainAxisAlignment.START), - row_with_alignment(ft.MainAxisAlignment.CENTER), - row_with_alignment(ft.MainAxisAlignment.END), - row_with_alignment(ft.MainAxisAlignment.SPACE_BETWEEN), - row_with_alignment(ft.MainAxisAlignment.SPACE_AROUND), - row_with_alignment(ft.MainAxisAlignment.SPACE_EVENLY), - ], - scroll=ft.ScrollMode.AUTO, - ) - ) - - -ft.run(main) diff --git a/python/controls/layout/row/row-spacing.py b/python/controls/layout/row/row-spacing.py deleted file mode 100644 index c3367cfc..00000000 --- a/python/controls/layout/row/row-spacing.py +++ /dev/null @@ -1,38 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - def items(count): - items = [] - for i in range(1, count + 1): - items.append( - ft.Container( - content=ft.Text(value=str(i)), - alignment=ft.Alignment.center(), - width=50, - height=50, - bgcolor=ft.Colors.AMBER, - border_radius=ft.BorderRadius.all(5), - ) - ) - return items - - def gap_slider_change(e): - row.spacing = int(e.control.value) - row.update() - - gap_slider = ft.Slider( - min=0, - max=50, - divisions=50, - value=0, - label="{value}", - on_change=gap_slider_change, - ) - - row = ft.Row(spacing=0, controls=items(10), scroll=ft.ScrollMode.AUTO) - - page.add(ft.Column([ft.Text("Spacing between items"), gap_slider]), row) - - -ft.run(main) diff --git a/python/controls/layout/row/row-vert-alignment.py b/python/controls/layout/row/row-vert-alignment.py deleted file mode 100644 index 59659679..00000000 --- a/python/controls/layout/row/row-vert-alignment.py +++ /dev/null @@ -1,38 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - def items(count): - items = [] - for i in range(1, count + 1): - items.append( - ft.Container( - content=ft.Text(value=str(i)), - alignment=ft.Alignment.center(), - width=50, - height=50, - bgcolor=ft.Colors.AMBER_500, - ) - ) - return items - - def row_with_vertical_alignment(align: ft.CrossAxisAlignment): - return ft.Column( - [ - ft.Text(str(align), size=16), - ft.Container( - content=ft.Row(items(3), vertical_alignment=align), - bgcolor=ft.Colors.AMBER_100, - height=150, - ), - ] - ) - - page.add( - row_with_vertical_alignment(ft.CrossAxisAlignment.START), - row_with_vertical_alignment(ft.CrossAxisAlignment.CENTER), - row_with_vertical_alignment(ft.CrossAxisAlignment.END), - ) - - -ft.run(main) diff --git a/python/controls/layout/row/row-wrap.py b/python/controls/layout/row/row-wrap.py deleted file mode 100644 index fc2575fa..00000000 --- a/python/controls/layout/row/row-wrap.py +++ /dev/null @@ -1,54 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - def items(count): - items = [] - for i in range(1, count + 1): - items.append( - ft.Container( - content=ft.Text(value=str(i)), - alignment=ft.Alignment.center(), - width=50, - height=50, - bgcolor=ft.Colors.AMBER, - border_radius=ft.BorderRadius.all(5), - ) - ) - return items - - def slider_change(e): - row.width = float(e.control.value) - row.update() - - width_slider = ft.Slider( - min=0, - max=page.window.width, - divisions=20, - value=page.window.width, - label="{value}", - on_change=slider_change, - ) - - row = ft.Row( - wrap=True, - spacing=10, - run_spacing=10, - controls=items(30), - width=page.window.width, - ) - - page.add( - ft.Column( - [ - ft.Text( - "Change the row width to see how child items wrap onto multiple rows:" - ), - width_slider, - ] - ), - row, - ) - - -ft.run(main) diff --git a/python/controls/layout/safe-area/safe-area-example.py b/python/controls/layout/safe-area/safe-area-example.py deleted file mode 100644 index 73ee0f96..00000000 --- a/python/controls/layout/safe-area/safe-area-example.py +++ /dev/null @@ -1,30 +0,0 @@ -import flet as ft - - -class State: - counter = 0 - - -def main(page: ft.Page): - state = State() - - def add_click(e): - state.counter += 1 - counter.value = str(state.counter) - counter.update() - - page.floating_action_button = ft.FloatingActionButton( - icon=ft.Icons.ADD, on_click=add_click - ) - page.add( - ft.SafeArea( - ft.Container( - counter := ft.Text("0", size=50), - alignment=ft.Alignment.center(), - ), - expand=True, - ) - ) - - -ft.run(main) diff --git a/python/controls/layout/stack/image-title.py b/python/controls/layout/stack/image-title.py deleted file mode 100644 index e52b5f1f..00000000 --- a/python/controls/layout/stack/image-title.py +++ /dev/null @@ -1,33 +0,0 @@ -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( - [ - ft.Text( - "Image title", - color=ft.Colors.SURFACE_TINT, - size=40, - weight=ft.FontWeight.BOLD, - opacity=0.5, - ) - ], - alignment=ft.MainAxisAlignment.CENTER, - ), - ], - width=300, - height=300, - ) - - page.add(st) - - -ft.run(main) diff --git a/python/controls/layout/tabs/nested-tabs.py b/python/controls/layout/tabs/nested-tabs.py deleted file mode 100644 index 47058481..00000000 --- a/python/controls/layout/tabs/nested-tabs.py +++ /dev/null @@ -1,53 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - - dt = ft.Tabs( - is_secondary=True, - tabs=[ - ft.Tab(label="Fast Food", content=ft.Text("Grab something on the go!")), - ft.Tab(label="Fine Dining", content=ft.Text("Take your time!")), - ], - ) - et = ft.Tabs( - is_secondary=True, - tabs=[ - ft.Tab(label="Cinema", content=ft.Text("Find a Film!")), - ft.Tab(label="Music", content=ft.Text("Listen to some Tunes!")), - ], - ) - lt = ft.Tabs( - is_secondary=True, - tabs=[ - ft.Tab(label="Hotel", content=ft.Text("Enjoy your Room!")), - ft.Tab(label="Hostel", content=ft.Text("Grab a Bunk!")), - ], - ) - t = ft.Tabs( - selected_index=1, - animation_duration=300, - tabs=[ - ft.Tab( - label="Dining", - icon=ft.Icons.RESTAURANT, - content=dt, - ), - ft.Tab( - label="Entertainment", - icon=ft.Icons.LOCAL_ACTIVITY, - content=et, - ), - ft.Tab( - label="Lodging", - icon=ft.Icons.HOTEL, - content=lt, - ), - ], - expand=1, - ) - - page.add(t) - - -ft.run(main) diff --git a/python/controls/layout/list-tile/list-tile-examples.py b/python/controls/list-tile/basic.py similarity index 70% rename from python/controls/layout/list-tile/list-tile-examples.py rename to python/controls/list-tile/basic.py index 088f989c..723ed41c 100644 --- a/python/controls/layout/list-tile/list-tile-examples.py +++ b/python/controls/list-tile/basic.py @@ -1,19 +1,21 @@ import flet as ft -def main(page): - page.title = "ListTile Examples" +def main(page: ft.Page): + page.title = "ListTile Example" + page.add( ft.Card( content=ft.Container( width=500, + padding=ft.Padding.symmetric(vertical=10), content=ft.Column( - [ - ft.ListTile( - title=ft.Text("One-line list tile"), - ), + spacing=0, + controls=[ + ft.ListTile(title=ft.Text("One-line list tile")), ft.ListTile( - title=ft.Text("One-line dense list tile"), dense=True + title=ft.Text("One-line dense list tile"), + dense=True, ), ft.ListTile( leading=ft.Icon(ft.Icons.SETTINGS), @@ -22,7 +24,8 @@ def main(page): ), ft.ListTile( leading=ft.Image( - src="/icons/icon-192.png", fit=ft.BoxFit.CONTAIN + src="/icons/icon-192.png", + fit=ft.BoxFit.CONTAIN, ), title=ft.Text("One-line with leading control"), ), @@ -31,42 +34,40 @@ def main(page): trailing=ft.PopupMenuButton( icon=ft.Icons.MORE_VERT, items=[ - ft.PopupMenuItem(text="Item 1"), - ft.PopupMenuItem(text="Item 2"), + ft.PopupMenuItem(content="Item 1"), + ft.PopupMenuItem(content="Item 2"), ], ), ), ft.ListTile( leading=ft.Icon(ft.Icons.ALBUM), title=ft.Text( - "One-line with leading and trailing controls" + value="One-line with leading and trailing controls" ), trailing=ft.PopupMenuButton( icon=ft.Icons.MORE_VERT, items=[ - ft.PopupMenuItem(text="Item 1"), - ft.PopupMenuItem(text="Item 2"), + ft.PopupMenuItem(content="Item 1"), + ft.PopupMenuItem(content="Item 2"), ], ), ), ft.ListTile( leading=ft.Icon(ft.Icons.SNOOZE), title=ft.Text( - "Two-line with leading and trailing controls" + value="Two-line with leading and trailing controls" ), subtitle=ft.Text("Here is a second title."), trailing=ft.PopupMenuButton( icon=ft.Icons.MORE_VERT, items=[ - ft.PopupMenuItem(text="Item 1"), - ft.PopupMenuItem(text="Item 2"), + ft.PopupMenuItem(content="Item 1"), + ft.PopupMenuItem(content="Item 2"), ], ), ), ], - spacing=0, ), - padding=ft.Padding.symmetric(vertical=10), ) ) ) diff --git a/python/controls/list-tile/listtile/basic.png b/python/controls/list-tile/listtile/basic.png new file mode 100644 index 00000000..7a0e29c1 Binary files /dev/null and b/python/controls/list-tile/listtile/basic.png differ diff --git a/python/controls/list-view/autoscroll-and-dynamic-items.py b/python/controls/list-view/autoscroll-and-dynamic-items.py new file mode 100644 index 00000000..8a743314 --- /dev/null +++ b/python/controls/list-view/autoscroll-and-dynamic-items.py @@ -0,0 +1,47 @@ +import asyncio +import flet as ft + + +async def main(page: ft.Page): + def handle_switch_change(e: ft.Event[ft.Switch]): + lv.auto_scroll = not lv.auto_scroll + page.update() + + lv = ft.ListView( + spacing=10, + padding=20, + width=150, + auto_scroll=True, + controls=[ + ft.Text(f"Line {i}", color=ft.Colors.ON_SECONDARY) for i in range(0, 60) + ], + ) + + page.add( + ft.Row( + expand=True, + vertical_alignment=ft.CrossAxisAlignment.START, + controls=[ + ft.Container( + content=lv, + bgcolor=ft.Colors.GREY_500, + ), + ft.Switch( + thumb_icon=ft.Icons.LIST_OUTLINED, + value=True, + label="Auto-scroll", + label_position=ft.LabelPosition.RIGHT, + on_change=handle_switch_change, + ), + ], + ) + ) + + # add a new item to the ListView every 1 second + for i in range(len(lv.controls), 120): + await asyncio.sleep(1) + lv.controls.append(ft.Text(f"Line {i}", color=ft.Colors.ON_SECONDARY)) + page.update() + + +ft.run(main) diff --git a/python/controls/list-view/media/autoscroll-and-dynamic-items.gif b/python/controls/list-view/media/autoscroll-and-dynamic-items.gif new file mode 100644 index 00000000..6887014e Binary files /dev/null and b/python/controls/list-view/media/autoscroll-and-dynamic-items.gif differ diff --git a/python/controls/information-displays/markdown/markdown-basic.py b/python/controls/markdown/basic.py similarity index 92% rename from python/controls/information-displays/markdown/markdown-basic.py rename to python/controls/markdown/basic.py index 21904f19..71c52c60 100644 --- a/python/controls/information-displays/markdown/markdown-basic.py +++ b/python/controls/markdown/basic.py @@ -1,6 +1,6 @@ import flet as ft -md1 = """ +sample = """ # Markdown Example Markdown allows you to easily include formatted text, images, and even formatted Dart code in your app. @@ -77,12 +77,16 @@ def main(page: ft.Page): page.scroll = ft.ScrollMode.AUTO + + def handle_link_tap(e: ft.Event[ft.Markdown]): + page.launch_url(e.data) + page.add( ft.Markdown( - md1, + value=sample, selectable=True, extension_set=ft.MarkdownExtensionSet.GITHUB_WEB, - on_tap_link=lambda e: page.launch_url(e.data), + on_tap_link=handle_link_tap, ) ) diff --git a/python/controls/information-displays/markdown/markdown-code-highlight.py b/python/controls/markdown/code-syntax-highlight.py similarity index 98% rename from python/controls/information-displays/markdown/markdown-code-highlight.py rename to python/controls/markdown/code-syntax-highlight.py index d4f22c54..d7d7336a 100644 --- a/python/controls/information-displays/markdown/markdown-code-highlight.py +++ b/python/controls/markdown/code-syntax-highlight.py @@ -1,8 +1,6 @@ import flet as ft -table = """ - - +sample = """ # Flet @@ -149,7 +147,7 @@ class MyApp extends StatelessWidget { ## Adding custom Flutter widgets Coming soon. - """ +""" def main(page: ft.Page): @@ -161,7 +159,7 @@ def main(page: ft.Page): page.add( ft.Markdown( - table, + value=sample, selectable=True, extension_set=ft.MarkdownExtensionSet.GITHUB_WEB, code_theme=ft.MarkdownCodeTheme.ATOM_ONE_DARK, @@ -173,4 +171,4 @@ def main(page: ft.Page): ) -ft.run(main, assets_dir="assets") +ft.run(main) diff --git a/python/controls/information-displays/markdown/markdown-custom-theme.py b/python/controls/markdown/custom-text-theme.py similarity index 66% rename from python/controls/information-displays/markdown/markdown-custom-theme.py rename to python/controls/markdown/custom-text-theme.py index ef226390..51749a9e 100644 --- a/python/controls/information-displays/markdown/markdown-custom-theme.py +++ b/python/controls/markdown/custom-text-theme.py @@ -4,24 +4,23 @@ def main(page: ft.Page): page.theme_mode = ft.ThemeMode.DARK - def change_theme_mode(e): + def change_theme_mode(e: ft.Event[ft.Switch]): if page.theme_mode == ft.ThemeMode.DARK: page.theme_mode = ft.ThemeMode.LIGHT - sw.thumb_icon = ft.Icons.LIGHT_MODE + switch.thumb_icon = ft.Icons.LIGHT_MODE else: - sw.thumb_icon = ft.Icons.DARK_MODE + switch.thumb_icon = ft.Icons.DARK_MODE page.theme_mode = ft.ThemeMode.DARK page.update() - sw = ft.Switch(thumb_icon=ft.Icons.DARK_MODE, on_change=change_theme_mode) + switch = ft.Switch(thumb_icon=ft.Icons.DARK_MODE, on_change=change_theme_mode) page.add( ft.Row( - [ + alignment=ft.MainAxisAlignment.SPACE_BETWEEN, + controls=[ ft.Container( - content=ft.Markdown( - "I can read this!", - ), + content=ft.Markdown("I can read this!"), bgcolor="#550000", padding=20, theme=ft.Theme( @@ -33,12 +32,11 @@ def change_theme_mode(e): ), ), ft.Container( - content=sw, - padding=ft.padding.only(bottom=50), - alignment=ft.Alignment.top_right(), + content=switch, + padding=ft.Padding.only(bottom=50), + alignment=ft.Alignment.TOP_RIGHT, ), ], - alignment=ft.MainAxisAlignment.SPACE_BETWEEN, ) ) diff --git a/python/controls/information-displays/markdown/markdown-listviews.py b/python/controls/markdown/listviews.py similarity index 90% rename from python/controls/information-displays/markdown/markdown-listviews.py rename to python/controls/markdown/listviews.py index a0a38098..18f29c23 100644 --- a/python/controls/information-displays/markdown/markdown-listviews.py +++ b/python/controls/markdown/listviews.py @@ -1,6 +1,6 @@ import flet as ft -md1 = """ +sample = """ # Markdown Example Markdown allows you to easily include formatted text, images, and even formatted Dart code in your app. @@ -119,26 +119,24 @@ def main(page: ft.Page): - def goto_url(e): - print("GOTO:", e.data) - page.launch_url(e.data) - page.add( ft.ListView( - [ft.Markdown(md1, on_tap_link=lambda e: page.launch_url(e.data))], expand=True, + controls=[ + ft.Markdown(value=sample, on_tap_link=lambda e: page.launch_url(e.data)) + ], ), ft.Divider(), ft.ListView( - [ + expand=True, + controls=[ ft.Markdown( - md1, + value=sample, selectable=True, extension_set=ft.MarkdownExtensionSet.GITHUB_WEB, - on_tap_link=goto_url, + on_tap_link=lambda e: page.launch_url(e.data), ) ], - expand=True, ), ) diff --git a/python/controls/markdown/media/basic.gif b/python/controls/markdown/media/basic.gif new file mode 100644 index 00000000..9075ce62 Binary files /dev/null and b/python/controls/markdown/media/basic.gif differ diff --git a/python/controls/markdown/media/code-syntax-highlight.png b/python/controls/markdown/media/code-syntax-highlight.png new file mode 100644 index 00000000..f19bc1cf Binary files /dev/null and b/python/controls/markdown/media/code-syntax-highlight.png differ diff --git a/python/controls/menu-bar/media/nested-submenus.gif b/python/controls/menu-bar/media/nested-submenus.gif new file mode 100644 index 00000000..5455898d Binary files /dev/null and b/python/controls/menu-bar/media/nested-submenus.gif differ diff --git a/python/controls/menu-bar/nested-submenus.py b/python/controls/menu-bar/nested-submenus.py new file mode 100644 index 00000000..94070dd5 --- /dev/null +++ b/python/controls/menu-bar/nested-submenus.py @@ -0,0 +1,122 @@ +import flet as ft + + +def main(page: ft.Page): + appbar_text_ref = ft.Ref[ft.Text]() + + def handle_menu_item_click(e: ft.Event[ft.MenuItemButton]): + text = e.control.content.value + page.show_dialog(ft.SnackBar(ft.Text(f"{text} was clicked!"))) + appbar_text_ref.current.value = text + page.update() + + def handle_submenu_open(e: ft.Event[ft.SubmenuButton]): + print(f"{e.control.content.value}.on_open") + + def handle_submenu_close(e: ft.Event[ft.SubmenuButton]): + print(f"{e.control.content.value}.on_close") + + def handle_submenu_hover(e: ft.Event[ft.SubmenuButton]): + print(f"{e.control.content.value}.on_hover") + + page.appbar = ft.AppBar( + title=ft.Text("Menus", ref=appbar_text_ref), + center_title=True, + bgcolor=ft.Colors.BLUE, + ) + + page.add( + ft.Row( + controls=[ + ft.MenuBar( + expand=True, + style=ft.MenuStyle( + alignment=ft.Alignment.TOP_LEFT, + bgcolor=ft.Colors.RED_300, + mouse_cursor={ + ft.ControlState.HOVERED: ft.MouseCursor.WAIT, + ft.ControlState.DEFAULT: ft.MouseCursor.ZOOM_OUT, + }, + ), + controls=[ + ft.SubmenuButton( + content=ft.Text("File"), + on_open=handle_submenu_open, + on_close=handle_submenu_close, + on_hover=handle_submenu_hover, + controls=[ + ft.MenuItemButton( + content=ft.Text("About"), + leading=ft.Icon(ft.Icons.INFO), + on_click=handle_menu_item_click, + style=ft.ButtonStyle( + bgcolor={ + ft.ControlState.HOVERED: ft.Colors.GREEN_100 + } + ), + ), + ft.MenuItemButton( + content=ft.Text("Save"), + leading=ft.Icon(ft.Icons.SAVE), + on_click=handle_menu_item_click, + style=ft.ButtonStyle( + bgcolor={ + ft.ControlState.HOVERED: ft.Colors.GREEN_100 + } + ), + ), + ft.MenuItemButton( + content=ft.Text("Quit"), + leading=ft.Icon(ft.Icons.CLOSE), + on_click=handle_menu_item_click, + style=ft.ButtonStyle( + bgcolor={ + ft.ControlState.HOVERED: ft.Colors.GREEN_100 + } + ), + ), + ], + ), + ft.SubmenuButton( + content=ft.Text("View"), + on_open=handle_submenu_open, + on_close=handle_submenu_close, + on_hover=handle_submenu_hover, + controls=[ + ft.SubmenuButton( + content=ft.Text("Zoom"), + controls=[ + ft.MenuItemButton( + content=ft.Text("Magnify"), + leading=ft.Icon(ft.Icons.ZOOM_IN), + close_on_click=False, + on_click=handle_menu_item_click, + style=ft.ButtonStyle( + bgcolor={ + ft.ControlState.HOVERED: ft.Colors.PURPLE_200 + } + ), + ), + ft.MenuItemButton( + content=ft.Text("Minify"), + leading=ft.Icon(ft.Icons.ZOOM_OUT), + close_on_click=False, + on_click=handle_menu_item_click, + style=ft.ButtonStyle( + bgcolor={ + ft.ControlState.HOVERED: ft.Colors.PURPLE_200 + } + ), + ), + ], + ) + ], + ), + ], + ) + ] + ) + ) + + +ft.run(main) diff --git a/python/controls/buttons/menu-item-button/menu-item-button-example.py b/python/controls/menu-item-button/basic.py similarity index 79% rename from python/controls/buttons/menu-item-button/menu-item-button-example.py rename to python/controls/menu-item-button/basic.py index 1b2294e6..dcb98391 100644 --- a/python/controls/buttons/menu-item-button/menu-item-button-example.py +++ b/python/controls/menu-item-button/basic.py @@ -6,17 +6,14 @@ def main(page: ft.Page): page.spacing = 0 page.theme_mode = ft.ThemeMode.LIGHT - bg_container = ft.Ref[ft.Container]() - - def handle_color_click(e): + def handle_color_click(e: ft.Event[ft.MenuItemButton]): color = e.control.content.value - print(f"{color}.on_click") - bg_container.current.content.value = f"{color} background color" - bg_container.current.bgcolor = color.lower() + background_container.content.value = f"{color} background color" + background_container.bgcolor = color.lower() page.update() - def handle_on_hover(e): - print(f"{e.control.content.value}.on_hover") + def handle_on_hover(e: ft.Event[ft.MenuItemButton]): + print(e) menubar = ft.MenuBar( expand=True, @@ -57,16 +54,15 @@ def handle_on_hover(e): ) page.add( - ft.Row([menubar]), - ft.Container( - ref=bg_container, + ft.Row(controls=[menubar]), + background_container := ft.Container( expand=True, bgcolor=ft.Colors.WHITE, + alignment=ft.Alignment.CENTER, content=ft.Text( - "Choose a bgcolor from the menu", + value="Choose a bgcolor from the menu", style=ft.TextStyle(weight=ft.FontWeight.W_500), ), - alignment=ft.Alignment.center(), ), ) diff --git a/python/controls/menu-item-button/media/basic.gif b/python/controls/menu-item-button/media/basic.gif new file mode 100644 index 00000000..7ddd0256 Binary files /dev/null and b/python/controls/menu-item-button/media/basic.gif differ diff --git a/python/controls/navigation/navigation-bar/navigation-bar-sample.py b/python/controls/navigation-bar/basic.py similarity index 99% rename from python/controls/navigation/navigation-bar/navigation-bar-sample.py rename to python/controls/navigation-bar/basic.py index 633d8b15..7d613ddc 100644 --- a/python/controls/navigation/navigation-bar/navigation-bar-sample.py +++ b/python/controls/navigation-bar/basic.py @@ -2,8 +2,8 @@ def main(page: ft.Page): - page.title = "NavigationBar Example" + page.navigation_bar = ft.NavigationBar( destinations=[ ft.NavigationBarDestination(icon=ft.Icons.EXPLORE, label="Explore"), @@ -15,6 +15,7 @@ def main(page: ft.Page): ), ] ) + page.add(ft.Text("Body!")) diff --git a/python/controls/navigation-bar/media/basic.gif b/python/controls/navigation-bar/media/basic.gif new file mode 100644 index 00000000..3fef5630 Binary files /dev/null and b/python/controls/navigation-bar/media/basic.gif differ diff --git a/python/controls/navigation-drawer/media/position-end.gif b/python/controls/navigation-drawer/media/position-end.gif new file mode 100644 index 00000000..f87d23cf Binary files /dev/null and b/python/controls/navigation-drawer/media/position-end.gif differ diff --git a/python/controls/navigation-drawer/media/position-start.gif b/python/controls/navigation-drawer/media/position-start.gif new file mode 100644 index 00000000..c2db87fa Binary files /dev/null and b/python/controls/navigation-drawer/media/position-start.gif differ diff --git a/python/controls/navigation/navigation-drawer/nav-drawer-end.py b/python/controls/navigation-drawer/position-end.py similarity index 59% rename from python/controls/navigation/navigation-drawer/nav-drawer-end.py rename to python/controls/navigation-drawer/position-end.py index baa8431b..721f8c6d 100644 --- a/python/controls/navigation/navigation-drawer/nav-drawer-end.py +++ b/python/controls/navigation-drawer/position-end.py @@ -2,11 +2,10 @@ def main(page: ft.Page): - - def handle_dismissal(e): + def handle_dismissal(e: ft.Event[ft.NavigationDrawer]): print("End drawer dismissed") - def handle_change(e): + def handle_change(e: ft.Event[ft.NavigationDrawer]): print(f"Selected Index changed: {e.control.selected_index}") page.pop_dialog() @@ -16,17 +15,20 @@ def handle_change(e): on_change=handle_change, controls=[ ft.NavigationDrawerDestination( - icon=ft.Icons.ADD_TO_HOME_SCREEN_SHARP, label="Item 1" + icon=ft.Icons.ADD_TO_HOME_SCREEN_SHARP, + label="Item 1", ), ft.NavigationDrawerDestination( - icon=ft.Icon(ft.Icons.ADD_COMMENT), label="Item 2" + icon=ft.Icon(ft.Icons.ADD_COMMENT), + label="Item 2", ), ], ) page.add( ft.ElevatedButton( - "Show end drawer", on_click=lambda e: page.show_dialog(end_drawer) + content="Show end drawer", + on_click=lambda e: page.show_dialog(end_drawer), ) ) diff --git a/python/controls/navigation/navigation-drawer/nav-drawer-example.py b/python/controls/navigation-drawer/position-start.py similarity index 78% rename from python/controls/navigation/navigation-drawer/nav-drawer-example.py rename to python/controls/navigation-drawer/position-start.py index bd201a37..6884c0ee 100644 --- a/python/controls/navigation/navigation-drawer/nav-drawer-example.py +++ b/python/controls/navigation-drawer/position-start.py @@ -2,13 +2,12 @@ def main(page: ft.Page): - - def handle_dismissal(e): + def handle_dismissal(e: ft.Event[ft.NavigationDrawer]): print(f"Drawer dismissed!") - def handle_change(e): + def handle_change(e: ft.Event[ft.NavigationDrawer]): print(f"Selected Index changed: {e.control.selected_index}") - page.pop_dialog(drawer) + page.pop_dialog() drawer = ft.NavigationDrawer( on_dismiss=handle_dismissal, @@ -35,7 +34,10 @@ def handle_change(e): ) page.add( - ft.ElevatedButton("Show drawer", on_click=lambda e: page.show_dialog(drawer)) + ft.ElevatedButton( + content="Show drawer", + on_click=lambda e: page.show_dialog(drawer), + ) ) diff --git a/python/controls/navigation/navigation-rail/nav-rail-test.py b/python/controls/navigation-rail/basic.py similarity index 95% rename from python/controls/navigation/navigation-rail/nav-rail-test.py rename to python/controls/navigation-rail/basic.py index 19b6ddf7..f39e51bf 100644 --- a/python/controls/navigation/navigation-rail/nav-rail-test.py +++ b/python/controls/navigation-rail/basic.py @@ -2,18 +2,18 @@ def main(page: ft.Page): - rail = ft.NavigationRail( selected_index=0, label_type=ft.NavigationRailLabelType.ALL, min_width=100, min_extended_width=400, + group_alignment=-0.9, + on_change=lambda e: print("Selected destination:", e.control.selected_index), leading=ft.FloatingActionButton( icon=ft.Icons.CREATE, content="Add", on_click=lambda e: print("FAB clicked!"), ), - group_alignment=-0.9, destinations=[ ft.NavigationRailDestination( icon=ft.Icons.FAVORITE_BORDER, @@ -31,21 +31,20 @@ def main(page: ft.Page): label=ft.Text("Settings"), ), ], - on_change=lambda e: print("Selected destination:", e.control.selected_index), ) page.add( ft.Row( - [ + expand=True, + controls=[ rail, ft.VerticalDivider(width=1), ft.Column( - [ft.Text("Body!")], alignment=ft.MainAxisAlignment.START, expand=True, + controls=[ft.Text("Body!")], ), ], - expand=True, ) ) diff --git a/python/controls/navigation-rail/media/basic.png b/python/controls/navigation-rail/media/basic.png new file mode 100644 index 00000000..b1bdd187 Binary files /dev/null and b/python/controls/navigation-rail/media/basic.png differ diff --git a/python/controls/navigation/menu-bar/menu-bar-example.py b/python/controls/navigation/menu-bar/menu-bar-example.py deleted file mode 100644 index d9176329..00000000 --- a/python/controls/navigation/menu-bar/menu-bar-example.py +++ /dev/null @@ -1,114 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - appbar_text_ref = ft.Ref[ft.Text]() - - def handle_menu_item_click(e): - print(f"{e.control.content.value}.on_click") - page.show_dialog( - ft.SnackBar(content=ft.Text(f"{e.control.content.value} was clicked!")) - ) - appbar_text_ref.current.value = e.control.content.value - page.update() - - def handle_submenu_open(e): - print(f"{e.control.content.value}.on_open") - - def handle_submenu_close(e): - print(f"{e.control.content.value}.on_close") - - def handle_submenu_hover(e): - print(f"{e.control.content.value}.on_hover") - - page.appbar = ft.AppBar( - title=ft.Text("Menus", ref=appbar_text_ref), - center_title=True, - bgcolor=ft.Colors.BLUE, - ) - - menubar = ft.MenuBar( - expand=True, - style=ft.MenuStyle( - alignment=ft.Alignment.top_left(), - bgcolor=ft.Colors.RED_300, - mouse_cursor={ - ft.ControlState.HOVERED: ft.MouseCursor.WAIT, - ft.ControlState.DEFAULT: ft.MouseCursor.ZOOM_OUT, - }, - ), - controls=[ - ft.SubmenuButton( - content=ft.Text("File"), - on_open=handle_submenu_open, - on_close=handle_submenu_close, - on_hover=handle_submenu_hover, - controls=[ - ft.MenuItemButton( - content=ft.Text("About"), - leading=ft.Icon(ft.Icons.INFO), - style=ft.ButtonStyle( - bgcolor={ft.ControlState.HOVERED: ft.Colors.GREEN_100} - ), - on_click=handle_menu_item_click, - ), - ft.MenuItemButton( - content=ft.Text("Save"), - leading=ft.Icon(ft.Icons.SAVE), - style=ft.ButtonStyle( - bgcolor={ft.ControlState.HOVERED: ft.Colors.GREEN_100} - ), - on_click=handle_menu_item_click, - ), - ft.MenuItemButton( - content=ft.Text("Quit"), - leading=ft.Icon(ft.Icons.CLOSE), - style=ft.ButtonStyle( - bgcolor={ft.ControlState.HOVERED: ft.Colors.GREEN_100} - ), - on_click=handle_menu_item_click, - ), - ], - ), - ft.SubmenuButton( - content=ft.Text("View"), - on_open=handle_submenu_open, - on_close=handle_submenu_close, - on_hover=handle_submenu_hover, - controls=[ - ft.SubmenuButton( - content=ft.Text("Zoom"), - controls=[ - ft.MenuItemButton( - content=ft.Text("Magnify"), - leading=ft.Icon(ft.Icons.ZOOM_IN), - close_on_click=False, - style=ft.ButtonStyle( - bgcolor={ - ft.ControlState.HOVERED: ft.Colors.PURPLE_200 - } - ), - on_click=handle_menu_item_click, - ), - ft.MenuItemButton( - content=ft.Text("Minify"), - leading=ft.Icon(ft.Icons.ZOOM_OUT), - close_on_click=False, - style=ft.ButtonStyle( - bgcolor={ - ft.ControlState.HOVERED: ft.Colors.PURPLE_200 - } - ), - on_click=handle_menu_item_click, - ), - ], - ) - ], - ), - ], - ) - - page.add(ft.Row([menubar])) - - -ft.run(main) diff --git a/python/controls/buttons/outlined-button/basic-outlined-buttons.py b/python/controls/outlined-button/basic.py similarity index 82% rename from python/controls/buttons/outlined-button/basic-outlined-buttons.py rename to python/controls/outlined-button/basic.py index 34e0d674..9745033c 100644 --- a/python/controls/buttons/outlined-button/basic-outlined-buttons.py +++ b/python/controls/outlined-button/basic.py @@ -2,7 +2,8 @@ def main(page: ft.Page): - page.title = "Basic outlined buttons" + page.title = "OutlinedButton Example" + page.add( ft.OutlinedButton(content="Outlined button"), ft.OutlinedButton(content="Disabled button", disabled=True), diff --git a/python/controls/buttons/outlined-button/outlined-buttons-with-custom-content.py b/python/controls/outlined-button/custom-content.py similarity index 90% rename from python/controls/buttons/outlined-button/outlined-buttons-with-custom-content.py rename to python/controls/outlined-button/custom-content.py index 0b35c55e..76d4d4ae 100644 --- a/python/controls/buttons/outlined-button/outlined-buttons-with-custom-content.py +++ b/python/controls/outlined-button/custom-content.py @@ -2,31 +2,32 @@ def main(page: ft.Page): - page.title = "Outlined buttons with custom content" + page.title = "OutlinedButton Example" page.theme_mode = ft.ThemeMode.LIGHT + page.add( ft.OutlinedButton( width=150, content=ft.Row( - [ + alignment=ft.MainAxisAlignment.SPACE_AROUND, + controls=[ ft.Icon(name=ft.Icons.FAVORITE, color=ft.Colors.PINK), ft.Icon(name=ft.Icons.AUDIOTRACK, color=ft.Colors.GREEN), ft.Icon(name=ft.Icons.BEACH_ACCESS, color=ft.Colors.BLUE), ], - alignment=ft.MainAxisAlignment.SPACE_AROUND, ), ), ft.OutlinedButton( content=ft.Container( + padding=ft.Padding.all(10), content=ft.Column( - [ + alignment=ft.MainAxisAlignment.CENTER, + spacing=5, + controls=[ ft.Text(value="Compound button", size=20), ft.Text(value="This is secondary text"), ], - alignment=ft.MainAxisAlignment.CENTER, - spacing=5, ), - padding=ft.Padding.all(10), ), ), ) diff --git a/python/controls/outlined-button/handling-clicks.py b/python/controls/outlined-button/handling-clicks.py new file mode 100644 index 00000000..d838256a --- /dev/null +++ b/python/controls/outlined-button/handling-clicks.py @@ -0,0 +1,23 @@ +import flet as ft + + +def main(page: ft.Page): + page.title = "OutlinedButton Example" + page.theme_mode = ft.ThemeMode.LIGHT + + def handle_button_click(e: ft.Event[ft.OutlinedButton]): + button.data += 1 + message.value = f"Button clicked {button.data} time(s)" + page.update() + + page.add( + button := ft.OutlinedButton( + content="Button with 'click' event", + data=0, + on_click=handle_button_click, + ), + message := ft.Text(), + ) + + +ft.run(main) diff --git a/python/controls/buttons/outlined-button/outlined-buttons-with-icons.py b/python/controls/outlined-button/icons.py similarity index 86% rename from python/controls/buttons/outlined-button/outlined-buttons-with-icons.py rename to python/controls/outlined-button/icons.py index 4bb3b43d..dc03b3bd 100644 --- a/python/controls/buttons/outlined-button/outlined-buttons-with-icons.py +++ b/python/controls/outlined-button/icons.py @@ -2,7 +2,8 @@ def main(page: ft.Page): - page.title = "Outlined buttons with icons" + page.title = "OutlinedButton Example" + page.add( ft.OutlinedButton(content="Button with icon", icon="chair_outlined"), ft.OutlinedButton( diff --git a/python/controls/outlined-button/media/basic.png b/python/controls/outlined-button/media/basic.png new file mode 100644 index 00000000..50c75fe7 Binary files /dev/null and b/python/controls/outlined-button/media/basic.png differ diff --git a/python/controls/outlined-button/media/custom-content.png b/python/controls/outlined-button/media/custom-content.png new file mode 100644 index 00000000..4e2fbda4 Binary files /dev/null and b/python/controls/outlined-button/media/custom-content.png differ diff --git a/python/controls/outlined-button/media/handling-clicks.gif b/python/controls/outlined-button/media/handling-clicks.gif new file mode 100644 index 00000000..4ce673ef Binary files /dev/null and b/python/controls/outlined-button/media/handling-clicks.gif differ diff --git a/python/controls/outlined-button/media/icons.png b/python/controls/outlined-button/media/icons.png new file mode 100644 index 00000000..b073f977 Binary files /dev/null and b/python/controls/outlined-button/media/icons.png differ diff --git a/python/controls/outlined-button/media/index.png b/python/controls/outlined-button/media/index.png new file mode 100644 index 00000000..dcede864 Binary files /dev/null and b/python/controls/outlined-button/media/index.png differ diff --git a/python/controls/layout/page/app-exit-confirm-dialog.py b/python/controls/page/app-exit-confirm-dialog.py similarity index 69% rename from python/controls/layout/page/app-exit-confirm-dialog.py rename to python/controls/page/app-exit-confirm-dialog.py index 464111ad..57ff4f71 100644 --- a/python/controls/layout/page/app-exit-confirm-dialog.py +++ b/python/controls/page/app-exit-confirm-dialog.py @@ -2,9 +2,7 @@ def main(page: ft.Page): - page.title = "MyApp" - - def window_event(e): + def window_event(e: ft.WindowEvent): if e.type == ft.WindowEventType.CLOSE: page.show_dialog(confirm_dialog) page.update() @@ -12,10 +10,10 @@ def window_event(e): page.window.prevent_close = True page.window.on_event = window_event - def yes_click(e): + def handle_yes_click(e: ft.Event[ft.ElevatedButton]): page.window.destroy() - def no_click(e): + def handle_no_click(e: ft.Event[ft.OutlinedButton]): page.pop_dialog() page.update() @@ -24,8 +22,8 @@ def no_click(e): title=ft.Text("Please confirm"), content=ft.Text("Do you really want to exit this app?"), actions=[ - ft.ElevatedButton(content="Yes", on_click=yes_click), - ft.OutlinedButton(content="No", on_click=no_click), + ft.ElevatedButton(content="Yes", on_click=handle_yes_click), + ft.OutlinedButton(content="No", on_click=handle_no_click), ], actions_alignment=ft.MainAxisAlignment.END, ) diff --git a/python/controls/layout/page/keyboard-events.py b/python/controls/page/keyboard-events.py similarity index 72% rename from python/controls/layout/page/keyboard-events.py rename to python/controls/page/keyboard-events.py index a5229c2f..2ce5e2c7 100644 --- a/python/controls/layout/page/keyboard-events.py +++ b/python/controls/page/keyboard-events.py @@ -13,6 +13,10 @@ def __init__(self, text): def main(page: ft.Page): + page.spacing = 50 + page.vertical_alignment = ft.MainAxisAlignment.CENTER + page.horizontal_alignment = ft.CrossAxisAlignment.CENTER + def on_keyboard(e: ft.KeyboardEvent): key.content.value = e.key key.visible = True @@ -24,20 +28,20 @@ def on_keyboard(e: ft.KeyboardEvent): page.on_keyboard_event = on_keyboard - key = ButtonControl("") - shift = ButtonControl("Shift") - ctrl = ButtonControl("Control") - alt = ButtonControl("Alt") - meta = ButtonControl("Meta") - - page.spacing = 50 - page.vertical_alignment = ft.MainAxisAlignment.CENTER - page.horizontal_alignment = ft.CrossAxisAlignment.CENTER page.add( ft.Text( "Press any key with a combination of CTRL, ALT, SHIFT and META keys..." ), - ft.Row([key, shift, ctrl, alt, meta], alignment=ft.MainAxisAlignment.CENTER), + ft.Row( + controls=[ + key := ButtonControl(""), + shift := ButtonControl("Shift"), + ctrl := ButtonControl("Control"), + alt := ButtonControl("Alt"), + meta := ButtonControl("Meta"), + ], + alignment=ft.MainAxisAlignment.CENTER, + ), ) diff --git a/python/controls/layout/page/set-platform.py b/python/controls/page/set-platform.py similarity index 72% rename from python/controls/layout/page/set-platform.py rename to python/controls/page/set-platform.py index 07061f1f..414d1814 100644 --- a/python/controls/layout/page/set-platform.py +++ b/python/controls/page/set-platform.py @@ -1,14 +1,14 @@ import flet as ft -def main(page): - def set_android(e): +def main(page: ft.Page): + def set_android(e: ft.Event[ft.ElevatedButton]): page.platform = ft.PagePlatform.ANDROID page.update() print("New platform:", page.platform) - def set_ios(e): - page.platform = "ios" + def set_ios(e: ft.Event[ft.ElevatedButton]): + page.platform = ft.PagePlatform.IOS page.update() print("New platform:", page.platform) diff --git a/python/controls/layout/page/splash-test.py b/python/controls/page/splash-test.py similarity index 69% rename from python/controls/layout/page/splash-test.py rename to python/controls/page/splash-test.py index 3ef3f8d4..68da7cb2 100644 --- a/python/controls/layout/page/splash-test.py +++ b/python/controls/page/splash-test.py @@ -3,7 +3,7 @@ async def main(page: ft.Page): - async def button_click(e): + async def handle_button_click(e: ft.Event[ft.ElevatedButton]): my_bar = ft.ProgressBar() page.overlay.append(my_bar) @@ -15,7 +15,7 @@ async def button_click(e): btn.disabled = False page.update() - btn = ft.ElevatedButton("Do some lengthy task!", on_click=button_click) + btn = ft.ElevatedButton("Do some lengthy task!", on_click=handle_button_click) page.add(btn) diff --git a/python/controls/layout/page/window-hidden-on-start.py b/python/controls/page/window-hidden-on-start.py similarity index 100% rename from python/controls/layout/page/window-hidden-on-start.py rename to python/controls/page/window-hidden-on-start.py diff --git a/python/controls/pagelet/basic.py b/python/controls/pagelet/basic.py new file mode 100644 index 00000000..e6b8c7d6 --- /dev/null +++ b/python/controls/pagelet/basic.py @@ -0,0 +1,56 @@ +import flet as ft + + +def main(page: ft.Page): + def handle_show_drawer(e: ft.Event[ft.FloatingActionButton]): + pagelet.show_drawer(drawer) + + drawer = ft.NavigationDrawer( + controls=[ + ft.NavigationDrawerDestination( + icon=ft.Icons.ADD_TO_HOME_SCREEN_SHARP, + label="Item 1", + ), + ft.NavigationDrawerDestination( + icon=ft.Icons.ADD_COMMENT, + label="Item 2", + ), + ], + ) + + page.add( + pagelet := ft.Pagelet( + width=400, + height=400, + appbar=ft.AppBar( + title=ft.Text("Pagelet AppBar Title"), + bgcolor=ft.Colors.AMBER_ACCENT, + ), + content=ft.Container(ft.Text("Pagelet Body"), padding=ft.Padding.all(16)), + bgcolor=ft.Colors.AMBER_100, + bottom_appbar=ft.BottomAppBar( + bgcolor=ft.Colors.BLUE, + shape=ft.CircularRectangleNotchShape(), + content=ft.Row( + controls=[ + ft.IconButton(icon=ft.Icons.MENU, icon_color=ft.Colors.WHITE), + ft.Container(expand=True), + ft.IconButton(icon=ft.Icons.SEARCH, icon_color=ft.Colors.WHITE), + ft.IconButton( + icon=ft.Icons.FAVORITE, icon_color=ft.Colors.WHITE + ), + ] + ), + ), + end_drawer=drawer, + floating_action_button=ft.FloatingActionButton( + content="Open", + shape=ft.CircleBorder(), + on_click=handle_show_drawer, + ), + floating_action_button_location=ft.FloatingActionButtonLocation.CENTER_DOCKED, + ) + ) + + +ft.run(main) diff --git a/python/controls/pagelet/media/basic.png b/python/controls/pagelet/media/basic.png new file mode 100644 index 00000000..62e4ef51 Binary files /dev/null and b/python/controls/pagelet/media/basic.png differ diff --git a/python/controls/placeholder/basic.py b/python/controls/placeholder/basic.py new file mode 100644 index 00000000..9b2f0e19 --- /dev/null +++ b/python/controls/placeholder/basic.py @@ -0,0 +1,13 @@ +import flet as ft + + +def main(page: ft.Page): + page.add( + ft.Placeholder( + expand=True, + color=ft.Colors.random(), + ) + ) + + +ft.run(main) diff --git a/python/controls/placeholder/media/basic.png b/python/controls/placeholder/media/basic.png new file mode 100644 index 00000000..7e4c0827 Binary files /dev/null and b/python/controls/placeholder/media/basic.png differ diff --git a/python/controls/popup-menu-button/basic.py b/python/controls/popup-menu-button/basic.py new file mode 100644 index 00000000..4bfe453a --- /dev/null +++ b/python/controls/popup-menu-button/basic.py @@ -0,0 +1,34 @@ +import flet as ft + + +def main(page: ft.Page): + def handle_check_item_click(e: ft.Event[ft.PopupMenuItem]): + e.control.checked = not e.control.checked + page.update() + + page.add( + ft.PopupMenuButton( + items=[ + ft.PopupMenuItem(content="Item 1"), + ft.PopupMenuItem(icon=ft.Icons.POWER_INPUT, content="Check power"), + ft.PopupMenuItem( + content=ft.Row( + controls=[ + ft.Icon(ft.Icons.HOURGLASS_TOP_OUTLINED), + ft.Text("Item with a custom content"), + ] + ), + on_click=lambda _: print("Button with custom content clicked!"), + ), + ft.PopupMenuItem(), # divider + ft.PopupMenuItem( + content="Checked item", + checked=False, + on_click=handle_check_item_click, + ), + ] + ) + ) + + +ft.run(main) diff --git a/python/controls/popup-menu-button/media/basic.gif b/python/controls/popup-menu-button/media/basic.gif new file mode 100644 index 00000000..893f023e Binary files /dev/null and b/python/controls/popup-menu-button/media/basic.gif differ diff --git a/python/controls/popup-menu-button/media/index.gif b/python/controls/popup-menu-button/media/index.gif new file mode 100644 index 00000000..26a8d359 Binary files /dev/null and b/python/controls/popup-menu-button/media/index.gif differ diff --git a/python/controls/progress-bar/determinate-and-indeterminate.py b/python/controls/progress-bar/determinate-and-indeterminate.py new file mode 100644 index 00000000..f20a9970 --- /dev/null +++ b/python/controls/progress-bar/determinate-and-indeterminate.py @@ -0,0 +1,31 @@ +import asyncio + +import flet as ft + + +async def main(page: ft.Page): + determinate_bar = ft.ProgressBar(width=400) + determinate_message = ft.Text("Doing something...") + + page.add( + ft.Text( + value="Linear progress indicator", + theme_style=ft.TextThemeStyle.HEADLINE_SMALL, + ), + ft.Column(controls=[determinate_message, determinate_bar]), + ft.Text( + value="Indeterminate progress bar", + theme_style=ft.TextThemeStyle.HEADLINE_SMALL, + ), + ft.ProgressBar(width=400, color=ft.Colors.AMBER), + ) + + for i in range(0, 101): + determinate_bar.value = i * 0.01 + await asyncio.sleep(0.1) + if i == 100: + determinate_message.value = "Finished!" + page.update() + + +ft.run(main) diff --git a/python/controls/progress-bar/media/determinate-and-indeterminate.gif b/python/controls/progress-bar/media/determinate-and-indeterminate.gif new file mode 100644 index 00000000..ca79c8d9 Binary files /dev/null and b/python/controls/progress-bar/media/determinate-and-indeterminate.gif differ diff --git a/python/controls/progress-ring/determinate-and-indeterminate.py b/python/controls/progress-ring/determinate-and-indeterminate.py new file mode 100644 index 00000000..98973342 --- /dev/null +++ b/python/controls/progress-ring/determinate-and-indeterminate.py @@ -0,0 +1,37 @@ +import asyncio +import flet as ft + + +async def main(page: ft.Page): + page.add( + ft.Text( + value="Circular progress indicator", + theme_style=ft.TextThemeStyle.HEADLINE_SMALL, + ), + ft.Row( + controls=[ + determinate_ring := ft.ProgressRing( + width=16, height=16, stroke_width=2 + ), + determinate_message := ft.Text("Wait for the completion..."), + ] + ), + ft.Text( + value="Indeterminate cicrular progress", + theme_style=ft.TextThemeStyle.HEADLINE_SMALL, + ), + ft.Column( + horizontal_alignment=ft.CrossAxisAlignment.CENTER, + controls=[ft.ProgressRing(), ft.Text("I'm going to run for ages...")], + ), + ) + + for i in range(0, 101): + determinate_ring.value = i * 0.01 + await asyncio.sleep(0.1) + if i == 100: + determinate_message.value = "Finished!" + page.update() + + +ft.run(main) diff --git a/python/controls/progress-ring/gauge-with-progress.py b/python/controls/progress-ring/gauge-with-progress.py new file mode 100644 index 00000000..43ff0628 --- /dev/null +++ b/python/controls/progress-ring/gauge-with-progress.py @@ -0,0 +1,17 @@ +import flet as ft + + +def main(page: ft.Page): + page.add( + ft.Stack( + width=100, + height=100, + controls=[ + ft.Container(content=ft.Text("60%"), alignment=ft.Alignment.CENTER), + ft.ProgressRing(value=0.6, width=100, height=100), + ], + ) + ) + + +ft.run(main) diff --git a/python/controls/progress-ring/media/determinate-and-indeterminate.gif b/python/controls/progress-ring/media/determinate-and-indeterminate.gif new file mode 100644 index 00000000..a0eea5b7 Binary files /dev/null and b/python/controls/progress-ring/media/determinate-and-indeterminate.gif differ diff --git a/python/controls/radio/basic.py b/python/controls/radio/basic.py new file mode 100644 index 00000000..427ceb00 --- /dev/null +++ b/python/controls/radio/basic.py @@ -0,0 +1,25 @@ +import flet as ft + + +def main(page: ft.Page): + def handle_button_click(e: ft.Event[ft.ElevatedButton]): + message.value = f"Your favorite color is: {group.value}" + page.update() + + page.add( + ft.Text("Select your favorite color:"), + group := ft.RadioGroup( + content=ft.Column( + controls=[ + ft.Radio(value="red", label="Red"), + ft.Radio(value="green", label="Green"), + ft.Radio(value="blue", label="Blue"), + ] + ) + ), + ft.ElevatedButton(content="Submit", on_click=handle_button_click), + message := ft.Text(), + ) + + +ft.run(main) diff --git a/python/controls/radio/handling-selection-changes.py b/python/controls/radio/handling-selection-changes.py new file mode 100644 index 00000000..c0cfa14f --- /dev/null +++ b/python/controls/radio/handling-selection-changes.py @@ -0,0 +1,25 @@ +import flet as ft + + +def main(page: ft.Page): + def handle_selection_change(e: ft.Event[ft.RadioGroup]): + message.value = f"Your favorite color is: {e.control.value}" + page.update() + + page.add( + ft.Text("Select your favorite color:"), + ft.RadioGroup( + on_change=handle_selection_change, + content=ft.Column( + controls=[ + ft.Radio(value="red", label="Red"), + ft.Radio(value="green", label="Green"), + ft.Radio(value="blue", label="Blue"), + ] + ), + ), + message := ft.Text(), + ) + + +ft.run(main) diff --git a/python/controls/radio/media/basic.gif b/python/controls/radio/media/basic.gif new file mode 100644 index 00000000..b733d95e Binary files /dev/null and b/python/controls/radio/media/basic.gif differ diff --git a/python/controls/radio/media/handling-selection-changes.gif b/python/controls/radio/media/handling-selection-changes.gif new file mode 100644 index 00000000..871f676f Binary files /dev/null and b/python/controls/radio/media/handling-selection-changes.gif differ diff --git a/python/controls/input-and-selections/radio/styled-radio.py b/python/controls/radio/styled.py similarity index 96% rename from python/controls/input-and-selections/radio/styled-radio.py rename to python/controls/radio/styled.py index c6f10d94..40f51111 100644 --- a/python/controls/input-and-selections/radio/styled-radio.py +++ b/python/controls/radio/styled.py @@ -5,7 +5,7 @@ def main(page: ft.Page): page.add( ft.RadioGroup( ft.Column( - [ + controls=[ ft.Radio(label="Radio with default style", value="1"), ft.Radio( label="Radio with constant fill color", diff --git a/python/controls/range-slider/basic.py b/python/controls/range-slider/basic.py new file mode 100644 index 00000000..856f34a6 --- /dev/null +++ b/python/controls/range-slider/basic.py @@ -0,0 +1,32 @@ +import flet as ft + + +def main(page: ft.Page): + + page.add( + ft.Column( + horizontal_alignment=ft.CrossAxisAlignment.CENTER, + controls=[ + ft.Text( + value="Range slider with divisions and labels", + size=20, + weight=ft.FontWeight.BOLD, + ), + ft.Container(height=30), + ft.RangeSlider( + min=0, + max=50, + start_value=10, + divisions=10, + end_value=20, + inactive_color=ft.Colors.GREEN_300, + active_color=ft.Colors.GREEN_700, + overlay_color=ft.Colors.GREEN_100, + label="{value}%", + ), + ], + ) + ) + + +ft.run(main) diff --git a/python/controls/range-slider/handling-change-events.py b/python/controls/range-slider/handling-change-events.py new file mode 100644 index 00000000..395bea7e --- /dev/null +++ b/python/controls/range-slider/handling-change-events.py @@ -0,0 +1,44 @@ +import flet as ft + + +def main(page: ft.Page): + page.scroll = ft.ScrollMode.AUTO + + def handle_slider_change_start(e: ft.Event[ft.RangeSlider]): + print(f"on_change_start: {e.control.start_value}, {e.control.end_value}") + + def handle_slider_change(e: ft.Event[ft.RangeSlider]): + print(f"on_change: {e.control.start_value}, {e.control.end_value}") + + def handle_slider_change_end(e: ft.Event[ft.RangeSlider]): + print(f"on_change_end: {e.control.start_value}, {e.control.end_value}") + message.value = f"on_change_end: {e.control.start_value}, {e.control.end_value}" + page.update() + + page.add( + ft.Column( + horizontal_alignment=ft.CrossAxisAlignment.CENTER, + controls=[ + ft.Text( + value="Range slider with events", + size=20, + weight=ft.FontWeight.BOLD, + ), + ft.Container(height=30), + ft.RangeSlider( + divisions=50, + min=0, + max=50, + start_value=10, + end_value=20, + on_change_start=handle_slider_change_start, + on_change=handle_slider_change, + on_change_end=handle_slider_change_end, + ), + message := ft.Text(), + ], + ) + ) + + +ft.run(main) diff --git a/python/controls/range-slider/media/basic.gif b/python/controls/range-slider/media/basic.gif new file mode 100644 index 00000000..b21b0f78 Binary files /dev/null and b/python/controls/range-slider/media/basic.gif differ diff --git a/python/controls/reorderable-draggable/basic.py b/python/controls/reorderable-draggable/basic.py new file mode 100644 index 00000000..253f150c --- /dev/null +++ b/python/controls/reorderable-draggable/basic.py @@ -0,0 +1,32 @@ +import flet as ft + + +def main(page: ft.Page): + get_color = lambda i: ( + ft.Colors.ERROR if i % 2 == 0 else ft.Colors.ON_ERROR_CONTAINER + ) + + page.add( + ft.ReorderableListView( + expand=True, + build_controls_on_demand=False, + on_reorder=lambda e: print( + f"Reordered from {e.old_index} to {e.new_index}" + ), + show_default_drag_handles=True, + controls=[ + ft.ReorderableDraggable( + index=i, + content=ft.ListTile( + title=ft.Text(f"Item {i}", color=ft.Colors.BLACK), + leading=ft.Icon(ft.Icons.CHECK, color=ft.Colors.RED), + bgcolor=get_color(i), + ), + ) + for i in range(10) + ], + ) + ) + + +ft.app(main) diff --git a/python/controls/reorderable-list-view/horizontal-and-vertical.py b/python/controls/reorderable-list-view/horizontal-and-vertical.py new file mode 100644 index 00000000..fa835c21 --- /dev/null +++ b/python/controls/reorderable-list-view/horizontal-and-vertical.py @@ -0,0 +1,50 @@ +import flet as ft + + +def main(page: ft.Page): + # the primary color is the color of the reorder handle + page.theme = page.dark_theme = ft.Theme( + color_scheme=ft.ColorScheme(primary=ft.Colors.BLUE) + ) + + def handle_reorder(e: ft.OnReorderEvent): + e.control.controls.insert(e.new_index, e.control.controls.pop(e.old_index)) + + get_color = lambda i: ( + ft.Colors.ERROR if i % 2 == 0 else ft.Colors.ON_ERROR_CONTAINER + ) + + page.add( + # horizontal + ft.ReorderableListView( + expand=True, + horizontal=True, + on_reorder=handle_reorder, + controls=[ + ft.Container( + content=ft.Text(f"Item {i}", color=ft.Colors.BLACK), + bgcolor=get_color(i), + margin=ft.Margin.symmetric(horizontal=5, vertical=10), + width=100, + alignment=ft.Alignment.CENTER, + ) + for i in range(10) + ], + ), + # vertical + ft.ReorderableListView( + expand=True, + on_reorder=handle_reorder, + controls=[ + ft.ListTile( + title=ft.Text(f"Item {i}", color=ft.Colors.BLACK), + leading=ft.Icon(ft.Icons.CHECK, color=ft.Colors.RED), + bgcolor=get_color(i), + ) + for i in range(10) + ], + ), + ) + + +ft.run(main) diff --git a/python/controls/reorderable-list-view/media/horizontal-and-vertical.gif b/python/controls/reorderable-list-view/media/horizontal-and-vertical.gif new file mode 100644 index 00000000..3e5996f8 Binary files /dev/null and b/python/controls/reorderable-list-view/media/horizontal-and-vertical.gif differ diff --git a/python/controls/layout/responsive-row/responsive-layout.py b/python/controls/responsive-row/basic.py similarity index 78% rename from python/controls/layout/responsive-row/responsive-layout.py rename to python/controls/responsive-row/basic.py index 7bf94db7..9992683b 100644 --- a/python/controls/layout/responsive-row/responsive-layout.py +++ b/python/controls/responsive-row/basic.py @@ -2,37 +2,38 @@ def main(page: ft.Page): - def page_resize(e): + def handle_page_resize(e: ft.PageResizeEvent): pw.value = f"{page.width} px" pw.update() - page.on_resized = page_resize + page.on_resize = handle_page_resize pw = ft.Text(text_align=ft.TextAlign.END, style=ft.TextTheme.display_small) # page.overlay.append(pw) + page.add( ft.ResponsiveRow( - [ + controls=[ ft.Container( - ft.Text("Column 1"), + content=ft.Text("Column 1"), padding=5, bgcolor=ft.Colors.YELLOW, col={"xs": 12, "md": 6, "lg": 3}, ), ft.Container( - ft.Text("Column 2"), + content=ft.Text("Column 2"), padding=5, bgcolor=ft.Colors.GREEN, col={"xs": 12, "md": 6, "lg": 3}, ), ft.Container( - ft.Text("Column 3"), + content=ft.Text("Column 3"), padding=5, bgcolor=ft.Colors.BLUE, col={"xs": 12, "md": 6, "lg": 3}, ), ft.Container( - ft.Text("Column 4"), + content=ft.Text("Column 4"), padding=5, bgcolor=ft.Colors.PINK_300, col={"xs": 12, "md": 6, "lg": 3}, @@ -40,16 +41,16 @@ def page_resize(e): ], ), ft.ResponsiveRow( - [ + run_spacing={"xs": 10}, + controls=[ 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}, ), pw, ) - page_resize(None) + handle_page_resize(None) ft.run(main) diff --git a/python/controls/responsive-row/media/basic.gif b/python/controls/responsive-row/media/basic.gif new file mode 100644 index 00000000..697447a0 Binary files /dev/null and b/python/controls/responsive-row/media/basic.gif differ diff --git a/python/controls/rocket.py b/python/controls/rocket.py new file mode 100644 index 00000000..d0602c35 --- /dev/null +++ b/python/controls/rocket.py @@ -0,0 +1,44 @@ +from math import pi +import flet as ft + + +def main(page: ft.Page): + page.vertical_alignment = ft.MainAxisAlignment.CENTER + page.horizontal_alignment = ft.CrossAxisAlignment.CENTER + + def animate(e: ft.Event[ft.ElevatedButton]): + container.rotate.angle -= 0.5 * pi + container.content.scale = 2.0 if container.content.scale == 1.0 else 1.0 + container.content.opacity = 0.4 if container.content.scale == 1.0 else 1.0 + page.update() + + page.add( + ft.Column( + alignment=ft.MainAxisAlignment.SPACE_BETWEEN, + height=300, + controls=[ + container := ft.Container( + width=120, + height=70, + alignment=ft.Alignment.CENTER_RIGHT, + rotate=ft.Rotate(0, alignment=ft.Alignment.CENTER_LEFT), + animate_rotation=ft.Animation(duration=1000), + content=ft.Container( + scale=1.0, + animate_scale=1000, + opacity=1.0, + animate_opacity=True, + content=ft.Icon( + ft.Icons.ROCKET, + size=40, + color=ft.Colors.BLACK, + ), + ), + ), + ft.ElevatedButton("Launch!", on_click=animate), + ], + ) + ) + + +ft.run(main) diff --git a/python/controls/row/alignment.py b/python/controls/row/alignment.py new file mode 100644 index 00000000..eee467f6 --- /dev/null +++ b/python/controls/row/alignment.py @@ -0,0 +1,47 @@ +import flet as ft + + +class RowWithAlignment(ft.Column): + def __init__(self, alignment: ft.MainAxisAlignment): + super().__init__() + self.controls = [ + ft.Text(str(alignment), size=16), + ft.Container( + content=ft.Row(self.generate_items(3), alignment=alignment), + bgcolor=ft.Colors.AMBER_100, + ), + ] + + @staticmethod + def generate_items(count: int): + return [ + ft.Container( + content=ft.Text(value=str(i)), + alignment=ft.Alignment.CENTER, + width=50, + height=50, + bgcolor=ft.Colors.AMBER_500, + ) + for i in range(1, count + 1) + ] + + +def main(page: ft.Page): + page.scroll = ft.ScrollMode.AUTO + + page.add( + ft.Column( + scroll=ft.ScrollMode.AUTO, + controls=[ + RowWithAlignment(ft.MainAxisAlignment.START), + RowWithAlignment(ft.MainAxisAlignment.CENTER), + RowWithAlignment(ft.MainAxisAlignment.END), + RowWithAlignment(ft.MainAxisAlignment.SPACE_BETWEEN), + RowWithAlignment(ft.MainAxisAlignment.SPACE_AROUND), + RowWithAlignment(ft.MainAxisAlignment.SPACE_EVENLY), + ], + ) + ) + + +ft.run(main) diff --git a/python/controls/row/media/alignment.png b/python/controls/row/media/alignment.png new file mode 100644 index 00000000..98d6d3ad Binary files /dev/null and b/python/controls/row/media/alignment.png differ diff --git a/python/controls/row/media/spacing.gif b/python/controls/row/media/spacing.gif new file mode 100644 index 00000000..a05a7a3f Binary files /dev/null and b/python/controls/row/media/spacing.gif differ diff --git a/python/controls/row/media/vertical-alignment.png b/python/controls/row/media/vertical-alignment.png new file mode 100644 index 00000000..50778f83 Binary files /dev/null and b/python/controls/row/media/vertical-alignment.png differ diff --git a/python/controls/row/media/wrap.gif b/python/controls/row/media/wrap.gif new file mode 100644 index 00000000..6846bb2e Binary files /dev/null and b/python/controls/row/media/wrap.gif differ diff --git a/python/controls/row/spacing.py b/python/controls/row/spacing.py new file mode 100644 index 00000000..f3128b54 --- /dev/null +++ b/python/controls/row/spacing.py @@ -0,0 +1,42 @@ +import flet as ft + + +def main(page: ft.Page): + def generate_items(count: int): + return [ + ft.Container( + content=ft.Text(value=str(i)), + alignment=ft.Alignment.CENTER, + width=50, + height=50, + bgcolor=ft.Colors.AMBER, + border_radius=ft.BorderRadius.all(5), + ) + for i in range(1, count + 1) + ] + + def handle_slider_change(e: ft.Event[ft.Slider]): + row.spacing = int(e.control.value) + row.update() + + page.add( + ft.Column( + controls=[ + ft.Text("Spacing between items"), + ft.Slider( + min=0, + max=50, + divisions=50, + value=0, + label="{value}", + on_change=handle_slider_change, + ), + ] + ), + row := ft.Row( + spacing=0, controls=generate_items(10), scroll=ft.ScrollMode.AUTO + ), + ) + + +ft.run(main) diff --git a/python/controls/row/vertical-alignment.py b/python/controls/row/vertical-alignment.py new file mode 100644 index 00000000..fe154d01 --- /dev/null +++ b/python/controls/row/vertical-alignment.py @@ -0,0 +1,38 @@ +import flet as ft + + +class RowWithVerticalAlignment(ft.Column): + def __init__(self, alignment: ft.CrossAxisAlignment): + super().__init__() + self.controls = [ + ft.Text(str(alignment), size=16), + ft.Container( + content=ft.Row(self.generate_items(3), vertical_alignment=alignment), + bgcolor=ft.Colors.AMBER_100, + height=150, + ), + ] + + @staticmethod + def generate_items(count: int): + return [ + ft.Container( + content=ft.Text(value=str(i)), + alignment=ft.Alignment.CENTER, + width=50, + height=50, + bgcolor=ft.Colors.AMBER_500, + ) + for i in range(1, count + 1) + ] + + +def main(page: ft.Page): + page.add( + RowWithVerticalAlignment(ft.CrossAxisAlignment.START), + RowWithVerticalAlignment(ft.CrossAxisAlignment.CENTER), + RowWithVerticalAlignment(ft.CrossAxisAlignment.END), + ) + + +ft.run(main) diff --git a/python/controls/row/wrap.py b/python/controls/row/wrap.py new file mode 100644 index 00000000..977e7d03 --- /dev/null +++ b/python/controls/row/wrap.py @@ -0,0 +1,48 @@ +import flet as ft + + +def main(page: ft.Page): + def generate_items(count: int): + return [ + ft.Container( + content=ft.Text(value=str(i)), + alignment=ft.Alignment.CENTER, + width=50, + height=50, + bgcolor=ft.Colors.AMBER, + border_radius=ft.BorderRadius.all(5), + ) + for i in range(1, count + 1) + ] + + def handle_slider_change(e: ft.Event[ft.Slider]): + row.width = float(e.control.value) + row.update() + + page.add( + ft.Column( + controls=[ + ft.Text( + "Change the row width to see how child items wrap onto multiple rows:" + ), + ft.Slider( + min=0, + max=page.window.width, + divisions=20, + value=page.window.width, + label="{value}", + on_change=handle_slider_change, + ), + ] + ), + row := ft.Row( + wrap=True, + spacing=10, + run_spacing=10, + controls=generate_items(30), + width=page.window.width, + ), + ) + + +ft.run(main) diff --git a/python/controls/safe-area/basic.py b/python/controls/safe-area/basic.py new file mode 100644 index 00000000..649efc17 --- /dev/null +++ b/python/controls/safe-area/basic.py @@ -0,0 +1,32 @@ +import flet as ft + + +class State: + counter = 0 + + +def main(page: ft.Page): + state = State() + + def handle_button_click(e: ft.Event[ft.FloatingActionButton]): + state.counter += 1 + message.value = str(state.counter) + message.update() + + page.floating_action_button = ft.FloatingActionButton( + icon=ft.Icons.ADD, + on_click=handle_button_click, + ) + + page.add( + ft.SafeArea( + expand=True, + content=ft.Container( + message := ft.Text("0", size=50), + alignment=ft.Alignment.CENTER, + ), + ) + ) + + +ft.run(main) diff --git a/python/controls/search-bar/basic.py b/python/controls/search-bar/basic.py new file mode 100644 index 00000000..8dc44faf --- /dev/null +++ b/python/controls/search-bar/basic.py @@ -0,0 +1,44 @@ +import flet as ft + + +def main(page: ft.Page): + def handle_tile_click(e: ft.Event[ft.ListTile]): + anchor.close_view(e.control.title.value) + + def handle_change(e: ft.Event[ft.SearchBar]): + print(f"handle_change e.data: {e.data}") + + def handle_submit(e: ft.Event[ft.SearchBar]): + print(f"handle_submit e.data: {e.data}") + + def handle_tap(e: ft.Event[ft.SearchBar]): + print("handle_tap") + anchor.open_view() + + page.add( + ft.Row( + alignment=ft.MainAxisAlignment.CENTER, + controls=[ + ft.OutlinedButton( + content="Open Search View", + on_click=lambda _: anchor.open_view(), + ), + ], + ), + anchor := ft.SearchBar( + view_elevation=4, + divider_color=ft.Colors.AMBER, + bar_hint_text="Search colors...", + view_hint_text="Choose a color from the suggestions...", + on_change=handle_change, + on_submit=handle_submit, + on_tap=handle_tap, + controls=[ + ft.ListTile(title=ft.Text(f"Color {i}"), on_click=handle_tile_click) + for i in range(10) + ], + ), + ) + + +ft.run(main) diff --git a/python/controls/search-bar/media/basic.gif b/python/controls/search-bar/media/basic.gif new file mode 100644 index 00000000..5b4623cd Binary files /dev/null and b/python/controls/search-bar/media/basic.gif differ diff --git a/python/controls/buttons/segmented-button/segmented-button-example.py b/python/controls/segmented-button/basic.py similarity index 91% rename from python/controls/buttons/segmented-button/segmented-button-example.py rename to python/controls/segmented-button/basic.py index 627ea11d..b7350186 100644 --- a/python/controls/buttons/segmented-button/segmented-button-example.py +++ b/python/controls/segmented-button/basic.py @@ -2,12 +2,12 @@ def main(page: ft.Page): - def handle_change(e): - print("on_change data : " + str(e.data)) + def handle_selection_change(e: ft.Event[ft.SegmentedButton]): + print(e) page.add( ft.SegmentedButton( - on_change=handle_change, + on_change=handle_selection_change, selected_icon=ft.Icon(ft.Icons.CHECK_SHARP), selected=["1"], allow_empty_selection=True, @@ -36,7 +36,7 @@ def handle_change(e): ], ), ft.SegmentedButton( - on_change=handle_change, + on_change=handle_selection_change, selected_icon=ft.Icon(ft.Icons.ONETWOTHREE), selected=["2"], allow_multiple_selection=False, diff --git a/python/controls/segmented-button/media/basic.gif b/python/controls/segmented-button/media/basic.gif new file mode 100644 index 00000000..3f1d5e3b Binary files /dev/null and b/python/controls/segmented-button/media/basic.gif differ diff --git a/python/controls/utility/selection-area/selection-area-example.py b/python/controls/selection-area/basic.py similarity index 52% rename from python/controls/utility/selection-area/selection-area-example.py rename to python/controls/selection-area/basic.py index 0e6a8322..18b8a62d 100644 --- a/python/controls/utility/selection-area/selection-area-example.py +++ b/python/controls/selection-area/basic.py @@ -1,27 +1,28 @@ import flet as ft +TEXT_STYLE = ft.TextStyle( + size=22, + weight=ft.FontWeight.W_600, + decoration=ft.TextDecoration( + ft.TextDecoration.UNDERLINE | ft.TextDecoration.OVERLINE + ), + decoration_style=ft.TextDecorationStyle.WAVY, +) -def main(page: ft.Page): - ts = ft.TextStyle( - size=22, - weight=ft.FontWeight.W_600, - decoration=ft.TextDecoration( - ft.TextDecoration.UNDERLINE | ft.TextDecoration.OVERLINE - ), - decoration_style=ft.TextDecorationStyle(ft.TextDecorationStyle.WAVY), - ) +def main(page: ft.Page): page.add( ft.SelectionArea( content=ft.Column( - [ - ft.Text("Selectable text", color=ft.Colors.GREEN, style=ts), - ft.Text("Also selectable", color=ft.Colors.GREEN, style=ts), + controls=[ + ft.Text("Selectable text", color=ft.Colors.GREEN, style=TEXT_STYLE), + ft.Text("Also selectable", color=ft.Colors.GREEN, style=TEXT_STYLE), ] ) ) ) - page.add(ft.Text("Not selectable", color=ft.Colors.RED, style=ts)) + + page.add(ft.Text("Not selectable", color=ft.Colors.RED, style=TEXT_STYLE)) ft.run(main) diff --git a/python/controls/selection-area/media/basic.gif b/python/controls/selection-area/media/basic.gif new file mode 100644 index 00000000..cfa38e94 Binary files /dev/null and b/python/controls/selection-area/media/basic.gif differ diff --git a/python/controls/semantics/basic.py b/python/controls/semantics/basic.py new file mode 100644 index 00000000..9074ea4b --- /dev/null +++ b/python/controls/semantics/basic.py @@ -0,0 +1,30 @@ +import flet as ft + + +def main(page: ft.Page): + def handle_gain_accessibility_focus(e: ft.Event[ft.Semantics]): + print("focus gained") + + def handle_lose_accessibility_focus(e: ft.Event[ft.Semantics]): + print("focus lost") + + page.add( + ft.Column( + controls=[ + ft.Semantics( + label="Input your occupation", + on_did_gain_accessibility_focus=handle_gain_accessibility_focus, + on_did_lose_accessibility_focus=handle_lose_accessibility_focus, + content=ft.TextField( + label="Occupation", + hint_text="Use 20 words or less", + value="What is your occupation?", + ), + ), + ft.Icon(name="settings", color="#c1c1c1"), + ] + ) + ) + + +ft.run(main) diff --git a/python/controls/utility/shader-mask/shader-mask-gradient.py b/python/controls/shader-mask/fade-out-image-bottom.py similarity index 79% rename from python/controls/utility/shader-mask/shader-mask-gradient.py rename to python/controls/shader-mask/fade-out-image-bottom.py index 5ae70f75..69468dbe 100644 --- a/python/controls/utility/shader-mask/shader-mask-gradient.py +++ b/python/controls/shader-mask/fade-out-image-bottom.py @@ -4,17 +4,17 @@ def main(page: ft.Page): page.add( ft.Row( - [ + controls=[ ft.ShaderMask( content=ft.Image(src="https://picsum.photos/200/200?2"), blend_mode=ft.BlendMode.DST_IN, + border_radius=10, shader=ft.LinearGradient( - begin=ft.Alignment.top_center(), - end=ft.Alignment.bottom_center(), + 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, ), ] ) diff --git a/python/controls/utility/shader-mask/shader-mask-image.py b/python/controls/shader-mask/linear-and-radial-gradients.py similarity index 81% rename from python/controls/utility/shader-mask/shader-mask-image.py rename to python/controls/shader-mask/linear-and-radial-gradients.py index ecf249ca..7d685f54 100644 --- a/python/controls/utility/shader-mask/shader-mask-image.py +++ b/python/controls/shader-mask/linear-and-radial-gradients.py @@ -4,31 +4,31 @@ def main(page: ft.Page): page.add( ft.Row( - [ + controls=[ ft.ShaderMask( - content=ft.Image( - src="https://picsum.photos/200/300?1", - width=400, - height=400, - fit=ft.ImageFit.FILL, - ), blend_mode=ft.BlendMode.COLOR_BURN, shader=ft.RadialGradient( - center=ft.Alignment.top_left(), + center=ft.Alignment.TOP_LEFT, radius=1.0, colors=[ft.Colors.YELLOW, ft.Colors.DEEP_ORANGE_900], tile_mode=ft.GradientTileMode.CLAMP, ), + content=ft.Image( + src="https://picsum.photos/200/300?1", + width=400, + height=400, + fit=ft.BoxFit.FILL, + ), ), ft.ShaderMask( - content=ft.Image(src="https://picsum.photos/200/300?2"), blend_mode=ft.BlendMode.DST_IN, shader=ft.LinearGradient( - begin=ft.Alignment.top_center(), - end=ft.Alignment.bottom_center(), + begin=ft.Alignment.TOP_CENTER, + end=ft.Alignment.BOTTOM_CENTER, colors=[ft.Colors.BLACK, ft.Colors.TRANSPARENT], stops=[0.5, 1.0], ), + content=ft.Image(src="https://picsum.photos/200/300?2"), ), ] ) diff --git a/python/controls/shader-mask/media/fade-out-image-bottom.png b/python/controls/shader-mask/media/fade-out-image-bottom.png new file mode 100644 index 00000000..a9921a08 Binary files /dev/null and b/python/controls/shader-mask/media/fade-out-image-bottom.png differ diff --git a/python/controls/shader-mask/media/pink-radial-glow.png b/python/controls/shader-mask/media/pink-radial-glow.png new file mode 100644 index 00000000..b48de21e Binary files /dev/null and b/python/controls/shader-mask/media/pink-radial-glow.png differ diff --git a/python/controls/utility/shader-mask/shader-mask-single-image.py b/python/controls/shader-mask/pink-radial-glow.py similarity index 83% rename from python/controls/utility/shader-mask/shader-mask-single-image.py rename to python/controls/shader-mask/pink-radial-glow.py index aac30c37..8ac90fcf 100644 --- a/python/controls/utility/shader-mask/shader-mask-single-image.py +++ b/python/controls/shader-mask/pink-radial-glow.py @@ -4,27 +4,27 @@ def main(page: ft.Page): page.add( ft.Row( - [ + controls=[ ft.Image( src="https://picsum.photos/300/300?1", width=300, height=300, - fit=ft.ImageFit.FILL, + fit=ft.BoxFit.FILL, ), ft.ShaderMask( - content=ft.Image( - src="https://picsum.photos/300/300?1", - width=300, - height=300, - fit=ft.ImageFit.FILL, - ), blend_mode=ft.BlendMode.MULTIPLY, shader=ft.RadialGradient( - center=ft.Alignment.center(), + center=ft.Alignment.CENTER, radius=0.5, colors=[ft.Colors.WHITE, ft.Colors.PINK], tile_mode=ft.GradientTileMode.CLAMP, ), + content=ft.Image( + src="https://picsum.photos/300/300?1", + width=300, + height=300, + fit=ft.BoxFit.FILL, + ), ), ] ) diff --git a/python/controls/shake-detector/basic.py b/python/controls/shake-detector/basic.py new file mode 100644 index 00000000..09d0a63c --- /dev/null +++ b/python/controls/shake-detector/basic.py @@ -0,0 +1,17 @@ +import flet as ft + + +def main(page: ft.Page): + page.services.append( + ft.ShakeDetector( + minimum_shake_count=2, + shake_slop_time_ms=300, + shake_count_reset_time_ms=1000, + on_shake=lambda _: page.add(ft.Text("Shake detected!")), + ) + ) + + page.add(ft.Text("Shake your device!")) + + +ft.run(main) diff --git a/python/controls/input-and-selections/slider/slider-basic.py b/python/controls/slider/basic.py similarity index 88% rename from python/controls/input-and-selections/slider/slider-basic.py rename to python/controls/slider/basic.py index 99228228..0bfba42b 100644 --- a/python/controls/input-and-selections/slider/slider-basic.py +++ b/python/controls/slider/basic.py @@ -1,7 +1,7 @@ import flet as ft -def main(page): +def main(page: ft.Page): page.add( ft.Text("Default slider:"), ft.Slider(), diff --git a/python/controls/input-and-selections/slider/slider-values.py b/python/controls/slider/custom-label.py similarity index 90% rename from python/controls/input-and-selections/slider/slider-values.py rename to python/controls/slider/custom-label.py index e4df3872..dbc54323 100644 --- a/python/controls/input-and-selections/slider/slider-values.py +++ b/python/controls/slider/custom-label.py @@ -1,7 +1,7 @@ import flet as ft -def main(page): +def main(page: ft.Page): page.add( ft.Text("Slider with value:"), ft.Slider(value=0.3), diff --git a/python/controls/slider/handling-events.py b/python/controls/slider/handling-events.py new file mode 100644 index 00000000..e4a1812e --- /dev/null +++ b/python/controls/slider/handling-events.py @@ -0,0 +1,22 @@ +import flet as ft + + +def main(page: ft.Page): + def slider_changed(e: ft.Event[ft.Slider]): + message.value = f"Slider changed to {e.control.value}" + message.update() + + page.add( + ft.Text("Slider with 'on_change' event:"), + ft.Slider( + min=0, + max=100, + divisions=10, + label="{value}%", + on_change=slider_changed, + ), + message := ft.Text(), + ) + + +ft.run(main) diff --git a/python/controls/slider/media/basic.gif b/python/controls/slider/media/basic.gif new file mode 100644 index 00000000..276ae392 Binary files /dev/null and b/python/controls/slider/media/basic.gif differ diff --git a/python/controls/slider/media/custom-label.gif b/python/controls/slider/media/custom-label.gif new file mode 100644 index 00000000..b7e39a33 Binary files /dev/null and b/python/controls/slider/media/custom-label.gif differ diff --git a/python/controls/slider/media/handling-events.gif b/python/controls/slider/media/handling-events.gif new file mode 100644 index 00000000..82a2e6bb Binary files /dev/null and b/python/controls/slider/media/handling-events.gif differ diff --git a/python/controls/slider/random-values.py b/python/controls/slider/random-values.py new file mode 100644 index 00000000..b601276a --- /dev/null +++ b/python/controls/slider/random-values.py @@ -0,0 +1,25 @@ +import asyncio +import random +import flet as ft + + +async def main(page: ft.Page): + def handle_slider_change(e: ft.Event[ft.Slider]): + message.value = f"Slider.value changed to {e.control.value}" + message.update() + + page.add( + ft.Text("Slider with 'on_change' event:"), + slider := ft.Slider(label="{value}", on_change=handle_slider_change), + message := ft.Text(), + ) + + while True: + await asyncio.sleep(1) + slider.value = random.random() + event = ft.Event("_", slider, data=slider.value) + handle_slider_change(event) + slider.update() + + +ft.run(main) diff --git a/python/controls/snack-bar/basic.py b/python/controls/snack-bar/basic.py new file mode 100644 index 00000000..9da82e4f --- /dev/null +++ b/python/controls/snack-bar/basic.py @@ -0,0 +1,11 @@ +import flet as ft + + +def main(page: ft.Page): + def on_click(e: ft.Event[ft.ElevatedButton]): + page.show_dialog(ft.SnackBar(ft.Text("Hello, world!"))) + + page.add(ft.ElevatedButton("Open SnackBar", on_click=on_click)) + + +ft.run(main) diff --git a/python/controls/snack-bar/counter.py b/python/controls/snack-bar/counter.py new file mode 100644 index 00000000..c62e4277 --- /dev/null +++ b/python/controls/snack-bar/counter.py @@ -0,0 +1,37 @@ +import flet as ft + + +class Data: + def __init__(self) -> None: + self.counter = 0 + + def increment(self): + self.counter += 1 + + def decrement(self): + self.counter -= 1 + + +data = Data() + + +def main(page: ft.Page): + page.title = "SnackBar Example" + + snack_bar = ft.SnackBar( + content=ft.Text("You did it!"), + action="Undo it!", + on_action=lambda e: data.decrement(), + ) + + def handle_button_click(e: ft.Event[ft.ElevatedButton]): + data.increment() + snack_bar.content.value = f"You did it x {data.counter}" + if not snack_bar.open: + page.show_dialog(snack_bar) + page.update() + + page.add(ft.ElevatedButton("Open SnackBar", on_click=handle_button_click)) + + +ft.run(main) diff --git a/python/controls/snack-bar/media/basic.gif b/python/controls/snack-bar/media/basic.gif new file mode 100644 index 00000000..03bcca32 Binary files /dev/null and b/python/controls/snack-bar/media/basic.gif differ diff --git a/python/controls/layout/stack/absolute-positioned.py b/python/controls/stack/absolute-positioning.py similarity index 87% rename from python/controls/layout/stack/absolute-positioned.py rename to python/controls/stack/absolute-positioning.py index 1b440add..7086ec92 100644 --- a/python/controls/layout/stack/absolute-positioned.py +++ b/python/controls/stack/absolute-positioning.py @@ -2,16 +2,23 @@ def main(page: ft.Page): - page.horizontal_alignment = ft.CrossAxisAlignment.CENTER page.vertical_alignment = ft.MainAxisAlignment.CENTER page.add( ft.Container( - ft.Stack( - [ + border_radius=8, + padding=5, + width=200, + height=200, + bgcolor=ft.Colors.BLACK, + content=ft.Stack( + controls=[ ft.Container( - width=20, height=20, bgcolor=ft.Colors.RED, border_radius=5 + width=20, + height=20, + bgcolor=ft.Colors.RED, + border_radius=5, ), ft.Container( width=20, @@ -37,7 +44,9 @@ def main(page: ft.Page): bottom=0, ), ft.Column( - [ + left=85, + top=85, + controls=[ ft.Container( width=20, height=20, @@ -45,16 +54,9 @@ def main(page: ft.Page): border_radius=5, ) ], - left=85, - top=85, ), ] ), - border_radius=8, - padding=5, - width=200, - height=200, - bgcolor=ft.Colors.BLACK, ) ) diff --git a/python/controls/stack/media/absolute-positioning.png b/python/controls/stack/media/absolute-positioning.png new file mode 100644 index 00000000..0ddf3fd7 Binary files /dev/null and b/python/controls/stack/media/absolute-positioning.png differ diff --git a/python/controls/stack/media/online-avatar.png b/python/controls/stack/media/online-avatar.png new file mode 100644 index 00000000..e8dd15ab Binary files /dev/null and b/python/controls/stack/media/online-avatar.png differ diff --git a/python/controls/stack/media/text-on-image.png b/python/controls/stack/media/text-on-image.png new file mode 100644 index 00000000..dc4dae26 Binary files /dev/null and b/python/controls/stack/media/text-on-image.png differ diff --git a/python/controls/layout/stack/avatar-with-status.py b/python/controls/stack/online-avatar.py similarity index 80% rename from python/controls/layout/stack/avatar-with-status.py rename to python/controls/stack/online-avatar.py index d72a2eb3..ffd9af67 100644 --- a/python/controls/layout/stack/avatar-with-status.py +++ b/python/controls/stack/online-avatar.py @@ -1,20 +1,20 @@ import flet as ft -def main(page): +def main(page: ft.Page): page.add( ft.Stack( - [ + width=40, + height=40, + controls=[ ft.CircleAvatar( foreground_image_src="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(), + alignment=ft.Alignment.BOTTOM_LEFT, ), ], - width=40, - height=40, ) ) diff --git a/python/controls/stack/text-on-image.py b/python/controls/stack/text-on-image.py new file mode 100644 index 00000000..d1e51d78 --- /dev/null +++ b/python/controls/stack/text-on-image.py @@ -0,0 +1,33 @@ +import flet as ft + + +def main(page: ft.Page): + page.add( + ft.Stack( + width=300, + height=300, + controls=[ + ft.Image( + src="https://picsum.photos/300/300", + width=300, + height=300, + fit=ft.BoxFit.CONTAIN, + ), + ft.Row( + alignment=ft.MainAxisAlignment.CENTER, + controls=[ + ft.Text( + value="Image title", + color=ft.Colors.SURFACE_TINT, + size=40, + weight=ft.FontWeight.BOLD, + opacity=0.5, + ) + ], + ), + ], + ) + ) + + +ft.run(main) diff --git a/python/controls/buttons/submenu-button/submentu-button-example.py b/python/controls/submenu-button/basic.py similarity index 82% rename from python/controls/buttons/submenu-button/submentu-button-example.py rename to python/controls/submenu-button/basic.py index 90761ee5..ec5c439e 100644 --- a/python/controls/buttons/submenu-button/submentu-button-example.py +++ b/python/controls/submenu-button/basic.py @@ -5,40 +5,33 @@ def main(page: ft.Page): page.padding = 0 page.spacing = 0 - bg_container = ft.Ref[ft.Container]() - - def handle_color_click(e): + def handle_color_click(e: ft.Event[ft.MenuItemButton]): color = e.control.content.value - print(f"{color}.on_click") - bg_container.current.content.value = f"{color} background color" - bg_container.current.bgcolor = color.lower() + background_container.content.value = f"{color} background color" + background_container.bgcolor = color.lower() page.update() - def handle_alignment_click(e): - print("in handle alignment click method") + def handle_alignment_click(e: ft.Event[ft.MenuItemButton]): print( f"bg_container.alignment: {bg_container.alignment}, bg_container.content: {bg_container.content}" ) - bg_container.current.alignment = e.control.data - # page.update() - # bg_container.alignment = e.control.data + background_container.alignment = e.control.data print( f"e.control.content.value: {e.control.content.value}, e.control.data: {e.control.data}" ) page.update() - def handle_on_hover(e): + def handle_on_hover(e: ft.Event[ft.MenuItemButton]): print(f"{e.control.content.value}.on_hover") bg_container = ft.Container( - # ref=bg_container, expand=True, bgcolor=ft.Colors.SURFACE_TINT, + alignment=ft.Alignment.CENTER, content=ft.Text( - "Choose a bgcolor from the menu", + value="Choose a bgcolor from the menu", style=ft.TextStyle(size=24, weight=ft.FontWeight.BOLD), ), - alignment=ft.Alignment.center(), ) menubar = ft.MenuBar( expand=True, @@ -52,27 +45,27 @@ def handle_on_hover(e): controls=[ ft.MenuItemButton( content=ft.Text("Blue"), + on_click=handle_color_click, + on_hover=handle_on_hover, style=ft.ButtonStyle( bgcolor={ft.ControlState.HOVERED: ft.Colors.BLUE} ), - on_click=handle_color_click, - on_hover=handle_on_hover, ), ft.MenuItemButton( content=ft.Text("Green"), + on_click=handle_color_click, + on_hover=handle_on_hover, style=ft.ButtonStyle( bgcolor={ft.ControlState.HOVERED: ft.Colors.GREEN} ), - on_click=handle_color_click, - on_hover=handle_on_hover, ), ft.MenuItemButton( content=ft.Text("Red"), + on_click=handle_color_click, + on_hover=handle_on_hover, style=ft.ButtonStyle( bgcolor={ft.ControlState.HOVERED: ft.Colors.RED} ), - on_click=handle_color_click, - on_hover=handle_on_hover, ), ], ), @@ -82,54 +75,53 @@ def handle_on_hover(e): controls=[ ft.MenuItemButton( content=ft.Text("bottom_center"), - data=ft.Alignment.bottom_center(), + data=ft.Alignment.BOTTOM_CENTER, + on_click=handle_alignment_click, style=ft.ButtonStyle( bgcolor={ ft.ControlState.HOVERED: ft.Colors.GREY_100 } ), - on_click=handle_alignment_click, - # on_hover=handle_on_hover, ), ft.MenuItemButton( content=ft.Text("bottom_left"), - data=ft.Alignment.bottom_left(), + data=ft.Alignment.BOTTOM_LEFT, + on_click=handle_alignment_click, style=ft.ButtonStyle( bgcolor={ ft.ControlState.HOVERED: ft.Colors.GREY_100 } ), - on_click=handle_alignment_click, ), ft.MenuItemButton( content=ft.Text("top_center"), - data=ft.Alignment.top_center(), + data=ft.Alignment.TOP_CENTER, + on_click=handle_alignment_click, style=ft.ButtonStyle( bgcolor={ ft.ControlState.HOVERED: ft.Colors.GREY_100 } ), - on_click=handle_alignment_click, ), ft.MenuItemButton( content=ft.Text("center_left"), - data=ft.Alignment.center_left(), + data=ft.Alignment.CENTER_LEFT, + on_click=handle_alignment_click, style=ft.ButtonStyle( bgcolor={ ft.ControlState.HOVERED: ft.Colors.GREY_100 } ), - on_click=handle_alignment_click, ), ft.MenuItemButton( content=ft.Text("center_right"), - data=ft.Alignment.center_right(), + data=ft.Alignment.CENTER_RIGHT, + on_click=handle_alignment_click, style=ft.ButtonStyle( bgcolor={ ft.ControlState.HOVERED: ft.Colors.GREY_100 } ), - on_click=handle_alignment_click, ), ], ), @@ -139,16 +131,15 @@ def handle_on_hover(e): ) page.add( - ft.Row([menubar]), - ft.Container( - ref=bg_container, + ft.Row(controls=[menubar]), + background_container := ft.Container( expand=True, bgcolor=ft.Colors.SURFACE_TINT, + alignment=ft.Alignment.CENTER, content=ft.Text( - "Choose a bgcolor from the menu", + value="Choose a bgcolor from the menu", style=ft.TextStyle(size=24, weight=ft.FontWeight.BOLD), ), - alignment=ft.Alignment.center(), ), ) diff --git a/python/controls/submenu-button/media/basic.gif b/python/controls/submenu-button/media/basic.gif new file mode 100644 index 00000000..c1579e18 Binary files /dev/null and b/python/controls/submenu-button/media/basic.gif differ diff --git a/python/controls/switch/basic.py b/python/controls/switch/basic.py new file mode 100644 index 00000000..b018d708 --- /dev/null +++ b/python/controls/switch/basic.py @@ -0,0 +1,24 @@ +import flet as ft + + +def main(page: ft.Page): + def handle_button_click(e: ft.Event[ft.ElevatedButton]): + message.value = ( + f"Switch values are: {c1.value}, {c2.value}, {c3.value}, {c4.value}." + ) + page.update() + + page.add( + c1 := ft.Switch(label="Unchecked switch", value=False), + c2 := ft.Switch(label="Checked switch", value=True), + c3 := ft.Switch(label="Disabled switch", disabled=True), + c4 := ft.Switch( + label="Switch with rendered label_position='left'", + label_position=ft.LabelPosition.LEFT, + ), + ft.ElevatedButton(content="Submit", on_click=handle_button_click), + message := ft.Text(), + ) + + +ft.run(main) diff --git a/python/controls/input-and-selections/switch/switch-with-event.py b/python/controls/switch/handling-events.py similarity index 50% rename from python/controls/input-and-selections/switch/switch-with-event.py rename to python/controls/switch/handling-events.py index 90b73413..0895bbb7 100644 --- a/python/controls/input-and-selections/switch/switch-with-event.py +++ b/python/controls/switch/handling-events.py @@ -2,20 +2,21 @@ def main(page: ft.Page): - def theme_changed(e): + def handle_switch_change(e: ft.Event[ft.Switch]): 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" + e.control.label = ( + "Light ThemeMode" + if page.theme_mode == ft.ThemeMode.LIGHT + else "Dark ThemeMode" ) page.update() page.theme_mode = ft.ThemeMode.LIGHT - c = ft.Switch(label="Light theme", on_change=theme_changed) - page.add(c) + page.add(ft.Switch(label="Light ThemeMode", on_change=handle_switch_change)) ft.run(main) diff --git a/python/controls/switch/media/basic.gif b/python/controls/switch/media/basic.gif new file mode 100644 index 00000000..a623f8b4 Binary files /dev/null and b/python/controls/switch/media/basic.gif differ diff --git a/python/controls/switch/media/handling-events.gif b/python/controls/switch/media/handling-events.gif new file mode 100644 index 00000000..a3587440 Binary files /dev/null and b/python/controls/switch/media/handling-events.gif differ diff --git a/python/controls/layout/tabs/tabs-simple.py b/python/controls/tabs/basic.py similarity index 93% rename from python/controls/layout/tabs/tabs-simple.py rename to python/controls/tabs/basic.py index 0dd6e5b9..f05fd499 100644 --- a/python/controls/layout/tabs/tabs-simple.py +++ b/python/controls/tabs/basic.py @@ -10,14 +10,14 @@ def main(page: ft.Page): ft.Tab( label="Tab 1", content=ft.Container( - content=ft.Text("This is Tab 1"), alignment=ft.Alignment.center() + content=ft.Text("This is Tab 1"), alignment=ft.Alignment.CENTER ), ), ft.Tab( label="Tab 2", icon=ft.Icons.SETTINGS, content=ft.Container( - content=ft.Text("This is Tab 2"), alignment=ft.Alignment.center() + content=ft.Text("This is Tab 2"), alignment=ft.Alignment.CENTER ), ), ft.Tab( @@ -25,7 +25,7 @@ def main(page: ft.Page): foreground_image_src="https://avatars.githubusercontent.com/u/7119543?s=88&v=4" ), content=ft.Container( - content=ft.Text("This is Tab 3"), alignment=ft.Alignment.center() + content=ft.Text("This is Tab 3"), alignment=ft.Alignment.CENTER ), ), ], diff --git a/python/controls/layout/tabs/tabs-dynamic.py b/python/controls/tabs/dynamic.py similarity index 52% rename from python/controls/layout/tabs/tabs-dynamic.py rename to python/controls/tabs/dynamic.py index 03c41311..54f8ec93 100644 --- a/python/controls/layout/tabs/tabs-dynamic.py +++ b/python/controls/tabs/dynamic.py @@ -1,51 +1,54 @@ -import logging import asyncio import flet as ft async def main(page: ft.Page): - page.title = "Tabs example" + page.title = "Tabs Example" - t = ft.Tabs( - selected_index=1, - animation_duration=300, - tabs=[ - ft.Tab( - label="Tab 1", - content=ft.Container( - content=ft.Text("This is Tab 1"), alignment=ft.Alignment.center() + page.add( + t := ft.Tabs( + selected_index=1, + animation_duration=300, + expand=1, + tabs=[ + ft.Tab( + label="Tab 1", + content=ft.Container( + content=ft.Text("This is Tab 1"), alignment=ft.Alignment.CENTER + ), ), - ), - ft.Tab( - label=ft.Icon(ft.Icons.MESSAGE), - content=ft.Text("This is Tab 2"), - ), - ft.Tab( - label="Tab 3", - icon=ft.Icons.IRON, - content=ft.Text("This is Tab 3"), - ), - ], - expand=1, + ft.Tab( + label=ft.Icon(ft.Icons.MESSAGE), + content=ft.Text("This is Tab 2"), + ), + ft.Tab( + label="Tab 3", + icon=ft.Icons.IRON, + content=ft.Text("This is Tab 3"), + ), + ], + ) ) - page.add(t) - await asyncio.sleep(7) t.selected_index = 2 page.update() + await asyncio.sleep(3) t.selected_index = 0 page.update() + await asyncio.sleep(3) t.selected_index = 1 t.tabs.pop(0) t.tabs[1].content = ft.Text("Blah blah blah") page.update() + await asyncio.sleep(3) t.tabs.clear() page.update() + await asyncio.sleep(3) t.tabs.append( ft.Tab( diff --git a/python/controls/tabs/media/basic.gif b/python/controls/tabs/media/basic.gif new file mode 100644 index 00000000..f49ce724 Binary files /dev/null and b/python/controls/tabs/media/basic.gif differ diff --git a/python/controls/tabs/media/nested.gif b/python/controls/tabs/media/nested.gif new file mode 100644 index 00000000..4bfa04b1 Binary files /dev/null and b/python/controls/tabs/media/nested.gif differ diff --git a/python/controls/tabs/nested.py b/python/controls/tabs/nested.py new file mode 100644 index 00000000..cdb11cd2 --- /dev/null +++ b/python/controls/tabs/nested.py @@ -0,0 +1,56 @@ +import flet as ft + + +def main(page: ft.Page): + page.add( + ft.Tabs( + selected_index=1, + animation_duration=300, + expand=1, + tabs=[ + ft.Tab( + label="Dining", + icon=ft.Icons.RESTAURANT, + content=ft.Tabs( + secondary=True, + tabs=[ + ft.Tab( + label="Fast Food", + content=ft.Text("Grab something on the go!"), + ), + ft.Tab( + label="Fine Dining", content=ft.Text("Take your time!") + ), + ], + ), + ), + ft.Tab( + label="Entertainment", + icon=ft.Icons.LOCAL_ACTIVITY, + content=ft.Tabs( + secondary=True, + tabs=[ + ft.Tab(label="Cinema", content=ft.Text("Find a Film!")), + ft.Tab( + label="Music", content=ft.Text("Listen to some Tunes!") + ), + ], + ), + ), + ft.Tab( + label="Lodging", + icon=ft.Icons.HOTEL, + content=ft.Tabs( + secondary=True, + tabs=[ + ft.Tab(label="Hotel", content=ft.Text("Enjoy your Room!")), + ft.Tab(label="Hostel", content=ft.Text("Grab a Bunk!")), + ], + ), + ), + ], + ) + ) + + +ft.run(main) diff --git a/python/controls/buttons/text-button/basic-text-buttons.py b/python/controls/text-button/basic.py similarity index 99% rename from python/controls/buttons/text-button/basic-text-buttons.py rename to python/controls/text-button/basic.py index d5e72650..73cfa1c9 100644 --- a/python/controls/buttons/text-button/basic-text-buttons.py +++ b/python/controls/text-button/basic.py @@ -3,6 +3,7 @@ def main(page: ft.Page): page.title = "Basic text buttons" + page.add( ft.TextButton(content="Text button"), ft.TextButton(content="Disabled button", disabled=True), diff --git a/python/controls/buttons/text-button/text-buttons-with-custom-content.py b/python/controls/text-button/custom-content.py similarity index 89% rename from python/controls/buttons/text-button/text-buttons-with-custom-content.py rename to python/controls/text-button/custom-content.py index 83c56f55..91e7abd5 100644 --- a/python/controls/buttons/text-button/text-buttons-with-custom-content.py +++ b/python/controls/text-button/custom-content.py @@ -2,30 +2,31 @@ def main(page: ft.Page): - page.title = "Text buttons with custom content" + page.title = "TextButtons with custom content" + page.add( ft.TextButton( width=150, content=ft.Row( - [ + alignment=ft.MainAxisAlignment.SPACE_AROUND, + controls=[ ft.Icon(name=ft.Icons.FAVORITE, color=ft.Colors.PINK), ft.Icon(name=ft.Icons.AUDIOTRACK, color=ft.Colors.GREEN), ft.Icon(name=ft.Icons.BEACH_ACCESS, color=ft.Colors.BLUE), ], - alignment=ft.MainAxisAlignment.SPACE_AROUND, ), ), ft.TextButton( content=ft.Container( + padding=ft.Padding.all(10), content=ft.Column( - [ + alignment=ft.MainAxisAlignment.CENTER, + spacing=5, + controls=[ ft.Text(value="Compound button", size=20), ft.Text(value="This is secondary text"), ], - alignment=ft.MainAxisAlignment.CENTER, - spacing=5, ), - padding=ft.Padding.all(10), ), ), ) diff --git a/python/controls/text-button/handling-clicks.py b/python/controls/text-button/handling-clicks.py new file mode 100644 index 00000000..13750af6 --- /dev/null +++ b/python/controls/text-button/handling-clicks.py @@ -0,0 +1,22 @@ +import flet as ft + + +def main(page: ft.Page): + page.title = "TextButton with 'click' event" + + def button_clicked(e): + button.data += 1 + message.value = f"Button clicked {button.data} time(s)" + page.update() + + page.add( + button := ft.TextButton( + content="Button with 'click' event", + data=0, + on_click=button_clicked, + ), + message := ft.Text(), + ) + + +ft.run(main) diff --git a/python/controls/buttons/text-button/text-buttons-with-icons.py b/python/controls/text-button/icons.py similarity index 53% rename from python/controls/buttons/text-button/text-buttons-with-icons.py rename to python/controls/text-button/icons.py index 6e86b4d7..0a2d85e1 100644 --- a/python/controls/buttons/text-button/text-buttons-with-icons.py +++ b/python/controls/text-button/icons.py @@ -2,11 +2,12 @@ def main(page: ft.Page): - page.title = "Text buttons with icons" + page.title = "TextButtons with icons" + page.add( - ft.TextButton("Button with icon", icon=ft.Icons.WAVES_OUTLINED), + ft.TextButton(content="Button with icon", icon=ft.Icons.WAVES_OUTLINED), ft.TextButton( - "Button with colorful icon", + content="Button with colorful icon", icon=ft.Icons.PARK_ROUNDED, icon_color=ft.Colors.GREEN_400, ), diff --git a/python/controls/text-button/media/basic.png b/python/controls/text-button/media/basic.png new file mode 100644 index 00000000..6c14be2f Binary files /dev/null and b/python/controls/text-button/media/basic.png differ diff --git a/python/controls/text-button/media/custom-content.png b/python/controls/text-button/media/custom-content.png new file mode 100644 index 00000000..9db0de68 Binary files /dev/null and b/python/controls/text-button/media/custom-content.png differ diff --git a/python/controls/text-button/media/handling-clicks.gif b/python/controls/text-button/media/handling-clicks.gif new file mode 100644 index 00000000..b52089f4 Binary files /dev/null and b/python/controls/text-button/media/handling-clicks.gif differ diff --git a/python/controls/text-button/media/icons.png b/python/controls/text-button/media/icons.png new file mode 100644 index 00000000..7e05461b Binary files /dev/null and b/python/controls/text-button/media/icons.png differ diff --git a/python/controls/text-button/media/index.png b/python/controls/text-button/media/index.png new file mode 100644 index 00000000..45e7e870 Binary files /dev/null and b/python/controls/text-button/media/index.png differ diff --git a/python/controls/text-field/basic.py b/python/controls/text-field/basic.py new file mode 100644 index 00000000..1831409a --- /dev/null +++ b/python/controls/text-field/basic.py @@ -0,0 +1,22 @@ +import flet as ft + + +def main(page: ft.Page): + def handle_button_click(e: ft.Event[ft.ElevatedButton]): + message.value = f"Textboxes values are: '{tb1.value}', '{tb2.value}', '{tb3.value}', '{tb4.value}', '{tb5.value}'." + page.update() + + page.add( + 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), + ft.ElevatedButton(content="Submit", on_click=handle_button_click), + message := ft.Text(), + ) + + +ft.run(main) diff --git a/python/controls/text-field/handling-change-events.py b/python/controls/text-field/handling-change-events.py new file mode 100644 index 00000000..1dbf5585 --- /dev/null +++ b/python/controls/text-field/handling-change-events.py @@ -0,0 +1,18 @@ +import flet as ft + + +def main(page: ft.Page): + def handle_field_change(e: ft.Event[ft.TextField]): + message.value = e.control.value + page.update() + + page.add( + ft.TextField( + label="Textbox with 'change' event:", + on_change=handle_field_change, + ), + message := ft.Text(), + ) + + +ft.run(main) diff --git a/python/controls/text-field/label-hint-helper-counter.py b/python/controls/text-field/label-hint-helper-counter.py new file mode 100644 index 00000000..66f426a8 --- /dev/null +++ b/python/controls/text-field/label-hint-helper-counter.py @@ -0,0 +1,55 @@ +import flet as ft + + +def main(page: ft.Page): + page.theme_mode = ft.ThemeMode.LIGHT + + def handle_field_change(e: ft.Event[ft.TextField]): + message.value = e.control.value + page.update() + + page.add( + ft.TextField( + on_change=handle_field_change, + text_style=ft.TextStyle( + size=15, + italic=True, + color=ft.Colors.DEEP_ORANGE_600, + bgcolor=ft.Colors.LIME_ACCENT_200, + ), + label="Label", + label_style=ft.TextStyle( + size=17, + weight=ft.FontWeight.BOLD, + italic=True, + color=ft.Colors.BLUE, + bgcolor=ft.Colors.RED_700, + ), + hint_text="Hint", + hint_style=ft.TextStyle( + size=15, + weight=ft.FontWeight.BOLD, + italic=True, + color=ft.Colors.PINK_ACCENT, + bgcolor=ft.Colors.BROWN_400, + ), + helper="Helper", + helper_style=ft.TextStyle( + size=14, + weight=ft.FontWeight.BOLD, + color=ft.Colors.DEEP_PURPLE, + bgcolor=ft.Colors.BLUE_50, + ), + counter="Counter", + counter_style=ft.TextStyle( + size=14, + italic=True, + color=ft.Colors.YELLOW, + bgcolor=ft.Colors.GREEN_500, + ), + ), + message := ft.Text(), + ) + + +ft.run(main) diff --git a/python/controls/text-field/media/basic.gif b/python/controls/text-field/media/basic.gif new file mode 100644 index 00000000..3305656f Binary files /dev/null and b/python/controls/text-field/media/basic.gif differ diff --git a/python/controls/text-field/media/handling-change-events.gif b/python/controls/text-field/media/handling-change-events.gif new file mode 100644 index 00000000..4b87116c Binary files /dev/null and b/python/controls/text-field/media/handling-change-events.gif differ diff --git a/python/controls/text-field/media/multiline.gif b/python/controls/text-field/media/multiline.gif new file mode 100644 index 00000000..297253cf Binary files /dev/null and b/python/controls/text-field/media/multiline.gif differ diff --git a/python/controls/text-field/media/password.gif b/python/controls/text-field/media/password.gif new file mode 100644 index 00000000..3e5e6678 Binary files /dev/null and b/python/controls/text-field/media/password.gif differ diff --git a/python/controls/text-field/media/prefix-and-suffix.gif b/python/controls/text-field/media/prefix-and-suffix.gif new file mode 100644 index 00000000..b1dfdabe Binary files /dev/null and b/python/controls/text-field/media/prefix-and-suffix.gif differ diff --git a/python/controls/text-field/media/underlined-and-borderless.gif b/python/controls/text-field/media/underlined-and-borderless.gif new file mode 100644 index 00000000..7ccb7adf Binary files /dev/null and b/python/controls/text-field/media/underlined-and-borderless.gif differ diff --git a/python/controls/input-and-selections/text-field/multiline-example.py b/python/controls/text-field/multiline.py similarity index 76% rename from python/controls/input-and-selections/text-field/multiline-example.py rename to python/controls/text-field/multiline.py index 0304f3c2..8b980a11 100644 --- a/python/controls/input-and-selections/text-field/multiline-example.py +++ b/python/controls/text-field/multiline.py @@ -3,9 +3,12 @@ def main(page: ft.Page): page.add( - ft.TextField(label="standard", multiline=True), ft.TextField( - label="disabled", + label="Standard", + multiline=True, + ), + ft.TextField( + label="Disabled", multiline=True, disabled=True, value="line1\nline2\nline3\nline4\nline5", diff --git a/python/controls/text-field/password.py b/python/controls/text-field/password.py new file mode 100644 index 00000000..a15b063f --- /dev/null +++ b/python/controls/text-field/password.py @@ -0,0 +1,14 @@ +import flet as ft + + +def main(page: ft.Page): + page.add( + ft.TextField( + label="Password with reveal button", + password=True, + can_reveal_password=True, + ) + ) + + +ft.run(main) diff --git a/python/controls/text-field/prefix-and-suffix.py b/python/controls/text-field/prefix-and-suffix.py new file mode 100644 index 00000000..7f4854ac --- /dev/null +++ b/python/controls/text-field/prefix-and-suffix.py @@ -0,0 +1,33 @@ +import flet as ft + + +def main(page: ft.Page): + def handle_button_click(e: ft.Event[ft.ElevatedButton]): + message.value = f"Textboxes values are: '{prefix_field.value}', '{suffix_field.value}', '{prefix_suffix_field.value}', '{color_field.value}'." + page.update() + + page.add( + prefix_field := ft.TextField(label="With prefix", prefix="https://"), + suffix_field := ft.TextField(label="With suffix", suffix=".com"), + prefix_suffix_field := ft.TextField( + label="With prefix and suffix", + prefix="https://", + suffix=".com", + enable_interactive_selection=True, + ), + color_field := ft.TextField( + label="My favorite color", + icon=ft.Icons.FORMAT_SIZE, + hint_text="Type your favorite color", + helper="You can type only one color", + counter="{value_length}/{max_length} chars used", + prefix_icon=ft.Icons.COLOR_LENS, + suffix="...is your color", + max_length=20, + ), + ft.ElevatedButton(content="Submit", on_click=handle_button_click), + message := ft.Text(), + ) + + +ft.run(main) diff --git a/python/controls/input-and-selections/text-field/styled-textfield.py b/python/controls/text-field/styled.py similarity index 99% rename from python/controls/input-and-selections/text-field/styled-textfield.py rename to python/controls/text-field/styled.py index 1938233a..3f3a3ba8 100644 --- a/python/controls/input-and-selections/text-field/styled-textfield.py +++ b/python/controls/text-field/styled.py @@ -3,6 +3,7 @@ def main(page: ft.Page): page.padding = 50 + page.add( ft.TextField( text_size=30, diff --git a/python/controls/input-and-selections/text-field/underlined-borderless-example.py b/python/controls/text-field/underlined-and-borderless.py similarity index 84% rename from python/controls/input-and-selections/text-field/underlined-borderless-example.py rename to python/controls/text-field/underlined-and-borderless.py index 4fc62be8..24c0d67e 100644 --- a/python/controls/input-and-selections/text-field/underlined-borderless-example.py +++ b/python/controls/text-field/underlined-and-borderless.py @@ -15,7 +15,9 @@ def main(page: ft.Page): hint_text="Enter text here", ), ft.TextField( - label="Borderless", border=ft.InputBorder.NONE, hint_text="Enter text here" + label="Borderless", + border=ft.InputBorder.NONE, + hint_text="Enter text here", ), ft.TextField( label="Borderless filled", diff --git a/python/controls/text/custom-styles.py b/python/controls/text/custom-styles.py new file mode 100644 index 00000000..fa7824d3 --- /dev/null +++ b/python/controls/text/custom-styles.py @@ -0,0 +1,68 @@ +import flet as ft + + +def main(page: ft.Page): + page.title = "Text custom styles" + page.scroll = ft.ScrollMode.ADAPTIVE + + page.add( + ft.Text("Size 10", size=10), + ft.Text("Size 30, Italic", size=30, color=ft.Colors.PINK_600, italic=True), + ft.Text( + value="Size 40, w100", + size=40, + color=ft.Colors.WHITE, + bgcolor=ft.Colors.BLUE_600, + weight=ft.FontWeight.W_100, + ), + ft.Text( + value="Size 50, Normal", + size=50, + color=ft.Colors.WHITE, + bgcolor=ft.Colors.ORANGE_800, + weight=ft.FontWeight.NORMAL, + ), + ft.Text( + value="Size 60, Bold, Italic", + size=50, + color=ft.Colors.WHITE, + bgcolor=ft.Colors.GREEN_700, + weight=ft.FontWeight.BOLD, + italic=True, + ), + ft.Text( + value="Size 70, w900, selectable", + size=70, + weight=ft.FontWeight.W_900, + selectable=True, + ), + ft.Text( + value="Limit long text to 1 line with ellipsis", + theme_style=ft.TextThemeStyle.HEADLINE_SMALL, + ), + ft.Text( + value="Proin rutrum, purus sit amet elementum volutpat, nunc lacus vulputate orci, cursus ultrices neque dui quis purus. Ut ultricies purus nec nibh bibendum, eget vestibulum metus various. Duis convallis maximus justo, eu rutrum libero maximus id. Donec ullamcorper arcu in sapien molestie, non pellentesque tellus pellentesque. Nulla nec tristique ex. Maecenas euismod nisl enim, a convallis arcu laoreet at. Ut at tortor finibus, rutrum massa sit amet, pulvinar velit. Phasellus diam lorem, viverra vitae leo vitae, consequat suscipit lorem.", + max_lines=1, + overflow=ft.TextOverflow.ELLIPSIS, + ), + ft.Text( + value="Limit long text to 2 lines and fading", + theme_style=ft.TextThemeStyle.HEADLINE_SMALL, + ), + ft.Text( + value="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. Name various 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.Text( + value="Limit the width and height of long text", + theme_style=ft.TextThemeStyle.HEADLINE_SMALL, + ), + ft.Text( + value="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. Name various at metus vitae vulputate. Praesent faucibus nibh lorem, eu pretium dolor dictum nec. Phasellus eget dui laoreet, viverra magna vitae, pellentesque diam.", + width=700, + height=100, + ), + ) + + +ft.run(main) diff --git a/python/controls/text/media/custom-styles.gif b/python/controls/text/media/custom-styles.gif new file mode 100644 index 00000000..5339429e Binary files /dev/null and b/python/controls/text/media/custom-styles.gif differ diff --git a/python/controls/text/media/rich-text-basic.png b/python/controls/text/media/rich-text-basic.png new file mode 100644 index 00000000..818b09d0 Binary files /dev/null and b/python/controls/text/media/rich-text-basic.png differ diff --git a/python/controls/text/media/rich-text-border-stroke.png b/python/controls/text/media/rich-text-border-stroke.png new file mode 100644 index 00000000..53e17a24 Binary files /dev/null and b/python/controls/text/media/rich-text-border-stroke.png differ diff --git a/python/controls/text/media/rich-text-gradient.png b/python/controls/text/media/rich-text-gradient.png new file mode 100644 index 00000000..573d91b2 Binary files /dev/null and b/python/controls/text/media/rich-text-gradient.png differ diff --git a/python/controls/text/media/text-theme-styles.py.png b/python/controls/text/media/text-theme-styles.py.png new file mode 100644 index 00000000..4e0c6e6b Binary files /dev/null and b/python/controls/text/media/text-theme-styles.py.png differ diff --git a/python/controls/text/media/variable-font-weight.gif b/python/controls/text/media/variable-font-weight.gif new file mode 100644 index 00000000..5fadf0ca Binary files /dev/null and b/python/controls/text/media/variable-font-weight.gif differ diff --git a/python/controls/information-displays/text/richtext.py b/python/controls/text/rich-text-basic.py similarity index 64% rename from python/controls/information-displays/text/richtext.py rename to python/controls/text/rich-text-basic.py index 737c48c0..3fe7378d 100644 --- a/python/controls/information-displays/text/richtext.py +++ b/python/controls/text/rich-text-basic.py @@ -6,20 +6,20 @@ def main(page: ft.Page): ft.Text("Plain text with default style"), ft.Text("Selectable plain text with default style", selectable=True), ft.Text( - "Some text", + value="Some text", selectable=True, size=30, spans=[ ft.TextSpan( - "here goes italic", - ft.TextStyle(italic=True, size=20, color=ft.Colors.GREEN), + text="here goes italic", + style=ft.TextStyle(italic=True, size=20, color=ft.Colors.GREEN), spans=[ ft.TextSpan( - "bold and italic", - ft.TextStyle(weight=ft.FontWeight.BOLD), + text="bold and italic", + style=ft.TextStyle(weight=ft.FontWeight.BOLD), ), ft.TextSpan( - "just italic", + text="just italic", spans=[ ft.TextSpan("smaller italic", ft.TextStyle(size=15)) ], @@ -32,16 +32,16 @@ def main(page: ft.Page): disabled=False, spans=[ ft.TextSpan( - "underlined and clickable", - ft.TextStyle(decoration=ft.TextDecoration.UNDERLINE), + text="underlined and clickable", + style=ft.TextStyle(decoration=ft.TextDecoration.UNDERLINE), on_click=lambda e: print(f"Clicked span: {e.control.uid}"), on_enter=lambda e: print(f"Entered span: {e.control.uid}"), on_exit=lambda e: print(f"Exited span: {e.control.uid}"), ), - ft.TextSpan(" "), + ft.TextSpan(text=" "), ft.TextSpan( - "underlined red wavy", - ft.TextStyle( + text="underlined red wavy", + style=ft.TextStyle( decoration=ft.TextDecoration.UNDERLINE, decoration_color=ft.Colors.RED, decoration_style=ft.TextDecorationStyle.WAVY, @@ -49,25 +49,25 @@ def main(page: ft.Page): on_enter=lambda e: print(f"Entered span: {e.control.uid}"), on_exit=lambda e: print(f"Exited span: {e.control.uid}"), ), - ft.TextSpan(" "), + ft.TextSpan(text=" "), ft.TextSpan( - "overlined blue", - ft.TextStyle( + text="overlined blue", + style=ft.TextStyle( decoration=ft.TextDecoration.OVERLINE, decoration_color="blue" ), ), - ft.TextSpan(" "), + ft.TextSpan(text=" "), ft.TextSpan( - "overlined and underlined", - ft.TextStyle( + text="overlined and underlined", + style=ft.TextStyle( decoration=ft.TextDecoration.OVERLINE | ft.TextDecoration.UNDERLINE ), ), - ft.TextSpan(" "), + ft.TextSpan(text=" "), ft.TextSpan( - "line through thick", - ft.TextStyle( + text="line through thick", + style=ft.TextStyle( decoration=ft.TextDecoration.LINE_THROUGH, decoration_thickness=3, ), @@ -76,11 +76,11 @@ def main(page: ft.Page): ), ) - def highlight_link(e): + def handle_link_highlight(e: ft.Event[ft.TextSpan]): e.control.style.color = ft.Colors.BLUE e.control.update() - def unhighlight_link(e): + def handle_link_unhighlight(e: ft.Event[ft.TextSpan]): e.control.style.color = None e.control.update() @@ -89,11 +89,11 @@ def unhighlight_link(e): disabled=False, spans=[ ft.TextSpan( - "Go to Google", - ft.TextStyle(decoration=ft.TextDecoration.UNDERLINE), + text="Go to Google", + style=ft.TextStyle(decoration=ft.TextDecoration.UNDERLINE), url="https://google.com", - on_enter=highlight_link, - on_exit=unhighlight_link, + on_enter=handle_link_highlight, + on_exit=handle_link_unhighlight, ) ], ), diff --git a/python/controls/information-displays/text/richtext-borders-stroke.py b/python/controls/text/rich-text-border-stroke.py similarity index 81% rename from python/controls/information-displays/text/richtext-borders-stroke.py rename to python/controls/text/rich-text-border-stroke.py index 4d8a08d6..4a702e65 100644 --- a/python/controls/information-displays/text/richtext-borders-stroke.py +++ b/python/controls/text/rich-text-border-stroke.py @@ -4,12 +4,12 @@ def main(page: ft.Page): page.add( ft.Stack( - [ + controls=[ ft.Text( spans=[ ft.TextSpan( - "Greetings, planet!", - ft.TextStyle( + text="Greetings, planet!", + style=ft.TextStyle( size=40, weight=ft.FontWeight.BOLD, foreground=ft.Paint( @@ -24,8 +24,8 @@ def main(page: ft.Page): ft.Text( spans=[ ft.TextSpan( - "Greetings, planet!", - ft.TextStyle( + text="Greetings, planet!", + style=ft.TextStyle( size=40, weight=ft.FontWeight.BOLD, color=ft.Colors.GREY_300, diff --git a/python/controls/information-displays/text/richtext-gradient.py b/python/controls/text/rich-text-gradient.py similarity index 64% rename from python/controls/information-displays/text/richtext-gradient.py rename to python/controls/text/rich-text-gradient.py index bf71832d..9941aaaf 100644 --- a/python/controls/information-displays/text/richtext-gradient.py +++ b/python/controls/text/rich-text-gradient.py @@ -6,13 +6,15 @@ def main(page: ft.Page): ft.Text( spans=[ ft.TextSpan( - "Greetings, planet!", - ft.TextStyle( + text="Greetings, planet!", + style=ft.TextStyle( size=40, weight=ft.FontWeight.BOLD, foreground=ft.Paint( gradient=ft.PaintLinearGradient( - (0, 20), (150, 20), [ft.Colors.RED, ft.Colors.YELLOW] + begin=(0, 20), + end=(150, 20), + colors=[ft.Colors.RED, ft.Colors.YELLOW], ) ), ), diff --git a/python/controls/information-displays/text/text-theme-styles.py b/python/controls/text/text-theme-styles.py similarity index 100% rename from python/controls/information-displays/text/text-theme-styles.py rename to python/controls/text/text-theme-styles.py diff --git a/python/controls/text/variable-font-weight.py b/python/controls/text/variable-font-weight.py new file mode 100644 index 00000000..91b1debd --- /dev/null +++ b/python/controls/text/variable-font-weight.py @@ -0,0 +1,31 @@ +import flet as ft + + +def main(page: ft.Page): + page.fonts = { + "RobotoSlab": "https://github.com/google/fonts/raw/main/apache/robotoslab/RobotoSlab%5Bwght%5D.ttf" + } + + def handle_slider_change(e): + text.weight = f"w{int(e.control.value)}" # noqa + text.update() + + page.add( + text := ft.Text( + "This is rendered with Roboto Slab", + size=30, + font_family="RobotoSlab", + weight=ft.FontWeight.W_100, + ), + ft.Slider( + min=100, + max=900, + divisions=8, + label="Weight = {value}", + width=500, + on_change=handle_slider_change, + ), + ) + + +ft.run(main) diff --git a/python/controls/dialogs-alerts-panels/time-picker/time-picker-basic.py b/python/controls/time-picker/basic.py similarity index 79% rename from python/controls/dialogs-alerts-panels/time-picker/time-picker-basic.py rename to python/controls/time-picker/basic.py index 674a68e9..1057ccb1 100644 --- a/python/controls/dialogs-alerts-panels/time-picker/time-picker-basic.py +++ b/python/controls/time-picker/basic.py @@ -4,13 +4,13 @@ def main(page: ft.Page): page.horizontal_alignment = ft.CrossAxisAlignment.CENTER - def handle_change(e): + def handle_change(e: ft.Event[ft.TimePicker]): page.add(ft.Text(f"TimePicker change: {time_picker.value}")) - def handle_dismissal(e): + def handle_dismissal(e: ft.Event[ft.TimePicker]): page.add(ft.Text(f"TimePicker dismissed: {time_picker.value}")) - def handle_entry_mode_change(e): + def handle_entry_mode_change(e: ft.TimePickerEntryModeChangeEvent): page.add(ft.Text(f"TimePicker Entry mode changed to {e.entry_mode}")) time_picker = ft.TimePicker( @@ -24,7 +24,7 @@ def handle_entry_mode_change(e): page.add( ft.ElevatedButton( - "Pick time", + content="Pick time", icon=ft.Icons.TIME_TO_LEAVE, on_click=lambda _: page.show_dialog(time_picker), ) diff --git a/python/controls/time-picker/media/basic.png b/python/controls/time-picker/media/basic.png new file mode 100644 index 00000000..421a4a25 Binary files /dev/null and b/python/controls/time-picker/media/basic.png differ diff --git a/python/controls/tooltip/custom-tooltip.py b/python/controls/tooltip/custom-tooltip.py deleted file mode 100644 index e683308b..00000000 --- a/python/controls/tooltip/custom-tooltip.py +++ /dev/null @@ -1,36 +0,0 @@ -import math -import flet as ft - - -def main(page: ft.Page): - page.add( - ft.Text("Hover to see the simple tooltip", tooltip="This is a simple tooltip"), - ft.Text( - value="Hover to see the complex tooltip", - tooltip=ft.Tooltip( - message="This is a complex tooltip", - padding=20, - border_radius=10, - text_style=ft.TextStyle(size=20, color=ft.Colors.WHITE), - gradient=ft.LinearGradient( - begin=ft.Alignment.top_left(), - end=ft.Alignment(0.8, 1), - colors=[ - "0xff1f005c", - "0xff5b0060", - "0xff870160", - "0xffac255e", - "0xffca485c", - "0xffe16b5c", - "0xfff39060", - "0xffffb56b", - ], - tile_mode=ft.GradientTileMode.MIRROR, - rotation=math.pi / 3, - ), - ), - ), - ) - - -ft.run(main) diff --git a/python/controls/utility/transparent-pointer/transparent-pointer-example.py b/python/controls/transparent-pointer/basic.py similarity index 69% rename from python/controls/utility/transparent-pointer/transparent-pointer-example.py rename to python/controls/transparent-pointer/basic.py index b3c037ab..e4964e16 100644 --- a/python/controls/utility/transparent-pointer/transparent-pointer-example.py +++ b/python/controls/transparent-pointer/basic.py @@ -1,10 +1,11 @@ import flet as ft -def main(page): +def main(page: ft.Page): page.add( ft.Stack( - [ + expand=True, + controls=[ ft.GestureDetector( on_tap=lambda _: print("TAP!"), multi_tap_touches=3, @@ -12,10 +13,12 @@ def main(page): on_multi_long_press=lambda _: print("Multi tap long press"), ), ft.TransparentPointer( - ft.Container(ft.ElevatedButton("Test button"), padding=50) + content=ft.Container( + content=ft.ElevatedButton("Test button"), + padding=50, + ) ), ], - expand=True, ) ) diff --git a/python/controls/types/alignment/container.py b/python/controls/types/alignment/container.py new file mode 100644 index 00000000..41c5a802 --- /dev/null +++ b/python/controls/types/alignment/container.py @@ -0,0 +1,39 @@ +import flet as ft + + +def main(page: ft.Page): + page.title = "Containers with different alignments" + + page.add( + ft.Row( + controls=[ + ft.Container( + content=ft.ElevatedButton("Center"), + bgcolor=ft.Colors.AMBER, + padding=15, + alignment=ft.Alignment.CENTER, + width=150, + height=150, + ), + ft.Container( + content=ft.ElevatedButton("Top left"), + bgcolor=ft.Colors.AMBER, + padding=15, + alignment=ft.Alignment.TOP_LEFT, + width=150, + height=150, + ), + ft.Container( + content=ft.ElevatedButton("-0.5, -0.5"), + bgcolor=ft.Colors.AMBER, + padding=15, + alignment=ft.alignment.Alignment(-0.5, -0.5), + width=150, + height=150, + ), + ] + ) + ) + + +ft.run(main) diff --git a/python/controls/types/alignment/media/container.png b/python/controls/types/alignment/media/container.png new file mode 100644 index 00000000..fbbf766e Binary files /dev/null and b/python/controls/types/alignment/media/container.png differ diff --git a/python/controls/types/alignment/media/overview.png b/python/controls/types/alignment/media/overview.png new file mode 100644 index 00000000..8a09665f Binary files /dev/null and b/python/controls/types/alignment/media/overview.png differ diff --git a/python/controls/types/badge/media/in-navigation-bar.png b/python/controls/types/badge/media/in-navigation-bar.png new file mode 100644 index 00000000..696af03f Binary files /dev/null and b/python/controls/types/badge/media/in-navigation-bar.png differ diff --git a/python/controls/layout/container/container-blur.py b/python/controls/types/blur/container.py similarity index 91% rename from python/controls/layout/container/container-blur.py rename to python/controls/types/blur/container.py index 0dbfdece..62524aca 100644 --- a/python/controls/layout/container/container-blur.py +++ b/python/controls/types/blur/container.py @@ -11,9 +11,8 @@ def main(page: ft.Page): height=300, ) - def change_img(e): + def handle_button_click(e: ft.Event[ft.ElevatedButton]): nonlocal i - print(f"button clicked {i}") img_container.image = ft.DecorationImage( src=f"https://picsum.photos/300/300?random={i}" ) @@ -22,7 +21,7 @@ def change_img(e): page.add( ft.Stack( - [ + controls=[ img_container, ft.Container( width=100, @@ -52,7 +51,7 @@ def change_img(e): bottom=5, right=5, # style=ft.ButtonStyle(text_style=ft.TextStyle(size=8)), - on_click=change_img, + on_click=handle_button_click, ), ] ) diff --git a/python/controls/types/blur/media/container.gif b/python/controls/types/blur/media/container.gif new file mode 100644 index 00000000..74be4301 Binary files /dev/null and b/python/controls/types/blur/media/container.gif differ diff --git a/python/controls/types/border/container.py b/python/controls/types/border/container.py new file mode 100644 index 00000000..a8cc860f --- /dev/null +++ b/python/controls/types/border/container.py @@ -0,0 +1,40 @@ +import flet as ft + + +def main(page: ft.Page): + page.title = "Containers with different borders" + + page.add( + ft.Row( + controls=[ + ft.Container( + bgcolor=ft.Colors.AMBER, + padding=15, + border=ft.Border.all(10, ft.Colors.PINK_600), + border_radius=ft.border_radius.all(30), + width=150, + height=150, + ), + ft.Container( + bgcolor=ft.Colors.DEEP_PURPLE, + padding=15, + border=ft.Border.all(3, ft.Colors.LIGHT_GREEN_ACCENT), + border_radius=ft.border_radius.only(top_left=10, bottom_right=10), + width=150, + height=150, + ), + ft.Container( + bgcolor=ft.Colors.BLUE_GREY_900, + padding=15, + border=ft.Border.symmetric( + vertical=ft.BorderSide(8, ft.Colors.YELLOW_800) + ), + width=150, + height=150, + ), + ] + ) + ) + + +ft.run(main) diff --git a/python/controls/layout/container/container-shadow.py b/python/controls/types/box-shadow/container.py similarity index 95% rename from python/controls/layout/container/container-shadow.py rename to python/controls/types/box-shadow/container.py index 183f1992..eb44b9fc 100644 --- a/python/controls/layout/container/container-shadow.py +++ b/python/controls/types/box-shadow/container.py @@ -2,7 +2,6 @@ def main(page: ft.Page): - page.add( ft.Container( bgcolor=ft.Colors.YELLOW, @@ -34,7 +33,7 @@ def main(page: ft.Page): blur_radius=15, color=ft.Colors.BLUE_GREY_300, offset=ft.Offset(0, 0), - blur_style=ft.ShadowBlurStyle.OUTER, + blur_style=ft.BlurStyle.OUTER, ), ), ) diff --git a/python/controls/layout/container/gradients.py b/python/controls/types/gradient/container.py similarity index 81% rename from python/controls/layout/container/gradients.py rename to python/controls/types/gradient/container.py index 4983a61f..deb3a4fc 100644 --- a/python/controls/layout/container/gradients.py +++ b/python/controls/types/gradient/container.py @@ -4,20 +4,26 @@ def main(page: ft.Page): - page.title = "Containers with gradient" page.horizontal_alignment = ft.CrossAxisAlignment.CENTER page.vertical_alignment = ft.MainAxisAlignment.CENTER page.add( ft.Row( - [ + alignment=ft.MainAxisAlignment.CENTER, + scroll=ft.ScrollMode.AUTO, + controls=[ ft.Container( content=ft.Text("Linear gradient"), padding=10, - alignment=ft.Alignment.center(), + alignment=ft.Alignment.CENTER, + width=200, + height=200, + border_radius=10, gradient=ft.LinearGradient( - begin=ft.Alignment.top_left(), + begin=ft.Alignment.TOP_LEFT, end=ft.Alignment(0.8, 1), + tile_mode=ft.GradientTileMode.MIRROR, + rotation=math.pi / 3, colors=[ "0xff1f005c", "0xff5b0060", @@ -28,53 +34,50 @@ def main(page: ft.Page): "0xfff39060", "0xffffb56b", ], - tile_mode=ft.GradientTileMode.MIRROR, - rotation=math.pi / 3, ), - width=200, - height=200, - border_radius=10, ), ft.Container( content=ft.Text("Linear gradient with stops"), padding=10, - alignment=ft.Alignment.center(), - gradient=ft.LinearGradient( - begin=ft.Alignment.center_left(), - end=ft.Alignment.center_right(), - colors=[ft.Colors.RED, ft.Colors.GREEN, ft.Colors.BLUE], - stops=[0.1, 0.2, 1.0], - tile_mode=ft.GradientTileMode.MIRROR, - ), + alignment=ft.Alignment.CENTER, width=200, height=200, border_radius=10, + gradient=ft.LinearGradient( + begin=ft.Alignment.CENTER_LEFT, + end=ft.Alignment.CENTER_RIGHT, + tile_mode=ft.GradientTileMode.MIRROR, + stops=[0.1, 0.2, 1.0], + colors=[ft.Colors.RED, ft.Colors.GREEN, ft.Colors.BLUE], + ), ), ft.Container( content=ft.Text("Radial gradient"), padding=10, - alignment=ft.Alignment.center(), + alignment=ft.Alignment.CENTER, + width=200, + height=200, + border_radius=10, gradient=ft.RadialGradient( center=ft.Alignment(0.7, -0.6), radius=0.2, - colors=[ - "0xFFFFFF00", # yellow sun - "0xFF0099FF", # blue sky - ], stops=[0.4, 1.0], + colors=["0xFFFFFF00", "0xFF0099FF"], ), - width=200, - height=200, - border_radius=10, ), ft.Container( content=ft.Text("Sweep gradient"), padding=10, - alignment=ft.Alignment.center(), + alignment=ft.Alignment.CENTER, + width=200, + height=200, + border_radius=10, gradient=ft.SweepGradient( - center=ft.Alignment.center(), + center=ft.Alignment.CENTER, start_angle=0.0, end_angle=math.pi * 2, + rotation=math.pi / 4, + stops=[0.0, 0.25, 0.5, 0.75, 1.0], colors=[ "0xFF4285F4", "0xFF34A853", @@ -82,16 +85,9 @@ def main(page: ft.Page): "0xFFEA4335", "0xFF4285F4", ], - stops=[0.0, 0.25, 0.5, 0.75, 1.0], - rotation=math.pi / 4, ), - width=200, - height=200, - border_radius=10, ), ], - alignment=ft.MainAxisAlignment.CENTER, - scroll=ft.ScrollMode.AUTO, ), ) diff --git a/python/controls/layout/container/linear-gradient.py b/python/controls/types/gradient/linear-gradient/container.py similarity index 83% rename from python/controls/layout/container/linear-gradient.py rename to python/controls/types/gradient/linear-gradient/container.py index d733d3a5..44a3f906 100644 --- a/python/controls/layout/container/linear-gradient.py +++ b/python/controls/types/gradient/linear-gradient/container.py @@ -3,13 +3,17 @@ def main(page: ft.Page): - page.add( ft.Container( - alignment=ft.Alignment.center(), + alignment=ft.Alignment.CENTER, + width=150, + height=150, + border_radius=ft.BorderRadius.all(5), gradient=ft.LinearGradient( - begin=ft.Alignment.top_left(), + begin=ft.Alignment.TOP_LEFT, end=ft.Alignment(0.8, 1), + tile_mode=ft.GradientTileMode.MIRROR, + rotation=math.pi / 3, colors=[ "0xff1f005c", "0xff5b0060", @@ -20,12 +24,7 @@ def main(page: ft.Page): "0xfff39060", "0xffffb56b", ], - tile_mode=ft.GradientTileMode.MIRROR, - rotation=math.pi / 3, ), - width=150, - height=150, - border_radius=5, ) ) diff --git a/python/controls/types/gradient/linear-gradient/media/container.png b/python/controls/types/gradient/linear-gradient/media/container.png new file mode 100644 index 00000000..104af122 Binary files /dev/null and b/python/controls/types/gradient/linear-gradient/media/container.png differ diff --git a/python/controls/layout/container/radial-gradient.py b/python/controls/types/gradient/radial-gradient/container.py similarity index 60% rename from python/controls/layout/container/radial-gradient.py rename to python/controls/types/gradient/radial-gradient/container.py index 4e3452c0..ad4c378d 100644 --- a/python/controls/layout/container/radial-gradient.py +++ b/python/controls/types/gradient/radial-gradient/container.py @@ -5,19 +5,16 @@ def main(page: ft.Page): page.add( ft.Container( - alignment=ft.Alignment.center(), + alignment=ft.Alignment.CENTER, + width=150, + height=150, + border_radius=ft.BorderRadius.all(5), gradient=ft.RadialGradient( center=ft.Alignment(0.7, -0.6), radius=0.2, - colors=[ - "0xFFFFFF00", # yellow sun - "0xFF0099FF", # blue sky - ], + colors=["0xFFFFFF00", "0xFF0099FF"], stops=[0.4, 1.0], ), - width=150, - height=150, - border_radius=5, ) ) diff --git a/python/controls/types/gradient/radial-gradient/media/container.png b/python/controls/types/gradient/radial-gradient/media/container.png new file mode 100644 index 00000000..c0ae75a1 Binary files /dev/null and b/python/controls/types/gradient/radial-gradient/media/container.png differ diff --git a/python/controls/layout/container/sweep-gradient.py b/python/controls/types/gradient/sweep-gradient/container.py similarity index 80% rename from python/controls/layout/container/sweep-gradient.py rename to python/controls/types/gradient/sweep-gradient/container.py index 6a994dd0..73bfcfa4 100644 --- a/python/controls/layout/container/sweep-gradient.py +++ b/python/controls/types/gradient/sweep-gradient/container.py @@ -3,14 +3,17 @@ def main(page: ft.Page): - page.add( ft.Container( - alignment=ft.Alignment.center(), + alignment=ft.Alignment.CENTER, + width=150, + height=150, + border_radius=ft.BorderRadius.all(5), gradient=ft.SweepGradient( - center=ft.Alignment.center(), + center=ft.Alignment.CENTER, start_angle=0.0, end_angle=math.pi * 2, + stops=[0.0, 0.25, 0.5, 0.75, 1.0], colors=[ "0xFF4285F4", "0xFF34A853", @@ -18,11 +21,7 @@ def main(page: ft.Page): "0xFFEA4335", "0xFF4285F4", ], - stops=[0.0, 0.25, 0.5, 0.75, 1.0], ), - width=150, - height=150, - border_radius=5, ) ) diff --git a/python/controls/types/gradient/sweep-gradient/media/container.png b/python/controls/types/gradient/sweep-gradient/media/container.png new file mode 100644 index 00000000..a12bce96 Binary files /dev/null and b/python/controls/types/gradient/sweep-gradient/media/container.png differ diff --git a/python/controls/types/margin/container.py b/python/controls/types/margin/container.py new file mode 100644 index 00000000..07cef3fd --- /dev/null +++ b/python/controls/types/margin/container.py @@ -0,0 +1,48 @@ +import flet as ft + + +def main(page: ft.Page): + page.title = "Margin Example" + + page.add( + ft.Row( + spacing=0, + controls=[ + ft.Container( + content=ft.ElevatedButton("container_1"), + bgcolor=ft.Colors.AMBER, + # padding=ft.Padding.all(10), + margin=ft.Margin.all(10), + width=200, + height=200, + ), + ft.Container( + content=ft.ElevatedButton("container_2"), + bgcolor=ft.Colors.AMBER, + # padding=ft.Padding.all(20), + margin=ft.Margin.all(20), + width=200, + height=200, + ), + ft.Container( + content=ft.ElevatedButton("container_3"), + bgcolor=ft.Colors.AMBER, + # padding=ft.Padding.symmetric(horizontal=10), + margin=ft.Margin.symmetric(vertical=10), + width=200, + height=200, + ), + ft.Container( + content=ft.ElevatedButton("container_4"), + bgcolor=ft.Colors.AMBER, + # padding=ft.Padding.only(left=10), + margin=ft.Margin.only(left=10), + width=200, + height=200, + ), + ], + ) + ) + + +ft.run(main) diff --git a/python/controls/types/padding/container.py b/python/controls/types/padding/container.py new file mode 100644 index 00000000..6d3b70a4 --- /dev/null +++ b/python/controls/types/padding/container.py @@ -0,0 +1,43 @@ +import flet as ft + + +def main(page: ft.Page): + page.title = "Containers with different padding" + + page.add( + ft.Row( + controls=[ + ft.Container( + content=ft.ElevatedButton("container_1"), + bgcolor=ft.Colors.AMBER, + padding=ft.Padding.all(10), + width=150, + height=150, + ), + ft.Container( + content=ft.ElevatedButton("container_2"), + bgcolor=ft.Colors.AMBER, + padding=ft.Padding.all(20), + width=150, + height=150, + ), + ft.Container( + content=ft.ElevatedButton("container_3"), + bgcolor=ft.Colors.AMBER, + padding=ft.Padding.symmetric(horizontal=10), + width=150, + height=150, + ), + ft.Container( + content=ft.ElevatedButton("container_4"), + bgcolor=ft.Colors.AMBER, + padding=ft.Padding.only(left=10), + width=150, + height=150, + ), + ] + ) + ) + + +ft.run(main) diff --git a/python/controls/types/padding/media/container.png b/python/controls/types/padding/media/container.png new file mode 100644 index 00000000..9785f99d Binary files /dev/null and b/python/controls/types/padding/media/container.png differ diff --git a/python/controls/types/paint-gradient/canvas-paint.py b/python/controls/types/paint-gradient/canvas-paint.py new file mode 100644 index 00000000..fe2b161b --- /dev/null +++ b/python/controls/types/paint-gradient/canvas-paint.py @@ -0,0 +1,71 @@ +import math + +import flet as ft +import flet.canvas as cv + + +def main(page: ft.Page): + page.add( + cv.Canvas( + width=float("inf"), + expand=True, + shapes=[ + cv.Rect( + x=10, + y=10, + width=100, + height=100, + border_radius=5, + paint=ft.Paint( + style=ft.PaintingStyle.FILL, + gradient=ft.PaintLinearGradient( + begin=(0, 10), + end=(100, 50), + colors=[ft.Colors.BLUE, ft.Colors.YELLOW], + ), + ), + ), + cv.Circle( + x=60, + y=170, + radius=50, + paint=ft.Paint( + style=ft.PaintingStyle.FILL, + gradient=ft.PaintRadialGradient( + radius=50, + center=(60, 170), + colors=[ft.Colors.YELLOW, ft.Colors.BLUE], + ), + ), + ), + cv.Path( + elements=[ + cv.Path.Arc( + x=10, + y=230, + width=100, + height=100, + start_angle=3 * math.pi / 4, + sweep_angle=3 * math.pi / 2, + ), + ], + paint=ft.Paint( + stroke_width=15, + stroke_join=ft.StrokeJoin.ROUND, + style=ft.PaintingStyle.STROKE, + gradient=ft.PaintSweepGradient( + start_angle=0, + end_angle=math.pi * 2, + rotation=3 * math.pi / 4, + center=(60, 280), + colors=[ft.Colors.YELLOW, ft.Colors.PURPLE], + color_stops=[0.0, 1.0], + ), + ), + ), + ], + ) + ) + + +ft.run(main) diff --git a/python/controls/types/paint-gradient/paint-linear-gradient/canvas-paint.py b/python/controls/types/paint-gradient/paint-linear-gradient/canvas-paint.py new file mode 100644 index 00000000..088a985c --- /dev/null +++ b/python/controls/types/paint-gradient/paint-linear-gradient/canvas-paint.py @@ -0,0 +1,31 @@ +import flet as ft +import flet.canvas as cv + + +def main(page: ft.Page): + page.add( + cv.Canvas( + width=float("inf"), + expand=True, + shapes=[ + cv.Rect( + x=10, + y=10, + width=100, + height=100, + border_radius=5, + paint=ft.Paint( + style=ft.PaintingStyle.FILL, + gradient=ft.PaintLinearGradient( + begin=(0, 10), + end=(100, 50), + colors=[ft.Colors.BLUE, ft.Colors.YELLOW], + ), + ), + ), + ], + ) + ) + + +ft.run(main) diff --git a/python/controls/types/paint-gradient/paint-linear-gradient/media/canvas-paint.png b/python/controls/types/paint-gradient/paint-linear-gradient/media/canvas-paint.png new file mode 100644 index 00000000..9a0e56ee Binary files /dev/null and b/python/controls/types/paint-gradient/paint-linear-gradient/media/canvas-paint.png differ diff --git a/python/controls/types/paint-gradient/paint-radial-gradient/canvas-paint.py b/python/controls/types/paint-gradient/paint-radial-gradient/canvas-paint.py new file mode 100644 index 00000000..8ccae777 --- /dev/null +++ b/python/controls/types/paint-gradient/paint-radial-gradient/canvas-paint.py @@ -0,0 +1,29 @@ +import flet as ft +import flet.canvas as cv + + +def main(page: ft.Page): + page.add( + cv.Canvas( + width=float("inf"), + expand=True, + shapes=[ + cv.Circle( + x=60, + y=170, + radius=50, + paint=ft.Paint( + style=ft.PaintingStyle.FILL, + gradient=ft.PaintRadialGradient( + radius=50, + center=(60, 170), + colors=[ft.Colors.YELLOW, ft.Colors.BLUE], + ), + ), + ), + ], + ) + ) + + +ft.run(main) diff --git a/python/controls/types/paint-gradient/paint-radial-gradient/media/canvas-paint.png b/python/controls/types/paint-gradient/paint-radial-gradient/media/canvas-paint.png new file mode 100644 index 00000000..354919e3 Binary files /dev/null and b/python/controls/types/paint-gradient/paint-radial-gradient/media/canvas-paint.png differ diff --git a/python/controls/types/paint-gradient/paint-sweep-gradient/canvas-paint.py b/python/controls/types/paint-gradient/paint-sweep-gradient/canvas-paint.py new file mode 100644 index 00000000..29fc05ce --- /dev/null +++ b/python/controls/types/paint-gradient/paint-sweep-gradient/canvas-paint.py @@ -0,0 +1,43 @@ +import math + +import flet as ft +import flet.canvas as cv + + +def main(page: ft.Page): + page.add( + cv.Canvas( + width=float("inf"), + expand=True, + shapes=[ + cv.Path( + elements=[ + cv.Path.Arc( + x=10, + y=230, + width=100, + height=100, + start_angle=3 * math.pi / 4, + sweep_angle=3 * math.pi / 2, + ), + ], + paint=ft.Paint( + stroke_width=15, + stroke_join=ft.StrokeJoin.ROUND, + style=ft.PaintingStyle.STROKE, + gradient=ft.PaintSweepGradient( + start_angle=0, + end_angle=math.pi * 2, + rotation=3 * math.pi / 4, + center=(60, 280), + colors=[ft.Colors.YELLOW, ft.Colors.PURPLE], + color_stops=[0.0, 1.0], + ), + ), + ), + ], + ) + ) + + +ft.run(main) diff --git a/python/controls/types/paint-gradient/paint-sweep-gradient/media/canvas-paint.png b/python/controls/types/paint-gradient/paint-sweep-gradient/media/canvas-paint.png new file mode 100644 index 00000000..d07c5d30 Binary files /dev/null and b/python/controls/types/paint-gradient/paint-sweep-gradient/media/canvas-paint.png differ diff --git a/python/controls/types/tooltip/media/with-decoration.gif b/python/controls/types/tooltip/media/with-decoration.gif new file mode 100644 index 00000000..b931aff7 Binary files /dev/null and b/python/controls/types/tooltip/media/with-decoration.gif differ diff --git a/python/controls/types/tooltip/with-decoration.py b/python/controls/types/tooltip/with-decoration.py new file mode 100644 index 00000000..312ad611 --- /dev/null +++ b/python/controls/types/tooltip/with-decoration.py @@ -0,0 +1,38 @@ +import math +import flet as ft + + +def main(page: ft.Page): + page.add( + ft.Text("Hover to see the simple tooltip", tooltip="This is a simple tooltip"), + ft.Text( + value="Hover to see the complex tooltip", + tooltip=ft.Tooltip( + message="This is a complex tooltip", + padding=20, + text_style=ft.TextStyle(size=20, color=ft.Colors.WHITE), + decoration=ft.BoxDecoration( + border_radius=10, + gradient=ft.LinearGradient( + begin=ft.Alignment.TOP_LEFT, + end=ft.Alignment(0.8, 1), + tile_mode=ft.GradientTileMode.MIRROR, + rotation=math.pi / 3, + colors=[ + "0xff1f005c", + "0xff5b0060", + "0xff870160", + "0xffac255e", + "0xffca485c", + "0xffe16b5c", + "0xfff39060", + "0xffffb56b", + ], + ), + ), + ), + ), + ) + + +ft.run(main) diff --git a/python/controls/utility/audio-recorder/audio-recorder-example.py b/python/controls/utility/audio-recorder/audio-recorder-example.py deleted file mode 100644 index 706b27a2..00000000 --- a/python/controls/utility/audio-recorder/audio-recorder-example.py +++ /dev/null @@ -1,91 +0,0 @@ -import flet as ft - -import flet_audio_recorder as ftar -import flet_audio as fta - - -def main(page: ft.Page): - page.horizontal_alignment = ft.CrossAxisAlignment.CENTER - page.appbar = ft.runBar(title=ft.Text("Audio Recorder"), center_title=True) - - path = "test-audio-file.wav" - - def handle_start_recording(e): - print(f"StartRecording: {path}") - audio_rec.start_recording(path) - - def handle_stop_recording(e): - output_path = audio_rec.stop_recording() - print(f"StopRecording: {output_path}") - log.value = f"StopRecording: {output_path}" - if page.web and output_path is not None: - page.launch_url(output_path) - page.update() - - def handle_list_devices(e): - devices = audio_rec.get_input_devices() - print(devices) - - def handle_has_permission(e): - try: - print(f"HasPermission: {audio_rec.has_permission()}") - log.value = f"HasPermission: {audio_rec.has_permission()}" - except Exception as e: - print(e) - page.update() - - def handle_pause(e): - print(f"isRecording: {audio_rec.is_recording()}") - if audio_rec.is_recording(): - audio_rec.pause_recording() - - def handle_resume(e): - print(f"isPaused: {audio_rec.is_paused()}") - if audio_rec.is_paused(): - audio_rec.resume_recording() - - def handle_audio_encoding_test(e): - for i in list(ft.AudioEncoder): - print(f"{i}: {audio_rec.is_supported_encoder(i)}") - page.add(ft.Text(f"audio encoder: {i.name}")) - - def handle_state_change(e): - print(f"State Changed: {e.data}") - - audio_rec = ftar.AudioRecorder( - # audio_encoder=ft.AudioEncoder.WAV, - on_state_changed=handle_state_change, - ) - audio_play = fta.Audio("non-existent", autoplay=False, volume=6) - - page.overlay.append(audio_play) - - def handle_start_play(e): - page.add(ft.Text(f"play audio file: {audio_play.src}")) - audio_play.src = "test-audio-file.wav" - audio_play.update() - audio_play.play() - - print(f"audio recorder: {audio_rec}") - page.overlay.append(audio_rec) - page.update() - log = ft.Text(":") - - page.add( - ft.ElevatedButton("Start Audio Recorder", on_click=handle_start_recording), - ft.ElevatedButton("Stop Audio Recorder", on_click=handle_stop_recording), - ft.ElevatedButton("List Devices", on_click=handle_list_devices), - ft.ElevatedButton("Pause Recording", on_click=handle_pause), - ft.ElevatedButton("Resume Recording", on_click=handle_resume), - ft.ElevatedButton("Test AudioEncodings", on_click=handle_audio_encoding_test), - ft.ElevatedButton("Has Permission", on_click=handle_has_permission), - ft.ElevatedButton("Play", on_click=handle_start_play), - ft.ElevatedButton("Pause", on_click=lambda _: audio_play.pause()), - ft.ElevatedButton("Resume", on_click=lambda _: audio_play.resume()), - ft.ElevatedButton("Release", on_click=lambda _: audio_play.release()), - ft.ElevatedButton("Seek 2s", on_click=lambda _: audio_play.seek(2000)), - log, - ) - - -ft.run(main) diff --git a/python/controls/utility/audio/audio-autoplay.py b/python/controls/utility/audio/audio-autoplay.py deleted file mode 100644 index 75b71564..00000000 --- a/python/controls/utility/audio/audio-autoplay.py +++ /dev/null @@ -1,30 +0,0 @@ -import flet as ft -import flet_audio as fta - - -def main(page: ft.Page): - page.title = "Audio Example" - - def change_button(e): - if e.state == ft.AudioState.PAUSED: - b.text = "Resume playing" - b.on_click = lambda e: audio1.resume() - - elif e.state == ft.AudioState.PLAYING: - b.text = "Pause playing" - b.on_click = lambda e: audio1.pause() - - b.update() - - audio1 = fta.Audio( - src="https://luan.xyz/files/audio/ambient_c_motion.mp3", - autoplay=True, - on_state_changed=change_button, - ) - b = ft.ElevatedButton("Pause playing", on_click=lambda _: audio1.pause()) - - page.overlay.append(audio1) - page.add(ft.Text("This is an app with background audio."), b) - - -ft.run(main) diff --git a/python/controls/utility/audio/audio-player-async.py b/python/controls/utility/audio/audio-player-async.py deleted file mode 100644 index 0b3424b5..00000000 --- a/python/controls/utility/audio/audio-player-async.py +++ /dev/null @@ -1,83 +0,0 @@ -import flet as ft - - -url = "https://github.com/mdn/webaudio-examples/blob/main/audio-analyser/viper.mp3?raw=true" - - -async def main(page: ft.Page): - async def volume_down(_): - audio1.volume -= 0.1 - audio1.update() - - async def volume_up(_): - audio1.volume += 0.1 - audio1.update() - - async def balance_left(_): - audio1.balance -= 0.1 - audio1.update() - - async def balance_right(_): - audio1.balance += 0.1 - audio1.update() - - async def play(_): - audio1.play() - - async def pause(_): - audio1.pause() - - async def resume(_): - audio1.resume() - - async def release(_): - audio1.release() - - async def seek(_): - audio1.seek(3000) - - async def get_duration(_): - print("Current duration:", await audio1.get_duration_async()) - - async def get_position(_): - print("Current position:", await audio1.get_current_position_async()) - - audio1 = ft.Audio( - src=url, - autoplay=False, - volume=1, - balance=0, - on_loaded=lambda _: print("Loaded"), - on_duration_change=lambda e: print("Duration changed:", e.data), - on_position_change=lambda e: print("Position changed:", e.data), - on_state_change=lambda e: print("State changed:", e.data), - on_seek_complete=lambda _: print("Seek complete"), - ) - page.overlay.append(audio1) - page.add( - ft.ElevatedButton("Play", on_click=play), - ft.ElevatedButton("Pause", on_click=pause), - ft.ElevatedButton("Resume", on_click=resume), - ft.ElevatedButton("Release", on_click=release), - ft.ElevatedButton("Seek 3s", on_click=seek), - ft.Row( - [ - ft.ElevatedButton("Volume down", on_click=volume_down), - ft.ElevatedButton("Volume up", on_click=volume_up), - ] - ), - ft.Row( - [ - ft.ElevatedButton("Balance left", on_click=balance_left), - ft.ElevatedButton("Balance right", on_click=balance_right), - ] - ), - ft.ElevatedButton("Get duration", on_click=get_duration), - ft.ElevatedButton( - "Get current position", - on_click=get_position, - ), - ) - - -ft.run(main) diff --git a/python/controls/utility/audio/audio-player-slider.py b/python/controls/utility/audio/audio-player-slider.py deleted file mode 100644 index 2b6c416d..00000000 --- a/python/controls/utility/audio/audio-player-slider.py +++ /dev/null @@ -1,99 +0,0 @@ -import flet as ft - - -url = "https://github.com/mdn/webaudio-examples/blob/main/audio-basics/outfoxing.mp3?raw=true" -# url = "https://github.com/mdn/webaudio-examples/blob/main/audio-analyser/viper.mp3?raw=true" -# url = "https://luan.xyz/files/audio/ambient_c_motion.mp3" -# url = "https://luan.xyz/files/audio/coins.wav" -# url = "https://luan.xyz/files/audio/laser.wav" - - -def main(page: ft.Page): - def volume_down(_): - audio1.volume -= 0.1 - audio1.update() - - def volume_up(_): - audio1.volume += 0.1 - audio1.update() - - def balance_left(_): - audio1.balance -= 0.1 - audio1.update() - - def balance_right(_): - audio1.balance += 0.1 - audio1.update() - - def play(_): - audio1.play() - - def pause(_): - audio1.pause() - - def resume(_): - audio1.resume() - - def release(_): - audio1.release() - - def seek(_): - audio1.seek(3000) - - def get_duration(_): - print("Current duration:", audio1.get_duration()) - - def get_position(_): - print("Current position:", audio1.get_current_position()) - - def position_changed(e): - print(f"e: {e}") - print(f"e.data: {e.data}") - # s.value=??? - - audio1 = ft.Audio( - src=url, - autoplay=False, - volume=1, - balance=0, - on_loaded=lambda _: print("Loaded"), - on_duration_change=lambda e: print("Duration changed:", e.data), - on_position_change=lambda e: print("Position changed:", e.data), - on_state_change=lambda e: print("State changed:", e.data), - on_seek_complete=lambda _: print("Seek complete"), - ) - page.overlay.append(audio1) - s = ft.Slider(value=0.3) - page.add( - s, - ft.Row( - [ - ft.ElevatedButton("Play", on_click=play), - ft.ElevatedButton("Pause", on_click=pause), - ft.ElevatedButton("Resume", on_click=resume), - ] - ), - ft.ElevatedButton("Release", on_click=release), - ft.ElevatedButton("Seek 3s", on_click=seek), - ft.Row( - [ - ft.ElevatedButton("Volume down", on_click=volume_down), - ft.ElevatedButton("Volume up", on_click=volume_up), - ] - ), - ft.Row( - [ - ft.ElevatedButton("Balance left", on_click=balance_left), - ft.ElevatedButton("Balance right", on_click=balance_right), - ] - ), - ft.Row( - [ - ft.ElevatedButton("Get duration", on_click=get_duration), - ft.ElevatedButton("Get current position", on_click=get_position), - ] - ), - ) - - -ft.run(main) diff --git a/python/controls/utility/audio/audio-player.py b/python/controls/utility/audio/audio-player.py deleted file mode 100644 index 0dccc61e..00000000 --- a/python/controls/utility/audio/audio-player.py +++ /dev/null @@ -1,81 +0,0 @@ -import flet as ft -import flet_audio as fa - - -url = "https://github.com/mdn/webaudio-examples/blob/main/audio-basics/outfoxing.mp3?raw=true" - - -def main(page: ft.Page): - def volume_down(_): - audio1.volume -= 0.1 - audio1.update() - - def volume_up(_): - audio1.volume += 0.1 - audio1.update() - - def balance_left(_): - audio1.balance -= 0.1 - audio1.update() - - def balance_right(_): - audio1.balance += 0.1 - audio1.update() - - def play(_): - audio1.play() - - def pause(_): - audio1.pause() - - def resume(_): - audio1.resume() - - def release(_): - audio1.release() - - def seek(_): - audio1.seek(3000) - - def get_duration(_): - print("Current duration:", audio1.get_duration()) - - def get_position(_): - print("Current position:", audio1.get_current_position()) - - audio1 = fa.Audio( - src=url, - autoplay=False, - volume=1, - balance=0, - on_loaded=lambda _: print("Loaded"), - on_duration_change=lambda e: print("Duration changed:", e.data), - on_position_change=lambda e: print("Position changed:", e.data), - on_state_change=lambda e: print("State changed:", e.data), - on_seek_complete=lambda _: print("Seek complete"), - ) - page.overlay.append(audio1) - page.add( - ft.ElevatedButton("Play", on_click=play), - ft.ElevatedButton("Pause", on_click=pause), - ft.ElevatedButton("Resume", on_click=resume), - ft.ElevatedButton("Release", on_click=release), - ft.ElevatedButton("Seek 3s", on_click=seek), - ft.Row( - [ - ft.ElevatedButton("Volume down", on_click=volume_down), - ft.ElevatedButton("Volume up", on_click=volume_up), - ] - ), - ft.Row( - [ - ft.ElevatedButton("Balance left", on_click=balance_left), - ft.ElevatedButton("Balance right", on_click=balance_right), - ] - ), - ft.ElevatedButton("Get duration", on_click=get_duration), - ft.ElevatedButton("Get current position", on_click=get_position), - ) - - -ft.run(main) diff --git a/python/controls/utility/drag-target-draggable/drag-drop-nesting-test.py b/python/controls/utility/drag-target-draggable/drag-drop-nesting-test.py deleted file mode 100644 index 9773b810..00000000 --- a/python/controls/utility/drag-target-draggable/drag-drop-nesting-test.py +++ /dev/null @@ -1,172 +0,0 @@ -import flet as ft - - -class OuterContainer(ft.Draggable): - - def __init__(self, color, list_ref: ft.Ref[ft.Row], inner_container): - - self.list_ref = list_ref - self.container_color = color - - # inner_container is a draggable - self.inner_container = inner_container - self.outer_container = ft.Container( - content=self.inner_container, - width=200, - height=200, - bgcolor=self.container_color, - border_radius=5, - alignment=ft.Alignment.center(), - border=ft.Border.all(4, ft.Colors.BLACK12), - ) - - self.target = ft.DragTarget( - group="outer", - content=self.outer_container, - data=self, - on_accept=self.drag_accept, - on_will_accept=self.drag_will_accept, - on_leave=self.drag_leave, - ) - super().__init__(content=self.target, group="outer", data=self) - - def drag_accept(self, e): - print(f"drag_accept outer e: {e}") - - self.outer_container.border = ft.Border.all(4, ft.Colors.BLACK12) - self.list_ref.current.controls[0], self.list_ref.current.controls[1] = ( - self.list_ref.current.controls[1], - self.list_ref.current.controls[0], - ) - self.list_ref.current.update() - self.update() - - def drag_will_accept(self, e: ft.DragWillAcceptEvent): - print(f"drag_will_accept outer e: {e}") - if e.accept and e.control != self.parent: - self.outer_container.border = ft.Border.all(8, ft.Colors.BLACK54) - self.update() - - def drag_leave(self, e): - print(f"drag_leave outer e: {e}") - - self.outer_container.border = ft.Border.all(4, ft.Colors.BLACK12) - self.update() - - -class InnerContainer(ft.Draggable): - - # def __init__(self, outer: OuterContainer, list_ref, inner_color): - def __init__(self, inner_color, id): - - self.inner_color = inner_color - self.id = id - self.data = id - self.inner_icon = ft.Icon( - ft.Icons.CIRCLE, color=inner_color, size=100, tooltip="drag me!" - ) - - self.target = ft.DragTarget( - group="inner", - content=self.inner_icon, - on_accept=self.drag_accept, - on_leave=self.drag_leave, - on_will_accept=self.drag_will_accept, - data=self.id, - ) - super().__init__( - content=self.target, group="inner", max_simultaneous_drags=1, data=self - ) - - def set_color(self, color: str): - self.inner_icon.color = color - self.update() - - def drag_accept(self, e: ft.DragTargetEvent): - print(f"drag_accept inner e: {e}") - # self.set_color(self.inner_color) - control: InnerContainer = self.page.get_control(e.src_id) - # print(f"control: {control}") - # if self.inner_color == state.color1: - # self.set_color(state.color2) - # self.state. - - # else: - # self.set_color(state.color1) - if control.inner_color == state.color1: - print("Triggered 1") - control.set_color(state.color2) - self.set_color(state.color1) - else: - print("Triggered 2") - control.set_color(state.color1) - self.set_color(state.color2) - # if self.inner_color == state.color1: - # state.inner1.set_color(state.inner2.inner_color) - # state.inner1.set_color(state.inner2.inner_color) - # state.inner2.set_color(state.inner1.inner_color) - - # ( - # self.list_ref.current.controls[0].content.content.content, - # self.list_ref.current.controls[1].content.content.content, - # ) = ( - # self.list_ref.current.controls[1].content.content.content, - # self.list_ref.current.controls[0].content.content.content, - # ) - # self.list_ref.current.update() - self.update() - # self.set_color(ft.Colors.WHITE54) - - def drag_will_accept(self, e: ft.DragWillAcceptEvent): - print(f"drag_will_accept inner e: {e}") - # print( - # f"e.accept and e.data = {e.data} and self.id = {self.id} and e.src_id = {e.src_id}" - # ) - - if e.accept: - - self.set_color(ft.Colors.GREEN_300) - self.update() - - def drag_leave(self, e): - print(f"drag_leave inner e: {e}") - - self.set_color(self.inner_color) - self.update() - - -class State: - color1: str = ft.Colors.BLACK - color2: str = ft.Colors.WHITE - inner1: InnerContainer = InnerContainer(ft.Colors.BLACK, "1") - inner2: InnerContainer = InnerContainer(ft.Colors.WHITE, "2") - - -state = State() - - -def main(page: ft.Page): - - page.title = "Drag and drop ordering" - list_ref = ft.Ref[ft.Row]() - page.bgcolor = ft.Colors.BLUE_GREY_100 - page.add( - ft.Row( - [ - OuterContainer( - ft.Colors.DEEP_ORANGE_400, list_ref, inner_container=state.inner1 - ), - OuterContainer( - ft.Colors.BLUE_400, list_ref, inner_container=state.inner2 - ), - ], - alignment=ft.MainAxisAlignment.SPACE_AROUND, - vertical_alignment=ft.CrossAxisAlignment.CENTER, - expand=True, - ref=list_ref, - ) - ) - page.update() - - -ft.run(main) diff --git a/python/controls/utility/flashlight/flashlight-example.py b/python/controls/utility/flashlight/flashlight-example.py deleted file mode 100644 index 0105740e..00000000 --- a/python/controls/utility/flashlight/flashlight-example.py +++ /dev/null @@ -1,11 +0,0 @@ -import flet as ft -import flet_flashlight as ftf - - -def main(page: ft.Page): - flashlight = ftf.Flashlight() - page.overlay.append(flashlight) - page.add(ft.TextButton("toggle", on_click=lambda _: flashlight.toggle())) - - -ft.run(main) diff --git a/python/controls/utility/geolocator/geolocator-example.py b/python/controls/utility/geolocator/geolocator-example.py deleted file mode 100644 index e67a7e50..00000000 --- a/python/controls/utility/geolocator/geolocator-example.py +++ /dev/null @@ -1,105 +0,0 @@ -import flet as ft -import flet_geolocator as ftg - - -async def main(page: ft.Page): - page.scroll = ft.ScrollMode.ADAPTIVE - page.appbar = ft.AppBar(title=ft.Text("Geolocator Tests")) - - def handle_position_change(e): - page.add(ft.Text(f"New position: {e.latitude} {e.longitude}")) - - gl = ftg.Geolocator( - location_settings=ftg.GeolocatorSettings( - accuracy=ftg.GeolocatorPositionAccuracy.LOW - ), - on_position_change=handle_position_change, - on_error=lambda e: page.add(ft.Text(f"Error: {e.data}")), - ) - page.overlay.append(gl) - - settings_dlg = lambda handler: ft.AlertDialog( - adaptive=True, - title=ft.Text("Opening Location Settings..."), - content=ft.Text( - "You are about to be redirected to the location/app settings. " - "Please locate this app and grant it location permissions." - ), - actions=[ft.TextButton(content="Take me there", on_click=handler)], - actions_alignment=ft.MainAxisAlignment.CENTER, - ) - - async def handle_permission_request(e): - p = await gl.request_permission_async(wait_timeout=60) - page.add(ft.Text(f"request_permission: {p}")) - - async def handle_get_permission_status(e): - p = await gl.get_permission_status_async() - page.add(ft.Text(f"get_permission_status: {p}")) - - async def handle_get_current_position(e): - p = await gl.get_current_position_async() - page.add(ft.Text(f"get_current_position: ({p.latitude}, {p.longitude})")) - - async def handle_get_last_known_position(e): - p = await gl.get_last_known_position_async() - page.add(ft.Text(f"get_last_known_position: ({p.latitude}, {p.longitude})")) - - async def handle_location_service_enabled(e): - p = await gl.is_location_service_enabled_async() - page.add(ft.Text(f"is_location_service_enabled: {p}")) - - async def handle_open_location_settings(e): - p = await gl.open_location_settings_async() - page.pop_dialog(location_settings_dlg) - page.add(ft.Text(f"open_location_settings: {p}")) - - async def handle_open_app_settings(e): - p = await gl.open_app_settings_async() - page.pop_dialog(app_settings_dlg) - page.add(ft.Text(f"open_app_settings: {p}")) - - location_settings_dlg = settings_dlg(handle_open_location_settings) - app_settings_dlg = settings_dlg(handle_open_app_settings) - - page.add( - ft.Row( - wrap=True, - controls=[ - ft.OutlinedButton( - "Request Permission", - on_click=handle_permission_request, - ), - ft.OutlinedButton( - "Get Permission Status", - on_click=handle_get_permission_status, - ), - ft.OutlinedButton( - "Get Current Position", - on_click=handle_get_current_position, - ), - ft.OutlinedButton( - "Get Last Known Position", - visible=False if page.web else True, - on_click=handle_get_last_known_position, - ), - ft.OutlinedButton( - "Is Location Service Enabled", - on_click=handle_location_service_enabled, - ), - ft.OutlinedButton( - "Open Location Settings", - visible=False if page.web else True, - on_click=lambda e: page.show_dialog(location_settings_dlg), - ), - ft.OutlinedButton( - "Open App Settings", - visible=False if page.web else True, - on_click=lambda e: page.show_dialog(app_settings_dlg), - ), - ], - ) - ) - - -ft.run(main) diff --git a/python/controls/utility/gesture-detector/draggable-container-change-cursor.py b/python/controls/utility/gesture-detector/draggable-container-change-cursor.py deleted file mode 100644 index 959c766c..00000000 --- a/python/controls/utility/gesture-detector/draggable-container-change-cursor.py +++ /dev/null @@ -1,37 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - def on_pan_update(event: ft.DragUpdateEvent): - c.top = max(0, c.top + event.delta_y) - c.left = max(0, c.left + event.delta_x) - c.update() - - gd = ft.GestureDetector( - mouse_cursor=ft.MouseCursor.BASIC, - drag_interval=50, - on_pan_update=on_pan_update, - ) - c = ft.Container(gd, bgcolor=ft.Colors.AMBER, width=150, height=150, left=0, top=0) - - def change_icon(event): - mouse_cursor = next(mouse_cursors) - gd.mouse_cursor = mouse_cursor - gd.update() - text.value = f"Mouse Cursor: {gd.mouse_cursor}" - text.update() - - def mouse_cursor_generator(m_list): - while True: - for i in m_list: - yield i - - mouse_cursors = mouse_cursor_generator(list(ft.MouseCursor)) - - page.add(ft.Stack([c], width=1000, height=500)) - page.add(ft.ElevatedButton("Change mouse Cursor", on_click=change_icon)) - text = ft.Text(f"Mouse Cursor: {gd.mouse_cursor}") - page.add(text) - - -ft.run(main) diff --git a/python/controls/utility/gesture-detector/draggable-containers.py b/python/controls/utility/gesture-detector/draggable-containers.py deleted file mode 100644 index 825cddba..00000000 --- a/python/controls/utility/gesture-detector/draggable-containers.py +++ /dev/null @@ -1,35 +0,0 @@ -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.run(main) diff --git a/python/controls/utility/gesture-detector/gestures-tester.py b/python/controls/utility/gesture-detector/gestures-tester.py deleted file mode 100644 index add7c24a..00000000 --- a/python/controls/utility/gesture-detector/gestures-tester.py +++ /dev/null @@ -1,62 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - - gd = ft.GestureDetector( - ft.Container(bgcolor=ft.Colors.GREEN, width=200, height=200), - hover_interval=50, - on_tap=lambda e: print("TAP"), - on_tap_down=lambda e: print( - f"TAP DOWN - gx: {e.global_x}, gy: {e.global_y}, lx: {e.local_x}, ly: {e.local_y}, kind: {e.kind}" - ), - on_tap_up=lambda e: print( - f"TAP UP - gx: {e.global_x}, gy: {e.global_y}, lx: {e.local_x}, ly: {e.local_y}, kind: {e.kind}" - ), - on_secondary_tap=lambda e: print("SECONDARY TAP"), - on_secondary_tap_down=lambda e: print( - f"SECONDARY TAP DOWN - gx: {e.global_x}, gy: {e.global_y}, lx: {e.local_x}, ly: {e.local_y}, kind: {e.kind}" - ), - on_secondary_tap_up=lambda e: print( - f"SECONDARY TAP UP - gx: {e.global_x}, gy: {e.global_y}, lx: {e.local_x}, ly: {e.local_y}, kind: {e.kind}" - ), - on_long_press_start=lambda e: print( - f"LONG PRESS START - gx: {e.global_x}, gy: {e.global_y}, lx: {e.local_x}, ly: {e.local_y}" - ), - on_long_press_end=lambda e: print( - f"LONG PRESS END - gx: {e.global_x}, gy: {e.global_y}, lx: {e.local_x}, ly: {e.local_y}, vx: {e.velocity_x}, vy: {e.velocity_y}" - ), - on_secondary_long_press_start=lambda e: print( - f"SECONDARY LONG PRESS START - gx: {e.global_x}, gy: {e.global_y}, lx: {e.local_x}, ly: {e.local_y}" - ), - on_secondary_long_press_end=lambda e: print( - f"SECONDARY LONG PRESS END - gx: {e.global_x}, gy: {e.global_y}, lx: {e.local_x}, ly: {e.local_y}, vx: {e.velocity_x}, vy: {e.velocity_y}" - ), - on_double_tap=lambda e: print("DOUBLE TAP"), - on_double_tap_down=lambda e: print( - f"DOUBLE TAP DOWN - gx: {e.global_x}, gy: {e.global_y}, lx: {e.local_x}, ly: {e.local_y}, kind: {e.kind}" - ), - on_pan_start=lambda e: print( - f"PAN START - gx: {e.global_x}, gy: {e.global_y}, lx: {e.local_x}, ly: {e.local_y}, kind: {e.kind}" - ), - on_pan_update=lambda e: print( - f"PAN UPDATE - dx: {e.delta_x}, dy: {e.delta_y}, gx: {e.global_x}, gy: {e.global_y}, lx: {e.local_x}, ly: {e.local_y}" - ), - on_pan_end=lambda e: print( - f"PAN END - pv: {e.primary_velocity}, vx: {e.velocity_x}, vy: {e.velocity_y}" - ), - on_hover=lambda e: print( - f"HOVER - gx: {e.global_x}, gy: {e.global_y}, lx: {e.local_x}, ly: {e.local_y}, kind: {e.kind}" - ), - on_enter=lambda e: print( - f"ENTER - gx: {e.global_x}, gy: {e.global_y}, lx: {e.local_x}, ly: {e.local_y}, kind: {e.kind}" - ), - on_exit=lambda e: print( - f"EXIT - gx: {e.global_x}, gy: {e.global_y}, lx: {e.local_x}, ly: {e.local_y}, kind: {e.kind}" - ), - ) - - page.add(gd) - - -ft.run(main) diff --git a/python/controls/utility/permission-handler/permission-handler-example.py b/python/controls/utility/permission-handler/permission-handler-example.py deleted file mode 100644 index 2304693a..00000000 --- a/python/controls/utility/permission-handler/permission-handler-example.py +++ /dev/null @@ -1,40 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - page.scroll = ft.ScrollMode.ADAPTIVE - page.appbar = ft.runBar(title=ft.Text("PermissionHandler Tests")) - ph = ft.PermissionHandler() - page.overlay.append(ph) - - def check_permission(e): - o = ph.check_permission(e.control.data) - page.add(ft.Text(f"Checked {e.control.data.name}: {o}")) - - def request_permission(e): - o = ph.request_permission(e.control.data) - page.add(ft.Text(f"Requested {e.control.data.name}: {o}")) - - def open_app_settings(e): - o = ph.open_app_settings() - page.add(ft.Text(f"App Settings: {o}")) - - page.add( - ft.OutlinedButton( - "Check Microphone Permission", - data=ft.PermissionType.MICROPHONE, - on_click=check_permission, - ), - ft.OutlinedButton( - "Request Microphone Permission", - data=ft.PermissionType.MICROPHONE, - on_click=request_permission, - ), - ft.OutlinedButton( - "Open App Settings", - on_click=open_app_settings, - ), - ) - - -ft.run(main) diff --git a/python/controls/utility/semantics/semantics-example.py b/python/controls/utility/semantics/semantics-example.py deleted file mode 100644 index d0eb8cfb..00000000 --- a/python/controls/utility/semantics/semantics-example.py +++ /dev/null @@ -1,32 +0,0 @@ -import flet as ft - - -def main(page: ft.Page): - tf = ft.TextField( - label="Occupation", - hint_text="Use 20 words or less", - value="What is your occupation?", - ) - - def on_focus(e): - print("focus gained") - - def on_lose_focus(e): - print("focus lost") - - page.add( - ft.Column( - [ - ft.Semantics( - tf, - label="Input your occupation", - on_did_gain_accessibility_focus=on_focus, - on_did_lose_accessibility_focus=on_lose_focus, - ), - ft.Icon(name="settings", color="#c1c1c1"), - ] - ) - ) - - -ft.run(main) diff --git a/python/controls/utility/shake-detector/shake-detector-example.py b/python/controls/utility/shake-detector/shake-detector-example.py deleted file mode 100644 index eb1bd1cc..00000000 --- a/python/controls/utility/shake-detector/shake-detector-example.py +++ /dev/null @@ -1,16 +0,0 @@ -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.run(main) diff --git a/python/controls/utility/video/video-example.py b/python/controls/utility/video/video-example.py deleted file mode 100644 index df4975d4..00000000 --- a/python/controls/utility/video/video-example.py +++ /dev/null @@ -1,142 +0,0 @@ -import random -import flet as ft -import flet_video as fv - - -def main(page: ft.Page): - page.theme_mode = ft.ThemeMode.LIGHT - page.title = "TheEthicalVideo" - page.window.always_on_top = True - page.spacing = 20 - page.horizontal_alignment = ft.CrossAxisAlignment.CENTER - - def handle_pause(e): - video.pause() - print("Video.pause()") - - def handle_play_or_pause(e): - video.play_or_pause() - print("Video.play_or_pause()") - - def handle_play(e): - video.play() - print("Video.play()") - - def handle_stop(e): - video.stop() - print("Video.stop()") - - def handle_next(e): - video.next() - print("Video.next()") - - def handle_previous(e): - video.previous() - print("Video.previous()") - - def handle_volume_change(e): - video.volume = e.control.value - page.update() - print(f"Video.volume = {e.control.value}") - - def handle_playback_rate_change(e): - video.playback_rate = e.control.value - page.update() - print(f"Video.playback_rate = {e.control.value}") - - def handle_seek(e): - video.seek(10000) - print(f"Video.seek(10000)") - - def handle_add_media(e): - video.playlist_add(random.choice(sample_media)) - print(f"Video.playlist_add(random.choice(sample_media))") - - def handle_remove_media(e): - r = random.randint(0, len(video.playlist) - 1) - video.playlist_remove(r) - print(f"Popped Item at index: {r} (position {r+1})") - - def handle_jump(e): - print(f"Video.jump_to(0)") - video.jump_to(0) - - sample_media = [ - fv.VideoMedia( - "https://user-images.githubusercontent.com/28951144/229373720-14d69157-1a56-4a78-a2f4-d7a134d7c3e9.mp4" - ), - fv.VideoMedia( - "https://user-images.githubusercontent.com/28951144/229373718-86ce5e1d-d195-45d5-baa6-ef94041d0b90.mp4" - ), - fv.VideoMedia( - "https://user-images.githubusercontent.com/28951144/229373716-76da0a4e-225a-44e4-9ee7-3e9006dbc3e3.mp4" - ), - fv.VideoMedia( - "https://user-images.githubusercontent.com/28951144/229373695-22f88f13-d18f-4288-9bf1-c3e078d83722.mp4" - ), - fv.VideoMedia( - "https://user-images.githubusercontent.com/28951144/229373709-603a7a89-2105-4e1b-a5a5-a6c3567c9a59.mp4", - extras={ - "artist": "Thousand Foot Krutch", - "album": "The End Is Where We Begin", - }, - http_headers={ - "Foo": "Bar", - "Accept": "*/*", - }, - ), - ] - - page.add( - video := fv.Video( - expand=True, - playlist=sample_media[0:2], - playlist_mode=fv.PlaylistMode.LOOP, - fill_color=ft.Colors.BLUE_400, - aspect_ratio=16 / 9, - volume=100, - autoplay=False, - # filter_quality=ft.FilterQuality.HIGH, - muted=False, - on_load=lambda e: print("Video loaded successfully!"), - on_enter_fullscreen=lambda e: print("Video entered fullscreen!"), - on_exit_fullscreen=lambda e: print("Video exited fullscreen!"), - ), - ft.Row( - wrap=True, - alignment=ft.MainAxisAlignment.CENTER, - controls=[ - ft.ElevatedButton("Play", on_click=handle_play), - ft.ElevatedButton("Pause", on_click=handle_pause), - ft.ElevatedButton("Play Or Pause", on_click=handle_play_or_pause), - ft.ElevatedButton("Stop", on_click=handle_stop), - ft.ElevatedButton("Next", on_click=handle_next), - ft.ElevatedButton("Previous", on_click=handle_previous), - ft.ElevatedButton("Seek s=10", on_click=handle_seek), - ft.ElevatedButton("Jump to first Media", on_click=handle_jump), - ft.ElevatedButton("Add Random Media", on_click=handle_add_media), - ft.ElevatedButton("Remove Random Media", on_click=handle_remove_media), - ], - ), - ft.Slider( - min=0, - value=100, - max=100, - label="Volume = {value}%", - divisions=10, - width=400, - on_change=handle_volume_change, - ), - ft.Slider( - min=1, - value=1, - max=3, - label="PlaybackRate = {value}X", - divisions=6, - width=400, - on_change=handle_playback_rate_change, - ), - ) - - -ft.run(main) diff --git a/python/controls/layout/vertical-divider/divider-vert.py b/python/controls/vertical-divider/basic.py similarity index 78% rename from python/controls/layout/vertical-divider/divider-vert.py rename to python/controls/vertical-divider/basic.py index 2f1a0f9d..18a85e8b 100644 --- a/python/controls/layout/vertical-divider/divider-vert.py +++ b/python/controls/vertical-divider/basic.py @@ -2,36 +2,35 @@ def main(page: ft.Page): - page.add( ft.Row( - [ + expand=True, + spacing=0, + controls=[ ft.Container( bgcolor=ft.Colors.ORANGE_300, - alignment=ft.Alignment.center(), + alignment=ft.Alignment.CENTER, expand=True, ), ft.VerticalDivider(), ft.Container( bgcolor=ft.Colors.BROWN_400, - alignment=ft.Alignment.center(), + alignment=ft.Alignment.CENTER, expand=True, ), ft.VerticalDivider(width=1, color="white"), ft.Container( bgcolor=ft.Colors.BLUE_300, - alignment=ft.Alignment.center(), + alignment=ft.Alignment.CENTER, expand=True, ), ft.VerticalDivider(width=9, thickness=3), ft.Container( bgcolor=ft.Colors.GREEN_300, - alignment=ft.Alignment.center(), + alignment=ft.Alignment.CENTER, expand=True, ), ], - spacing=0, - expand=True, ) ) diff --git a/python/controls/vertical-divider/media/basic.png b/python/controls/vertical-divider/media/basic.png new file mode 100644 index 00000000..f1aeb377 Binary files /dev/null and b/python/controls/vertical-divider/media/basic.png differ diff --git a/python/controls/window-drag-area/media/no-frame-window.png b/python/controls/window-drag-area/media/no-frame-window.png new file mode 100644 index 00000000..1df9b358 Binary files /dev/null and b/python/controls/window-drag-area/media/no-frame-window.png differ diff --git a/python/controls/utility/window-drag-area/no-frame-window.py b/python/controls/window-drag-area/no-frame-window.py similarity index 66% rename from python/controls/utility/window-drag-area/no-frame-window.py rename to python/controls/window-drag-area/no-frame-window.py index 2b85009f..04007558 100644 --- a/python/controls/utility/window-drag-area/no-frame-window.py +++ b/python/controls/window-drag-area/no-frame-window.py @@ -5,20 +5,23 @@ def main(page: ft.Page): page.window.title_bar_hidden = True page.window.title_bar_buttons_hidden = True + def handle_window_close(e: ft.Event[ft.IconButton]): + page.window.close() + page.add( ft.Row( - [ + controls=[ ft.WindowDragArea( - ft.Container( - ft.Text( - "Drag this area to move, maximize and restore application window." - ), + expand=True, + content=ft.Container( bgcolor=ft.Colors.AMBER_300, padding=10, + content=ft.Text( + "Drag this area to move, maximize and restore application window." + ), ), - expand=True, ), - ft.IconButton(ft.Icons.CLOSE, on_click=lambda _: page.window.close()), + ft.IconButton(ft.Icons.CLOSE, on_click=handle_window_close), ] ) ) diff --git a/python/pyproject.toml b/python/pyproject.toml index 0978cd1e..038d65bd 100644 --- a/python/pyproject.toml +++ b/python/pyproject.toml @@ -14,15 +14,8 @@ dependencies = [ [tool.uv] dev-dependencies = [ - "flet-audio>=0.2.0.dev0", - "flet-video>=0.2.0.dev0", - "flet-flashlight>=0.2.0.dev0", - "flet-geolocator>=0.2.0.dev0", - "flet-ads>=0.2.0.dev0", - "flet-rive>=0.2.0.dev0", "matplotlib", "mplfinance", "pandas", "plotly" ] - diff --git a/python/tutorials/calc/calc.py b/python/tutorials/calc/calc.py index 11b247af..9392a140 100644 --- a/python/tutorials/calc/calc.py +++ b/python/tutorials/calc/calc.py @@ -13,22 +13,22 @@ def __init__(self, text, button_clicked, expand=1): class DigitButton(CalcButton): def __init__(self, text, button_clicked, expand=1): CalcButton.__init__(self, text, button_clicked, expand) - self.bgcolor = ft.colors.WHITE24 - self.color = ft.colors.WHITE + self.bgcolor = ft.Colors.WHITE24 + self.color = ft.Colors.WHITE class ActionButton(CalcButton): def __init__(self, text, button_clicked): CalcButton.__init__(self, text, button_clicked) - self.bgcolor = ft.colors.ORANGE - self.color = ft.colors.WHITE + self.bgcolor = ft.Colors.ORANGE + self.color = ft.Colors.WHITE class ExtraActionButton(CalcButton): def __init__(self, text, button_clicked): CalcButton.__init__(self, text, button_clicked) - self.bgcolor = ft.colors.BLUE_GREY_100 - self.color = ft.colors.BLACK + self.bgcolor = ft.Colors.BLUE_GREY_100 + self.color = ft.Colors.BLACK class CalculatorApp(ft.Container): @@ -37,9 +37,9 @@ def __init__(self): super().__init__() self.reset() - self.result = ft.Text(value="0", color=ft.colors.WHITE, size=20) + self.result = ft.Text(value="0", color=ft.Colors.WHITE, size=20) self.width = 350 - self.bgcolor = ft.colors.BLACK + self.bgcolor = ft.Colors.BLACK self.border_radius = ft.border_radius.all(20) self.padding = 20 self.content = ft.Column( diff --git a/python/tutorials/calc/calc3.py b/python/tutorials/calc/calc3.py index c42eb8cd..3b765e19 100644 --- a/python/tutorials/calc/calc3.py +++ b/python/tutorials/calc/calc3.py @@ -3,7 +3,7 @@ def main(page: ft.Page): page.title = "Calc App" - result = ft.Text(value="0", color=ft.colors.WHITE, size=20) + result = ft.Text(value="0", color=ft.Colors.WHITE, size=20) class CalcButton(ft.ElevatedButton): def __init__(self, text, expand=1): @@ -14,25 +14,25 @@ def __init__(self, text, expand=1): class DigitButton(CalcButton): def __init__(self, text, expand=1): CalcButton.__init__(self, text, expand) - self.bgcolor = ft.colors.WHITE24 - self.color = ft.colors.WHITE + self.bgcolor = ft.Colors.WHITE24 + self.color = ft.Colors.WHITE class ActionButton(CalcButton): def __init__(self, text): CalcButton.__init__(self, text) - self.bgcolor = ft.colors.ORANGE - self.color = ft.colors.WHITE + self.bgcolor = ft.Colors.ORANGE + self.color = ft.Colors.WHITE class ExtraActionButton(CalcButton): def __init__(self, text): CalcButton.__init__(self, text) - self.bgcolor = ft.colors.BLUE_GREY_100 - self.color = ft.colors.BLACK + self.bgcolor = ft.Colors.BLUE_GREY_100 + self.color = ft.Colors.BLACK page.add( ft.Container( width=350, - bgcolor=ft.colors.BLACK, + bgcolor=ft.Colors.BLACK, border_radius=ft.border_radius.all(20), padding=20, content=ft.Column( diff --git a/python/tutorials/calc/calc4.py b/python/tutorials/calc/calc4.py index 40a780c0..f480efa5 100644 --- a/python/tutorials/calc/calc4.py +++ b/python/tutorials/calc/calc4.py @@ -11,22 +11,22 @@ def __init__(self, text, expand=1): class DigitButton(CalcButton): def __init__(self, text, expand=1): CalcButton.__init__(self, text, expand) - self.bgcolor = ft.colors.WHITE24 - self.color = ft.colors.WHITE + self.bgcolor = ft.Colors.WHITE24 + self.color = ft.Colors.WHITE class ActionButton(CalcButton): def __init__(self, text): CalcButton.__init__(self, text) - self.bgcolor = ft.colors.ORANGE - self.color = ft.colors.WHITE + self.bgcolor = ft.Colors.ORANGE + self.color = ft.Colors.WHITE class ExtraActionButton(CalcButton): def __init__(self, text): CalcButton.__init__(self, text) - self.bgcolor = ft.colors.BLUE_GREY_100 - self.color = ft.colors.BLACK + self.bgcolor = ft.Colors.BLUE_GREY_100 + self.color = ft.Colors.BLACK class CalculatorApp(ft.Container): @@ -34,9 +34,9 @@ class CalculatorApp(ft.Container): def __init__(self): super().__init__() - self.result = ft.Text(value="0", color=ft.colors.WHITE, size=20) + self.result = ft.Text(value="0", color=ft.Colors.WHITE, size=20) self.width = 350 - self.bgcolor = ft.colors.BLACK + self.bgcolor = ft.Colors.BLACK self.border_radius = ft.border_radius.all(20) self.padding = 20 self.content = ft.Column( diff --git a/python/tutorials/calc/calc5.py b/python/tutorials/calc/calc5.py index 11b247af..9392a140 100644 --- a/python/tutorials/calc/calc5.py +++ b/python/tutorials/calc/calc5.py @@ -13,22 +13,22 @@ def __init__(self, text, button_clicked, expand=1): class DigitButton(CalcButton): def __init__(self, text, button_clicked, expand=1): CalcButton.__init__(self, text, button_clicked, expand) - self.bgcolor = ft.colors.WHITE24 - self.color = ft.colors.WHITE + self.bgcolor = ft.Colors.WHITE24 + self.color = ft.Colors.WHITE class ActionButton(CalcButton): def __init__(self, text, button_clicked): CalcButton.__init__(self, text, button_clicked) - self.bgcolor = ft.colors.ORANGE - self.color = ft.colors.WHITE + self.bgcolor = ft.Colors.ORANGE + self.color = ft.Colors.WHITE class ExtraActionButton(CalcButton): def __init__(self, text, button_clicked): CalcButton.__init__(self, text, button_clicked) - self.bgcolor = ft.colors.BLUE_GREY_100 - self.color = ft.colors.BLACK + self.bgcolor = ft.Colors.BLUE_GREY_100 + self.color = ft.Colors.BLACK class CalculatorApp(ft.Container): @@ -37,9 +37,9 @@ def __init__(self): super().__init__() self.reset() - self.result = ft.Text(value="0", color=ft.colors.WHITE, size=20) + self.result = ft.Text(value="0", color=ft.Colors.WHITE, size=20) self.width = 350 - self.bgcolor = ft.colors.BLACK + self.bgcolor = ft.Colors.BLACK self.border_radius = ft.border_radius.all(20) self.padding = 20 self.content = ft.Column( diff --git a/python/tutorials/chat/chat_3.py b/python/tutorials/chat/chat_3.py index fd3da20b..a44c7407 100644 --- a/python/tutorials/chat/chat_3.py +++ b/python/tutorials/chat/chat_3.py @@ -18,7 +18,7 @@ def on_message(message: Message): chat.controls.append(ft.Text(f"{message.user}: {message.text}")) elif message.message_type == "login_message": chat.controls.append( - ft.Text(message.text, italic=True, color=ft.colors.BLACK45, size=12) + ft.Text(message.text, italic=True, color=ft.Colors.BLACK45, size=12) ) page.update() diff --git a/python/tutorials/solitaire/solitaire-drag-and-drop/step1.py b/python/tutorials/solitaire/solitaire-drag-and-drop/step1.py index ad06c289..84e66904 100644 --- a/python/tutorials/solitaire/solitaire-drag-and-drop/step1.py +++ b/python/tutorials/solitaire/solitaire-drag-and-drop/step1.py @@ -3,6 +3,7 @@ # Use of GestureDetector for with on_pan_update event for dragging card # Absolute positioning of controls within stack + def main(page: ft.Page): def drag(e: ft.DragUpdateEvent): @@ -16,9 +17,10 @@ def drag(e: ft.DragUpdateEvent): on_pan_update=drag, left=0, top=0, - content=ft.Container(bgcolor=ft.colors.GREEN, width=70, height=100), - ) + content=ft.Container(bgcolor=ft.Colors.GREEN, width=70, height=100), + ) page.add(ft.Stack(controls=[card], width=1000, height=500)) + ft.app(target=main) diff --git a/python/tutorials/solitaire/solitaire-drag-and-drop/step2.py b/python/tutorials/solitaire/solitaire-drag-and-drop/step2.py index 7a05a0be..a8ce9cad 100644 --- a/python/tutorials/solitaire/solitaire-drag-and-drop/step2.py +++ b/python/tutorials/solitaire/solitaire-drag-and-drop/step2.py @@ -1,15 +1,17 @@ import flet as ft # Using Container for slot where the card should be dropped -# on_pan_start event for the card: remember position of card to bounce it back on_pan_end of needed. +# on_pan_start event for the card: remember position of card to bounce it back on_pan_end of needed. # on_pan_end: check if card is in proximity of the slot and either place it to the slot or return to original position (bounce back). # Solitaire class created for holding original position coordinates + class Solitaire: def __init__(self): self.start_top = 0 self.start_left = 0 + def main(page: ft.Page): def place(card, slot): """place card to the slot""" @@ -29,12 +31,9 @@ def drag(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() - + def drop(e: ft.DragEndEvent): - if ( - abs(e.control.top - slot.top) < 20 - and abs(e.control.left - slot.left) < 20 - ): + if abs(e.control.top - slot.top) < 20 and abs(e.control.left - slot.left) < 20: place(e.control, slot) else: @@ -42,9 +41,7 @@ def drop(e: ft.DragEndEvent): e.control.update() - slot = ft.Container( - width=70, height=100, left=200, top=0, border=ft.border.all(1) - ) + slot = ft.Container(width=70, height=100, left=200, top=0, border=ft.border.all(1)) card = ft.GestureDetector( mouse_cursor=ft.MouseCursor.MOVE, @@ -54,11 +51,12 @@ def drop(e: ft.DragEndEvent): on_pan_end=drop, left=0, top=0, - content=ft.Container(bgcolor=ft.colors.GREEN, width=70, height=100), + content=ft.Container(bgcolor=ft.Colors.GREEN, width=70, height=100), ) solitaire = Solitaire() - page.add(ft.Stack(controls = [slot, card], width=1000, height=500)) + page.add(ft.Stack(controls=[slot, card], width=1000, height=500)) + ft.app(target=main) diff --git a/python/tutorials/solitaire/solitaire-drag-and-drop/step3.py b/python/tutorials/solitaire/solitaire-drag-and-drop/step3.py index d83a3ca3..f5e9a0e3 100644 --- a/python/tutorials/solitaire/solitaire-drag-and-drop/step3.py +++ b/python/tutorials/solitaire/solitaire-drag-and-drop/step3.py @@ -1,15 +1,17 @@ import flet as ft # Adding secord card. Now the one of the cards will not be on top of stack when being dragged -# move_on_top function to move the card on top on_pan_start event +# move_on_top function to move the card on top on_pan_start event + class Solitaire: def __init__(self): self.start_top = 0 self.start_left = 0 + def main(page: ft.Page): - + def place(card, slot): """place card to the slot""" card.top = slot.top @@ -31,26 +33,20 @@ def start_drag(e: ft.DragStartEvent): solitaire.start_top = e.control.top solitaire.start_left = e.control.left - def drag(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() - + def drop(e: ft.DragEndEvent): - if ( - abs(e.control.top - slot.top) < 20 - and abs(e.control.left - slot.left) < 20 - ): + if abs(e.control.top - slot.top) < 20 and abs(e.control.left - slot.left) < 20: place(e.control, slot) else: bounce_back(solitaire, e.control) e.control.update() - slot = ft.Container( - width=70, height=100, left=200, top=0, border=ft.border.all(1) - ) + slot = ft.Container(width=70, height=100, left=200, top=0, border=ft.border.all(1)) card1 = ft.GestureDetector( mouse_cursor=ft.MouseCursor.MOVE, @@ -60,7 +56,7 @@ def drop(e: ft.DragEndEvent): on_pan_end=drop, left=0, top=0, - content=ft.Container(bgcolor=ft.colors.GREEN, width=70, height=100), + content=ft.Container(bgcolor=ft.Colors.GREEN, width=70, height=100), ) card2 = ft.GestureDetector( @@ -71,11 +67,11 @@ def drop(e: ft.DragEndEvent): on_pan_end=drop, left=100, top=0, - content=ft.Container(bgcolor=ft.colors.YELLOW, width=70, height=100), + content=ft.Container(bgcolor=ft.Colors.YELLOW, width=70, height=100), ) solitaire = Solitaire() - + controls = [slot, card1, card2] page.add(ft.Stack(controls=controls, width=1000, height=500)) diff --git a/python/tutorials/solitaire/solitaire-drag-and-drop/step4.py b/python/tutorials/solitaire/solitaire-drag-and-drop/step4.py index 50e57711..a3141181 100644 --- a/python/tutorials/solitaire/solitaire-drag-and-drop/step4.py +++ b/python/tutorials/solitaire/solitaire-drag-and-drop/step4.py @@ -4,6 +4,7 @@ # Deal cards before the beginning of the game # On_pan_end, go through slots list to find slot in proximity if possible + class Solitaire: def __init__(self): self.start_top = 0 @@ -11,7 +12,7 @@ def __init__(self): def main(page: ft.Page): - + def place(card, slot): """place card to the slot""" card.top = slot.top @@ -34,37 +35,29 @@ def start_drag(e: ft.DragStartEvent): solitaire.start_top = e.control.top solitaire.start_left = e.control.left - def drag(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() - + def drop(e: ft.DragEndEvent): for slot in slots: if ( abs(e.control.top - slot.top) < 20 - and abs(e.control.left - slot.left) < 20 - ): + and abs(e.control.left - slot.left) < 20 + ): place(e.control, slot) e.control.update() return - + bounce_back(solitaire, e.control) e.control.update() + slot0 = ft.Container(width=70, height=100, left=0, top=0, border=ft.border.all(1)) - slot0 = ft.Container( - width=70, height=100, left=0, top=0, border=ft.border.all(1) - ) + slot1 = ft.Container(width=70, height=100, left=200, top=0, border=ft.border.all(1)) - slot1 = ft.Container( - width=70, height=100, left=200, top=0, border=ft.border.all(1) - ) - - slot2 = ft.Container( - width=70, height=100, left=300, top=0, border=ft.border.all(1) - ) + slot2 = ft.Container(width=70, height=100, left=300, top=0, border=ft.border.all(1)) slots = [slot0, slot1, slot2] @@ -76,7 +69,7 @@ def drop(e: ft.DragEndEvent): on_pan_end=drop, left=0, top=0, - content=ft.Container(bgcolor=ft.colors.GREEN, width=70, height=100), + content=ft.Container(bgcolor=ft.Colors.GREEN, width=70, height=100), ) card2 = ft.GestureDetector( @@ -87,17 +80,17 @@ def drop(e: ft.DragEndEvent): on_pan_end=drop, left=100, top=0, - content=ft.Container(bgcolor=ft.colors.YELLOW, width=70, height=100), + content=ft.Container(bgcolor=ft.Colors.YELLOW, width=70, height=100), ) controls = [slot0, slot1, slot2, card1, card2] - + # deal cards place(card1, slot0) place(card2, slot0) solitaire = Solitaire() - + page.add(ft.Stack(controls=controls, width=1000, height=500)) diff --git a/python/tutorials/solitaire/solitaire-final/layout.py b/python/tutorials/solitaire/solitaire-final/layout.py index 0faf4b81..80296014 100644 --- a/python/tutorials/solitaire/solitaire-final/layout.py +++ b/python/tutorials/solitaire/solitaire-final/layout.py @@ -1,5 +1,7 @@ import flet as ft from settings import SettingsDialog + + def create_appbar(page, settings, on_new_game): def new_game_clicked(e): @@ -16,15 +18,14 @@ def show_settings(e): page.update() page.appbar = ft.AppBar( - leading=ft.Image(src=f"/images/card.png"), + leading=ft.Image(src="/images/card.png"), leading_width=30, title=ft.Text("Flet solitaire"), - bgcolor=ft.colors.SURFACE_VARIANT, + bgcolor=ft.Colors.SURFACE_VARIANT, actions=[ ft.TextButton(text="New game", on_click=new_game_clicked), ft.TextButton(text="Rules", on_click=show_rules), - ft.IconButton(ft.icons.SETTINGS, on_click=show_settings), - + ft.IconButton(ft.Icons.SETTINGS, on_click=show_settings), ], ) @@ -40,8 +41,11 @@ def show_settings(e): - Turning one card at a time to the waste, with no limit on passes through the deck. If the player can no longer make any meaningful moves, the game is considered lost. - """) + """ + ) rules_dialog = ft.AlertDialog( - title=ft.Text("Solitaire rules"), content=rules_md, on_dismiss=lambda e: print("Dialog dismissed!") - ) \ No newline at end of file + title=ft.Text("Solitaire rules"), + content=rules_md, + on_dismiss=lambda e: print("Dialog dismissed!"), + ) diff --git a/python/tutorials/todo/to-do-2.py b/python/tutorials/todo/to-do-2.py index eb69f50e..353ef9a5 100644 --- a/python/tutorials/todo/to-do-2.py +++ b/python/tutorials/todo/to-do-2.py @@ -15,7 +15,7 @@ def add_clicked(e): ft.Row( controls=[ new_task, - ft.FloatingActionButton(icon=ft.icons.ADD, on_click=add_clicked), + ft.FloatingActionButton(icon=ft.Icons.ADD, on_click=add_clicked), ], ), tasks_view, diff --git a/python/tutorials/todo/to-do-3.py b/python/tutorials/todo/to-do-3.py index bb4f65a0..69ea640c 100644 --- a/python/tutorials/todo/to-do-3.py +++ b/python/tutorials/todo/to-do-3.py @@ -13,7 +13,7 @@ def __init__(self): controls=[ self.new_task, ft.FloatingActionButton( - icon=ft.icons.ADD, on_click=self.add_clicked + icon=ft.Icons.ADD, on_click=self.add_clicked ), ], ), diff --git a/python/tutorials/todo/to-do-4.py b/python/tutorials/todo/to-do-4.py index 6c8e70a7..3afc9e4f 100644 --- a/python/tutorials/todo/to-do-4.py +++ b/python/tutorials/todo/to-do-4.py @@ -18,12 +18,12 @@ def __init__(self, task_name, task_delete): spacing=0, controls=[ ft.IconButton( - icon=ft.icons.CREATE_OUTLINED, + icon=ft.Icons.CREATE_OUTLINED, tooltip="Edit To-Do", on_click=self.edit_clicked, ), ft.IconButton( - ft.icons.DELETE_OUTLINE, + ft.Icons.DELETE_OUTLINE, tooltip="Delete To-Do", on_click=self.delete_clicked, ), @@ -39,8 +39,8 @@ def __init__(self, task_name, task_delete): controls=[ self.edit_name, ft.IconButton( - icon=ft.icons.DONE_OUTLINE_OUTLINED, - icon_color=ft.colors.GREEN, + icon=ft.Icons.DONE_OUTLINE_OUTLINED, + icon_color=ft.Colors.GREEN, tooltip="Update To-Do", on_click=self.save_clicked, ), @@ -76,7 +76,7 @@ def __init__(self): controls=[ self.new_task, ft.FloatingActionButton( - icon=ft.icons.ADD, on_click=self.add_clicked + icon=ft.Icons.ADD, on_click=self.add_clicked ), ], ), diff --git a/python/tutorials/todo/to-do-5.py b/python/tutorials/todo/to-do-5.py index 372089f3..60a4785b 100644 --- a/python/tutorials/todo/to-do-5.py +++ b/python/tutorials/todo/to-do-5.py @@ -22,12 +22,12 @@ def __init__(self, task_name, task_status_change, task_delete): spacing=0, controls=[ ft.IconButton( - icon=ft.icons.CREATE_OUTLINED, + icon=ft.Icons.CREATE_OUTLINED, tooltip="Edit To-Do", on_click=self.edit_clicked, ), ft.IconButton( - ft.icons.DELETE_OUTLINE, + ft.Icons.DELETE_OUTLINE, tooltip="Delete To-Do", on_click=self.delete_clicked, ), @@ -43,8 +43,8 @@ def __init__(self, task_name, task_status_change, task_delete): controls=[ self.edit_name, ft.IconButton( - icon=ft.icons.DONE_OUTLINE_OUTLINED, - icon_color=ft.colors.GREEN, + icon=ft.Icons.DONE_OUTLINE_OUTLINED, + icon_color=ft.Colors.GREEN, tooltip="Update To-Do", on_click=self.save_clicked, ), @@ -90,7 +90,7 @@ def __init__(self): controls=[ self.new_task, ft.FloatingActionButton( - icon=ft.icons.ADD, on_click=self.add_clicked + icon=ft.Icons.ADD, on_click=self.add_clicked ), ], ),