├── .gitignore ├── LICENSE ├── README.md └── python ├── .gitignore ├── apps ├── authentication │ ├── basic-auth-async.py │ ├── basic-auth.py │ ├── check-auth-results-and-toggle-ui.py │ ├── github-oauth-with-listing-repos-async.py │ ├── github-oauth-with-listing-repos.py │ └── linkedin-login.py ├── autocomplete-searcher │ ├── main.py │ └── names.py ├── controls-gallery │ ├── Dockerfile │ ├── LICENSE │ ├── README.md │ ├── assets │ │ ├── RobotoMono-VariableFont_wght.ttf │ │ ├── RobotoSlab[wght].ttf │ │ ├── column.svg │ │ ├── datatable.svg │ │ ├── github-mark.svg │ │ ├── gridview.svg │ │ ├── logo.svg │ │ └── page.svg │ ├── components │ │ ├── controls_grid.py │ │ ├── examples_view.py │ │ ├── gallery_view.py │ │ ├── left_navigation_menu.py │ │ └── properties_table.py │ ├── examples │ │ ├── animations │ │ │ └── animated_switcher │ │ │ │ ├── 01_animatedswitcher_example.py │ │ │ │ └── index.py │ │ ├── buttons │ │ │ ├── cupertinoactionsheetaction │ │ │ │ ├── 01_cupertino_action_sheet_example.py │ │ │ │ └── index.py │ │ │ ├── cupertinobutton │ │ │ │ ├── 01_cupertino_button_example.py │ │ │ │ └── index.py │ │ │ ├── cupertinodialogaction │ │ │ │ ├── 01_cupertino_dialog_action_example.py │ │ │ │ └── index.py │ │ │ ├── cupertinofilledbutton │ │ │ │ ├── 01_cupertino_filled_button_example.py │ │ │ │ └── index.py │ │ │ ├── cupertinosegmentedbutton │ │ │ │ ├── 01_cupertino_segmented_button_example.py │ │ │ │ └── index.py │ │ │ ├── cupertinoslidingsegmentedbutton │ │ │ │ ├── 01_cupertino_sliding_segmented_button_example.py │ │ │ │ └── index.py │ │ │ ├── elevatedbutton │ │ │ │ ├── 01_basic_elevatedbuttons.py │ │ │ │ ├── 02_elevatedbuttons_with_icons.py │ │ │ │ ├── 03_elevatedbutton_with_click_event.py │ │ │ │ ├── 04_elevatedbuttons_with_custom_content.py │ │ │ │ ├── 05_elevatedbutton_with_url.py │ │ │ │ ├── 06_elevatedbutton_style.py │ │ │ │ ├── 07_elevatedbutton__shapes.py │ │ │ │ └── index.py │ │ │ ├── filledbutton │ │ │ │ ├── 01_filledbuttons_example.py │ │ │ │ └── index.py │ │ │ ├── filledtonalbutton │ │ │ │ ├── 01_filledtonalbuttons_example.py │ │ │ │ └── index.py │ │ │ ├── floatingactionbutton │ │ │ │ ├── 01_floatingactionbutton_example.py │ │ │ │ └── index.py │ │ │ ├── iconbutton │ │ │ │ ├── 01_iconbuttons_example.py │ │ │ │ ├── 02_iconbutton_with_click_event.py │ │ │ │ └── index.py │ │ │ ├── menuitembutton │ │ │ │ ├── 01_menuitembutton_example.py │ │ │ │ └── index.py │ │ │ ├── outlinedbutton │ │ │ │ ├── 01_basic_outlined_buttons.py │ │ │ │ ├── 02_outlinedbuttons_with_icons.py │ │ │ │ ├── 03_outlinedbutton_with_click_event.py │ │ │ │ ├── 04_outlinedbuttons_with_custom_content.py │ │ │ │ └── index.py │ │ │ ├── popupmenubutton │ │ │ │ ├── 01_popupmenubutton_example.py │ │ │ │ └── index.py │ │ │ ├── segmentedbutton │ │ │ │ ├── 01_segmentedbutton_example.py │ │ │ │ └── index.py │ │ │ ├── submenubutton │ │ │ │ ├── 01_submenubutton_example.py │ │ │ │ └── index.py │ │ │ └── textbutton │ │ │ │ ├── 01_basic_textbuttons.py │ │ │ │ ├── 02_textbuttons_with_icons.py │ │ │ │ ├── 03_textbutton_with_click_event.py │ │ │ │ ├── 04_textbuttons_with_custom_content.py │ │ │ │ └── index.py │ │ ├── charts │ │ │ ├── barchart │ │ │ │ ├── 01_barchart_1.py │ │ │ │ ├── 02_barchart_2.py │ │ │ │ └── index.py │ │ │ ├── linechart │ │ │ │ ├── 01_linechart_1.py │ │ │ │ ├── 02_linechart_2.py │ │ │ │ └── index.py │ │ │ └── piechart │ │ │ │ ├── 01_piechart_1.py │ │ │ │ ├── 02_piechart_2.py │ │ │ │ ├── 03_piechart_3.py │ │ │ │ └── index.py │ │ ├── colors │ │ │ ├── colorpalettes │ │ │ │ ├── 01_color_palettes.py │ │ │ │ └── index.py │ │ │ ├── controlcolors │ │ │ │ ├── 01_change_container_color.py │ │ │ │ ├── 02_change_container_theme.py │ │ │ │ ├── 03_nested_themes.py │ │ │ │ ├── 04_scrollbar_theme.py │ │ │ │ ├── 05_tabs_theme.py │ │ │ │ └── index.py │ │ │ ├── cupertinocolors │ │ │ │ ├── 01_cupertino_colors.py │ │ │ │ └── index.py │ │ │ └── themecolors │ │ │ │ ├── 01_theme_colors.py │ │ │ │ ├── 02_customize_theme_colors.py │ │ │ │ └── index.py │ │ ├── contrib │ │ │ └── colorpicker │ │ │ │ ├── 01_color_picker_dialog.py │ │ │ │ ├── 02_color_picker_color_property.py │ │ │ │ └── index.py │ │ ├── dialogs │ │ │ ├── alertdialog │ │ │ │ ├── 01_basic_and_modal_dialogs.py │ │ │ │ └── index.py │ │ │ ├── banner │ │ │ │ ├── 01_banner_with_leading_icon_and_actions.py │ │ │ │ └── index.py │ │ │ ├── bottomsheet │ │ │ │ ├── 01_simple_bottomsheet.py │ │ │ │ └── index.py │ │ │ ├── cupertinoactionsheet │ │ │ │ ├── 01_cupertino_action_sheet_example.py │ │ │ │ └── index.py │ │ │ ├── cupertinoalertdialog │ │ │ │ ├── 01_cupertino_alert_dialog_example.py │ │ │ │ └── index.py │ │ │ ├── cupertinobottomsheet │ │ │ │ ├── 01_cupertino_bottom_sheet_with_action_sheet.py │ │ │ │ ├── 02_cupertino_bottom_sheet_with_date_picker_example.py │ │ │ │ ├── 03_cupertino_bottom_sheet_picker_example.py │ │ │ │ ├── 04_cupertino_bottom_sheet_timer_picker_example.py │ │ │ │ └── index.py │ │ │ ├── cupertinocontextmenu │ │ │ │ ├── 01_cupertino_context_menu_example.py │ │ │ │ └── index.py │ │ │ ├── cupertinodatepicker │ │ │ │ ├── 01_cupertino_date_picker_example.py │ │ │ │ └── index.py │ │ │ ├── cupertinopicker │ │ │ │ ├── 01_cupertino_picker_example.py │ │ │ │ └── index.py │ │ │ ├── cupertinotimerpicker │ │ │ │ ├── 01_cupertino_timer_picker_example.py │ │ │ │ └── index.py │ │ │ ├── datepicker │ │ │ │ ├── 01_date_picker_example.py │ │ │ │ └── index.py │ │ │ ├── snackbar │ │ │ │ ├── 01_snackbar_with_dynamic_message.py │ │ │ │ └── index.py │ │ │ └── timepicker │ │ │ │ ├── 01_time_picker_example.py │ │ │ │ └── index.py │ │ ├── displays │ │ │ ├── badge │ │ │ │ ├── 01_badges_in_navigationrail.py │ │ │ │ └── index.py │ │ │ ├── canvas │ │ │ │ ├── 01_canvas_basic_usage.py │ │ │ │ ├── 02_path_shape_example.py │ │ │ │ ├── 03_bezier_curve.py │ │ │ │ ├── 04_drawing_text.py │ │ │ │ ├── 05_free-hand_drawing_tool.py │ │ │ │ └── index.py │ │ │ ├── circleavatar │ │ │ │ ├── 01_circleavatar_example.py │ │ │ │ └── index.py │ │ │ ├── cupertinoactivityindicator │ │ │ │ ├── 01_cupertino_activity_indicator_example.py │ │ │ │ └── index.py │ │ │ ├── icon │ │ │ │ ├── 01_icons_with_different_colors_and_sizes.py │ │ │ │ └── index.py │ │ │ ├── image │ │ │ │ ├── 01_images_example.py │ │ │ │ └── index.py │ │ │ ├── map │ │ │ │ ├── 01_map_example.py │ │ │ │ └── index.py │ │ │ ├── markdown │ │ │ │ ├── 01_markdown_with_githubweb_extensions_and_clickable_links.py │ │ │ │ ├── 02_markdown_with_code_syntax_highlight.py │ │ │ │ └── index.py │ │ │ ├── progressbar │ │ │ │ ├── 01_progressbar_example.py │ │ │ │ └── index.py │ │ │ ├── progressring │ │ │ │ ├── 01_progressring_example.py │ │ │ │ └── index.py │ │ │ └── text │ │ │ │ ├── 01_custom_text_styles.py │ │ │ │ ├── 02_pre-defined_theme_text_styles.py │ │ │ │ ├── 03_font_with_variable_weight.py │ │ │ │ ├── 05_rich_text_basics.py │ │ │ │ ├── 06_rich_text_with_borders_and_stroke.py │ │ │ │ ├── 07_rich_text_with_gradient.py │ │ │ │ ├── 08_selectable_text.py │ │ │ │ ├── 09_text_with_tooltip_with_a_custom_decoration.py │ │ │ │ ├── 10_text_with_variable_properties.py │ │ │ │ └── index.py │ │ ├── input │ │ │ ├── autocomplete │ │ │ │ ├── 01_autocomplete_example.py │ │ │ │ ├── 02_autocomplete_properties.py │ │ │ │ └── index.py │ │ │ ├── autofillgroup │ │ │ │ ├── 01_autofillgroup_example.py │ │ │ │ └── index.py │ │ │ ├── checkbox │ │ │ │ ├── 01_basic_checkboxes.py │ │ │ │ ├── 02_checkbox_with_change_event.py │ │ │ │ ├── 03_checkbox_properties.py │ │ │ │ ├── 04_checkbox_label_style_properties.py │ │ │ │ └── index.py │ │ │ ├── chip │ │ │ │ ├── 01_assist_chips.py │ │ │ │ ├── 02_filter_chips.py │ │ │ │ └── index.py │ │ │ ├── cupertinocheckbox │ │ │ │ ├── 01_cupertinocheckbox_example.py │ │ │ │ └── index.py │ │ │ ├── cupertinoradio │ │ │ │ ├── 01_cupertino_radio_example.py │ │ │ │ └── index.py │ │ │ ├── cupertinoslider │ │ │ │ ├── 01_cupertino_slider_example.py │ │ │ │ └── index.py │ │ │ ├── cupertinoswitch │ │ │ │ ├── 01_cupertino_switch_example.py │ │ │ │ └── index.py │ │ │ ├── cupertinotextfield │ │ │ │ ├── 01_cupertino_textfield_example.py │ │ │ │ └── index.py │ │ │ ├── dropdown │ │ │ │ ├── 01_basic_dropdown.py │ │ │ │ ├── 02_dropdown_with_label_and_hint.py │ │ │ │ ├── 03_add_items_to_dropdown_options.py │ │ │ │ └── index.py │ │ │ ├── radio │ │ │ │ ├── 01_basic_radiogroup.py │ │ │ │ ├── 02_radio_group_with_change_event.py │ │ │ │ └── index.py │ │ │ ├── rangeslider │ │ │ │ ├── 01_rangeslider_example.py │ │ │ │ └── index.py │ │ │ ├── searchbar │ │ │ │ ├── 01_searchbarexample.py │ │ │ │ └── index.py │ │ │ ├── slider │ │ │ │ ├── 01_basic_sliders.py │ │ │ │ ├── 02_sliders_with_values.py │ │ │ │ ├── 03_slider_with_change_event.py │ │ │ │ └── index.py │ │ │ ├── switch │ │ │ │ ├── 01_basic_switches.py │ │ │ │ └── index.py │ │ │ └── textfield │ │ │ │ ├── 01_basic_textfields.py │ │ │ │ ├── 02_textfield_with_change_event.py │ │ │ │ ├── 03_password_with_reveal_button.py │ │ │ │ ├── 04_multiline_textfields.py │ │ │ │ ├── 05_underlined_and_borderless_textfields.py │ │ │ │ ├── 06_textfields_with_prefixes_and_suffixes.py │ │ │ │ └── index.py │ │ ├── layout │ │ │ ├── card │ │ │ │ ├── 01_card_example.py │ │ │ │ └── index.py │ │ │ ├── column │ │ │ │ ├── 01_column_spacing.py │ │ │ │ ├── 02_column_wrapping.py │ │ │ │ ├── 03_column_vertical_alignment.py │ │ │ │ ├── 04_column_horizontal_alignment.py │ │ │ │ ├── 05_column_scroll_to.py │ │ │ │ ├── 06_infinite_scroll_list.py │ │ │ │ ├── 07_scrolling_column_programmatically.py │ │ │ │ ├── 08_receiving_scroll_notifications.py │ │ │ │ └── index.py │ │ │ ├── container │ │ │ │ ├── 01_clickable_containers.py │ │ │ │ ├── 02_container_alignment.py │ │ │ │ ├── 03_animate_container.py │ │ │ │ ├── 04_container_gradient.py │ │ │ │ └── index.py │ │ │ ├── cupertinolisttile │ │ │ │ ├── 01_cupertinolisttile_example.py │ │ │ │ └── index.py │ │ │ ├── datatable │ │ │ │ ├── 01_basic_datatable.py │ │ │ │ ├── 02_styled_datatable.py │ │ │ │ └── index.py │ │ │ ├── dismissible │ │ │ │ ├── 01_dismissible_example.py │ │ │ │ └── index.py │ │ │ ├── divider │ │ │ │ ├── 01_divider_example.py │ │ │ │ ├── 02_draggable_divider.py │ │ │ │ └── index.py │ │ │ ├── expansionpanellist │ │ │ │ ├── 01_expansionpanellist_example.py │ │ │ │ └── index.py │ │ │ ├── expansiontile │ │ │ │ ├── 01_expansiontile_example.py │ │ │ │ └── index.py │ │ │ ├── gridview │ │ │ │ ├── 01_photo_gallery.py │ │ │ │ └── index.py │ │ │ ├── listtile │ │ │ │ ├── 01_listtile_examples.py │ │ │ │ └── index.py │ │ │ ├── listview │ │ │ │ ├── 01_auto_scrolling_listview.py │ │ │ │ └── index.py │ │ │ ├── pagelet │ │ │ │ ├── 01_pagelet_example.py │ │ │ │ └── index.py │ │ │ ├── placeholder │ │ │ │ ├── 01_placeholder_example.py │ │ │ │ └── index.py │ │ │ ├── responsiverow │ │ │ │ ├── 01_responsiverow_example.py │ │ │ │ └── index.py │ │ │ ├── row │ │ │ │ ├── 01_row_spacing.py │ │ │ │ ├── 02_row_wrapping.py │ │ │ │ ├── 03_row_horizontal_alignment.py │ │ │ │ ├── 04_row_vertical_alignment.py │ │ │ │ └── index.py │ │ │ ├── safearea │ │ │ │ ├── 01_safearea_example.py │ │ │ │ └── index.py │ │ │ ├── stack │ │ │ │ ├── 01_transparent_title_over_an_image.py │ │ │ │ └── index.py │ │ │ ├── tabs │ │ │ │ ├── 01_tabs_example.py │ │ │ │ └── index.py │ │ │ └── verticaldivider │ │ │ │ ├── 01_verticaldivider_example.py │ │ │ │ ├── 02_draggable_verticaldivider.py │ │ │ │ └── index.py │ │ ├── navigation │ │ │ ├── appbar │ │ │ │ ├── 01_appbar_example.py │ │ │ │ └── index.py │ │ │ ├── bottomappbar │ │ │ │ ├── 01_bottomappbar_example.py │ │ │ │ └── index.py │ │ │ ├── cupertinoappbar │ │ │ │ ├── 01_cupertino_appbar_example.py │ │ │ │ └── index.py │ │ │ ├── cupertinonavigationbar │ │ │ │ ├── 01_navigationbar_example.py │ │ │ │ └── index.py │ │ │ ├── menubar │ │ │ │ ├── 01_menubar_example.py │ │ │ │ └── index.py │ │ │ ├── navigationbar │ │ │ │ ├── 01_navigationbar_example.py │ │ │ │ └── index.py │ │ │ ├── navigationdrawer │ │ │ │ ├── 01_navigation_drawer_example.py │ │ │ │ └── index.py │ │ │ └── navigationrail │ │ │ │ ├── 01_navigationrail_example.py │ │ │ │ └── index.py │ │ └── utility │ │ │ ├── audio │ │ │ ├── 01_autoplay_audio.py │ │ │ └── index.py │ │ │ ├── draggable │ │ │ ├── 01_drag_and_drop_colors.py │ │ │ └── index.py │ │ │ ├── filepicker │ │ │ ├── 01_pick_multiple_files.py │ │ │ └── index.py │ │ │ ├── gesturedetector │ │ │ ├── 01_draggable_containers.py │ │ │ └── index.py │ │ │ ├── interactiveviewer │ │ │ ├── 01_interactive_viewer_example.py │ │ │ └── index.py │ │ │ ├── shadermask │ │ │ ├── 01_adding_a_pink_glow_around_image_edges.py │ │ │ ├── 02_gradually_fade_out_image_to_the_bottom_edge.py │ │ │ └── index.py │ │ │ └── video │ │ │ ├── 01_video_example.py │ │ │ └── index.py │ ├── fly.toml │ ├── gallerydata.py │ ├── main.py │ ├── poetry.lock │ └── pyproject.toml ├── counter-flutter │ ├── Dockerfile │ ├── assets │ │ ├── favicon.png │ │ ├── icon.png │ │ └── manifest.json │ ├── fly.toml │ ├── main.py │ └── requirements.txt ├── counter │ ├── counter-accessible.py │ ├── counter-async.py │ ├── counter.py │ └── requirements.txt ├── custom-loading-image │ ├── assets │ │ ├── icons │ │ │ └── loading-animation.png │ │ └── manifest.json │ └── main.py ├── desktop-window-manager │ └── page_window.py ├── flet-animation │ ├── main.py │ └── requirements.txt ├── greeter │ ├── greeter.py │ └── requirements.txt ├── hello-world │ ├── hello.py │ └── requirements.txt ├── icons-browser │ ├── Dockerfile │ ├── README.md │ ├── fly.toml │ ├── main.py │ └── requirements.txt ├── icons-cupertino-browser │ ├── main.py │ └── requirements.txt ├── layouts │ └── footer.py ├── routing-navigation │ ├── building-views-on-route-change.py │ ├── home-store.py │ ├── initial-route.py │ ├── requirements.txt │ └── route-change-event.py ├── studio-gallery │ ├── assets │ │ └── github-mark.svg │ ├── audio_player.py │ ├── buttons.py │ ├── calculator.py │ ├── charts.py │ ├── counter.py │ ├── drawing_tool.py │ ├── entry_form.py │ ├── flet_animation.py │ ├── main.py │ ├── poetry.lock │ ├── pyproject.toml │ └── to_do.py ├── todo-async │ └── todo.py ├── todo │ ├── Dockerfile │ ├── fly.toml │ ├── requirements.txt │ └── todo.py └── trolli │ ├── .gitignore │ ├── DockerFile │ ├── README.md │ ├── assets │ └── Pacifico-Regular.ttf │ ├── fly.toml │ ├── pyproject.toml │ ├── requirements.txt │ └── src │ ├── app_layout.py │ ├── board.py │ ├── board_list.py │ ├── data_store.py │ ├── item.py │ ├── main.py │ ├── memory_store.py │ ├── sidebar.py │ └── user.py ├── community ├── README.md ├── colors_browser │ ├── .gitattributes │ ├── .gitignore │ ├── Dockerfile │ ├── README.md │ ├── fly.toml │ ├── main.py │ ├── requirements.txt │ ├── v1.py │ └── v2.py ├── datepicker │ ├── .gitignore │ ├── LICENSE │ ├── README.md │ ├── assets │ │ ├── datepicker.png │ │ ├── datepicker_3_months.png │ │ ├── datepicker_disabled_dates.png │ │ ├── datepicker_hide_prev_next_month.png │ │ ├── datepicker_locale.png │ │ ├── datepicker_multiple.png │ │ ├── datepicker_range.png │ │ └── datetimepicker.png │ ├── datepicker │ │ ├── __init__ │ │ ├── datepicker.py │ │ └── selection_type.py │ ├── example.py │ ├── main.py │ └── requirements.txt ├── datetime_field │ ├── datetime_field.py │ ├── readme.md │ └── run.py ├── flet_animations │ ├── 16_bubble_loading_animation.py │ ├── AppBar_bubbled.py │ ├── Circular_loading_animation.py │ ├── Horizontal_loading_animation.py │ ├── Loading_animation_bubble.py │ ├── Sliding_AppBar.py │ ├── animted_login_page.py │ ├── bouncing_ball_loading.py │ ├── dark_light_switch.py │ ├── hover_animation.py │ ├── navigation_drawer.py │ ├── radial_animation.py │ ├── square_rotation_animation.py │ └── vertical_loading_animation.py ├── floating_menu_button │ ├── README.md │ ├── animated_menu_button.png │ └── menubutton.py ├── responsive_menu_layout │ ├── README.md │ └── responsive_menu_layout.py ├── simple_desktop_layout │ └── simple_desktop_layout.py ├── toasts │ ├── example.py │ ├── flet_toasts │ │ ├── __init__.py │ │ └── simple_toast.py │ └── readme.md ├── url_shortner │ ├── README.md │ └── urlShortner.py └── weather_widget │ ├── README.md │ ├── examples │ └── weather_example.py │ ├── media │ └── weather_widget.png │ ├── poetry.lock │ ├── pyproject.toml │ ├── tests │ └── __init__.py │ └── weather_widget │ ├── __init__.py │ └── weather_widget.py ├── controls ├── animations │ ├── animate-button-on-hover.py │ ├── animate-container.py │ ├── animate-offset.py │ ├── animate-opacity.py │ ├── animate-position.py │ ├── animate-rotation.py │ ├── animate-scale-docs.py │ ├── animate-scale.py │ ├── animate-single-container.py │ ├── animated-left-menu.py │ ├── animated-switcher │ │ ├── animate-image-switch-buffered.py │ │ ├── animate-image-switch.py │ │ └── animated-switcher.py │ ├── bursting-flet.py │ ├── image-slideshow.py │ ├── lottie │ │ └── lottie-basic.py │ ├── rive │ │ └── rive-basic.py │ └── rocket.py ├── buttons │ ├── elevated-button │ │ ├── basic-elevated-buttons.py │ │ ├── button-shapes.py │ │ ├── elevated-button-with-click-event.py │ │ ├── elevated-buttons-with-custom-content.py │ │ ├── elevated-buttons-with-icons.py │ │ └── styled-button.py │ ├── filled-button │ │ └── filled-button-example.py │ ├── filled-tonal-button │ │ └── filled-tonal-button-example.py │ ├── floating-action-button │ │ └── floating-action-button.py │ ├── icon-button │ │ ├── icon-button-with-click-event.py │ │ ├── icon-buttons.py │ │ └── toggle-icon-button.py │ ├── menu-item-button │ │ └── menu-item-button-example.py │ ├── outlined-button │ │ ├── basic-outlined-buttons.py │ │ ├── outlined-button-with-click-event.py │ │ ├── outlined-buttons-with-custom-content.py │ │ └── outlined-buttons-with-icons.py │ ├── popup-menu-button │ │ └── popup-button-example.py │ ├── segmented-button │ │ └── segmented-button-example.py │ ├── submenu-button │ │ └── submentu-button-example.py │ └── text-button │ │ ├── basic-text-buttons.py │ │ ├── text-button-with-click-event.py │ │ ├── text-buttons-with-custom-content.py │ │ └── text-buttons-with-icons.py ├── charts │ ├── bar-chart │ │ ├── barchart-example.py │ │ └── barchart-with-event.py │ ├── line-chart │ │ ├── line-chart-example.py │ │ └── line-chart-single-toggle.py │ ├── matplotlib-chart │ │ ├── mpl-barchart-example.py │ │ ├── mpl-contour.py │ │ ├── mpl-finance.py │ │ ├── mpl-linechart-example.py │ │ └── mpl-scatter.py │ ├── pie-chart │ │ ├── piechart-example.py │ │ ├── piechart-with-icons.py │ │ └── piechart-with-titles.py │ └── plotly-chart │ │ ├── plotly-barchart.py │ │ ├── plotly-boxchart.py │ │ ├── plotly-linechart.py │ │ └── plotly-piechart.py ├── cupertino │ ├── cupertino-buttons │ │ ├── cupertino-button-example.py │ │ ├── cupertino-filled-button-example.py │ │ ├── cupertino-segmented-button-example.py │ │ ├── cupertino-segmented-button-padding.py │ │ └── cupertino-sliding-segmented-button.py │ ├── cupertino-dialogs-alerts-panels │ │ ├── cupertino-action-sheet-example.py │ │ ├── cupertino-alert-dialog-example.py │ │ ├── cupertino-alert-dialog-simple.py │ │ ├── cupertino-context-menu-example.py │ │ ├── cupertino-date-picker-example.py │ │ ├── cupertino-picker-example.py │ │ └── cupertino-time-picker-example.py │ ├── cupertino-information-displays │ │ └── cupertino-activity-indicator-example.py │ ├── cupertino-input-and-selections │ │ ├── cupertino-checkbox-example.py │ │ ├── cupertino-checkbox-properties.py │ │ ├── cupertino-radio-example.py │ │ ├── cupertino-slider-example.py │ │ ├── cupertino-switch-example.py │ │ └── cupertino-textfield-example.py │ ├── cupertino-layout │ │ └── cupertino-list-tile-example.py │ └── cupertino-navigation │ │ ├── cupertino-appbar-example.py │ │ ├── cupertino-appbar-theme-example.py │ │ ├── cupertino-navbar-wired.py │ │ └── cupertino-navigation-bar-example.py ├── dialogs-alerts-panels │ ├── alert-dialog │ │ └── dialogs.py │ ├── banner │ │ └── banner-test.py │ ├── bottom-sheet │ │ └── modal-bottom-sheet.py │ ├── date-picker │ │ └── date-picker-basic.py │ ├── snack-bar │ │ ├── simple-snack.py │ │ └── snack-counter-example.py │ └── time-picker │ │ └── time-picker-basic.py ├── information-displays │ ├── ads │ │ └── ads-basic-example.py │ ├── canvas │ │ ├── canvas-face.py │ │ ├── canvas-flet-brush-on-image.py │ │ ├── canvas-flet-brush.py │ │ ├── canvas-flet-logo.py │ │ ├── canvas-gradients.py │ │ ├── canvas-path-bezier.py │ │ ├── canvas-path-triangles.py │ │ ├── canvas-resize.py │ │ └── canvas-text.py │ ├── circle-avatar │ │ └── avatar-test.py │ ├── icon │ │ └── icons-example.py │ ├── image │ │ ├── custom-svg-animation.py │ │ ├── image-base64.py │ │ ├── images-example.py │ │ ├── svg-image.py │ │ └── svg-lucide.py │ ├── map │ │ └── map-layers-example.py │ ├── markdown │ │ ├── markdown-basic.py │ │ ├── markdown-code-highlight.py │ │ ├── markdown-custom-theme.py │ │ ├── markdown-event-example.py │ │ └── markdown-listviews.py │ ├── progress-bar │ │ └── progress-bar.py │ ├── progress-ring │ │ ├── gauge-with-progress.py │ │ └── progress-ring.py │ ├── text │ │ ├── richtext-borders-stroke.py │ │ ├── richtext-gradient.py │ │ ├── richtext.py │ │ ├── text-custom-styles.py │ │ ├── text-theme-styles.py │ │ └── variable-weight-font.py │ └── web-view │ │ └── web-view-example.py ├── input-and-selections │ ├── auto-complete │ │ └── auto-complete-example.py │ ├── autofill-group │ │ └── autofill-example.py │ ├── checkbox │ │ ├── checkbox-basic.py │ │ ├── checkbox-with-event.py │ │ └── styled-checkbox.py │ ├── chip │ │ ├── chip-example.py │ │ └── chip-filter-example.py │ ├── dropdown │ │ ├── dropdown-example.py │ │ ├── dropdown-icon-example.py │ │ └── styled-dropdowns.py │ ├── dropdownM2 │ │ ├── basic-dropdown.py │ │ ├── dropdown-change-items.py │ │ ├── dropdown-label-and-hint.py │ │ ├── dropdown-on-change-event.py │ │ └── dropdown-random-icon.py │ ├── form-controls-misc.py │ ├── radio │ │ ├── radiogroup-basic.py │ │ ├── radiogroup-with-event.py │ │ └── styled-radio.py │ ├── range-slider │ │ ├── range-slider-example.py │ │ └── range-slider-with-event.py │ ├── search-bar │ │ ├── search-bar-example.py │ │ └── search-bar-toggle.py │ ├── slider │ │ ├── slider-basic.py │ │ ├── slider-random-change.py │ │ ├── slider-values.py │ │ └── slider-with-change.py │ ├── switch │ │ ├── switch-basic.py │ │ └── switch-with-event.py │ └── text-field │ │ ├── basic-textfields.py │ │ ├── multiline-example.py │ │ ├── password.py │ │ ├── prefix-suffix.py │ │ ├── styled-textfield.py │ │ ├── textfield-style.py │ │ ├── textfield-with-on-change.py │ │ └── underlined-borderless-example.py ├── layout │ ├── card │ │ └── card-with-buttons.py │ ├── column │ │ ├── column-alignment.py │ │ ├── column-horiz-alignment.py │ │ ├── column-infinite-list.py │ │ ├── column-scroll-misc.py │ │ ├── column-scroll-to-key.py │ │ ├── column-scroll.py │ │ ├── column-spacing.py │ │ ├── column-wrap.py │ │ └── scroll-events.py │ ├── container │ │ ├── clickable-container.py │ │ ├── container-blur.py │ │ ├── container-click-events.py │ │ ├── container-margin.py │ │ ├── container-on-resize.py │ │ ├── container-padding.py │ │ ├── container-shadow.py │ │ ├── containers-alignment.py │ │ ├── containers-background-color.py │ │ ├── containers-borders.py │ │ ├── gradients.py │ │ ├── linear-gradient.py │ │ ├── nested-themes-simple.py │ │ ├── nested-themes-switch.py │ │ ├── nested-themes.py │ │ ├── radial-gradient.py │ │ ├── simple-hover.py │ │ └── sweep-gradient.py │ ├── data-table │ │ ├── datatable-no-source.py │ │ ├── datatable-selectable.py │ │ └── simple-datatable.py │ ├── dismissable │ │ └── dismissable-listview.py │ ├── divider │ │ └── divider-horiz.py │ ├── expansion-panel-list │ │ └── expansion-panel-list.py │ ├── expansion-tile │ │ ├── expansion-tile-borders.py │ │ ├── expansion-tile-switch.py │ │ └── expansion-tile.py │ ├── grid-view │ │ └── photo-gallery.py │ ├── list-tile │ │ └── list-tile-examples.py │ ├── list-view │ │ ├── listview-scroll.py │ │ └── listview-toggle-scroll.py │ ├── page │ │ ├── app-exit-confirm-dialog.py │ │ ├── keyboard-events.py │ │ ├── set-platform.py │ │ ├── splash-test.py │ │ └── window-hidden-on-start.py │ ├── pagelet │ │ └── pagelet-example.py │ ├── placeholder │ │ └── placeholder-example.py │ ├── reorderable-list-view │ │ └── reorderable-list-view-example.py │ ├── responsive-row │ │ └── responsive-layout.py │ ├── row │ │ ├── row-alignment.py │ │ ├── row-spacing.py │ │ ├── row-vert-alignment.py │ │ └── row-wrap.py │ ├── safe-area │ │ └── safe-area-example.py │ ├── stack │ │ ├── absolute-positioned.py │ │ ├── avatar-with-status.py │ │ └── image-title.py │ ├── tabs │ │ ├── nested-tabs.py │ │ ├── tabs-dynamic.py │ │ └── tabs-simple.py │ └── vertical-divider │ │ └── divider-vert.py ├── navigation │ ├── app-bar │ │ ├── appbar-simple.py │ │ └── appbar-theme-material.py │ ├── bottom-app-bar │ │ └── bottom-appbar.py │ ├── menu-bar │ │ └── menu-bar-example.py │ ├── navigation-bar │ │ └── navigation-bar-sample.py │ ├── navigation-drawer │ │ ├── nav-drawer-end.py │ │ └── nav-drawer-example.py │ └── navigation-rail │ │ └── nav-rail-test.py ├── tooltip │ └── custom-tooltip.py └── utility │ ├── audio-recorder │ └── audio-recorder-example.py │ ├── audio │ ├── audio-autoplay.py │ ├── audio-player-async.py │ ├── audio-player-slider.py │ └── audio-player.py │ ├── drag-target-draggable │ ├── drag-drop-nesting.py │ ├── drag-drop-ordering.py │ └── dragabble-target-example.py │ ├── file-picker │ ├── file-picker-all-modes.py │ └── file-picker-upload-progress.py │ ├── flashlight │ └── flashlight-example.py │ ├── geolocator │ └── geolocator-example.py │ ├── gesture-detector │ ├── draggable-container-change-cursor.py │ ├── draggable-containers.py │ └── gestures-tester.py │ ├── haptic-feedback │ └── haptic-feedback-example.py │ ├── interactive-viewer │ └── interactive-viewer-example.py │ ├── permission-handler │ └── permission-handler-example.py │ ├── selection-area │ └── selection-area-example.py │ ├── semantics │ └── semantics-example.py │ ├── shader-mask │ ├── shader-mask-gradient.py │ ├── shader-mask-image.py │ └── shader-mask-single-image.py │ ├── shake-detector │ └── shake-detector-example.py │ ├── transparent-pointer │ └── transparent-pointer-example.py │ ├── video │ └── video-example.py │ └── window-drag-area │ └── no-frame-window.py ├── poetry.lock ├── publish-gallery.sh ├── pyproject.toml └── tutorials ├── calc ├── Dockerfile ├── calc.py ├── calc1.py ├── calc2.py ├── calc3.py ├── calc4.py ├── calc5.py ├── fly.toml └── requirements.txt ├── chat ├── Dockerfile ├── chat.py ├── chat_1.py ├── chat_2.py ├── chat_3.py ├── fly.toml └── requirements.txt ├── solitaire ├── solitaire-classes │ ├── card.py │ ├── main.py │ ├── slot.py │ └── solitaire.py ├── solitaire-drag-and-drop │ ├── step1.py │ ├── step2.py │ ├── step3.py │ └── step4.py ├── solitaire-fanned-piles │ ├── card.py │ ├── main.py │ ├── slot.py │ └── solitaire.py ├── solitaire-final-part1 │ ├── Dockerfile │ ├── assets │ │ └── images │ │ │ ├── 10_clubs.svg │ │ │ ├── 10_diamonds.svg │ │ │ ├── 10_hearts.svg │ │ │ ├── 10_spades.svg │ │ │ ├── 2_clubs.svg │ │ │ ├── 2_diamonds.svg │ │ │ ├── 2_hearts.svg │ │ │ ├── 2_spades.svg │ │ │ ├── 3_clubs.svg │ │ │ ├── 3_diamonds.svg │ │ │ ├── 3_hearts.svg │ │ │ ├── 3_spades.svg │ │ │ ├── 4_clubs.svg │ │ │ ├── 4_diamonds.svg │ │ │ ├── 4_hearts.svg │ │ │ ├── 4_spades.svg │ │ │ ├── 5_clubs.svg │ │ │ ├── 5_diamonds.svg │ │ │ ├── 5_hearts.svg │ │ │ ├── 5_spades.svg │ │ │ ├── 6_clubs.svg │ │ │ ├── 6_diamonds.svg │ │ │ ├── 6_hearts.svg │ │ │ ├── 6_spades.svg │ │ │ ├── 7_clubs.svg │ │ │ ├── 7_diamonds.svg │ │ │ ├── 7_hearts.svg │ │ │ ├── 7_spades.svg │ │ │ ├── 8_clubs.svg │ │ │ ├── 8_diamonds.svg │ │ │ ├── 8_hearts.svg │ │ │ ├── 8_spades.svg │ │ │ ├── 9_clubs.svg │ │ │ ├── 9_diamonds.svg │ │ │ ├── 9_hearts.svg │ │ │ ├── 9_spades.svg │ │ │ ├── Ace_clubs.svg │ │ │ ├── Ace_diamonds.svg │ │ │ ├── Ace_hearts.svg │ │ │ ├── Ace_spades.svg │ │ │ ├── Jack_clubs.svg │ │ │ ├── Jack_diamonds.svg │ │ │ ├── Jack_hearts.svg │ │ │ ├── Jack_spades.svg │ │ │ ├── King_clubs.svg │ │ │ ├── King_diamonds.svg │ │ │ ├── King_hearts.svg │ │ │ ├── King_spades.svg │ │ │ ├── Queen_clubs.svg │ │ │ ├── Queen_diamonds.svg │ │ │ ├── Queen_hearts.svg │ │ │ ├── Queen_spades.svg │ │ │ └── card_back.png │ ├── card.py │ ├── fly.toml │ ├── main.py │ ├── requirements.txt │ ├── slot.py │ └── solitaire.py ├── solitaire-final │ ├── assets │ │ └── images │ │ │ ├── 10_clubs.svg │ │ │ ├── 10_diamonds.svg │ │ │ ├── 10_hearts.svg │ │ │ ├── 10_spades.svg │ │ │ ├── 2_clubs.svg │ │ │ ├── 2_diamonds.svg │ │ │ ├── 2_hearts.svg │ │ │ ├── 2_spades.svg │ │ │ ├── 3_clubs.svg │ │ │ ├── 3_diamonds.svg │ │ │ ├── 3_hearts.svg │ │ │ ├── 3_spades.svg │ │ │ ├── 4_clubs.svg │ │ │ ├── 4_diamonds.svg │ │ │ ├── 4_hearts.svg │ │ │ ├── 4_spades.svg │ │ │ ├── 5_clubs.svg │ │ │ ├── 5_diamonds.svg │ │ │ ├── 5_hearts.svg │ │ │ ├── 5_spades.svg │ │ │ ├── 6_clubs.svg │ │ │ ├── 6_diamonds.svg │ │ │ ├── 6_hearts.svg │ │ │ ├── 6_spades.svg │ │ │ ├── 7_clubs.svg │ │ │ ├── 7_diamonds.svg │ │ │ ├── 7_hearts.svg │ │ │ ├── 7_spades.svg │ │ │ ├── 8_clubs.svg │ │ │ ├── 8_diamonds.svg │ │ │ ├── 8_hearts.svg │ │ │ ├── 8_spades.svg │ │ │ ├── 9_clubs.svg │ │ │ ├── 9_diamonds.svg │ │ │ ├── 9_hearts.svg │ │ │ ├── 9_spades.svg │ │ │ ├── Ace_clubs.svg │ │ │ ├── Ace_diamonds.svg │ │ │ ├── Ace_hearts.svg │ │ │ ├── Ace_spades.svg │ │ │ ├── Jack_clubs.svg │ │ │ ├── Jack_diamonds.svg │ │ │ ├── Jack_hearts.svg │ │ │ ├── Jack_spades.svg │ │ │ ├── King_clubs.svg │ │ │ ├── King_diamonds.svg │ │ │ ├── King_hearts.svg │ │ │ ├── King_spades.svg │ │ │ ├── Queen_clubs.svg │ │ │ ├── Queen_diamonds.svg │ │ │ ├── Queen_hearts.svg │ │ │ ├── Queen_spades.svg │ │ │ ├── card.png │ │ │ ├── card_back0.png │ │ │ ├── card_back1.png │ │ │ ├── card_back1.svg │ │ │ ├── card_back2.png │ │ │ ├── card_back2.svg │ │ │ ├── card_back3.png │ │ │ ├── card_back3.svg │ │ │ └── card_back4.svg │ ├── card.py │ ├── layout.py │ ├── main.py │ ├── settings.py │ ├── slot.py │ └── solitaire.py ├── solitaire-game-rules │ ├── assets │ │ └── images │ │ │ ├── 10_clubs.svg │ │ │ ├── 10_diamonds.svg │ │ │ ├── 10_hearts.svg │ │ │ ├── 10_spades.svg │ │ │ ├── 2_clubs.svg │ │ │ ├── 2_diamonds.svg │ │ │ ├── 2_hearts.svg │ │ │ ├── 2_spades.svg │ │ │ ├── 3_clubs.svg │ │ │ ├── 3_diamonds.svg │ │ │ ├── 3_hearts.svg │ │ │ ├── 3_spades.svg │ │ │ ├── 4_clubs.svg │ │ │ ├── 4_diamonds.svg │ │ │ ├── 4_hearts.svg │ │ │ ├── 4_spades.svg │ │ │ ├── 5_clubs.svg │ │ │ ├── 5_diamonds.svg │ │ │ ├── 5_hearts.svg │ │ │ ├── 5_spades.svg │ │ │ ├── 6_clubs.svg │ │ │ ├── 6_diamonds.svg │ │ │ ├── 6_hearts.svg │ │ │ ├── 6_spades.svg │ │ │ ├── 7_clubs.svg │ │ │ ├── 7_diamonds.svg │ │ │ ├── 7_hearts.svg │ │ │ ├── 7_spades.svg │ │ │ ├── 8_clubs.svg │ │ │ ├── 8_diamonds.svg │ │ │ ├── 8_hearts.svg │ │ │ ├── 8_spades.svg │ │ │ ├── 9_clubs.svg │ │ │ ├── 9_diamonds.svg │ │ │ ├── 9_hearts.svg │ │ │ ├── 9_spades.svg │ │ │ ├── Ace_clubs.svg │ │ │ ├── Ace_diamonds.svg │ │ │ ├── Ace_hearts.svg │ │ │ ├── Ace_spades.svg │ │ │ ├── Jack_clubs.svg │ │ │ ├── Jack_diamonds.svg │ │ │ ├── Jack_hearts.svg │ │ │ ├── Jack_spades.svg │ │ │ ├── King_clubs.svg │ │ │ ├── King_diamonds.svg │ │ │ ├── King_hearts.svg │ │ │ ├── King_spades.svg │ │ │ ├── Queen_clubs.svg │ │ │ ├── Queen_diamonds.svg │ │ │ ├── Queen_hearts.svg │ │ │ ├── Queen_spades.svg │ │ │ └── card_back.png │ ├── card.py │ ├── main.py │ ├── slot.py │ └── solitaire.py ├── solitaire-game-setup │ ├── assets │ │ └── images │ │ │ ├── 10_clubs.svg │ │ │ ├── 10_diamonds.svg │ │ │ ├── 10_hearts.svg │ │ │ ├── 10_spades.svg │ │ │ ├── 2_clubs.svg │ │ │ ├── 2_diamonds.svg │ │ │ ├── 2_hearts.svg │ │ │ ├── 2_spades.svg │ │ │ ├── 3_clubs.svg │ │ │ ├── 3_diamonds.svg │ │ │ ├── 3_hearts.svg │ │ │ ├── 3_spades.svg │ │ │ ├── 4_clubs.svg │ │ │ ├── 4_diamonds.svg │ │ │ ├── 4_hearts.svg │ │ │ ├── 4_spades.svg │ │ │ ├── 5_clubs.svg │ │ │ ├── 5_diamonds.svg │ │ │ ├── 5_hearts.svg │ │ │ ├── 5_spades.svg │ │ │ ├── 6_clubs.svg │ │ │ ├── 6_diamonds.svg │ │ │ ├── 6_hearts.svg │ │ │ ├── 6_spades.svg │ │ │ ├── 7_clubs.svg │ │ │ ├── 7_diamonds.svg │ │ │ ├── 7_hearts.svg │ │ │ ├── 7_spades.svg │ │ │ ├── 8_clubs.svg │ │ │ ├── 8_diamonds.svg │ │ │ ├── 8_hearts.svg │ │ │ ├── 8_spades.svg │ │ │ ├── 9_clubs.svg │ │ │ ├── 9_diamonds.svg │ │ │ ├── 9_hearts.svg │ │ │ ├── 9_spades.svg │ │ │ ├── Ace_clubs.svg │ │ │ ├── Ace_diamonds.svg │ │ │ ├── Ace_hearts.svg │ │ │ ├── Ace_spades.svg │ │ │ ├── Jack_clubs.svg │ │ │ ├── Jack_diamonds.svg │ │ │ ├── Jack_hearts.svg │ │ │ ├── Jack_spades.svg │ │ │ ├── King_clubs.svg │ │ │ ├── King_diamonds.svg │ │ │ ├── King_hearts.svg │ │ │ ├── King_spades.svg │ │ │ ├── Queen_clubs.svg │ │ │ ├── Queen_diamonds.svg │ │ │ ├── Queen_hearts.svg │ │ │ ├── Queen_spades.svg │ │ │ └── card_back.png │ ├── card.py │ ├── main.py │ ├── slot.py │ └── solitaire.py ├── solitaire-layout.drawio └── solitaire-layout.svg └── todo ├── to-do-1.py ├── to-do-2.py ├── to-do-3.py ├── to-do-4.py ├── to-do-5.py └── to-do-hello.py /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | .DS_Store 3 | .vscode/ 4 | .venv/ 5 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Flet examples 2 | 3 | This repository contains Flet sample applications you can use to learn Flet or as a starting point for your own great apps. 4 | -------------------------------------------------------------------------------- /python/apps/autocomplete-searcher/names.py: -------------------------------------------------------------------------------- 1 | NAMES = [ 2 | 'Adam', 3 | 'William', 4 | 'Emma', 5 | 'Alexander', 6 | 'Julia', 7 | 'Elias', 8 | 'Hugo', 9 | 'Alice', 10 | 'Emil', 11 | 'Anton', 12 | 'Ebba', 13 | 'Elin', 14 | 'Oliver', 15 | 'Axel', 16 | 'Maja', 17 | 'Ella', 18 | 'Alva', 19 | 'Liam', 20 | 'Albin', 21 | 'Elsa', 22 | 'Erik', 23 | 'Ida', 24 | 'Oscar', 25 | 'Wilma' 26 | ] 27 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM python:3-alpine 2 | 3 | WORKDIR /app 4 | 5 | COPY . . 6 | 7 | RUN pip install --no-cache-dir . 8 | 9 | EXPOSE 8000 10 | 11 | CMD ["python", "main.py"] -------------------------------------------------------------------------------- /python/apps/controls-gallery/assets/RobotoMono-VariableFont_wght.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flet-dev/examples/2545ad18af084211c97ab012b31c9aca02e90266/python/apps/controls-gallery/assets/RobotoMono-VariableFont_wght.ttf -------------------------------------------------------------------------------- /python/apps/controls-gallery/assets/RobotoSlab[wght].ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flet-dev/examples/2545ad18af084211c97ab012b31c9aca02e90266/python/apps/controls-gallery/assets/RobotoSlab[wght].ttf -------------------------------------------------------------------------------- /python/apps/controls-gallery/assets/column.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/assets/datatable.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/assets/github-mark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/assets/gridview.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/assets/page.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/animations/animated_switcher/index.py: -------------------------------------------------------------------------------- 1 | name = "AnimatedSwitcher" 2 | 3 | description = """A control that by default does a cross-fade between a new control and the control previously set on the AnimatedSwitcher as a `content`.""" 4 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/buttons/cupertinoactionsheetaction/index.py: -------------------------------------------------------------------------------- 1 | name = "CupertinoActionSheetAction" 2 | description = """An action button typically used in CupertinoActionSheet.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/buttons/cupertinobutton/01_cupertino_button_example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "CupertinoButton example" 4 | 5 | 6 | def example(): 7 | button = ft.CupertinoButton( 8 | content=ft.Text("CupertinoButton"), 9 | opacity_on_click=0.3, 10 | on_click=lambda e: print("Normal CupertinoButton clicked!"), 11 | ) 12 | 13 | return button 14 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/buttons/cupertinobutton/index.py: -------------------------------------------------------------------------------- 1 | name = "CupertinoButton" 2 | description = """An iOS-style button.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/buttons/cupertinodialogaction/index.py: -------------------------------------------------------------------------------- 1 | name = "CupertinoDialogAction" 2 | description = """A button typically used in a CupertinoAlertDialog.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/buttons/cupertinofilledbutton/01_cupertino_filled_button_example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "CupertinoFilledButton example" 4 | 5 | 6 | def example(): 7 | button = ft.CupertinoFilledButton( 8 | content=ft.Text("CupertinoButton"), 9 | opacity_on_click=0.3, 10 | on_click=lambda e: print("CupertinoFilledButton clicked!"), 11 | ) 12 | 13 | return button 14 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/buttons/cupertinofilledbutton/index.py: -------------------------------------------------------------------------------- 1 | name = "CupertinoFilledButton" 2 | description = """An iOS-style button with filled with background color.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/buttons/cupertinosegmentedbutton/01_cupertino_segmented_button_example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "CupertinoSegmentedButton example" 4 | 5 | 6 | def example(): 7 | 8 | return ft.CupertinoSegmentedButton( 9 | selected_index=1, 10 | selected_color=ft.Colors.RED_400, 11 | on_change=lambda e: print(f"selected_index: {e.data}"), 12 | controls=[ 13 | ft.Text("One"), 14 | ft.Container( 15 | padding=ft.padding.symmetric(0, 30), 16 | content=ft.Text("Two"), 17 | ), 18 | ft.Container( 19 | padding=ft.padding.symmetric(0, 10), 20 | content=ft.Text("Three"), 21 | ), 22 | ], 23 | ) 24 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/buttons/cupertinosegmentedbutton/index.py: -------------------------------------------------------------------------------- 1 | name = "CupertinoSegmentedButton" 2 | description = """An iOS-style segmented button.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/buttons/cupertinoslidingsegmentedbutton/01_cupertino_sliding_segmented_button_example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "CupertinoSlidingSegmentedButton example" 4 | 5 | 6 | def example(): 7 | 8 | return ft.CupertinoSlidingSegmentedButton( 9 | selected_index=1, 10 | thumb_color=ft.Colors.BLUE_400, 11 | on_change=lambda e: print(f"selected_index: {e.data}"), 12 | padding=ft.padding.symmetric(0, 10), 13 | controls=[ 14 | ft.Text("One"), 15 | ft.Text("Two"), 16 | ft.Text("Three"), 17 | ], 18 | ) 19 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/buttons/cupertinoslidingsegmentedbutton/index.py: -------------------------------------------------------------------------------- 1 | name = "CupertinoSlidingSegmentedButton" 2 | description = """An iOS-13 style segmented control.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/buttons/elevatedbutton/01_basic_elevatedbuttons.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "Basic ElevatedButtons" 4 | 5 | 6 | def example(): 7 | return ft.Column( 8 | controls=[ 9 | ft.ElevatedButton(text="Elevated button"), 10 | ft.ElevatedButton("Disabled button", disabled=True), 11 | ] 12 | ) 13 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/buttons/elevatedbutton/02_elevatedbuttons_with_icons.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "ElevatedButtons with icons" 4 | 5 | 6 | def example(): 7 | return ft.Column( 8 | controls=[ 9 | ft.ElevatedButton("Button with icon", icon="chair_outlined"), 10 | ft.ElevatedButton( 11 | "Button with colorful icon", 12 | icon="park_rounded", 13 | icon_color="green400", 14 | ), 15 | ] 16 | ) 17 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/buttons/elevatedbutton/03_elevatedbutton_with_click_event.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "ElevatedButton with 'click' event" 4 | 5 | 6 | def example(): 7 | def button_clicked(e): 8 | b.data += 1 9 | t.value = f"Button clicked {b.data} time(s)" 10 | t.update() 11 | 12 | b = ft.ElevatedButton("Button with 'click' event", on_click=button_clicked, data=0) 13 | t = ft.Text() 14 | 15 | return ft.Column(controls=[b, t]) 16 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/buttons/elevatedbutton/05_elevatedbutton_with_url.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "ElevatedButton with url" 4 | 5 | def example(): 6 | 7 | 8 | 9 | b = ft.ElevatedButton("Button with Google url", url="https://google.com") 10 | t = ft.Text() 11 | 12 | return ft.Column(controls=[ 13 | b, 14 | t 15 | ]) -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/buttons/elevatedbutton/index.py: -------------------------------------------------------------------------------- 1 | name = "ElevatedButton" 2 | description = """Elevated buttons are essentially filled tonal buttons with a shadow. To prevent shadow creep, only use them when absolutely necessary, such as when the button requires visual separation from a patterned background.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/buttons/filledbutton/01_filledbuttons_example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "FilledButtons example" 4 | 5 | def example(): 6 | 7 | return ft.Column(controls=[ 8 | ft.FilledButton(text="Filled button"), 9 | ft.FilledButton("Disabled button", disabled=True), 10 | ft.FilledButton("Button with icon", icon="add") 11 | ]) -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/buttons/filledbutton/index.py: -------------------------------------------------------------------------------- 1 | name = "FilledButton" 2 | description = """Filled buttons have the most visual impact after the FloatingActionButton, and should be used for important, final actions that complete a flow, like Save, Join now, or Confirm.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/buttons/filledtonalbutton/01_filledtonalbuttons_example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "FilledTonalButtons example" 4 | 5 | def example(): 6 | 7 | return ft.Column(controls=[ 8 | ft.FilledTonalButton(text="FilledTonalButton"), 9 | ft.FilledTonalButton("Disabled button", disabled=True), 10 | ft.FilledTonalButton("Button with icon", icon="add") 11 | ]) -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/buttons/filledtonalbutton/index.py: -------------------------------------------------------------------------------- 1 | name = "FilledTonalButton" 2 | description = """A filled tonal button is an alternative middle ground between FilledButton and OutlinedButton buttons. They’re useful in contexts where a lower-priority button requires slightly more emphasis than an outline would give, such as "Next" in an onboarding flow. Tonal buttons use the secondary color mapping.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/buttons/floatingactionbutton/index.py: -------------------------------------------------------------------------------- 1 | name = "FloatingActionButton" 2 | description = """A material design floating action button. A floating action button is a circular icon button that hovers over content to promote a primary action in the application. Floating action button is usually set to page.floating_action_button, but can also be added as a regular control at any place on a page.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/buttons/iconbutton/01_iconbuttons_example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "IconButtons example" 4 | 5 | 6 | def example(): 7 | 8 | return ft.Row( 9 | [ 10 | ft.IconButton( 11 | icon=ft.Icons.PAUSE_CIRCLE_FILLED_ROUNDED, 12 | icon_color="blue400", 13 | icon_size=20, 14 | tooltip="Pause record", 15 | ), 16 | ft.IconButton( 17 | icon=ft.Icons.DELETE_FOREVER_ROUNDED, 18 | icon_color="pink600", 19 | icon_size=40, 20 | tooltip="Delete record", 21 | ), 22 | ] 23 | ) 24 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/buttons/iconbutton/02_iconbutton_with_click_event.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "IconButton with `click` event" 4 | 5 | 6 | def example(): 7 | def button_clicked(e): 8 | b.data += 1 9 | t.value = f"Button clicked {b.data} time(s)" 10 | t.update() 11 | 12 | b = ft.IconButton( 13 | icon=ft.Icons.PLAY_CIRCLE_FILL_OUTLINED, on_click=button_clicked, data=0 14 | ) 15 | t = ft.Text() 16 | 17 | return ft.Column([b, t]) 18 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/buttons/iconbutton/index.py: -------------------------------------------------------------------------------- 1 | name = "IconButton" 2 | description = """An icon button is a round button with an icon in the middle that reacts to touches by filling with color (ink). 3 | 4 | Icon buttons are commonly used in the toolbars, but they can be used in many other places as well.""" 5 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/buttons/menuitembutton/index.py: -------------------------------------------------------------------------------- 1 | name = "MenuItemButton" 2 | description = """A button for use in a MenuBar or on its own, that can be activated by click or keyboard navigation.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/buttons/outlinedbutton/01_basic_outlined_buttons.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "Basic OutlinedButtons" 4 | 5 | def example(): 6 | 7 | return ft.Column( 8 | [ 9 | ft.OutlinedButton(text="Outlined button"), 10 | ft.OutlinedButton("Disabled button", disabled=True) 11 | ] 12 | ) -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/buttons/outlinedbutton/02_outlinedbuttons_with_icons.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "OutlinedButtons with icons" 4 | 5 | def example(): 6 | 7 | return ft.Column( 8 | [ 9 | ft.OutlinedButton("Button with icon", icon="chair_outlined"), 10 | ft.OutlinedButton( 11 | "Button with colorful icon", 12 | icon="park_rounded", 13 | icon_color="green400", 14 | ) 15 | ] 16 | ) -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/buttons/outlinedbutton/03_outlinedbutton_with_click_event.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "OutlinedButton with `click` event" 4 | 5 | 6 | def example(): 7 | def button_clicked(e): 8 | b.data += 1 9 | t.value = f"Button clicked {b.data} time(s)" 10 | t.update() 11 | 12 | b = ft.OutlinedButton("Button with 'click' event", on_click=button_clicked, data=0) 13 | t = ft.Text() 14 | 15 | return ft.Column([b, t]) 16 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/buttons/outlinedbutton/index.py: -------------------------------------------------------------------------------- 1 | name = "OutlinedButton" 2 | description = """Outlined buttons are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app. Outlined buttons pair well with filled buttons to indicate an alternative, secondary action.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/buttons/popupmenubutton/index.py: -------------------------------------------------------------------------------- 1 | name = "PopupMenuButton" 2 | description = """An icon button which displays a menu when clicked.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/buttons/segmentedbutton/index.py: -------------------------------------------------------------------------------- 1 | name = "SegmentedButton" 2 | description = """A Material button that allows the user to select from limited set of options and are typically used in cases where there are only 2-5 options.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/buttons/submenubutton/index.py: -------------------------------------------------------------------------------- 1 | name = "SubmenuButton" 2 | description = """A menu button that displays a cascading menu. 3 | 4 | It can be used as part of a MenuBar, or as a standalone control.""" 5 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/buttons/textbutton/01_basic_textbuttons.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "Basic TextButtons" 4 | 5 | def example(): 6 | 7 | return ft.Column( 8 | [ 9 | ft.TextButton(text="Text button"), 10 | ft.TextButton("Disabled button", disabled=True) 11 | ] 12 | ) -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/buttons/textbutton/02_textbuttons_with_icons.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "TextButtons with icons" 4 | 5 | def example(): 6 | 7 | return ft.Column( 8 | [ 9 | ft.TextButton("Button with icon", icon="chair_outlined"), 10 | ft.TextButton( 11 | "Button with colorful icon", 12 | icon="park_rounded", 13 | icon_color="green400", 14 | ) 15 | ] 16 | ) -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/buttons/textbutton/03_textbutton_with_click_event.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "TextButtons with `click` event" 4 | 5 | 6 | def example(): 7 | def button_clicked(e): 8 | b.data += 1 9 | t.value = f"Button clicked {b.data} time(s)" 10 | t.update() 11 | 12 | b = ft.TextButton("Button with 'click' event", on_click=button_clicked, data=0) 13 | t = ft.Text() 14 | 15 | return ft.Column([b, t]) 16 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/buttons/textbutton/index.py: -------------------------------------------------------------------------------- 1 | name = "TextButton" 2 | description = """Text buttons are used for the lowest priority actions, especially when presenting multiple options. Text buttons can be placed on a variety of backgrounds. Until the button is interacted with, its container isn’t visible.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/charts/barchart/index.py: -------------------------------------------------------------------------------- 1 | name = "BarChart" 2 | description = """Draws a bar chart.""" -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/charts/linechart/index.py: -------------------------------------------------------------------------------- 1 | name = "LineChart" 2 | description = """Draws a line chart.""" -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/charts/piechart/index.py: -------------------------------------------------------------------------------- 1 | name = "PieChart" 2 | description = """Draws a pie chart.""" -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/colors/colorpalettes/index.py: -------------------------------------------------------------------------------- 1 | name = "Color palettes" 2 | description = """These color palettes, originally created by Material Design in 2014, are comprised of colors designed to work together harmoniously, and can be used to develop your brand palette.""" -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/colors/controlcolors/index.py: -------------------------------------------------------------------------------- 1 | name = "Using colors" 2 | description = """Examples of controls color properties defined on different levels.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/colors/cupertinocolors/index.py: -------------------------------------------------------------------------------- 1 | name = "Cupertino Colors" 2 | description = """A palette of Color constants that describe colors commonly used when matching the iOS platform aesthetics.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/colors/themecolors/02_customize_theme_colors.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "Customize Theme colors" 4 | 5 | 6 | def example(): 7 | def set_primary_color(e): 8 | e.control.page.theme = ft.Theme( 9 | color_scheme=ft.Colorscheme( 10 | primary=ft.Colors.GREEN, 11 | ), 12 | ) 13 | e.control.page.update() 14 | 15 | return ft.FilledButton("Set Primary Color to GREEN", on_click=set_primary_color) 16 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/colors/themecolors/index.py: -------------------------------------------------------------------------------- 1 | name = "Theme colors" 2 | description = """A set of 30 colors based on the Material 3 color system that can be used to configure the color properties of most controls.""" -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/contrib/colorpicker/02_color_picker_color_property.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "ColorPicker color property" 4 | 5 | 6 | def example(): 7 | from flet_contrib.color_picker import ColorPicker 8 | 9 | color_picker = ColorPicker(color="#c8df6f") 10 | new_color = ft.TextField(label="Color in #RRGGBB format") 11 | 12 | def change_color(e): 13 | color_picker.color = new_color.value 14 | color_picker.update() 15 | 16 | return ft.Column( 17 | [ 18 | color_picker, 19 | new_color, 20 | ft.FilledButton("Change color", on_click=change_color), 21 | ] 22 | ) 23 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/contrib/colorpicker/index.py: -------------------------------------------------------------------------------- 1 | name = "ColorPicker" 2 | description = """ColorPicker control is used for picking a color from color map in hex (rgb) format.""" -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/dialogs/alertdialog/index.py: -------------------------------------------------------------------------------- 1 | name = "AlertDialog" 2 | description = """A material design alert dialog. 3 | 4 | An alert dialog informs the user about situations that require acknowledgement. An alert dialog has an optional title and an optional list of actions. The title is displayed above the content and the actions are displayed below the content.""" 5 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/dialogs/banner/index.py: -------------------------------------------------------------------------------- 1 | name = "Banner" 2 | description = """A banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). A user action is required for it to be dismissed. 3 | 4 | Banners are displayed at the top of the screen, below a top app bar. They are persistent and non-modal, allowing the user to either ignore them or interact with them at any time.""" 5 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/dialogs/bottomsheet/index.py: -------------------------------------------------------------------------------- 1 | name = "BottomSheet" 2 | description = """Shows a modal Material Design bottom sheet. 3 | 4 | A modal bottom sheet is an alternative to a menu or a dialog and prevents the user from interacting with the rest of the app.""" 5 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/dialogs/cupertinoactionsheet/index.py: -------------------------------------------------------------------------------- 1 | name = "CupertinoActionSheet" 2 | description = """An iOS-style action sheet.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/dialogs/cupertinoalertdialog/index.py: -------------------------------------------------------------------------------- 1 | name = "CupertinoAlertDialog" 2 | description = """An iOS-style alert dialog.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/dialogs/cupertinobottomsheet/02_cupertino_bottom_sheet_with_date_picker_example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "CupertinoBottomSheet with CupertinoDatePicker Example" 4 | 5 | 6 | def example(): 7 | 8 | return ft.OutlinedButton( 9 | "Show CupertinoDatePicker", 10 | on_click=lambda e: e.control.page.open( 11 | ft.CupertinoBottomSheet( 12 | ft.CupertinoDatePicker( 13 | on_change=lambda e: print(e.data), 14 | date_picker_mode=ft.CupertinoDatePickerMode.DATE_AND_TIME, 15 | ), 16 | height=216, 17 | bgcolor=ft.CupertinoColors.SYSTEM_BACKGROUND, 18 | padding=ft.padding.only(top=6), 19 | ) 20 | ), 21 | ) 22 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/dialogs/cupertinobottomsheet/index.py: -------------------------------------------------------------------------------- 1 | name = "CupertinoBottomSheet" 2 | description = """An iOS-style bottom sheet.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/dialogs/cupertinocontextmenu/index.py: -------------------------------------------------------------------------------- 1 | name = "CupertinoContextMenu" 2 | description = ( 3 | """A full-screen modal route that opens when it's content is long-pressed.""" 4 | ) 5 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/dialogs/cupertinodatepicker/01_cupertino_date_picker_example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "CupertinoDatePicker example" 4 | 5 | 6 | def example(): 7 | 8 | return ft.OutlinedButton( 9 | "Show CupertinoDatePicker", 10 | on_click=lambda e: e.control.page.open( 11 | ft.CupertinoBottomSheet( 12 | ft.CupertinoDatePicker( 13 | on_change=lambda e: print(e.data), 14 | date_picker_mode=ft.CupertinoDatePickerMode.DATE_AND_TIME, 15 | ), 16 | height=216, 17 | bgcolor=ft.CupertinoColors.SYSTEM_BACKGROUND, 18 | padding=ft.padding.only(top=6), 19 | ) 20 | ), 21 | ) 22 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/dialogs/cupertinodatepicker/index.py: -------------------------------------------------------------------------------- 1 | name = "CupertinoDatePicker" 2 | description = """An iOS-style date and time picker dialog.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/dialogs/cupertinopicker/index.py: -------------------------------------------------------------------------------- 1 | name = "CupertinoPicker" 2 | description = """An iOS-styled picker.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/dialogs/cupertinotimerpicker/index.py: -------------------------------------------------------------------------------- 1 | name = "CupertinoTimerPicker" 2 | description = """A countdown timer picker in iOS style.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/dialogs/datepicker/index.py: -------------------------------------------------------------------------------- 1 | name = "DatePicker" 2 | description = """A Material-style date picker dialog.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/dialogs/snackbar/01_snackbar_with_dynamic_message.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "SnackBar with dynamic message" 4 | 5 | 6 | def example(): 7 | class Data: 8 | def __init__(self) -> None: 9 | self.counter = 0 10 | 11 | d = Data() 12 | 13 | def on_click(e): 14 | # e.control.page.snack_bar = ft.SnackBar(ft.Text(f"Hello {d.counter}")) 15 | # e.control.page.snack_bar.open = True 16 | snackbar = ft.SnackBar(ft.Text(f"Hello {d.counter}")) 17 | e.control.page.overlay.append(snackbar) 18 | snackbar.open = True 19 | d.counter += 1 20 | e.control.page.update() 21 | 22 | return ft.ElevatedButton("Open SnackBar", on_click=on_click) 23 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/dialogs/snackbar/index.py: -------------------------------------------------------------------------------- 1 | name = "SnackBar" 2 | description = """A lightweight message with an optional action which briefly displays at the bottom of the screen.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/dialogs/timepicker/index.py: -------------------------------------------------------------------------------- 1 | name = "TimePicker" 2 | description = """A Material-style time picker dialog.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/displays/badge/index.py: -------------------------------------------------------------------------------- 1 | name = "Badge" 2 | description = """Badges are used to show notifications, counts, or status information about its child icon.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/displays/canvas/01_canvas_basic_usage.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "Basic usage" 4 | 5 | def example(): 6 | import math 7 | import flet.canvas as cv 8 | 9 | stroke_paint = ft.Paint(stroke_width=2, style=ft.PaintingStyle.STROKE) 10 | fill_paint = ft.Paint(style=ft.PaintingStyle.FILL) 11 | 12 | return cv.Canvas( 13 | [ 14 | cv.Circle(100, 100, 50, stroke_paint), 15 | cv.Circle(80, 90, 10, stroke_paint), 16 | cv.Circle(84, 87, 5, fill_paint), 17 | cv.Circle(120, 90, 10, stroke_paint), 18 | cv.Circle(124, 87, 5, fill_paint), 19 | cv.Arc(70, 95, 60, 40, 0, math.pi, paint=stroke_paint), 20 | ], 21 | width=200, 22 | height=200, 23 | ) -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/displays/canvas/index.py: -------------------------------------------------------------------------------- 1 | name = "Canvas" 2 | description = """Canvas is a control for drawing arbitrary graphics using a set of primitives or "shapes" such as line, arc, path and text.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/displays/circleavatar/index.py: -------------------------------------------------------------------------------- 1 | name = "CircleAvatar" 2 | description = """A circle that represents a user. 3 | 4 | Typically used with a user's profile image, or, in the absence of such an image, the user's initials. A given user's initials should always be paired with the same background color, for consistency.""" 5 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/displays/cupertinoactivityindicator/01_cupertino_activity_indicator_example.py: -------------------------------------------------------------------------------- 1 | import asyncio 2 | 3 | import flet as ft 4 | 5 | name = "CupertinoActivityIndicator Example" 6 | 7 | 8 | def example(): 9 | 10 | return ft.CupertinoActivityIndicator( 11 | radius=50, 12 | color=ft.Colors.RED, 13 | animating=True, 14 | ) 15 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/displays/cupertinoactivityindicator/index.py: -------------------------------------------------------------------------------- 1 | name = "CupertinoActivityIndicator" 2 | description = """An iOS-style activity indicator that spins clockwise.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/displays/icon/01_icons_with_different_colors_and_sizes.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "Icons with different colors and sizes" 4 | 5 | 6 | def example(): 7 | 8 | return ft.Row( 9 | [ 10 | ft.Icon(name=ft.Icons.FAVORITE, color=ft.Colors.PINK), 11 | ft.Icon(name=ft.Icons.AUDIOTRACK, color=ft.Colors.GREEN_400, size=30), 12 | ft.Icon(name=ft.Icons.BEACH_ACCESS, color=ft.Colors.BLUE, size=50), 13 | ft.Icon(name="settings", color="#c1c1c1"), 14 | ] 15 | ) 16 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/displays/icon/index.py: -------------------------------------------------------------------------------- 1 | name = "Icon" 2 | description = """Displays a Material icon.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/displays/image/01_images_example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "Images Example" 4 | 5 | def example(): 6 | img = ft.Image( 7 | src="logo.svg", 8 | width=100, 9 | height=100, 10 | fit=ft.ImageFit.CONTAIN, 11 | ) 12 | images = ft.Row(width=600, wrap=False, scroll="always") 13 | 14 | for i in range(0, 30): 15 | images.controls.append( 16 | ft.Image( 17 | src=f"https://picsum.photos/200/200?{i}", 18 | width=200, 19 | height=200, 20 | fit=ft.ImageFit.NONE, 21 | repeat=ft.ImageRepeat.NO_REPEAT, 22 | border_radius=ft.border_radius.all(10), 23 | ) 24 | ) 25 | 26 | return ft.Column( 27 | #width=400, 28 | #height=400, 29 | controls=[ 30 | img, 31 | images, 32 | 33 | ]) -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/displays/image/index.py: -------------------------------------------------------------------------------- 1 | name = "Image" 2 | description = ( 3 | """An image is a graphic representation of something (e.g photo or illustration).""" 4 | ) 5 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/displays/map/index.py: -------------------------------------------------------------------------------- 1 | name = "Map" 2 | description = """Used to display a map with various layers.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/displays/markdown/index.py: -------------------------------------------------------------------------------- 1 | name = "Markdown" 2 | description = """Control for rendering text in markdown format.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/displays/progressbar/index.py: -------------------------------------------------------------------------------- 1 | name = "ProgressBar" 2 | description = """A material design linear progress indicator, also known as a progress bar. 3 | 4 | A control that shows progress along a line.""" 5 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/displays/progressring/index.py: -------------------------------------------------------------------------------- 1 | name = "ProgressRing" 2 | description = """A material design circular progress indicator, which spins to indicate that the application is busy. 3 | 4 | A control that shows progress along a circle.""" 5 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/displays/text/07_rich_text_with_gradient.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "Rich text with gradient" 4 | 5 | 6 | def example(): 7 | 8 | return ft.Text( 9 | spans=[ 10 | ft.TextSpan( 11 | "Greetings, planet!", 12 | ft.TextStyle( 13 | size=40, 14 | weight=ft.FontWeight.BOLD, 15 | foreground=ft.Paint( 16 | gradient=ft.PaintLinearGradient( 17 | (0, 20), (150, 20), [ft.Colors.RED, ft.Colors.YELLOW] 18 | ) 19 | ), 20 | ), 21 | ), 22 | ], 23 | ) 24 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/displays/text/08_selectable_text.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "Selectable Text controls" 4 | 5 | 6 | def example(): 7 | return ft.Column( 8 | controls=[ 9 | ft.SelectionArea( 10 | content=ft.Column( 11 | [ft.Text("Selectable text"), ft.Text("Also selectable")] 12 | ) 13 | ), 14 | ft.Text("Not selectable"), 15 | ] 16 | ) 17 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/displays/text/index.py: -------------------------------------------------------------------------------- 1 | name = "Text" 2 | description = """Text is a control for displaying text.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/input/autocomplete/01_autocomplete_example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = """AutoComplete example""" 4 | 5 | 6 | def example(): 7 | 8 | return ft.Column( 9 | [ 10 | ft.AutoComplete( 11 | suggestions=[ 12 | ft.AutoCompleteSuggestion(key="one 1", value="One"), 13 | ft.AutoCompleteSuggestion(key="two 2", value="Two"), 14 | ft.AutoCompleteSuggestion(key="three 3", value="Three"), 15 | ], 16 | on_select=lambda e: print(e.control.selected_index, e.selection), 17 | ), 18 | ft.Text("Type in 1, 2 or 3 to receive suggestions."), 19 | ] 20 | ) 21 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/input/autocomplete/02_autocomplete_properties.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = """AutoComplete with different properties""" 4 | 5 | 6 | def example(): 7 | 8 | autocomplete = ft.AutoComplete( 9 | suggestions=[ 10 | ft.AutoCompleteSuggestion(key="four 4", value="Four"), 11 | ft.AutoCompleteSuggestion(key="five 5", value="Five"), 12 | ft.AutoCompleteSuggestion(key="six 6", value="Six"), 13 | ], 14 | suggestions_max_height=30, 15 | opacity=0.5, 16 | visible=True, 17 | data="data", 18 | on_select=lambda e: print(e.control.selected_index, e.selection), 19 | ) 20 | 21 | return ft.Column( 22 | [ 23 | autocomplete, 24 | ft.Text("Type in 4, 5 or 6 to receive suggestions."), 25 | ] 26 | ) 27 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/input/autocomplete/index.py: -------------------------------------------------------------------------------- 1 | name = "AutoComplete" 2 | description = """Helps the user make a selection by entering some text and choosing from among a list of suggestions.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/input/autofillgroup/index.py: -------------------------------------------------------------------------------- 1 | name = "AutofillGroup" 2 | description = ( 3 | """Groups autofillable controls such as TextField or CupertinoTextField.""" 4 | ) 5 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/input/checkbox/01_basic_checkboxes.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "Basic checkboxes" 4 | 5 | 6 | def example(): 7 | def button_clicked(e): 8 | t.value = f"Checkboxes values are: {c1.value}, {c2.value}, {c3.value}, {c4.value}, {c5.value}." 9 | t.update() 10 | 11 | t = ft.Text() 12 | c1 = ft.Checkbox(label="Unchecked by default checkbox", value=False) 13 | c2 = ft.Checkbox(label="Undefined by default tristate checkbox", tristate=True) 14 | c3 = ft.Checkbox(label="Checked by default checkbox", value=True) 15 | c4 = ft.Checkbox(label="Disabled checkbox", disabled=True) 16 | c5 = ft.Checkbox( 17 | label="Checkbox with rendered label_position='left'", 18 | label_position=ft.LabelPosition.LEFT, 19 | ) 20 | b = ft.ElevatedButton(text="Submit", on_click=button_clicked) 21 | 22 | return ft.Column(controls=[c1, c2, c3, c4, c5, b, t]) 23 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/input/checkbox/02_checkbox_with_change_event.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "Checkbox with `change` event" 4 | 5 | 6 | def example(): 7 | def checkbox_changed(e): 8 | t.value = f"Checkbox value changed to {c.value}" 9 | t.update() 10 | 11 | c = ft.Checkbox(label="Checkbox with 'change' event", on_change=checkbox_changed) 12 | t = ft.Text() 13 | 14 | return ft.Column(controls=[c, t]) 15 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/input/checkbox/index.py: -------------------------------------------------------------------------------- 1 | name = "Checkbox" 2 | description = """Checkbox allows to select one or more items from a group, or switch between two mutually exclusive options (checked or unchecked, on or off).""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/input/chip/01_assist_chips.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "Assist chips" 4 | 5 | 6 | def example(): 7 | def save_to_favorites_clicked(e): 8 | save_to_favourites.label.value = "Saved to favorites" 9 | save_to_favourites.leading = ft.Icon(ft.Icons.FAVORITE_OUTLINED) 10 | save_to_favourites.disabled = True 11 | save_to_favourites.update() 12 | 13 | def open_google_maps(e): 14 | e.control.page.launch_url("https://maps.google.com") 15 | 16 | save_to_favourites = ft.Chip( 17 | label=ft.Text("Save to favourites"), 18 | leading=ft.Icon(ft.Icons.FAVORITE_BORDER_OUTLINED), 19 | on_click=save_to_favorites_clicked, 20 | ) 21 | 22 | open_in_maps = ft.Chip( 23 | label=ft.Text("9 min walk"), 24 | leading=ft.Icon(ft.Icons.MAP_SHARP), 25 | on_click=open_google_maps, 26 | ) 27 | 28 | return ft.Row([save_to_favourites, open_in_maps]) 29 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/input/chip/02_filter_chips.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "Filter chips" 4 | 5 | 6 | def example(): 7 | def amenity_selected(e): 8 | amenity_chips.update() 9 | 10 | title = ft.Row([ft.Icon(ft.Icons.HOTEL_CLASS), ft.Text("Amenities")]) 11 | amenities = ["Washer / Dryer", "Ramp access", "Dogs OK", "Cats OK", "Smoke-free"] 12 | amenity_chips = ft.Row() 13 | 14 | for amenity in amenities: 15 | amenity_chips.controls.append( 16 | ft.Chip( 17 | label=ft.Text(amenity), 18 | on_select=amenity_selected, 19 | ) 20 | ) 21 | 22 | return ft.Column(controls=[title, amenity_chips]) 23 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/input/chip/index.py: -------------------------------------------------------------------------------- 1 | name = "Chip" 2 | description = """Chips are compact elements that represent an attribute, text, entity, or action.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/input/cupertinocheckbox/01_cupertinocheckbox_example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "CupertinoCheckbox example" 4 | 5 | 6 | def example(): 7 | return ft.Column( 8 | controls=[ 9 | ft.CupertinoCheckbox(label="Cupertino Checkbox", value=True), 10 | ft.Checkbox(label="Material Checkbox", value=True), 11 | ft.Checkbox( 12 | adaptive=True, label="Adaptive Checkbox", value=True, 13 | tooltip=ft.Tooltip( 14 | message="Adaptive Checkbox shows as CupertinoCheckbox on macOS and iOS and as Checkbox on other platforms") 15 | ), 16 | ] 17 | ) 18 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/input/cupertinocheckbox/index.py: -------------------------------------------------------------------------------- 1 | name = "CupertinoCheckbox" 2 | description = """A macOS style checkbox.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/input/cupertinoradio/index.py: -------------------------------------------------------------------------------- 1 | name = "CupertinoRadio" 2 | description = """A macOS style radio button.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/input/cupertinoslider/01_cupertino_slider_example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "CupertinoSlider example" 4 | 5 | 6 | def example(): 7 | return ft.Column( 8 | controls=[ 9 | ft.Text("Cupertino slider:"), 10 | ft.CupertinoSlider(), 11 | ft.Text("Material slider:"), 12 | ft.Slider(), 13 | ft.Text("Adaptive slider:"), 14 | ft.Slider( 15 | adaptive=True, 16 | tooltip=ft.Tooltip( 17 | message="Adaptive Slider shows as CupertinoSlider on macOS and iOS and as Slider on other platforms", 18 | ), 19 | ), 20 | ], 21 | ) 22 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/input/cupertinoslider/index.py: -------------------------------------------------------------------------------- 1 | name = "CupertinoSlider" 2 | description = """An macOS style slider.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/input/cupertinoswitch/01_cupertino_switch_example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "CupertinoSwitch example" 4 | 5 | 6 | def example(): 7 | c1 = ft.CupertinoSwitch( 8 | label="Cupertino Switch", 9 | value=True, 10 | ) 11 | c2 = ft.Switch( 12 | label="Material Switch", 13 | value=True, 14 | ) 15 | 16 | c3 = ft.Switch( 17 | adaptive=True, 18 | label="Adaptive Switch", 19 | value=True, 20 | tooltip=ft.Tooltip( 21 | message="Adaptive Switch shows as CupertinoSwitch on macOS and iOS and as Switch on other platforms" 22 | ), 23 | ) 24 | 25 | return ft.Column(controls=[c1, c2, c3]) 26 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/input/cupertinoswitch/index.py: -------------------------------------------------------------------------------- 1 | name = "CupertinoSwitch" 2 | description = """An iOS-style switch.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/input/cupertinotextfield/01_cupertino_textfield_example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "CupertinoTextField example" 4 | 5 | 6 | def example(): 7 | 8 | tf1 = ft.TextField( 9 | label="Material", 10 | ) 11 | tf2 = ft.CupertinoTextField( 12 | placeholder_text="Cupertino", 13 | ) 14 | tf3 = ft.TextField( 15 | adaptive=True, 16 | label="Adaptive", 17 | tooltip=ft.Tooltip( 18 | message="Adaptive TextField shows as CupertinoTextField on macOS and iOS and as TextField on other platforms" 19 | ), 20 | ) 21 | 22 | return ft.Column(controls=[tf1, tf2, tf3]) 23 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/input/cupertinotextfield/index.py: -------------------------------------------------------------------------------- 1 | name = "CupertinoTextField" 2 | description = """An iOS-style text field.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/input/dropdown/01_basic_dropdown.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "Basic dropdown" 4 | 5 | 6 | def example(): 7 | def button_clicked(e): 8 | t.value = f"Dropdown value is: {dd.value}" 9 | t.update() 10 | 11 | t = ft.Text() 12 | b = ft.ElevatedButton(text="Submit", on_click=button_clicked) 13 | dd = ft.Dropdown( 14 | width=100, 15 | options=[ 16 | ft.dropdown.Option("Red"), 17 | ft.dropdown.Option("Green"), 18 | ft.dropdown.Option("Blue"), 19 | ], 20 | ) 21 | 22 | return ft.Column(controls=[dd, b, t]) 23 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/input/dropdown/02_dropdown_with_label_and_hint.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "Dropdown with label and hint" 4 | 5 | def example(): 6 | 7 | return ft.Dropdown( 8 | label="Color", 9 | hint_text="Choose your favourite color?", 10 | options=[ 11 | ft.dropdown.Option("Red"), 12 | ft.dropdown.Option("Green"), 13 | ft.dropdown.Option("Blue"), 14 | ], 15 | autofocus=True, 16 | ) -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/input/dropdown/03_add_items_to_dropdown_options.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "Add items to dropdown options" 4 | 5 | 6 | def example(): 7 | def add_clicked(e): 8 | d.options.append(ft.dropdown.Option(option_textbox.value)) 9 | d.value = option_textbox.value 10 | option_textbox.value = "" 11 | option_textbox.update() 12 | d.update() 13 | 14 | d = ft.Dropdown() 15 | option_textbox = ft.TextField(hint_text="Enter item name") 16 | add = ft.ElevatedButton("Add", on_click=add_clicked) 17 | 18 | return ft.Column(controls=[d, ft.Row(controls=[option_textbox, add])]) 19 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/input/dropdown/index.py: -------------------------------------------------------------------------------- 1 | name = "Dropdown" 2 | description = """A material design button for selecting from a list of items. 3 | 4 | A dropdown lets the user select from a number of items. The dropdown shows the currently selected item as well as an arrow that opens a menu for selecting another item.""" 5 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/input/radio/01_basic_radiogroup.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "Basic RadioGroup" 4 | 5 | 6 | def example(): 7 | def button_clicked(e): 8 | t.value = f"Your favorite color is: {cg.value}" 9 | t.update() 10 | 11 | t = ft.Text() 12 | b = ft.ElevatedButton(text="Submit", on_click=button_clicked) 13 | cg = ft.RadioGroup( 14 | content=ft.Column( 15 | [ 16 | ft.Radio(value="red", label="Red"), 17 | ft.Radio(value="green", label="Green"), 18 | ft.Radio(value="blue", label="Blue"), 19 | ] 20 | ) 21 | ) 22 | 23 | return ft.Column([ft.Text("Select your favorite color:"), cg, b, t]) 24 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/input/radio/02_radio_group_with_change_event.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "RadioGroup with `change` event" 4 | 5 | 6 | def example(): 7 | def radiogroup_changed(e): 8 | t.value = f"Your favorite color is: {e.control.value}" 9 | t.update() 10 | 11 | t = ft.Text() 12 | cg = ft.RadioGroup( 13 | content=ft.Column( 14 | [ 15 | ft.Radio(value="red", label="Red"), 16 | ft.Radio(value="green", label="Green"), 17 | ft.Radio(value="blue", label="Blue"), 18 | ] 19 | ), 20 | on_change=radiogroup_changed, 21 | ) 22 | 23 | return ft.Column([ft.Text("Select your favorite color:"), cg, t]) 24 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/input/radio/index.py: -------------------------------------------------------------------------------- 1 | name = "Radio" 2 | description = ( 3 | """Radio buttons let people select a single option from two or more choices.""" 4 | ) 5 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/input/rangeslider/01_rangeslider_example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "Range slider with divisions and labels" 4 | 5 | 6 | def example(): 7 | range_slider = ft.RangeSlider( 8 | min=0, 9 | max=50, 10 | start_value=10, 11 | divisions=10, 12 | end_value=20, 13 | label="{value}%", 14 | on_change=lambda _: print( 15 | "Range slider change:", range_slider.start_value, range_slider.end_value 16 | ), 17 | ) 18 | 19 | return ft.Column( 20 | horizontal_alignment=ft.CrossAxisAlignment.CENTER, 21 | controls=[ 22 | ft.Container(height=30), 23 | range_slider, 24 | ], 25 | ) 26 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/input/rangeslider/index.py: -------------------------------------------------------------------------------- 1 | name = "RangeSlider" 2 | description = ( 3 | """A Material Design range slider. Used to select a range from a range of values.""" 4 | ) 5 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/input/searchbar/index.py: -------------------------------------------------------------------------------- 1 | name = "SearchBar" 2 | description = """A Material Design search bar. It visually looks like a TextField with the difference that, tapping on it opens a search view.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/input/slider/01_basic_sliders.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "Basic sliders" 4 | 5 | def example(): 6 | 7 | return ft.Column(controls=[ 8 | ft.Text("Default slider:"), 9 | ft.Slider(), 10 | ft.Text("Default disabled slider:"), 11 | ft.Slider(disabled=True) 12 | ] 13 | ) -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/input/slider/02_sliders_with_values.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "Sliders with values" 4 | 5 | def example(): 6 | 7 | return ft.Column(controls=[ 8 | ft.Text("Slider with value:"), 9 | ft.Slider(value=0.3), 10 | ft.Text("Slider with a custom range and label:"), 11 | ft.Slider(min=0, max=100, divisions=10, label="{value}%") 12 | ] 13 | ) -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/input/slider/03_slider_with_change_event.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "Slider with `change` event" 4 | 5 | 6 | def example(): 7 | def slider_changed(e): 8 | t.value = f"Slider changed to {e.control.value}" 9 | t.update() 10 | 11 | t = ft.Text() 12 | 13 | return ft.Column( 14 | controls=[ 15 | ft.Text("Slider with 'on_change' event:"), 16 | ft.Slider( 17 | min=0, max=100, divisions=10, label="{value}%", on_change=slider_changed 18 | ), 19 | t, 20 | ] 21 | ) 22 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/input/slider/index.py: -------------------------------------------------------------------------------- 1 | name = "Slider" 2 | description = """A slider provides a visual indication of adjustable content, as well as the current setting in the total range of content. 3 | 4 | Use a slider when you want people to set defined values (such as volume or brightness), or when people would benefit from instant feedback on the effect of setting changes.""" 5 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/input/switch/01_basic_switches.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "Basic switches" 4 | 5 | 6 | def example(): 7 | def button_clicked(e): 8 | t.value = f"Switch values are: {c1.value}, {c2.value}, {c3.value}, {c4.value}." 9 | t.update() 10 | 11 | t = ft.Text() 12 | c1 = ft.Switch(label="Unchecked switch", value=False) 13 | c2 = ft.Switch(label="Checked switch", value=True) 14 | c3 = ft.Switch(label="Disabled switch", disabled=True) 15 | c4 = ft.Switch( 16 | label="Switch with rendered label_position='left'", 17 | label_position=ft.LabelPosition.LEFT, 18 | ) 19 | b = ft.ElevatedButton(text="Submit", on_click=button_clicked) 20 | 21 | return ft.Column(controls=[c1, c2, c3, c4, b, t]) 22 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/input/switch/index.py: -------------------------------------------------------------------------------- 1 | name = "Switch" 2 | description = """A toggle represents a physical switch that allows someone to choose between two mutually exclusive options. 3 | 4 | For example, "On/Off", "Show/Hide". Choosing an option should produce an immediate result.""" 5 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/input/textfield/01_basic_textfields.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "Basic TextFields" 4 | 5 | 6 | def example(): 7 | def button_clicked(e): 8 | t.value = f"Textboxes values are: '{tb1.value}', '{tb2.value}', '{tb3.value}', '{tb4.value}', '{tb5.value}'." 9 | t.update() 10 | 11 | t = ft.Text() 12 | tb1 = ft.TextField(label="Standard") 13 | tb2 = ft.TextField(label="Disabled", disabled=True, value="First name") 14 | tb3 = ft.TextField(label="Read-only", read_only=True, value="Last name") 15 | tb4 = ft.TextField(label="With placeholder", hint_text="Please enter text here") 16 | tb5 = ft.TextField(label="With an icon", icon=ft.Icons.EMOJI_EMOTIONS) 17 | b = ft.ElevatedButton(text="Submit", on_click=button_clicked) 18 | 19 | return ft.Column(controls=[tb1, tb2, tb3, tb4, tb5, b, t]) 20 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/input/textfield/02_textfield_with_change_event.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "TextField with `change` event" 4 | 5 | 6 | def example(): 7 | def textbox_changed(e): 8 | t.value = e.control.value 9 | t.update() 10 | 11 | t = ft.Text() 12 | tb = ft.TextField( 13 | label="TextField with 'change' event:", 14 | on_change=textbox_changed, 15 | ) 16 | 17 | return ft.Column(controls=[tb, t]) 18 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/input/textfield/03_password_with_reveal_button.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "Password with reveal button" 4 | 5 | def example(): 6 | 7 | return ft.TextField( 8 | label="Password with reveal button", password=True, can_reveal_password=True 9 | ) -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/input/textfield/04_multiline_textfields.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "Multiline TextFields" 4 | 5 | def example(): 6 | 7 | return ft.Column(controls=[ 8 | ft.TextField(label="standard", multiline=True), 9 | ft.TextField( 10 | label="disabled", 11 | multiline=True, 12 | disabled=True, 13 | value="line1\nline2\nline3\nline4\nline5", 14 | ), 15 | ft.TextField( 16 | label="Auto adjusted height with max lines", 17 | multiline=True, 18 | min_lines=1, 19 | max_lines=3, 20 | ) 21 | ] 22 | ) -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/input/textfield/index.py: -------------------------------------------------------------------------------- 1 | name = "TextField" 2 | description = """A material design text field. 3 | 4 | A text field lets the user enter text, either with hardware keyboard or with an onscreen keyboard.""" 5 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/layout/card/01_card_example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "Card example" 4 | 5 | 6 | def example(): 7 | return ft.Card( 8 | content=ft.Container( 9 | content=ft.Column( 10 | [ 11 | ft.ListTile( 12 | leading=ft.Icon(ft.Icons.ALBUM), 13 | title=ft.Text("The Enchanted Nightingale"), 14 | subtitle=ft.Text( 15 | "Music by Julie Gable. Lyrics by Sidney Stein." 16 | ), 17 | ), 18 | ft.Row( 19 | [ft.TextButton("Buy tickets"), ft.TextButton("Listen")], 20 | alignment=ft.MainAxisAlignment.END, 21 | ), 22 | ] 23 | ), 24 | width=400, 25 | padding=10, 26 | ) 27 | ) 28 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/layout/card/index.py: -------------------------------------------------------------------------------- 1 | name = "Card" 2 | description = """A material design card: a panel with slightly rounded corners and an elevation shadow.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/layout/column/08_receiving_scroll_notifications.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "Receiving scroll notifications" 4 | 5 | 6 | def example(): 7 | def on_column_scroll(e: ft.OnScrollEvent): 8 | notification = f"Type: {e.event_type}, pixels: {e.pixels}, min_scroll_extent: {e.min_scroll_extent}, max_scroll_extent: {e.max_scroll_extent}" 9 | notification_text.value = notification 10 | notification_text.update() 11 | 12 | cl = ft.Column( 13 | spacing=10, 14 | height=200, 15 | width=200, 16 | scroll=ft.ScrollMode.ALWAYS, 17 | on_scroll=on_column_scroll, 18 | ) 19 | for i in range(0, 50): 20 | cl.controls.append(ft.Text(f"Text line {i}", key=str(i))) 21 | 22 | notification_text = ft.Text() 23 | 24 | return ft.Column([ft.Container(cl, border=ft.border.all(1)), notification_text]) 25 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/layout/column/index.py: -------------------------------------------------------------------------------- 1 | name = "Column" 2 | description = "A control that displays its children in a vertical array." 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/layout/container/02_container_alignment.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "Containers with different alignment" 4 | 5 | 6 | def example(): 7 | 8 | container_1 = ft.Container( 9 | content=ft.Text("Center"), 10 | alignment=ft.alignment.center, 11 | bgcolor=ft.Colors.BLUE_GREY_100, 12 | width=150, 13 | height=150, 14 | ) 15 | 16 | container_2 = ft.Container( 17 | content=ft.Text("Top left"), 18 | alignment=ft.alignment.top_left, 19 | bgcolor=ft.Colors.BLUE_GREY_200, 20 | width=150, 21 | height=150, 22 | ) 23 | 24 | container_3 = ft.Container( 25 | content=ft.Text("-0.5, -0.5"), 26 | alignment=ft.alignment.Alignment(-0.5, -0.5), 27 | bgcolor=ft.Colors.BLUE_GREY_300, 28 | width=150, 29 | height=150, 30 | ) 31 | 32 | return ft.Row(controls=[container_1, container_2, container_3]) 33 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/layout/container/03_animate_container.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "Animate container" 4 | 5 | 6 | def example(): 7 | c = ft.Container( 8 | width=200, 9 | height=200, 10 | bgcolor="red", 11 | animate=ft.animation.Animation(1000, "bounceOut"), 12 | ) 13 | 14 | def animate_container(e): 15 | c.width = 100 if c.width == 200 else 200 16 | c.height = 100 if c.height == 200 else 200 17 | c.bgcolor = "blue" if c.bgcolor == "red" else "red" 18 | c.update() 19 | 20 | return ft.Column( 21 | controls=[c, ft.ElevatedButton("Animate container", on_click=animate_container)] 22 | ) 23 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/layout/container/index.py: -------------------------------------------------------------------------------- 1 | name = "Container" 2 | description = "Container allows to decorate a control with background color and border and position it with padding, margin and alignment." 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/layout/cupertinolisttile/index.py: -------------------------------------------------------------------------------- 1 | name = "CupertinoListTile" 2 | description = """An iOS-style list tile. The CupertinoListTile is a Cupertino equivalent of Material ListTile.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/layout/datatable/index.py: -------------------------------------------------------------------------------- 1 | name = "DataTable" 2 | description = """A Material Design data table.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/layout/dismissible/index.py: -------------------------------------------------------------------------------- 1 | name = "Dismissible" 2 | description = """A control that can be dismissed by dragging in the indicated dismiss_direction. When dragged or flung in the specified dismiss_direction, it's content smoothly slides out of view.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/layout/divider/index.py: -------------------------------------------------------------------------------- 1 | name = "Divider" 2 | description = """A thin horizontal line, with padding on either side. 3 | 4 | In the material design language, this represents a divider.""" 5 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/layout/expansionpanellist/index.py: -------------------------------------------------------------------------------- 1 | name = "ExpansionPanelList" 2 | description = """A material expansion panel list that lays out its children and animates expansions.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/layout/expansiontile/index.py: -------------------------------------------------------------------------------- 1 | name = "ExpansionTile" 2 | description = """A single-line ListTile with an expansion arrow icon that expands or collapses the tile to reveal or hide its children.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/layout/gridview/01_photo_gallery.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "GridView Example" 4 | 5 | def example(): 6 | 7 | images = ft.GridView( 8 | height=400, 9 | width=400, 10 | runs_count=5, 11 | max_extent=150, 12 | child_aspect_ratio=1.0, 13 | spacing=5, 14 | run_spacing=5, 15 | ) 16 | 17 | for i in range(0, 60): 18 | images.controls.append( 19 | ft.Image( 20 | src=f"https://picsum.photos/150/150?{i}", 21 | fit=ft.ImageFit.NONE, 22 | repeat=ft.ImageRepeat.NO_REPEAT, 23 | border_radius=ft.border_radius.all(10), 24 | ) 25 | ) 26 | 27 | return images -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/layout/gridview/index.py: -------------------------------------------------------------------------------- 1 | name = "GridView" 2 | description = """A scrollable, 2D array of controls. 3 | 4 | GridView is very effective for large lists (thousands of items). Prefer it over wrapping Column or Row for smooth scrolling.""" 5 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/layout/listtile/index.py: -------------------------------------------------------------------------------- 1 | name = "ListTile" 2 | description = """A single fixed-height row that typically contains some text as well as a leading or trailing icon.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/layout/listview/01_auto_scrolling_listview.py: -------------------------------------------------------------------------------- 1 | import asyncio 2 | 3 | import flet as ft 4 | 5 | name = "Auto-scrolling ListView" 6 | 7 | 8 | def example(): 9 | async def auto_scroll(e): 10 | count = 1 11 | for i in range(0, 60): 12 | await asyncio.sleep(1) 13 | lv.controls.append(ft.Text(f"Line {count}")) 14 | count += 1 15 | lv.update() 16 | 17 | lv = ft.ListView(spacing=10, padding=20, auto_scroll=True, height=300) 18 | 19 | count = 1 20 | 21 | for i in range(0, 60): 22 | lv.controls.append(ft.Text(f"Line {count}")) 23 | count += 1 24 | 25 | return ft.Column( 26 | controls=[ 27 | lv, 28 | ft.OutlinedButton(text="Start auto-scrolling", on_click=auto_scroll), 29 | ] 30 | ) 31 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/layout/listview/index.py: -------------------------------------------------------------------------------- 1 | name = "ListView" 2 | description = """A scrollable list of controls arranged linearly. 3 | 4 | ListView is the most commonly used scrolling control. It displays its children one after another in the scroll direction. In the cross axis, the children are required to fill the ListView.""" 5 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/layout/pagelet/index.py: -------------------------------------------------------------------------------- 1 | name = "Pagelet" 2 | description = ( 3 | """Pagelet implements the basic Material Design visual layout structure.""" 4 | ) 5 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/layout/placeholder/01_placeholder_example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "Placeholder example" 4 | 5 | 6 | def example(): 7 | return ft.Placeholder( 8 | expand=True, color=ft.colors.random() 9 | ) # random material color 10 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/layout/placeholder/index.py: -------------------------------------------------------------------------------- 1 | name = "Placeholder" 2 | description = """A control that draws a box that represents where other widgets will one day be added. 3 | 4 | Useful during development to indicate that the interface is not yet complete.""" 5 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/layout/responsiverow/index.py: -------------------------------------------------------------------------------- 1 | name = "ResponsiveRow" 2 | 3 | description = """ResponsiveRow borrows the idea of grid layout from Bootstrap web framework. 4 | 5 | ResponsiveRow allows aligning child controls to virtual columns. By default, a virtual grid has 12 columns, but that can be customized with ResponsiveRow.columns property.""" 6 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/layout/row/index.py: -------------------------------------------------------------------------------- 1 | name = "Row" 2 | description = "A control that displays its children in a horizontal array." 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/layout/safearea/index.py: -------------------------------------------------------------------------------- 1 | name = "SafeArea" 2 | description = """A control that insets its content by sufficient padding to avoid intrusions by the operating system.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/layout/stack/01_transparent_title_over_an_image.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "Transparent title over an image" 4 | 5 | def example(): 6 | 7 | st = ft.Stack( 8 | [ 9 | ft.Image( 10 | src=f"https://picsum.photos/300/300", 11 | width=300, 12 | height=300, 13 | fit=ft.ImageFit.CONTAIN, 14 | ), 15 | ft.Row( 16 | [ 17 | ft.Text( 18 | "Image title", 19 | color="white", 20 | size=40, 21 | weight="bold", 22 | opacity=0.5, 23 | ) 24 | ], 25 | alignment=ft.MainAxisAlignment.CENTER, 26 | ), 27 | ], 28 | width=300, 29 | height=300, 30 | ) 31 | 32 | return st -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/layout/stack/index.py: -------------------------------------------------------------------------------- 1 | name = "Stack" 2 | 3 | description = """A control that positions its children on top of each other. 4 | 5 | This control is useful if you want to overlap several children in a simple way, for example having some text and an image, overlaid with a gradient and a button attached to the bottom.""" 6 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/layout/tabs/01_tabs_example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "Tabs example" 4 | 5 | 6 | def example(): 7 | return ft.Tabs( 8 | selected_index=1, 9 | animation_duration=300, 10 | tabs=[ 11 | ft.Tab( 12 | text="Tab 1", 13 | content=ft.Container( 14 | content=ft.Text("This is Tab 1"), alignment=ft.alignment.center 15 | ), 16 | ), 17 | ft.Tab( 18 | tab_content=ft.Icon(ft.Icons.SEARCH), 19 | content=ft.Text("This is Tab 2"), 20 | ), 21 | ft.Tab( 22 | text="Tab 3", 23 | icon=ft.Icons.SETTINGS, 24 | content=ft.Text("This is Tab 3"), 25 | ), 26 | ], 27 | width=400, 28 | height=400, 29 | ) 30 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/layout/tabs/index.py: -------------------------------------------------------------------------------- 1 | name = "Tabs" 2 | description = """The Tabs control is used for navigating frequently accessed, distinct content categories. 3 | 4 | Tabs allow for navigation between two or more content views and relies on text headers to articulate the different sections of content.""" 5 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/layout/verticaldivider/index.py: -------------------------------------------------------------------------------- 1 | name = "VerticalDivider" 2 | description = """A thin vertical line, with padding on either side. 3 | 4 | In the material design language, this represents a divider.""" 5 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/navigation/appbar/index.py: -------------------------------------------------------------------------------- 1 | name = "AppBar" 2 | description = """A material design app bar.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/navigation/bottomappbar/01_bottomappbar_example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "BottomAppBar Example" 4 | 5 | 6 | def example(): 7 | 8 | pagelet = ft.Pagelet( 9 | bottom_app_bar=ft.BottomAppBar( 10 | bgcolor=ft.Colors.BLUE, 11 | shape=ft.NotchShape.CIRCULAR, 12 | content=ft.Row( 13 | controls=[ 14 | ft.IconButton(icon=ft.Icons.MENU, icon_color=ft.Colors.WHITE), 15 | ft.Container(expand=True), 16 | ft.IconButton(icon=ft.Icons.SEARCH, icon_color=ft.Colors.WHITE), 17 | ft.IconButton(icon=ft.Icons.FAVORITE, icon_color=ft.Colors.WHITE), 18 | ] 19 | ), 20 | ), 21 | content=ft.Container(), 22 | height=400, 23 | ) 24 | 25 | return pagelet 26 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/navigation/bottomappbar/index.py: -------------------------------------------------------------------------------- 1 | name = "BottomAppBar" 2 | description = """A material design bottom app bar.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/navigation/cupertinoappbar/01_cupertino_appbar_example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "CupertinoAppBar Example" 4 | 5 | 6 | def example(): 7 | 8 | pagelet = ft.Pagelet( 9 | appbar=ft.CupertinoAppBar( 10 | leading=ft.Icon(ft.Icons.PALETTE), 11 | bgcolor=ft.Colors.SURFACE, 12 | trailing=ft.Icon(ft.Icons.WB_SUNNY_OUTLINED), 13 | middle=ft.Text("CupertinoAppBar Middle"), 14 | ), 15 | content=ft.Container(), 16 | ) 17 | 18 | return pagelet 19 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/navigation/cupertinoappbar/index.py: -------------------------------------------------------------------------------- 1 | name = "CupertinoAppBar" 2 | description = """An iOS-styled application bar.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/navigation/cupertinonavigationbar/index.py: -------------------------------------------------------------------------------- 1 | name = "CupertinoNavigationBar" 2 | 3 | description = """An iOS-style bottom navigation tab bar.""" 4 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/navigation/menubar/index.py: -------------------------------------------------------------------------------- 1 | name = "MenuBar" 2 | description = """A menu bar that manages cascading child menus.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/navigation/navigationbar/01_navigationbar_example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "NavigationBar Example" 4 | 5 | 6 | def example(): 7 | 8 | pagelet = ft.Pagelet( 9 | navigation_bar=ft.NavigationBar( 10 | destinations=[ 11 | ft.NavigationBarDestination(icon=ft.Icons.EXPLORE, label="Explore"), 12 | ft.NavigationBarDestination(icon=ft.Icons.COMMUTE, label="Commute"), 13 | ft.NavigationBarDestination( 14 | icon=ft.Icons.BOOKMARK_BORDER, 15 | selected_icon=ft.Icons.BOOKMARK, 16 | label="Explore", 17 | ), 18 | ], 19 | ), 20 | content=ft.Container(), 21 | height=400, 22 | ) 23 | 24 | return pagelet 25 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/navigation/navigationbar/index.py: -------------------------------------------------------------------------------- 1 | name = "NavigationBar" 2 | 3 | description = """Material 3 Navigation Bar component. 4 | 5 | Navigation bars offer a persistent and convenient way to switch between primary destinations in an app.""" 6 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/navigation/navigationdrawer/index.py: -------------------------------------------------------------------------------- 1 | name = "NavigationDrawer" 2 | description = """Material Design Navigation Drawer component.""" -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/navigation/navigationrail/index.py: -------------------------------------------------------------------------------- 1 | name = "NavigationRail" 2 | description = """A material widget that is meant to be displayed at the left or right of an app to navigate between a small number of views, typically between three and five.""" 3 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/utility/audio/index.py: -------------------------------------------------------------------------------- 1 | name = "Audio" 2 | 3 | description = """A control to simultaneously play multiple audio files. Works on macOS, Linux, Windows, iOS, Android and web. Based on audioplayers Flutter widget. 4 | 5 | Audio control is non-visual and should be added to `page.overlay` list.""" 6 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/utility/filepicker/index.py: -------------------------------------------------------------------------------- 1 | name = "FilePicker" 2 | 3 | description = """A control that allows you to use the native file explorer to pick single or multiple files, with extensions filtering support and upload.""" 4 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/utility/gesturedetector/index.py: -------------------------------------------------------------------------------- 1 | name = "GestureDetector" 2 | 3 | description = """A control that detects gestures. 4 | 5 | Attempts to recognize gestures that correspond to its non-null callbacks. 6 | 7 | If this control has a `content`, it defers to that child control for its sizing behavior. If it does not have a `content`, it grows to fit the parent instead.""" 8 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/utility/interactiveviewer/01_interactive_viewer_example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "InteractiveViewer with Image example" 4 | 5 | 6 | def example(): 7 | 8 | return ft.Row( 9 | [ 10 | ft.InteractiveViewer( 11 | min_scale=0.1, 12 | max_scale=15, 13 | boundary_margin=ft.margin.all(20), 14 | on_interaction_start=lambda e: print(e), 15 | on_interaction_end=lambda e: print(e), 16 | on_interaction_update=lambda e: print(e), 17 | content=ft.Image( 18 | src="https://picsum.photos/500/500", 19 | ), 20 | ) 21 | ] 22 | ) 23 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/utility/interactiveviewer/index.py: -------------------------------------------------------------------------------- 1 | name = "InteractiveViewer" 2 | 3 | description = """Allows users to pan, zoom, and rotate the provided content.""" 4 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/utility/shadermask/01_adding_a_pink_glow_around_image_edges.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "Adding a pink glow around image edges" 4 | 5 | 6 | def example(): 7 | 8 | return ft.Row( 9 | [ 10 | ft.ShaderMask( 11 | content=ft.Image( 12 | src="https://picsum.photos/200/200?1", 13 | width=200, 14 | height=200, 15 | fit=ft.ImageFit.FILL, 16 | ), 17 | blend_mode=ft.BlendMode.MULTIPLY, 18 | shader=ft.RadialGradient( 19 | center=ft.alignment.center, 20 | radius=2.0, 21 | colors=[ft.Colors.WHITE, ft.Colors.PINK], 22 | tile_mode=ft.GradientTileMode.CLAMP, 23 | ), 24 | ) 25 | ] 26 | ) 27 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/utility/shadermask/02_gradually_fade_out_image_to_the_bottom_edge.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | name = "Gradually fade out image to the bottom edge" 4 | 5 | 6 | def example(): 7 | 8 | return ft.Row( 9 | [ 10 | ft.ShaderMask( 11 | content=ft.Image(src="https://picsum.photos/100/200?2"), 12 | blend_mode=ft.BlendMode.DST_IN, 13 | shader=ft.LinearGradient( 14 | begin=ft.alignment.top_center, 15 | end=ft.alignment.bottom_center, 16 | colors=[ft.Colors.BLACK, ft.Colors.TRANSPARENT], 17 | stops=[0.5, 1.0], 18 | ), 19 | border_radius=10, 20 | ), 21 | ] 22 | ) 23 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/utility/shadermask/index.py: -------------------------------------------------------------------------------- 1 | name = "ShaderMask" 2 | 3 | description = """A control that applies a mask generated by a shader to its child. 4 | 5 | For example, ShaderMask can be used to gradually fade out the edge of a child by using a LinearGradient mask.""" 6 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/examples/utility/video/index.py: -------------------------------------------------------------------------------- 1 | name = "Video" 2 | 3 | description = """Video playing control. Based on the media_kit Dart/Flutter package.""" 4 | -------------------------------------------------------------------------------- /python/apps/controls-gallery/fly.toml: -------------------------------------------------------------------------------- 1 | app = "flet-controls-gallery" 2 | 3 | kill_signal = "SIGINT" 4 | kill_timeout = 5 5 | processes = [] 6 | 7 | [env] 8 | FLET_SESSION_TIMEOUT = "60" 9 | 10 | [http_service] 11 | internal_port = 8000 12 | force_https = true 13 | auto_stop_machines = true 14 | auto_start_machines = true 15 | min_machines_running = 0 16 | 17 | [http_service.concurrency] 18 | type = "connections" 19 | soft_limit = 200 20 | hard_limit = 250 -------------------------------------------------------------------------------- /python/apps/controls-gallery/pyproject.toml: -------------------------------------------------------------------------------- 1 | [project] 2 | name = "controls-gallery" 3 | version = "0.1.0" 4 | description = "Control gallery app" 5 | authors = [ 6 | { name = "Flet Devs", email = "hello@flet.dev" } 7 | ] 8 | license = "MIT" 9 | readme = "README.md" 10 | requires-python = ">=3.9,<4.0" 11 | dependencies = [ 12 | "flet==0.27.2", 13 | "flet-contrib==2024.12.3" 14 | ] 15 | 16 | [tool.poetry] 17 | packages = [{include = "components"}] 18 | 19 | [tool.poetry.group.dev.dependencies] 20 | flet = {extras = ["all"], version = "0.27.2"} 21 | 22 | [build-system] 23 | requires = ["poetry-core"] 24 | build-backend = "poetry.core.masonry.api" 25 | -------------------------------------------------------------------------------- /python/apps/counter-flutter/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM python:3-alpine 2 | 3 | WORKDIR /app 4 | 5 | COPY requirements.txt ./ 6 | RUN pip install --no-cache-dir -r requirements.txt 7 | 8 | COPY . . 9 | 10 | EXPOSE 8080 11 | 12 | CMD ["python", "./main.py"] -------------------------------------------------------------------------------- /python/apps/counter-flutter/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flet-dev/examples/2545ad18af084211c97ab012b31c9aca02e90266/python/apps/counter-flutter/assets/favicon.png -------------------------------------------------------------------------------- /python/apps/counter-flutter/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flet-dev/examples/2545ad18af084211c97ab012b31c9aca02e90266/python/apps/counter-flutter/assets/icon.png -------------------------------------------------------------------------------- /python/apps/counter-flutter/fly.toml: -------------------------------------------------------------------------------- 1 | app = "flet-counter-test-ios" 2 | 3 | kill_signal = "SIGINT" 4 | kill_timeout = 5 5 | processes = [] 6 | 7 | [env] 8 | FLET_SERVER_PORT = "8080" 9 | FLET_FORCE_WEB_VIEW = "true" 10 | 11 | [experimental] 12 | allowed_public_ports = [] 13 | auto_rollback = true 14 | 15 | [[services]] 16 | http_checks = [] 17 | internal_port = 8080 18 | processes = ["app"] 19 | protocol = "tcp" 20 | script_checks = [] 21 | 22 | [services.concurrency] 23 | hard_limit = 25 24 | soft_limit = 20 25 | type = "connections" 26 | 27 | [[services.ports]] 28 | force_https = true 29 | handlers = ["http"] 30 | port = 80 31 | 32 | [[services.ports]] 33 | handlers = ["tls", "http"] 34 | port = 443 35 | 36 | [[services.tcp_checks]] 37 | grace_period = "1s" 38 | interval = "15s" 39 | restart_limit = 0 40 | timeout = "2s" -------------------------------------------------------------------------------- /python/apps/counter-flutter/main.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | class State: 5 | counter = 0 6 | 7 | 8 | def main(page: ft.Page): 9 | state = State() 10 | 11 | def add_click(e): 12 | state.counter += 1 13 | counter.value = str(state.counter) 14 | counter.update() 15 | 16 | page.floating_action_button = ft.FloatingActionButton( 17 | icon=ft.icons.ADD, on_click=add_click 18 | ) 19 | page.add( 20 | ft.SafeArea( 21 | ft.Container( 22 | counter := ft.Text("0", size=50), 23 | alignment=ft.alignment.center, 24 | ), 25 | expand=True, 26 | ) 27 | ) 28 | 29 | 30 | ft.app(main) 31 | -------------------------------------------------------------------------------- /python/apps/counter-flutter/requirements.txt: -------------------------------------------------------------------------------- 1 | flet>=0.25.1 -------------------------------------------------------------------------------- /python/apps/counter/counter-async.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | async def main(page: ft.Page): 5 | page.title = "Flet counter example" 6 | page.vertical_alignment = ft.MainAxisAlignment.CENTER 7 | 8 | txt_number = ft.TextField(value="0", text_align=ft.TextAlign.RIGHT, width=100) 9 | 10 | async def minus_click(e): 11 | txt_number.value = str(int(txt_number.value) - 1) 12 | await page.update_async() 13 | 14 | async def plus_click(e): 15 | txt_number.value = str(int(txt_number.value) + 1) 16 | await page.update_async() 17 | 18 | await page.add_async( 19 | ft.Row( 20 | [ 21 | ft.IconButton(ft.icons.REMOVE, on_click=minus_click), 22 | txt_number, 23 | ft.IconButton(ft.icons.ADD, on_click=plus_click), 24 | ], 25 | alignment=ft.MainAxisAlignment.CENTER, 26 | ) 27 | ) 28 | 29 | 30 | ft.app(main) 31 | -------------------------------------------------------------------------------- /python/apps/counter/counter.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | page.title = "Flet counter example" 6 | page.vertical_alignment = ft.MainAxisAlignment.CENTER 7 | 8 | txt_number = ft.TextField(value="0", text_align=ft.TextAlign.RIGHT, width=100) 9 | 10 | def minus_click(e): 11 | txt_number.value = str(int(txt_number.value) - 1) 12 | page.update() 13 | 14 | def plus_click(e): 15 | txt_number.value = str(int(txt_number.value) + 1) 16 | page.update() 17 | 18 | page.add( 19 | ft.Row( 20 | [ 21 | ft.IconButton(ft.icons.REMOVE, on_click=minus_click), 22 | txt_number, 23 | ft.IconButton(ft.icons.ADD, on_click=plus_click), 24 | ], 25 | alignment=ft.MainAxisAlignment.CENTER, 26 | ) 27 | ) 28 | 29 | 30 | ft.app(main) 31 | -------------------------------------------------------------------------------- /python/apps/counter/requirements.txt: -------------------------------------------------------------------------------- 1 | flet>=0.25.1 -------------------------------------------------------------------------------- /python/apps/custom-loading-image/assets/icons/loading-animation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flet-dev/examples/2545ad18af084211c97ab012b31c9aca02e90266/python/apps/custom-loading-image/assets/icons/loading-animation.png -------------------------------------------------------------------------------- /python/apps/custom-loading-image/assets/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "MyFlet", 3 | "short_name": "MyFlet", 4 | "start_url": ".", 5 | "display": "standalone", 6 | "background_color": "#ffffff", 7 | "theme_color": "#5175C2", 8 | "description": "This is a customized Flet app description.", 9 | "orientation": "natural", 10 | "prefer_related_applications": false, 11 | "icons": [ 12 | { 13 | "src": "icons/icon-192.png", 14 | "sizes": "192x192", 15 | "type": "image/png" 16 | }, 17 | { 18 | "src": "icons/icon-512.png", 19 | "sizes": "512x512", 20 | "type": "image/png" 21 | }, 22 | { 23 | "src": "icons/icon-maskable-192.png", 24 | "sizes": "192x192", 25 | "type": "image/png", 26 | "purpose": "maskable" 27 | }, 28 | { 29 | "src": "icons/icon-maskable-512.png", 30 | "sizes": "512x512", 31 | "type": "image/png", 32 | "purpose": "maskable" 33 | } 34 | ] 35 | } 36 | -------------------------------------------------------------------------------- /python/apps/custom-loading-image/main.py: -------------------------------------------------------------------------------- 1 | import flet 2 | from flet import Page, Text 3 | 4 | 5 | def main(page: Page): 6 | page.add(Text("Hello, world!")) 7 | 8 | 9 | flet.app(target=main, assets_dir="assets", view=flet.AppView.WEB_BROWSER) 10 | -------------------------------------------------------------------------------- /python/apps/flet-animation/requirements.txt: -------------------------------------------------------------------------------- 1 | flet>=0.25.1 -------------------------------------------------------------------------------- /python/apps/greeter/greeter.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | def btn_click(e): 6 | if not txt_name.value: 7 | txt_name.error_text = "Please enter your name" 8 | page.update() 9 | else: 10 | name = txt_name.value 11 | page.clean() 12 | page.add(ft.Text(f"Hello, {name}!")) 13 | 14 | txt_name = ft.TextField(label="Your name") 15 | 16 | page.add(txt_name, ft.ElevatedButton("Say hello!", on_click=btn_click)) 17 | 18 | 19 | ft.app(main) 20 | -------------------------------------------------------------------------------- /python/apps/greeter/requirements.txt: -------------------------------------------------------------------------------- 1 | flet>=0.25.1 -------------------------------------------------------------------------------- /python/apps/hello-world/hello.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | page.add(ft.Text("Hello, world!")) 6 | 7 | 8 | ft.app(main) 9 | -------------------------------------------------------------------------------- /python/apps/hello-world/requirements.txt: -------------------------------------------------------------------------------- 1 | flet>=0.25.1 -------------------------------------------------------------------------------- /python/apps/icons-browser/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM python:3-alpine 2 | 3 | WORKDIR /app 4 | 5 | COPY requirements.txt ./ 6 | RUN pip install --no-cache-dir -r requirements.txt 7 | 8 | COPY . . 9 | 10 | EXPOSE 8080 11 | 12 | CMD ["python", "./main.py"] 13 | -------------------------------------------------------------------------------- /python/apps/icons-browser/README.md: -------------------------------------------------------------------------------- 1 | # Flet Icons Browser with deployment to Fly.io 2 | 3 | Deploy: 4 | 5 | flyctl deploy 6 | 7 | Check deployment: 8 | 9 | flyctl status 10 | 11 | Re-deploy: 12 | 13 | flyctl deploy --no-cache -------------------------------------------------------------------------------- /python/apps/icons-browser/fly.toml: -------------------------------------------------------------------------------- 1 | app = "flet-icons-browser" 2 | 3 | kill_signal = "SIGINT" 4 | kill_timeout = 5 5 | processes = [] 6 | 7 | [env] 8 | FLET_SERVER_PORT = "8080" 9 | FLET_FORCE_WEB_VIEW = "true" 10 | 11 | [experimental] 12 | allowed_public_ports = [] 13 | auto_rollback = true 14 | 15 | [[services]] 16 | http_checks = [] 17 | internal_port = 8080 18 | processes = ["app"] 19 | protocol = "tcp" 20 | script_checks = [] 21 | 22 | [services.concurrency] 23 | hard_limit = 25 24 | soft_limit = 20 25 | type = "connections" 26 | 27 | [[services.ports]] 28 | force_https = true 29 | handlers = ["http"] 30 | port = 80 31 | 32 | [[services.ports]] 33 | handlers = ["tls", "http"] 34 | port = 443 35 | 36 | [[services.tcp_checks]] 37 | grace_period = "1s" 38 | interval = "15s" 39 | restart_limit = 0 40 | timeout = "2s" -------------------------------------------------------------------------------- /python/apps/icons-browser/requirements.txt: -------------------------------------------------------------------------------- 1 | flet>=0.27.0 -------------------------------------------------------------------------------- /python/apps/icons-cupertino-browser/requirements.txt: -------------------------------------------------------------------------------- 1 | flet>=0.26.0 -------------------------------------------------------------------------------- /python/apps/layouts/footer.py: -------------------------------------------------------------------------------- 1 | import flet 2 | from flet import Column, Container, Page, Row, Text 3 | 4 | 5 | def main(page: Page): 6 | 7 | main_content = Column(scroll="auto") 8 | 9 | for i in range(100): 10 | main_content.controls.append(Text(f"Line {i}")) 11 | 12 | page.padding = 0 13 | page.spacing = 0 14 | page.horizontal_alignment = "stretch" 15 | page.add( 16 | Container(main_content, padding=10, expand=True), 17 | Row([Container(Text("Footer"), bgcolor="yellow", padding=5, expand=True)]), 18 | ) 19 | 20 | 21 | flet.app(target=main, port=8550, view=flet.AppView.WEB_BROWSER) 22 | -------------------------------------------------------------------------------- /python/apps/routing-navigation/initial-route.py: -------------------------------------------------------------------------------- 1 | import flet 2 | from flet import Page, Text 3 | 4 | 5 | def main(page: Page): 6 | page.add(Text(f"Initial route: {page.route}")) 7 | 8 | 9 | flet.app(target=main, view=flet.AppView.WEB_BROWSER) 10 | -------------------------------------------------------------------------------- /python/apps/routing-navigation/requirements.txt: -------------------------------------------------------------------------------- 1 | flet>=0.25.1 -------------------------------------------------------------------------------- /python/apps/routing-navigation/route-change-event.py: -------------------------------------------------------------------------------- 1 | import flet 2 | from flet import Page, Text 3 | 4 | 5 | def main(page: Page): 6 | page.add(Text(f"Initial route: {page.route}")) 7 | 8 | def route_change(e): 9 | page.add(Text(f"New route: {e.route}")) 10 | 11 | page.on_route_change = route_change 12 | page.update() 13 | 14 | 15 | flet.app(target=main, view=flet.AppView.WEB_BROWSER) 16 | -------------------------------------------------------------------------------- /python/apps/studio-gallery/assets/github-mark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /python/apps/studio-gallery/pyproject.toml: -------------------------------------------------------------------------------- 1 | [tool.poetry] 2 | name = "studio-gallery" 3 | version = "0.1.0" 4 | description = "Sample apps for Flet Studio Gallery" 5 | authors = ["Appveyor Systems Inc. "] 6 | license = "Apache-2.0" 7 | readme = "README.md" 8 | 9 | [tool.poetry.dependencies] 10 | python = "^3.10" 11 | flet = "^0.7.4" 12 | 13 | [tool.poetry.group.dev.dependencies] 14 | black = "^23.3.0" 15 | 16 | [build-system] 17 | requires = ["poetry-core"] 18 | build-backend = "poetry.core.masonry.api" 19 | -------------------------------------------------------------------------------- /python/apps/todo/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM python:3-alpine 2 | 3 | WORKDIR /app 4 | 5 | COPY requirements.txt ./ 6 | RUN pip install --no-cache-dir -r requirements.txt 7 | 8 | COPY . . 9 | 10 | EXPOSE 8080 11 | 12 | CMD ["python", "./todo.py"] -------------------------------------------------------------------------------- /python/apps/todo/fly.toml: -------------------------------------------------------------------------------- 1 | app = "flet-todo" 2 | 3 | kill_signal = "SIGINT" 4 | kill_timeout = 5 5 | processes = [] 6 | 7 | [env] 8 | FLET_SERVER_PORT = "8080" 9 | FLET_FORCE_WEB_VIEW = "true" 10 | 11 | [experimental] 12 | allowed_public_ports = [] 13 | auto_rollback = true 14 | 15 | [[services]] 16 | http_checks = [] 17 | internal_port = 8080 18 | processes = ["app"] 19 | protocol = "tcp" 20 | script_checks = [] 21 | 22 | [services.concurrency] 23 | hard_limit = 25 24 | soft_limit = 20 25 | type = "connections" 26 | 27 | [[services.ports]] 28 | force_https = true 29 | handlers = ["http"] 30 | port = 80 31 | 32 | [[services.ports]] 33 | handlers = ["tls", "http"] 34 | port = 443 35 | 36 | [[services.tcp_checks]] 37 | grace_period = "1s" 38 | interval = "15s" 39 | restart_limit = 0 40 | timeout = "2s" -------------------------------------------------------------------------------- /python/apps/todo/requirements.txt: -------------------------------------------------------------------------------- 1 | flet==0.25.1 -------------------------------------------------------------------------------- /python/apps/trolli/DockerFile: -------------------------------------------------------------------------------- 1 | FROM python:3-alpine 2 | 3 | COPY . . 4 | 5 | RUN pip install --no-cache-dir -r requirements.txt 6 | 7 | EXPOSE 8080 8 | 9 | CMD ["python", "./src/main.py"] -------------------------------------------------------------------------------- /python/apps/trolli/README.md: -------------------------------------------------------------------------------- 1 | # flet-trello-clone 2 | A clone of trello built with Flet. 3 | 4 | 5 | Live demo [here](https://flet-trolli.fly.dev/) 6 | -------------------------------------------------------------------------------- /python/apps/trolli/assets/Pacifico-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flet-dev/examples/2545ad18af084211c97ab012b31c9aca02e90266/python/apps/trolli/assets/Pacifico-Regular.ttf -------------------------------------------------------------------------------- /python/apps/trolli/fly.toml: -------------------------------------------------------------------------------- 1 | # fly.toml file generated for flet-trolli on 2022-11-28T16:51:31-08:00 2 | 3 | app = "flet-trolli" 4 | kill_signal = "SIGINT" 5 | kill_timeout = 5 6 | processes = [] 7 | 8 | [env] 9 | FLET_SERVER_PORT = "8080" 10 | FLET_FORCE_WEB_VIEW = "true" 11 | 12 | [experimental] 13 | allowed_public_ports = [] 14 | auto_rollback = true 15 | 16 | [[services]] 17 | http_checks = [] 18 | internal_port = 8080 19 | processes = ["app"] 20 | protocol = "tcp" 21 | script_checks = [] 22 | [services.concurrency] 23 | hard_limit = 25 24 | soft_limit = 20 25 | type = "connections" 26 | 27 | [[services.ports]] 28 | force_https = true 29 | handlers = ["http"] 30 | port = 80 31 | 32 | [[services.ports]] 33 | handlers = ["tls", "http"] 34 | port = 443 35 | 36 | [[services.tcp_checks]] 37 | grace_period = "1s" 38 | interval = "15s" 39 | restart_limit = 0 40 | timeout = "2s" 41 | -------------------------------------------------------------------------------- /python/apps/trolli/pyproject.toml: -------------------------------------------------------------------------------- 1 | [project] 2 | name = "new-trolli" 3 | version = "0.1.0" 4 | description = "" 5 | readme = "README.md" 6 | requires-python = ">=3.8" 7 | dependencies = [ 8 | "flet==0.26.0" 9 | ] 10 | 11 | 12 | [tool.flet] 13 | # org name in reverse domain name notation, e.g. "com.mycompany". 14 | # Combined with project.name to build bundle ID for iOS and Android apps 15 | org = "com.mycompany" 16 | 17 | # project display name that is used as an app title on Android and iOS home screens, 18 | # shown in window titles and about app dialogs on desktop. 19 | product = "new-trolli" 20 | 21 | # company name to display in about app dialogs 22 | company = "Flet" 23 | 24 | # copyright text to display in about app dialogs 25 | copyright = "Copyright (C) 2024 by Flet" 26 | 27 | [tool.flet.app] 28 | path = "src" -------------------------------------------------------------------------------- /python/apps/trolli/requirements.txt: -------------------------------------------------------------------------------- 1 | flet>=0.25.1 2 | python-dotenv>=0.20.0 -------------------------------------------------------------------------------- /python/apps/trolli/src/user.py: -------------------------------------------------------------------------------- 1 | 2 | class User: 3 | 4 | def __init__(self, name, password): 5 | self.name = name 6 | self.password = password 7 | -------------------------------------------------------------------------------- /python/community/README.md: -------------------------------------------------------------------------------- 1 | # Community examples 2 | 3 | This is a directory with community examples/apps/components. 4 | -------------------------------------------------------------------------------- /python/community/colors_browser/.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /python/community/colors_browser/.gitignore: -------------------------------------------------------------------------------- 1 | __pycache__/ 2 | .Python 3 | build/ 4 | MANIFEST 5 | # PyInstaller 6 | # Usually these files are written by a python script from a template 7 | # before PyInstaller builds the exe, so as to inject date/other infos into it. 8 | *.manifest 9 | *.spec 10 | .cache 11 | .env 12 | .venv 13 | env/ 14 | venv/ 15 | ENV/ 16 | /assets/captures/ 17 | -------------------------------------------------------------------------------- /python/community/colors_browser/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM python:3-alpine 2 | 3 | WORKDIR /app 4 | 5 | COPY requirements.txt ./ 6 | RUN pip install --no-cache-dir -r requirements.txt 7 | 8 | COPY . . 9 | 10 | EXPOSE 8080 11 | 12 | CMD ["python", "./main.py"] 13 | -------------------------------------------------------------------------------- /python/community/colors_browser/fly.toml: -------------------------------------------------------------------------------- 1 | app = "flet-colors-browser" 2 | 3 | kill_signal = "SIGINT" 4 | kill_timeout = 5 5 | processes = [] 6 | 7 | [env] 8 | FLET_SERVER_PORT = "8080" 9 | FLET_FORCE_WEB_VIEW = "true" 10 | 11 | [experimental] 12 | allowed_public_ports = [] 13 | auto_rollback = true 14 | 15 | [[services]] 16 | http_checks = [] 17 | internal_port = 8080 18 | processes = ["app"] 19 | protocol = "tcp" 20 | script_checks = [] 21 | 22 | [services.concurrency] 23 | hard_limit = 25 24 | soft_limit = 20 25 | type = "connections" 26 | 27 | [[services.ports]] 28 | force_https = true 29 | handlers = ["http"] 30 | port = 80 31 | 32 | [[services.ports]] 33 | handlers = ["tls", "http"] 34 | port = 443 35 | 36 | [[services.tcp_checks]] 37 | grace_period = "1s" 38 | interval = "15s" 39 | restart_limit = 0 40 | timeout = "2s" -------------------------------------------------------------------------------- /python/community/colors_browser/requirements.txt: -------------------------------------------------------------------------------- 1 | flet>=0.1.54 -------------------------------------------------------------------------------- /python/community/datepicker/assets/datepicker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flet-dev/examples/2545ad18af084211c97ab012b31c9aca02e90266/python/community/datepicker/assets/datepicker.png -------------------------------------------------------------------------------- /python/community/datepicker/assets/datepicker_3_months.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flet-dev/examples/2545ad18af084211c97ab012b31c9aca02e90266/python/community/datepicker/assets/datepicker_3_months.png -------------------------------------------------------------------------------- /python/community/datepicker/assets/datepicker_disabled_dates.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flet-dev/examples/2545ad18af084211c97ab012b31c9aca02e90266/python/community/datepicker/assets/datepicker_disabled_dates.png -------------------------------------------------------------------------------- /python/community/datepicker/assets/datepicker_hide_prev_next_month.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flet-dev/examples/2545ad18af084211c97ab012b31c9aca02e90266/python/community/datepicker/assets/datepicker_hide_prev_next_month.png -------------------------------------------------------------------------------- /python/community/datepicker/assets/datepicker_locale.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flet-dev/examples/2545ad18af084211c97ab012b31c9aca02e90266/python/community/datepicker/assets/datepicker_locale.png -------------------------------------------------------------------------------- /python/community/datepicker/assets/datepicker_multiple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flet-dev/examples/2545ad18af084211c97ab012b31c9aca02e90266/python/community/datepicker/assets/datepicker_multiple.png -------------------------------------------------------------------------------- /python/community/datepicker/assets/datepicker_range.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flet-dev/examples/2545ad18af084211c97ab012b31c9aca02e90266/python/community/datepicker/assets/datepicker_range.png -------------------------------------------------------------------------------- /python/community/datepicker/assets/datetimepicker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flet-dev/examples/2545ad18af084211c97ab012b31c9aca02e90266/python/community/datepicker/assets/datetimepicker.png -------------------------------------------------------------------------------- /python/community/datepicker/datepicker/__init__: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flet-dev/examples/2545ad18af084211c97ab012b31c9aca02e90266/python/community/datepicker/datepicker/__init__ -------------------------------------------------------------------------------- /python/community/datepicker/datepicker/selection_type.py: -------------------------------------------------------------------------------- 1 | from enum import Enum 2 | 3 | class SelectionType(Enum): 4 | SINGLE = 0 5 | MULTIPLE = 1 6 | RANGE = 2 7 | 8 | @staticmethod 9 | def from_value(value): 10 | return SelectionType(value) -------------------------------------------------------------------------------- /python/community/datepicker/main.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | from example import Example 3 | 4 | def main(page: ft.Page): 5 | 6 | page.add(Example()) 7 | page.update() 8 | 9 | ft.app(target=main) 10 | -------------------------------------------------------------------------------- /python/community/datepicker/requirements.txt: -------------------------------------------------------------------------------- 1 | anyio==3.6.2 2 | certifi==2022.12.7 3 | flet==0.7.1 4 | flet-core==0.7.1 5 | h11==0.14.0 6 | httpcore==0.16.3 7 | httpx==0.23.3 8 | idna==3.4 9 | oauthlib==3.2.2 10 | packaging==23.1 11 | repath==0.9.0 12 | rfc3986==1.5.0 13 | six==1.16.0 14 | sniffio==1.3.0 15 | watchdog==2.3.1 16 | websocket-client==1.5.1 17 | websockets==10.4 18 | -------------------------------------------------------------------------------- /python/community/datetime_field/run.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | from .datetime_field import DatetimeField 4 | 5 | callback = lambda e : print(e) 6 | def main(page: ft.Page): 7 | calendar = DatetimeField(page=page, on_change=callback) 8 | page.add(calendar) 9 | 10 | ft.app(target=main) -------------------------------------------------------------------------------- /python/community/floating_menu_button/animated_menu_button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flet-dev/examples/2545ad18af084211c97ab012b31c9aca02e90266/python/community/floating_menu_button/animated_menu_button.png -------------------------------------------------------------------------------- /python/community/toasts/example.py: -------------------------------------------------------------------------------- 1 | import flet 2 | from flet import Page, colors, ElevatedButton, icons 3 | from flet_toasts import Toast 4 | 5 | def main(page: Page): 6 | btn = ElevatedButton("Toast") 7 | page.add(btn) 8 | Toast( 9 | page, 10 | icons.PERSON_SHARP, 11 | "Toast title", 12 | "Toast description", 13 | btn, 14 | colors.WHITE, 15 | ).struct() 16 | 17 | 18 | if __name__ == "__main__": 19 | flet.app(target=main) -------------------------------------------------------------------------------- /python/community/toasts/flet_toasts/__init__.py: -------------------------------------------------------------------------------- 1 | from flet_toasts.simple_toast import Toast -------------------------------------------------------------------------------- /python/community/toasts/readme.md: -------------------------------------------------------------------------------- 1 | # Simple toasts 2 | 3 | ## Components 4 | 5 | >Toast(page: Page, icon: str, msg_title: str, msg_desc: str, trigger: Type[Control], bgcolor: str = None, auto_close: int = 5) 6 | * page -> Instance of Page 7 | * icon -> Message Icon 8 | * msg_title -> Toast message title, after icon 9 | * msg_desc -> Toast message description 10 | * trigger -> A button to fire Toast message 11 | * bgcolor -> Toast message background color 12 | * auto_close -> Time till toast message is closed automatically 13 | -------------------------------------------------------------------------------- /python/community/url_shortner/urlShortner.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | import pyshorteners 3 | 4 | def main(page): 5 | def btn_click(e): 6 | if not txt_name.value: 7 | txt_name.error_text = "Please enter the url" 8 | page.update() 9 | else: 10 | name = txt_name.value 11 | s = pyshorteners.Shortener() 12 | # page.clean() 13 | page.add(ft.Text(f"Short link - {s.tinyurl.short(name)}")) 14 | 15 | txt_name = ft.TextField(label="Enter the url") 16 | 17 | page.add(txt_name, ft.ElevatedButton("Create URL!", on_click=btn_click)) 18 | 19 | ft.app(target=main) 20 | # ft.app(target=main, view=ft.WEB_BROWSER) -------------------------------------------------------------------------------- /python/community/weather_widget/examples/weather_example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | from weather_widget.weather_widget import Weather, WeatherAsync 4 | 5 | 6 | def main(page: ft.Page): 7 | 8 | weather_widget = Weather() 9 | weather_widget_async = WeatherAsync() 10 | 11 | page.add(weather_widget) 12 | page.add(weather_widget_async) 13 | 14 | 15 | ft.app(main) 16 | -------------------------------------------------------------------------------- /python/community/weather_widget/media/weather_widget.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flet-dev/examples/2545ad18af084211c97ab012b31c9aca02e90266/python/community/weather_widget/media/weather_widget.png -------------------------------------------------------------------------------- /python/community/weather_widget/pyproject.toml: -------------------------------------------------------------------------------- 1 | [tool.poetry] 2 | name = "weather-widget" 3 | version = "0.1.0" 4 | description = "" 5 | authors = ["InesaFitsner "] 6 | readme = "README.md" 7 | packages = [{include = "weather_widget"}] 8 | 9 | [tool.poetry.dependencies] 10 | python = "^3.11" 11 | flet = "^0.21.1" 12 | httpx = "^0.27.0" 13 | geocoder = "^1.38.1" 14 | 15 | 16 | [build-system] 17 | requires = ["poetry-core"] 18 | build-backend = "poetry.core.masonry.api" 19 | -------------------------------------------------------------------------------- /python/community/weather_widget/tests/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flet-dev/examples/2545ad18af084211c97ab012b31c9aca02e90266/python/community/weather_widget/tests/__init__.py -------------------------------------------------------------------------------- /python/community/weather_widget/weather_widget/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flet-dev/examples/2545ad18af084211c97ab012b31c9aca02e90266/python/community/weather_widget/weather_widget/__init__.py -------------------------------------------------------------------------------- /python/controls/animations/animate-button-on-hover.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | def animate(e): 6 | b.rotate = 0.1 if e.data == "true" else 0 7 | page.update() 8 | 9 | t = ft.Text() 10 | b = ft.ElevatedButton( 11 | "Hover over me, I'm animated!", 12 | rotate=0, 13 | animate_rotation=100, 14 | on_hover=animate, 15 | on_click=lambda e: page.add(ft.Text("Clicked! Try a long press!")), 16 | on_long_press=lambda e: page.add(ft.Text("I knew you could do it!")), 17 | ) 18 | 19 | page.add(b) 20 | 21 | 22 | ft.app(target=main) 23 | -------------------------------------------------------------------------------- /python/controls/animations/animate-offset.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | 6 | c = ft.Image( 7 | src="https://picsum.photos/200/300?1", 8 | width=200, 9 | height=300, 10 | offset=ft.transform.Offset(-2, 0), 11 | animate_offset=ft.animation.Animation(300, ft.AnimationCurve.BOUNCE_OUT), 12 | ) 13 | 14 | def animate(e): 15 | c.offset = ft.transform.Offset(0, 0) 16 | c.update() 17 | 18 | page.add( 19 | c, 20 | ft.ElevatedButton("Reveal the image!", on_click=animate), 21 | ) 22 | 23 | 24 | ft.app(main) 25 | -------------------------------------------------------------------------------- /python/controls/animations/animate-opacity.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | 6 | c = ft.Image(src="https://picsum.photos/200/300", opacity=None, animate_opacity=300) 7 | 8 | def animate_opacity(e): 9 | c.opacity = 0 if c.opacity == 1 else 1 10 | c.update() 11 | 12 | page.add( 13 | c, 14 | ft.ElevatedButton( 15 | "Animate opacity", 16 | on_click=animate_opacity, 17 | ), 18 | ) 19 | 20 | 21 | ft.app(main) 22 | -------------------------------------------------------------------------------- /python/controls/animations/animate-position.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | 6 | c1 = ft.Container(width=50, height=50, bgcolor="red", animate_position=1000) 7 | 8 | c2 = ft.Container( 9 | width=50, height=50, bgcolor="green", top=60, left=0, animate_position=500 10 | ) 11 | 12 | c3 = ft.Container( 13 | width=50, height=50, bgcolor="blue", top=120, left=0, animate_position=1000 14 | ) 15 | 16 | def animate_container(e): 17 | c1.top = 20 18 | c1.left = 200 19 | c2.top = 100 20 | c2.left = 40 21 | c3.top = 180 22 | c3.left = 100 23 | page.update() 24 | 25 | page.add( 26 | ft.Stack([c1, c2, c3], height=400), 27 | ft.ElevatedButton("Animate!", on_click=animate_container), 28 | ) 29 | 30 | 31 | ft.app(target=main) 32 | -------------------------------------------------------------------------------- /python/controls/animations/animate-rotation.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | 6 | c1 = ft.Container( 7 | width=140, 8 | height=100, 9 | left=200, 10 | top=100, 11 | bgcolor=ft.Colors.RED, 12 | border_radius=5, 13 | rotate=1, 14 | animate_rotation=1000, 15 | ) 16 | 17 | c2 = ft.Container( 18 | width=100, 19 | height=70, 20 | bgcolor=ft.Colors.BLUE, 21 | border_radius=5, 22 | rotate=ft.transform.Rotate(-1, alignment=ft.alignment.center_left), 23 | animate_rotation=ft.animation.Animation(duration=300), 24 | ) 25 | 26 | def animate(e): 27 | c1.rotate += 1 28 | c2.rotate.angle -= 1 29 | page.update() 30 | 31 | page.add( 32 | ft.Stack([c1, c2], width=500, height=300), 33 | ft.ElevatedButton("Animate!", on_click=animate), 34 | ) 35 | 36 | 37 | ft.app(main) 38 | -------------------------------------------------------------------------------- /python/controls/animations/animate-scale-docs.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | 6 | c = ft.Container( 7 | width=100, 8 | height=100, 9 | bgcolor=ft.Colors.BLUE, 10 | border_radius=5, 11 | scale=1, 12 | animate_scale=ft.animation.Animation(600, ft.AnimationCurve.BOUNCE_OUT), 13 | ) 14 | 15 | def animate(e): 16 | c.scale = 2 if c.scale == 1 else 1 17 | page.update() 18 | 19 | page.vertical_alignment = ft.MainAxisAlignment.CENTER 20 | page.horizontal_alignment = ft.CrossAxisAlignment.CENTER 21 | page.spacing = 30 22 | page.add( 23 | c, 24 | ft.ElevatedButton("Animate!", on_click=animate), 25 | ) 26 | 27 | 28 | ft.app(target=main) 29 | -------------------------------------------------------------------------------- /python/controls/animations/animate-single-container.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | 6 | c = ft.Container( 7 | width=150, 8 | height=150, 9 | bgcolor=ft.Colors.RED, 10 | animate=ft.animation.Animation(1000, ft.AnimationCurve.BOUNCE_OUT), 11 | ) 12 | 13 | def animate_container(e): 14 | c.width = 100 if c.width == 150 else 150 15 | c.height = 50 if c.height == 150 else 150 16 | c.bgcolor = ft.Colors.BLUE if c.bgcolor == ft.Colors.RED else ft.Colors.RED 17 | c.update() 18 | 19 | page.add(c, ft.ElevatedButton("Animate container", on_click=animate_container)) 20 | 21 | 22 | ft.app(main) 23 | -------------------------------------------------------------------------------- /python/controls/animations/animated-switcher/animate-image-switch.py: -------------------------------------------------------------------------------- 1 | import time 2 | 3 | import flet as ft 4 | 5 | 6 | def main(page: ft.Page): 7 | 8 | i = ft.Image(src="https://picsum.photos/200/300", width=200, height=300) 9 | 10 | def animate(e): 11 | sw.content = ft.Image( 12 | src=f"https://picsum.photos/200/300?{time.time()}", width=200, height=300 13 | ) 14 | page.update() 15 | 16 | sw = ft.AnimatedSwitcher( 17 | i, 18 | transition=ft.AnimatedSwitcherTransition.SCALE, 19 | duration=500, 20 | reverse_duration=100, 21 | switch_in_curve=ft.AnimationCurve.BOUNCE_OUT, 22 | switch_out_curve=ft.AnimationCurve.BOUNCE_IN, 23 | ) 24 | 25 | page.add( 26 | sw, 27 | ft.ElevatedButton("Animate!", on_click=animate), 28 | ) 29 | 30 | 31 | ft.app(main) 32 | -------------------------------------------------------------------------------- /python/controls/animations/bursting-flet.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | 6 | c = ft.Image( 7 | src="icons/icon-192.png", 8 | width=100, 9 | height=100, 10 | scale=1.0, 11 | animate_scale=ft.animation.Animation(300, ft.AnimationCurve.EASE_IN_QUINT), 12 | opacity=1.0, 13 | animate_opacity=ft.animation.Animation(300, ft.AnimationCurve.EASE_IN_QUINT), 14 | ) 15 | 16 | def animate(e): 17 | c.scale = 30 18 | c.opacity = 0 19 | c.update() 20 | 21 | page.vertical_alignment = ft.MainAxisAlignment.CENTER 22 | page.horizontal_alignment = ft.CrossAxisAlignment.CENTER 23 | page.add( 24 | ft.Column( 25 | [c, ft.ElevatedButton("Boom!", on_click=animate)], 26 | horizontal_alignment=ft.CrossAxisAlignment.CENTER, 27 | ) 28 | ) 29 | 30 | 31 | ft.app(target=main) 32 | -------------------------------------------------------------------------------- /python/controls/animations/image-slideshow.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | 6 | i1 = ft.Image( 7 | src="https://picsum.photos/200/300?1", 8 | animate_position=ft.animation.Animation(300, ft.AnimationCurve.BOUNCE_OUT), 9 | left=0, 10 | ) 11 | i2 = ft.Image( 12 | src="https://picsum.photos/200/300?2", 13 | animate_position=ft.animation.Animation(300, ft.AnimationCurve.BOUNCE_OUT), 14 | left=-400, 15 | ) 16 | 17 | def animate(e): 18 | i1.left = 400 if i1.left == 0 else 0 19 | i2.left = 0 if i2.left == -400 else -400 20 | page.update() 21 | 22 | page.add( 23 | ft.Stack( 24 | [i1, i2], 25 | width=200, 26 | height=300, 27 | ), 28 | ft.ElevatedButton("Slide!", on_click=animate), 29 | ) 30 | 31 | 32 | ft.app(main) 33 | -------------------------------------------------------------------------------- /python/controls/animations/lottie/lottie-basic.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | import flet_lottie as fl 3 | 4 | 5 | def main(page: ft.Page): 6 | l = fl.Lottie( 7 | src="https://raw.githubusercontent.com/xvrh/lottie-flutter/refs/heads/master/example/assets/Logo/LogoSmall.json", 8 | reverse=False, 9 | animate=True, 10 | ) 11 | c1 = ft.Container(content=l, bgcolor=ft.Colors.AMBER_ACCENT, padding=50) 12 | page.add(c1) 13 | 14 | 15 | ft.app(main) 16 | -------------------------------------------------------------------------------- /python/controls/animations/rive/rive-basic.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page): 5 | page.add( 6 | ft.Rive( 7 | "https://cdn.rive.app/animations/vehicles.riv", 8 | placeholder=ft.ProgressBar(), 9 | width=300, 10 | height=200, 11 | ) 12 | ) 13 | 14 | 15 | ft.app(main) 16 | -------------------------------------------------------------------------------- /python/controls/buttons/elevated-button/basic-elevated-buttons.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | page.title = "Basic elevated buttons" 6 | 7 | page.add( 8 | ft.ElevatedButton(text="Elevated button"), 9 | ft.Button("Disabled button", disabled=True), 10 | ) 11 | 12 | 13 | ft.app(main) 14 | -------------------------------------------------------------------------------- /python/controls/buttons/elevated-button/elevated-button-with-click-event.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | page.title = "Elevated button with 'click' event" 6 | page.theme_mode = ft.ThemeMode.LIGHT 7 | 8 | def button_clicked(e): 9 | b.data += 1 10 | t.value = f"Button clicked {b.data} time(s)" 11 | page.update() 12 | 13 | b = ft.ElevatedButton("Button with 'click' event", on_click=button_clicked, data=0) 14 | t = ft.Text() 15 | 16 | page.add(b, t) 17 | 18 | 19 | ft.app(main) 20 | -------------------------------------------------------------------------------- /python/controls/buttons/elevated-button/elevated-buttons-with-icons.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | page.title = "Elevated buttons with icons" 6 | 7 | page.add( 8 | ft.ElevatedButton("Button with icon", icon=ft.Icons.WAVES_ROUNDED), 9 | ft.ElevatedButton( 10 | "Button with colorful icon", 11 | icon=ft.Icons.PARK_ROUNDED, 12 | icon_color=ft.Colors.GREEN_400, 13 | ), 14 | ) 15 | 16 | 17 | ft.app(main) 18 | -------------------------------------------------------------------------------- /python/controls/buttons/filled-button/filled-button-example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | page.title = "Basic filled buttons" 6 | page.add( 7 | ft.FilledButton(text="Filled button"), 8 | ft.FilledButton("Disabled button", disabled=True), 9 | ft.FilledButton("Button with icon", icon=ft.Icons.ADD_OUTLINED), 10 | ) 11 | 12 | 13 | ft.app(main) 14 | -------------------------------------------------------------------------------- /python/controls/buttons/filled-tonal-button/filled-tonal-button-example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | page.title = "Basic filled tonal buttons" 6 | page.add( 7 | ft.FilledTonalButton(text="Filled tonal button"), 8 | ft.FilledTonalButton("Disabled button", disabled=True), 9 | ft.FilledTonalButton("Button with icon", icon=ft.Icons.ADD_OUTLINED), 10 | ) 11 | 12 | 13 | ft.app(main) 14 | -------------------------------------------------------------------------------- /python/controls/buttons/icon-button/icon-button-with-click-event.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | page.title = "Icon button with 'click' event" 6 | 7 | def button_clicked(e): 8 | b.data += 1 9 | t.value = f"Button clicked {b.data} time(s)" 10 | page.update() 11 | 12 | b = ft.IconButton( 13 | icon=ft.Icons.PLAY_CIRCLE_FILL_OUTLINED, on_click=button_clicked, data=0 14 | ) 15 | t = ft.Text() 16 | 17 | page.add(b, t) 18 | 19 | 20 | ft.app(target=main) 21 | -------------------------------------------------------------------------------- /python/controls/buttons/icon-button/toggle-icon-button.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | page.padding = 10 6 | page.horizontal_alignment = ft.CrossAxisAlignment.CENTER 7 | page.vertical_alignment = ft.MainAxisAlignment.CENTER 8 | 9 | def toggle_icon_button(e): 10 | e.control.selected = not e.control.selected 11 | e.control.update() 12 | 13 | page.add( 14 | ft.IconButton( 15 | icon=ft.Icons.BATTERY_1_BAR, 16 | selected_icon=ft.Icons.BATTERY_FULL, 17 | scale=5, 18 | on_click=toggle_icon_button, 19 | selected=False, 20 | style=ft.ButtonStyle( 21 | color={ 22 | ft.ControlState.SELECTED: ft.Colors.GREEN, 23 | ft.ControlState.DEFAULT: ft.Colors.RED, 24 | } 25 | ), 26 | ) 27 | ) 28 | 29 | 30 | ft.app(main) 31 | -------------------------------------------------------------------------------- /python/controls/buttons/outlined-button/basic-outlined-buttons.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | page.title = "Basic outlined buttons" 6 | page.add( 7 | ft.OutlinedButton(text="Outlined button"), 8 | ft.OutlinedButton("Disabled button", disabled=True), 9 | ) 10 | 11 | 12 | ft.app(main) 13 | -------------------------------------------------------------------------------- /python/controls/buttons/outlined-button/outlined-button-with-click-event.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | page.title = "Outlined button with 'click' event" 6 | page.theme_mode = ft.ThemeMode.LIGHT 7 | 8 | def button_clicked(e): 9 | b.data += 1 10 | t.value = f"Button clicked {b.data} time(s)" 11 | page.update() 12 | 13 | b = ft.OutlinedButton("Button with 'click' event", on_click=button_clicked, data=0) 14 | t = ft.Text() 15 | 16 | page.add(b, t) 17 | 18 | 19 | ft.app(main) 20 | -------------------------------------------------------------------------------- /python/controls/buttons/outlined-button/outlined-buttons-with-icons.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | page.title = "Outlined buttons with icons" 6 | page.add( 7 | ft.OutlinedButton("Button with icon", icon="chair_outlined"), 8 | ft.OutlinedButton( 9 | "Button with colorful icon", 10 | icon="park_rounded", 11 | icon_color="green400", 12 | ), 13 | ) 14 | 15 | 16 | ft.app(main) 17 | -------------------------------------------------------------------------------- /python/controls/buttons/text-button/basic-text-buttons.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | page.title = "Basic text buttons" 6 | page.add( 7 | ft.TextButton(text="Text button"), 8 | ft.TextButton("Disabled button", disabled=True), 9 | ) 10 | 11 | 12 | ft.app(main) 13 | -------------------------------------------------------------------------------- /python/controls/buttons/text-button/text-button-with-click-event.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | page.title = "Text button with 'click' event" 6 | 7 | def button_clicked(e): 8 | b.data += 1 9 | t.value = f"Button clicked {b.data} time(s)" 10 | page.update() 11 | 12 | b = ft.TextButton("Button with 'click' event", on_click=button_clicked, data=0) 13 | t = ft.Text() 14 | 15 | page.add(b, t) 16 | 17 | 18 | ft.app(main) 19 | -------------------------------------------------------------------------------- /python/controls/buttons/text-button/text-buttons-with-icons.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | page.title = "Text buttons with icons" 6 | page.add( 7 | ft.TextButton("Button with icon", icon=ft.Icons.WAVES_OUTLINED), 8 | ft.TextButton( 9 | "Button with colorful icon", 10 | icon=ft.Icons.PARK_ROUNDED, 11 | icon_color=ft.Colors.GREEN_400, 12 | ), 13 | ) 14 | 15 | 16 | ft.app(main) 17 | -------------------------------------------------------------------------------- /python/controls/charts/matplotlib-chart/mpl-barchart-example.py: -------------------------------------------------------------------------------- 1 | import matplotlib 2 | import matplotlib.pyplot as plt 3 | 4 | import flet as ft 5 | from flet.matplotlib_chart import MatplotlibChart 6 | 7 | matplotlib.use("svg") 8 | 9 | 10 | def main(page: ft.Page): 11 | 12 | fig, ax = plt.subplots() 13 | 14 | fruits = ["apple", "blueberry", "cherry", "orange"] 15 | counts = [40, 100, 30, 55] 16 | bar_labels = ["red", "blue", "_red", "orange"] 17 | bar_colors = ["tab:red", "tab:blue", "tab:red", "tab:orange"] 18 | 19 | ax.bar(fruits, counts, label=bar_labels, color=bar_colors) 20 | 21 | ax.set_ylabel("fruit supply") 22 | ax.set_title("Fruit supply by kind and color") 23 | ax.legend(title="Fruit color") 24 | 25 | page.add(MatplotlibChart(fig, expand=True)) 26 | 27 | 28 | ft.app(main) 29 | -------------------------------------------------------------------------------- /python/controls/charts/matplotlib-chart/mpl-finance.py: -------------------------------------------------------------------------------- 1 | import os 2 | import matplotlib 3 | import mplfinance as mpf 4 | import pandas as pd 5 | 6 | import flet as ft 7 | from flet.matplotlib_chart import MatplotlibChart 8 | 9 | matplotlib.use("svg") 10 | 11 | 12 | def main(page: ft.Page): 13 | 14 | csv_path = os.path.join( 15 | os.path.dirname(os.path.abspath(__file__)), "assets/SP500_NOV2019_Hist.csv" 16 | ) 17 | print(csv_path) 18 | daily = pd.read_csv(csv_path, index_col=0, parse_dates=True) 19 | daily.index.name = "Date" 20 | daily.shape 21 | daily.head(3) 22 | daily.tail(3) 23 | 24 | fig, axlist = mpf.plot(daily, type="candle", mav=(3, 6, 9), returnfig=True) 25 | 26 | page.add(MatplotlibChart(fig, expand=True)) 27 | 28 | 29 | ft.app(target=main) 30 | -------------------------------------------------------------------------------- /python/controls/charts/plotly-chart/plotly-barchart.py: -------------------------------------------------------------------------------- 1 | import plotly.express as px 2 | 3 | import flet as ft 4 | from flet.plotly_chart import PlotlyChart 5 | 6 | 7 | def main(page: ft.Page): 8 | 9 | df = px.data.gapminder().query("continent == 'Oceania'") 10 | fig = px.bar( 11 | df, 12 | x="year", 13 | y="pop", 14 | hover_data=["lifeExp", "gdpPercap"], 15 | color="country", 16 | labels={"pop": "population of Canada"}, 17 | height=400, 18 | ) 19 | 20 | page.add(PlotlyChart(fig, expand=True)) 21 | 22 | 23 | ft.app(main) 24 | -------------------------------------------------------------------------------- /python/controls/charts/plotly-chart/plotly-linechart.py: -------------------------------------------------------------------------------- 1 | import plotly.express as px 2 | 3 | import flet as ft 4 | from flet.plotly_chart import PlotlyChart 5 | 6 | 7 | def main(page: ft.Page): 8 | 9 | df = px.data.gapminder().query("continent=='Oceania'") 10 | fig = px.line(df, x="year", y="lifeExp", color="country") 11 | 12 | page.add(PlotlyChart(fig, expand=True)) 13 | 14 | 15 | ft.app(main) 16 | -------------------------------------------------------------------------------- /python/controls/charts/plotly-chart/plotly-piechart.py: -------------------------------------------------------------------------------- 1 | import plotly.graph_objects as go 2 | 3 | import flet as ft 4 | from flet.plotly_chart import PlotlyChart 5 | 6 | 7 | def main(page: ft.Page): 8 | 9 | labels = ["Oxygen", "Hydrogen", "Carbon_Dioxide", "Nitrogen"] 10 | values = [4500, 2500, 1053, 500] 11 | 12 | fig = go.Figure(data=[go.Pie(labels=labels, values=values)]) 13 | 14 | page.add(PlotlyChart(fig, expand=True)) 15 | 16 | 17 | ft.app(main) 18 | -------------------------------------------------------------------------------- /python/controls/cupertino/cupertino-buttons/cupertino-filled-button-example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | page.add( 6 | ft.CupertinoFilledButton( 7 | content=ft.Text("CupertinoFilled"), 8 | opacity_on_click=0.3, 9 | on_click=lambda e: print("CupertinoFilledButton clicked!"), 10 | ), 11 | ) 12 | 13 | 14 | ft.app(main) 15 | -------------------------------------------------------------------------------- /python/controls/cupertino/cupertino-buttons/cupertino-segmented-button-example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page): 5 | page.theme_mode = ft.ThemeMode.LIGHT 6 | 7 | page.add( 8 | ft.CupertinoSegmentedButton( 9 | selected_index=1, 10 | selected_color=ft.Colors.RED_400, 11 | on_change=lambda e: print(f"selected_index: {e.data}"), 12 | controls=[ 13 | ft.Text("One"), 14 | ft.Container( 15 | padding=ft.padding.symmetric(10, 30), 16 | content=ft.Text("Two"), 17 | ), 18 | ft.Container( 19 | padding=ft.padding.symmetric(5, 10), 20 | content=ft.Text("Three"), 21 | ), 22 | ], 23 | padding=ft.padding.symmetric(20, 50), 24 | ), 25 | ) 26 | 27 | 28 | ft.app(main) 29 | -------------------------------------------------------------------------------- /python/controls/cupertino/cupertino-buttons/cupertino-sliding-segmented-button.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page): 5 | page.title = "CupertinoSlidingSegmentedButton example" 6 | page.theme_mode = ft.ThemeMode.LIGHT 7 | 8 | def handle_change(e): 9 | print(f"selected_index: {e.data}") 10 | page.open(ft.SnackBar(ft.Text(f"segment {int(e.data) + 1} chosen"))) 11 | 12 | page.add( 13 | ft.CupertinoSlidingSegmentedButton( 14 | selected_index=1, 15 | thumb_color=ft.Colors.BLUE_400, 16 | on_change=handle_change, 17 | controls=[ 18 | ft.Text("One"), 19 | ft.Text("Two"), 20 | ft.Text("Three"), 21 | ], 22 | ), 23 | ) 24 | 25 | 26 | ft.app(main) 27 | -------------------------------------------------------------------------------- /python/controls/cupertino/cupertino-information-displays/cupertino-activity-indicator-example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page): 5 | page.theme_mode = ft.ThemeMode.LIGHT 6 | 7 | page.add( 8 | ft.CupertinoActivityIndicator( 9 | radius=50, 10 | color=ft.Colors.RED, 11 | animating=True, 12 | ) 13 | ) 14 | 15 | 16 | ft.app(main) 17 | -------------------------------------------------------------------------------- /python/controls/cupertino/cupertino-input-and-selections/cupertino-checkbox-example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | page.add( 6 | ft.CupertinoCheckbox(label="Cupertino Checkbox", value=True), 7 | ft.Checkbox(label="Material Checkbox", value=True), 8 | ft.Container(height=20), 9 | ft.Text( 10 | "Adaptive Checkbox shows as CupertinoCheckbox on macOS and iOS and as Checkbox on other platforms:" 11 | ), 12 | ft.Checkbox(adaptive=True, label="Adaptive Checkbox", value=True), 13 | ) 14 | 15 | 16 | ft.app(main) 17 | -------------------------------------------------------------------------------- /python/controls/cupertino/cupertino-input-and-selections/cupertino-switch-example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | page.add( 6 | ft.CupertinoSwitch( 7 | label="Cupertino Switch", 8 | value=True, 9 | ), 10 | ft.Switch( 11 | label="Material Switch", 12 | value=True, 13 | thumb_color={ft.ControlState.SELECTED: ft.Colors.BLUE}, 14 | track_color=ft.Colors.YELLOW, 15 | focus_color=ft.Colors.PURPLE, 16 | ), 17 | ft.Container(height=20), 18 | ft.Text( 19 | "Adaptive Switch shows as CupertinoSwitch on macOS and iOS and as Switch on other platforms:" 20 | ), 21 | ft.Switch( 22 | adaptive=True, 23 | label="Adaptive Switch", 24 | value=True, 25 | ), 26 | ) 27 | 28 | 29 | ft.app(main) 30 | -------------------------------------------------------------------------------- /python/controls/cupertino/cupertino-input-and-selections/cupertino-textfield-example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | 6 | page.add( 7 | ft.TextField( 8 | label="Material text field", 9 | label_style=ft.TextStyle(color=ft.Colors.GREY_400), 10 | ), 11 | ft.CupertinoTextField( 12 | placeholder_text="Cupertino text field", 13 | placeholder_style=ft.TextStyle(color=ft.Colors.GREY_400), 14 | ), 15 | ft.TextField( 16 | adaptive=True, 17 | label="Adaptive text field", 18 | label_style=ft.TextStyle(color=ft.Colors.GREY_400), 19 | ), 20 | ) 21 | 22 | 23 | ft.app(main) 24 | -------------------------------------------------------------------------------- /python/controls/cupertino/cupertino-navigation/cupertino-appbar-example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | page.theme_mode = ft.ThemeMode.LIGHT 6 | 7 | page.appbar = ft.CupertinoAppBar( 8 | leading=ft.Icon(ft.Icons.PALETTE), 9 | bgcolor=ft.Colors.SURFACE_CONTAINER_HIGHEST, 10 | trailing=ft.Icon(ft.Icons.WB_SUNNY_OUTLINED), 11 | middle=ft.Text("CupertinoAppBar Example"), 12 | brightness=ft.Brightness.LIGHT, 13 | ) 14 | page.add(ft.Text("Body!")) 15 | 16 | 17 | ft.app(main) 18 | -------------------------------------------------------------------------------- /python/controls/cupertino/cupertino-navigation/cupertino-navigation-bar-example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | page.title = "CupertinoNavigationBar Example" 6 | page.navigation_bar = ft.CupertinoNavigationBar( 7 | bgcolor=ft.Colors.AMBER_100, 8 | inactive_color=ft.Colors.GREY, 9 | active_color=ft.Colors.BLACK, 10 | on_change=lambda e: print("Selected tab:", e.control.selected_index), 11 | destinations=[ 12 | ft.NavigationBarDestination(icon=ft.Icons.EXPLORE, label="Explore"), 13 | ft.NavigationBarDestination(icon=ft.Icons.COMMUTE, label="Commute"), 14 | ft.NavigationBarDestination( 15 | icon=ft.Icons.BOOKMARK_BORDER, 16 | selected_icon=ft.Icons.BOOKMARK, 17 | label="Favorites", 18 | ), 19 | ], 20 | ) 21 | page.add(ft.SafeArea(ft.Text("Body!"))) 22 | 23 | 24 | ft.app(main) 25 | -------------------------------------------------------------------------------- /python/controls/dialogs-alerts-panels/snack-bar/simple-snack.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | counter = 0 6 | 7 | def on_click(e): 8 | nonlocal counter 9 | page.open(ft.SnackBar(ft.Text(f"Counter value at {counter}"))) 10 | counter += 1 11 | page.update() 12 | 13 | page.add(ft.ElevatedButton("Open SnackBar", on_click=on_click)) 14 | 15 | 16 | ft.app(target=main) 17 | -------------------------------------------------------------------------------- /python/controls/dialogs-alerts-panels/snack-bar/snack-counter-example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | class Data: 5 | def __init__(self) -> None: 6 | self.counter = 0 7 | 8 | def increment(self): 9 | self.counter += 1 10 | 11 | def decrement(self): 12 | self.counter -= 1 13 | 14 | 15 | d = Data() 16 | 17 | 18 | def main(page): 19 | page.title = "SnackBar examples" 20 | 21 | sb = ft.SnackBar( 22 | content=ft.Text(f"You did it!"), 23 | action="Undo it!", 24 | on_action=lambda e: d.decrement(), 25 | ) 26 | 27 | def on_click(e): 28 | d.increment() 29 | sb.content.value = f"You did it x {d.counter}" 30 | page.open(sb) 31 | page.update() 32 | 33 | page.add(ft.ElevatedButton("Open SnackBar", on_click=on_click)) 34 | 35 | 36 | ft.app(main) 37 | -------------------------------------------------------------------------------- /python/controls/information-displays/canvas/canvas-face.py: -------------------------------------------------------------------------------- 1 | import math 2 | 3 | import flet as ft 4 | import flet.canvas as cv 5 | 6 | 7 | def main(page: ft.Page): 8 | stroke_paint = ft.Paint(stroke_width=2, style=ft.PaintingStyle.STROKE) 9 | fill_paint = ft.Paint(style=ft.PaintingStyle.FILL) 10 | cp = cv.Canvas( 11 | [ 12 | cv.Circle(100, 100, 50, stroke_paint), 13 | cv.Circle(80, 90, 10, stroke_paint), 14 | cv.Circle(84, 87, 5, fill_paint), 15 | cv.Circle(120, 90, 10, stroke_paint), 16 | cv.Circle(124, 87, 5, fill_paint), 17 | cv.Arc(70, 95, 60, 40, 0, math.pi, paint=stroke_paint), 18 | ], 19 | width=float("inf"), 20 | expand=True, 21 | ) 22 | 23 | page.add(cp) 24 | 25 | 26 | ft.app(main) 27 | -------------------------------------------------------------------------------- /python/controls/information-displays/icon/icons-example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | page.add( 6 | ft.Row( 7 | [ 8 | ft.Icon(name=ft.Icons.FAVORITE, color=ft.Colors.PINK), 9 | ft.Icon(name=ft.Icons.AUDIOTRACK, color=ft.Colors.GREEN_400, size=30), 10 | ft.Icon(name=ft.Icons.BEACH_ACCESS, color=ft.Colors.BLUE, size=50), 11 | ft.Icon(name="settings", color="#c1c1c1"), 12 | ] 13 | ) 14 | ) 15 | 16 | 17 | ft.app(main) 18 | -------------------------------------------------------------------------------- /python/controls/information-displays/image/custom-svg-animation.py: -------------------------------------------------------------------------------- 1 | from time import sleep 2 | import flet as ft 3 | 4 | 5 | def main(page: ft.Page): 6 | 7 | svg_content = """ 8 | 9 | 10 | 11 | 12 | 13 | """ 14 | img = ft.Image(src=svg_content.format(0, 0)) 15 | page.add(img) 16 | 17 | for c in range(0, 10): 18 | for i in range(0, 10): 19 | img.src = svg_content.format(i * 10, i * 10) 20 | img.update() 21 | sleep(0.1) 22 | 23 | 24 | ft.app(target=main) 25 | -------------------------------------------------------------------------------- /python/controls/information-displays/markdown/markdown-custom-theme.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | page.add( 6 | ft.Container( 7 | content=ft.Markdown( 8 | "I can read this!", 9 | ), 10 | bgcolor="#550000", 11 | padding=20, 12 | theme=ft.Theme( 13 | text_theme=ft.TextTheme( 14 | body_medium=ft.TextStyle(color=ft.Colors.WHITE), 15 | body_large=ft.TextStyle(color=ft.Colors.WHITE), 16 | body_small=ft.TextStyle(color=ft.Colors.WHITE), 17 | ) 18 | ), 19 | ) 20 | ) 21 | 22 | 23 | ft.app(target=main) 24 | -------------------------------------------------------------------------------- /python/controls/information-displays/markdown/markdown-event-example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | def open_url(e): 6 | page.launch_url(e.data) 7 | 8 | page.add( 9 | ft.Markdown( 10 | "[inline-style](https://www.google.com)", 11 | extension_set=ft.MarkdownExtensionSet.GITHUB_WEB, 12 | on_tap_link=open_url, 13 | expand=True, 14 | ), 15 | ) 16 | 17 | 18 | ft.app(main) 19 | -------------------------------------------------------------------------------- /python/controls/information-displays/progress-bar/progress-bar.py: -------------------------------------------------------------------------------- 1 | from time import sleep 2 | 3 | import flet as ft 4 | 5 | 6 | def main(page: ft.Page): 7 | pb = ft.ProgressBar(width=400) 8 | pbl = ft.Text("Doing something...") 9 | 10 | page.add( 11 | ft.Text("Linear progress indicator", style=ft.TextThemeStyle.HEADLINE_SMALL), 12 | ft.Column([pbl, pb]), 13 | ft.Text("Indeterminate progress bar", style=ft.TextThemeStyle.HEADLINE_SMALL), 14 | ft.ProgressBar(width=400, color=ft.Colors.AMBER, bgcolor="#eeeeee"), 15 | ) 16 | 17 | for i in range(0, 101): 18 | 19 | pb.value = i * 0.01 20 | sleep(0.1) 21 | if i == 100: 22 | pbl.value = "Finished!" 23 | page.update() 24 | 25 | 26 | ft.app(main) 27 | -------------------------------------------------------------------------------- /python/controls/information-displays/progress-ring/gauge-with-progress.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | 6 | page.add( 7 | ft.Stack( 8 | [ 9 | ft.Container(ft.Text("60%"), alignment=ft.alignment.center), 10 | ft.ProgressRing( 11 | value=0.6, 12 | width=100, 13 | height=100, 14 | ), 15 | ], 16 | width=100, 17 | height=100, 18 | ) 19 | ) 20 | 21 | 22 | ft.app(target=main) 23 | -------------------------------------------------------------------------------- /python/controls/information-displays/progress-ring/progress-ring.py: -------------------------------------------------------------------------------- 1 | from time import sleep 2 | import flet as ft 3 | 4 | 5 | def main(page: ft.Page): 6 | pr = ft.ProgressRing(width=16, height=16, stroke_width=2) 7 | prl = ft.Text("Wait for the completion...") 8 | page.add( 9 | ft.Text("Circular progress indicator", style=ft.TextThemeStyle.HEADLINE_SMALL), 10 | ft.Row([pr, prl]), 11 | ft.Text( 12 | "Indeterminate cicrular progress", style=ft.TextThemeStyle.HEADLINE_SMALL 13 | ), 14 | ft.Column( 15 | [ft.ProgressRing(), ft.Text("I'm going to run for ages...")], 16 | horizontal_alignment=ft.CrossAxisAlignment.CENTER, 17 | ), 18 | ) 19 | 20 | for i in range(0, 101): 21 | pr.value = i * 0.01 22 | sleep(0.1) 23 | if i == 100: 24 | prl.value = "Finished!" 25 | page.update() 26 | 27 | 28 | ft.app(main) 29 | -------------------------------------------------------------------------------- /python/controls/information-displays/text/richtext-gradient.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | page.add( 6 | ft.Text( 7 | spans=[ 8 | ft.TextSpan( 9 | "Greetings, planet!", 10 | ft.TextStyle( 11 | size=40, 12 | weight=ft.FontWeight.BOLD, 13 | foreground=ft.Paint( 14 | gradient=ft.PaintLinearGradient( 15 | (0, 20), (150, 20), [ft.Colors.RED, ft.Colors.YELLOW] 16 | ) 17 | ), 18 | ), 19 | ), 20 | ], 21 | ) 22 | ) 23 | 24 | 25 | ft.app(main) 26 | -------------------------------------------------------------------------------- /python/controls/information-displays/text/variable-weight-font.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | page.fonts = { 6 | "RobotoSlab": "https://github.com/google/fonts/raw/main/apache/robotoslab/RobotoSlab%5Bwght%5D.ttf" 7 | } 8 | 9 | t = ft.Text( 10 | "This is rendered with Roboto Slab", 11 | size=30, 12 | font_family="RobotoSlab", 13 | weight=ft.FontWeight.W_100, 14 | ) 15 | 16 | def width_changed(e): 17 | t.weight = f"w{int(e.control.value)}" 18 | t.update() 19 | 20 | page.add( 21 | t, 22 | ft.Slider( 23 | min=100, 24 | max=900, 25 | divisions=8, 26 | label="{value}", 27 | width=500, 28 | on_change=width_changed, 29 | ), 30 | ) 31 | 32 | 33 | ft.app(target=main) 34 | -------------------------------------------------------------------------------- /python/controls/information-displays/web-view/web-view-example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | import flet_webview as ftwv 3 | 4 | 5 | def main(page: ft.Page): 6 | wv = ftwv.WebView( 7 | url="https://flet.dev", 8 | on_page_started=lambda _: print("Page started"), 9 | on_page_ended=lambda _: print("Page ended"), 10 | on_web_resource_error=lambda e: print("Page error:", e.data), 11 | expand=True, 12 | ) 13 | page.add(wv) 14 | 15 | 16 | ft.app(main) 17 | -------------------------------------------------------------------------------- /python/controls/input-and-selections/auto-complete/auto-complete-example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | page.add( 6 | ft.AutoComplete( 7 | suggestions=[ 8 | ft.AutoCompleteSuggestion(key="one 1", value="One"), 9 | ft.AutoCompleteSuggestion(key="two 2", value="Two"), 10 | ft.AutoCompleteSuggestion(key="three 3", value="Three"), 11 | ], 12 | on_select=lambda e: print(e.control.selected_index, e.selection), 13 | ), 14 | ft.Text("Type in 1, 2 or 3 to receive suggestions."), 15 | ) 16 | 17 | 18 | ft.app(main) 19 | -------------------------------------------------------------------------------- /python/controls/input-and-selections/checkbox/checkbox-basic.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | def button_clicked(e): 6 | t.value = f"Checkboxes values are: {c1.value}, {c2.value}, {c3.value}, {c4.value}, {c5.value}." 7 | page.update() 8 | 9 | t = ft.Text() 10 | c1 = ft.Checkbox(label="Unchecked by default checkbox", value=False) 11 | c2 = ft.Checkbox(label="Undefined by default tristate checkbox", tristate=True) 12 | c3 = ft.Checkbox(label="Checked by default checkbox", value=True) 13 | c4 = ft.Checkbox(label="Disabled checkbox", disabled=True) 14 | c5 = ft.Checkbox( 15 | label="Checkbox with rendered label_position='left'", 16 | label_position=ft.LabelPosition.LEFT, 17 | ) 18 | b = ft.ElevatedButton(text="Submit", on_click=button_clicked) 19 | page.add(c1, c2, c3, c4, c5, b, t) 20 | 21 | 22 | ft.app(main) 23 | -------------------------------------------------------------------------------- /python/controls/input-and-selections/checkbox/checkbox-with-event.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | def checkbox_changed(e): 6 | page.add(ft.Text(f"Checkbox value changed to {c.value}")) 7 | page.update() 8 | 9 | c = ft.Checkbox(label="Checkbox with 'change' event", on_change=checkbox_changed) 10 | 11 | page.add(c) 12 | 13 | 14 | ft.app(main) 15 | -------------------------------------------------------------------------------- /python/controls/input-and-selections/checkbox/styled-checkbox.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | page.add( 6 | ft.Checkbox(label="Checkbox with default style"), 7 | ft.Checkbox( 8 | label="Checkbox with constant fill color", 9 | fill_color=ft.Colors.RED, 10 | check_color=ft.Colors.YELLOW, 11 | ), 12 | ft.Checkbox( 13 | label="Checkbox with dynamic fill color", 14 | fill_color={ 15 | ft.ControlState.HOVERED: ft.Colors.BLUE, 16 | ft.ControlState.SELECTED: ft.Colors.GREEN, 17 | ft.ControlState.DEFAULT: ft.Colors.RED, 18 | }, 19 | ), 20 | ) 21 | 22 | 23 | ft.app(main) 24 | -------------------------------------------------------------------------------- /python/controls/input-and-selections/chip/chip-filter-example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | def amenity_selected(e): 6 | page.update() 7 | 8 | title = ft.Row([ft.Icon(ft.Icons.HOTEL_CLASS), ft.Text("Amenities")]) 9 | amenities = ["Washer / Dryer", "Ramp access", "Dogs OK", "Cats OK", "Smoke-free"] 10 | amenity_chips = [] 11 | 12 | for amenity in amenities: 13 | amenity_chips.append( 14 | ft.Chip( 15 | label=ft.Text(amenity), 16 | bgcolor=ft.Colors.GREEN_200, 17 | disabled_color=ft.Colors.GREEN_100, 18 | autofocus=True, 19 | on_select=amenity_selected, 20 | ) 21 | ) 22 | 23 | page.add(title, ft.Row(amenity_chips)) 24 | 25 | 26 | ft.app(main) 27 | -------------------------------------------------------------------------------- /python/controls/input-and-selections/dropdownM2/basic-dropdown.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | def button_clicked(e): 6 | t.value = f"Dropdown value is: {dd.value}" 7 | page.update() 8 | 9 | t = ft.Text() 10 | b = ft.ElevatedButton(text="Submit", on_click=button_clicked) 11 | dd = ft.DropdownM2( 12 | width=100, 13 | options=[ 14 | ft.dropdownm2.Option("Red"), 15 | ft.dropdownm2.Option("Green"), 16 | ft.dropdownm2.Option("Blue"), 17 | ], 18 | ) 19 | page.add(dd, b, t) 20 | 21 | 22 | ft.app(main) 23 | -------------------------------------------------------------------------------- /python/controls/input-and-selections/dropdownM2/dropdown-label-and-hint.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | page.add( 6 | ft.DropdownM2( 7 | label="Color", 8 | hint_text="Choose your favourite color?", 9 | options=[ 10 | ft.dropdownm2.Option("Red"), 11 | ft.dropdownm2.Option("Green"), 12 | ft.dropdownm2.Option("Blue"), 13 | ], 14 | autofocus=True, 15 | ) 16 | ) 17 | 18 | 19 | ft.app(main) 20 | -------------------------------------------------------------------------------- /python/controls/input-and-selections/dropdownM2/dropdown-on-change-event.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | def dropdown_changed(e): 6 | t.value = f"Dropdown changed to {dd.value}" 7 | page.update() 8 | 9 | t = ft.Text() 10 | dd = ft.DropdownM2( 11 | on_change=dropdown_changed, 12 | options=[ 13 | ft.dropdownm2.Option("Red"), 14 | ft.dropdownm2.Option("Green"), 15 | ft.dropdownm2.Option("Blue"), 16 | ], 17 | width=200, 18 | ) 19 | page.add(dd, t) 20 | 21 | 22 | ft.app(main) 23 | -------------------------------------------------------------------------------- /python/controls/input-and-selections/radio/radiogroup-basic.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page): 5 | def button_clicked(e): 6 | t.value = f"Your favorite color is: {cg.value}" 7 | page.update() 8 | 9 | t = ft.Text() 10 | b = ft.ElevatedButton(text="Submit", on_click=button_clicked) 11 | cg = ft.RadioGroup( 12 | content=ft.Column( 13 | [ 14 | ft.Radio(value="red", label="Red"), 15 | ft.Radio(value="green", label="Green"), 16 | ft.Radio(value="blue", label="Blue"), 17 | ] 18 | ) 19 | ) 20 | 21 | page.add(ft.Text("Select your favorite color:"), cg, b, t) 22 | 23 | 24 | ft.app(main) 25 | -------------------------------------------------------------------------------- /python/controls/input-and-selections/radio/radiogroup-with-event.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page): 5 | def radiogroup_changed(e): 6 | t.value = f"Your favorite color is: {e.control.value}" 7 | page.update() 8 | 9 | t = ft.Text() 10 | cg = ft.RadioGroup( 11 | content=ft.Column( 12 | [ 13 | ft.Radio(value="red", label="Red"), 14 | ft.Radio(value="green", label="Green"), 15 | ft.Radio(value="blue", label="Blue"), 16 | ] 17 | ), 18 | on_change=radiogroup_changed, 19 | ) 20 | 21 | page.add(ft.Text("Select your favorite color:"), cg, t) 22 | 23 | 24 | ft.app(main) 25 | -------------------------------------------------------------------------------- /python/controls/input-and-selections/range-slider/range-slider-example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | range_slider = ft.RangeSlider( 6 | min=0, 7 | max=50, 8 | start_value=10, 9 | divisions=10, 10 | end_value=20, 11 | inactive_color=ft.Colors.GREEN_300, 12 | active_color=ft.Colors.GREEN_700, 13 | overlay_color=ft.Colors.GREEN_100, 14 | label="{value}%", 15 | ) 16 | 17 | page.add( 18 | ft.Column( 19 | horizontal_alignment=ft.CrossAxisAlignment.CENTER, 20 | controls=[ 21 | ft.Text( 22 | "Range slider with divisions and labels", 23 | size=20, 24 | weight=ft.FontWeight.BOLD, 25 | ), 26 | ft.Container(height=30), 27 | range_slider, 28 | ], 29 | ) 30 | ) 31 | 32 | 33 | ft.app(main) 34 | -------------------------------------------------------------------------------- /python/controls/input-and-selections/slider/slider-basic.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page): 5 | page.add( 6 | ft.Text("Default slider:"), 7 | ft.Slider(), 8 | ft.Text("Default disabled slider:"), 9 | ft.Slider(disabled=True), 10 | ) 11 | 12 | 13 | ft.app(main) 14 | -------------------------------------------------------------------------------- /python/controls/input-and-selections/slider/slider-random-change.py: -------------------------------------------------------------------------------- 1 | import time 2 | import random 3 | import flet as ft 4 | 5 | 6 | def main(page): 7 | 8 | def slider_changed(e): 9 | t.value = f"Slider changed to {e.control.value}" 10 | page.update() 11 | 12 | t = ft.Text() 13 | s = ft.Slider(label="{value}", on_change=slider_changed) 14 | 15 | page.add( 16 | ft.Text("Slider with 'on_change' event:"), 17 | s, 18 | t, 19 | ) 20 | 21 | while True: 22 | time.sleep(1) 23 | val = s.value = random.random() 24 | e = ft.ControlEvent("_", "_", "_", s, val) 25 | slider_changed(e) 26 | s.update() 27 | 28 | 29 | ft.app(main) 30 | -------------------------------------------------------------------------------- /python/controls/input-and-selections/slider/slider-values.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page): 5 | page.add( 6 | ft.Text("Slider with value:"), 7 | ft.Slider(value=0.3), 8 | ft.Text("Slider with a custom range and label:"), 9 | ft.Slider(min=0, max=100, divisions=10, label="{value}%"), 10 | ) 11 | 12 | 13 | ft.app(main) 14 | -------------------------------------------------------------------------------- /python/controls/input-and-selections/slider/slider-with-change.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page): 5 | def slider_changed(e): 6 | t.value = f"Slider changed to {e.control.value}" 7 | page.update() 8 | 9 | t = ft.Text() 10 | page.add( 11 | ft.Text("Slider with 'on_change' event:"), 12 | ft.Slider( 13 | min=0, max=100, divisions=10, label="{value}%", on_change=slider_changed 14 | ), 15 | t, 16 | ) 17 | 18 | 19 | ft.app(main) 20 | -------------------------------------------------------------------------------- /python/controls/input-and-selections/switch/switch-basic.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page): 5 | def button_clicked(e): 6 | t.value = f"Switch values are: {c1.value}, {c2.value}, {c3.value}, {c4.value}." 7 | page.update() 8 | 9 | t = ft.Text() 10 | c1 = ft.Switch(label="Unchecked switch", value=False) 11 | c2 = ft.Switch(label="Checked switch", value=True) 12 | c3 = ft.Switch(label="Disabled switch", disabled=True) 13 | c4 = ft.Switch( 14 | label="Switch with rendered label_position='left'", 15 | label_position=ft.LabelPosition.LEFT, 16 | ) 17 | b = ft.ElevatedButton(text="Submit", on_click=button_clicked) 18 | page.add(c1, c2, c3, c4, b, t) 19 | 20 | 21 | ft.app(target=main) 22 | -------------------------------------------------------------------------------- /python/controls/input-and-selections/switch/switch-with-event.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | def theme_changed(e): 6 | page.theme_mode = ( 7 | ft.ThemeMode.DARK 8 | if page.theme_mode == ft.ThemeMode.LIGHT 9 | else ft.ThemeMode.LIGHT 10 | ) 11 | c.label = ( 12 | "Light theme" if page.theme_mode == ft.ThemeMode.LIGHT else "Dark theme" 13 | ) 14 | page.update() 15 | 16 | page.theme_mode = ft.ThemeMode.LIGHT 17 | c = ft.Switch(label="Light theme", on_change=theme_changed) 18 | page.add(c) 19 | 20 | 21 | ft.app(target=main) 22 | -------------------------------------------------------------------------------- /python/controls/input-and-selections/text-field/basic-textfields.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | def button_clicked(e): 6 | t.value = f"Textboxes values are: '{tb1.value}', '{tb2.value}', '{tb3.value}', '{tb4.value}', '{tb5.value}'." 7 | page.update() 8 | 9 | t = ft.Text() 10 | tb1 = ft.TextField(label="Standard") 11 | tb2 = ft.TextField(label="Disabled", disabled=True, value="First name") 12 | tb3 = ft.TextField(label="Read-only", read_only=True, value="Last name") 13 | tb4 = ft.TextField(label="With placeholder", hint_text="Please enter text here") 14 | tb5 = ft.TextField(label="With an icon", icon=ft.Icons.EMOJI_EMOTIONS) 15 | b = ft.ElevatedButton(text="Submit", on_click=button_clicked) 16 | page.add(tb1, tb2, tb3, tb4, tb5, b, t) 17 | 18 | 19 | ft.app(main) 20 | -------------------------------------------------------------------------------- /python/controls/input-and-selections/text-field/multiline-example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | page.add( 6 | ft.TextField(label="standard", multiline=True), 7 | ft.TextField( 8 | label="disabled", 9 | multiline=True, 10 | disabled=True, 11 | value="line1\nline2\nline3\nline4\nline5", 12 | ), 13 | ft.TextField( 14 | label="Auto adjusted height with max lines", 15 | multiline=True, 16 | min_lines=1, 17 | max_lines=3, 18 | ), 19 | ) 20 | 21 | 22 | ft.app(main) 23 | -------------------------------------------------------------------------------- /python/controls/input-and-selections/text-field/password.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | page.add( 6 | ft.TextField( 7 | label="Password with reveal button", password=True, can_reveal_password=True 8 | ) 9 | ) 10 | 11 | 12 | ft.app(main) 13 | -------------------------------------------------------------------------------- /python/controls/input-and-selections/text-field/styled-textfield.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | page.padding = 50 6 | page.add( 7 | ft.TextField( 8 | text_size=30, 9 | cursor_color=ft.Colors.RED, 10 | selection_color=ft.Colors.YELLOW, 11 | color=ft.Colors.PINK, 12 | bgcolor=ft.Colors.BLACK26, 13 | filled=True, 14 | focused_color=ft.Colors.GREEN, 15 | focused_bgcolor=ft.Colors.CYAN_200, 16 | border_radius=30, 17 | border_color=ft.Colors.GREEN_800, 18 | focused_border_color=ft.Colors.GREEN_ACCENT_400, 19 | max_length=20, 20 | capitalization=ft.TextCapitalization.CHARACTERS, 21 | ) 22 | ) 23 | 24 | 25 | ft.app(target=main) 26 | -------------------------------------------------------------------------------- /python/controls/input-and-selections/text-field/textfield-with-on-change.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | def textbox_changed(e): 6 | t.value = e.control.value 7 | page.update() 8 | 9 | t = ft.Text() 10 | tb = ft.TextField( 11 | label="Textbox with 'change' event:", 12 | on_change=textbox_changed, 13 | ) 14 | 15 | page.add(tb, t) 16 | 17 | 18 | ft.app(main) 19 | -------------------------------------------------------------------------------- /python/controls/input-and-selections/text-field/underlined-borderless-example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | page.add( 6 | ft.TextField( 7 | label="Underlined", 8 | border=ft.InputBorder.UNDERLINE, 9 | hint_text="Enter text here", 10 | ), 11 | ft.TextField( 12 | label="Underlined filled", 13 | border=ft.InputBorder.UNDERLINE, 14 | filled=True, 15 | hint_text="Enter text here", 16 | ), 17 | ft.TextField( 18 | label="Borderless", border=ft.InputBorder.NONE, hint_text="Enter text here" 19 | ), 20 | ft.TextField( 21 | label="Borderless filled", 22 | border=ft.InputBorder.NONE, 23 | filled=True, 24 | hint_text="Enter text here", 25 | ), 26 | ) 27 | 28 | 29 | ft.app(main) 30 | -------------------------------------------------------------------------------- /python/controls/layout/column/scroll-events.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | def on_column_scroll(e: ft.OnScrollEvent): 6 | print( 7 | f"Type: {e.event_type}, pixels: {e.pixels}, min_scroll_extent: {e.min_scroll_extent}, max_scroll_extent: {e.max_scroll_extent}" 8 | ) 9 | 10 | cl = ft.Column( 11 | spacing=10, 12 | height=200, 13 | width=200, 14 | scroll=ft.ScrollMode.ALWAYS, 15 | on_scroll=on_column_scroll, 16 | ) 17 | for i in range(0, 50): 18 | cl.controls.append(ft.Text(f"Text line {i}", key=str(i))) 19 | 20 | page.add( 21 | ft.Container(cl, border=ft.border.all(1)), 22 | ) 23 | 24 | 25 | ft.app(main) 26 | -------------------------------------------------------------------------------- /python/controls/layout/container/containers-background-color.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | page.title = "Containers with different background color" 6 | 7 | c1 = ft.Container( 8 | content=ft.Text("Container_1"), 9 | bgcolor="#FFCC0000", 10 | padding=5, 11 | ) 12 | 13 | c2 = ft.Container( 14 | content=ft.Text("Container_2"), 15 | bgcolor="#CC0000", 16 | padding=5, 17 | ) 18 | 19 | c3 = ft.Container( 20 | content=ft.Text("Container_3"), 21 | bgcolor=ft.Colors.RED, 22 | padding=5, 23 | ) 24 | page.add(c1, c2, c3) 25 | 26 | 27 | ft.app(main) 28 | -------------------------------------------------------------------------------- /python/controls/layout/container/linear-gradient.py: -------------------------------------------------------------------------------- 1 | import math 2 | import flet as ft 3 | 4 | 5 | def main(page: ft.Page): 6 | 7 | page.add( 8 | ft.Container( 9 | alignment=ft.alignment.center, 10 | gradient=ft.LinearGradient( 11 | begin=ft.alignment.top_left, 12 | end=ft.Alignment(0.8, 1), 13 | colors=[ 14 | "0xff1f005c", 15 | "0xff5b0060", 16 | "0xff870160", 17 | "0xffac255e", 18 | "0xffca485c", 19 | "0xffe16b5c", 20 | "0xfff39060", 21 | "0xffffb56b", 22 | ], 23 | tile_mode=ft.GradientTileMode.MIRROR, 24 | rotation=math.pi / 3, 25 | ), 26 | width=150, 27 | height=150, 28 | border_radius=5, 29 | ) 30 | ) 31 | 32 | 33 | ft.app(main) 34 | -------------------------------------------------------------------------------- /python/controls/layout/container/radial-gradient.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | 6 | page.add( 7 | ft.Container( 8 | alignment=ft.alignment.center, 9 | gradient=ft.RadialGradient( 10 | center=ft.Alignment(0.7, -0.6), 11 | radius=0.2, 12 | colors=[ 13 | "0xFFFFFF00", # yellow sun 14 | "0xFF0099FF", # blue sky 15 | ], 16 | stops=[0.4, 1.0], 17 | ), 18 | width=150, 19 | height=150, 20 | border_radius=5, 21 | ) 22 | ) 23 | 24 | 25 | ft.app(main) 26 | -------------------------------------------------------------------------------- /python/controls/layout/container/simple-hover.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | def on_hover(e): 6 | e.control.bgcolor = "blue" if e.data == "true" else "red" 7 | e.control.update() 8 | 9 | page.add( 10 | ft.Container(width=100, height=100, bgcolor="red", ink=False, on_hover=on_hover) 11 | ) 12 | 13 | 14 | ft.app(main) 15 | -------------------------------------------------------------------------------- /python/controls/layout/container/sweep-gradient.py: -------------------------------------------------------------------------------- 1 | import math 2 | import flet as ft 3 | 4 | 5 | def main(page: ft.Page): 6 | 7 | page.add( 8 | ft.Container( 9 | alignment=ft.alignment.center, 10 | gradient=ft.SweepGradient( 11 | center=ft.alignment.center, 12 | start_angle=0.0, 13 | end_angle=math.pi * 2, 14 | colors=[ 15 | "0xFF4285F4", 16 | "0xFF34A853", 17 | "0xFFFBBC05", 18 | "0xFFEA4335", 19 | "0xFF4285F4", 20 | ], 21 | stops=[0.0, 0.25, 0.5, 0.75, 1.0], 22 | ), 23 | width=150, 24 | height=150, 25 | border_radius=5, 26 | ) 27 | ) 28 | 29 | 30 | ft.app(main) 31 | -------------------------------------------------------------------------------- /python/controls/layout/grid-view/photo-gallery.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | page.title = "GridView Example" 6 | page.theme_mode = ft.ThemeMode.DARK 7 | page.padding = 50 8 | page.update() 9 | 10 | images = ft.GridView( 11 | expand=1, 12 | runs_count=5, 13 | max_extent=150, 14 | child_aspect_ratio=1.0, 15 | spacing=5, 16 | run_spacing=5, 17 | ) 18 | 19 | page.add(images) 20 | 21 | for i in range(0, 60): 22 | images.controls.append( 23 | ft.Image( 24 | src=f"https://picsum.photos/150/150?{i}", 25 | fit=ft.ImageFit.NONE, 26 | repeat=ft.ImageRepeat.NO_REPEAT, 27 | border_radius=ft.border_radius.all(10), 28 | ) 29 | ) 30 | page.update() 31 | 32 | 33 | ft.app(main) 34 | -------------------------------------------------------------------------------- /python/controls/layout/list-view/listview-scroll.py: -------------------------------------------------------------------------------- 1 | from time import sleep 2 | import flet as ft 3 | 4 | 5 | def main(page: ft.Page): 6 | page.title = "Auto-scrolling ListView" 7 | 8 | lv = ft.ListView(expand=1, spacing=10, padding=20, auto_scroll=True) 9 | 10 | count = 1 11 | 12 | for i in range(0, 60): 13 | lv.controls.append(ft.Text(f"Line {count}")) 14 | count += 1 15 | 16 | page.add(lv) 17 | 18 | for i in range(0, 60): 19 | sleep(1) 20 | lv.controls.append(ft.Text(f"Line {count}")) 21 | count += 1 22 | page.update() 23 | 24 | 25 | ft.app(main) 26 | -------------------------------------------------------------------------------- /python/controls/layout/page/set-platform.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page): 5 | def set_android(e): 6 | page.platform = ft.PagePlatform.ANDROID 7 | page.update() 8 | print("New platform:", page.platform) 9 | 10 | def set_ios(e): 11 | page.platform = "ios" 12 | page.update() 13 | print("New platform:", page.platform) 14 | 15 | page.add( 16 | ft.Switch(label="Switch A", adaptive=True), 17 | ft.ElevatedButton("Set Android", on_click=set_android), 18 | ft.ElevatedButton("Set iOS", on_click=set_ios), 19 | ) 20 | 21 | print("Default platform:", page.platform) 22 | 23 | 24 | ft.app(main) 25 | -------------------------------------------------------------------------------- /python/controls/layout/page/splash-test.py: -------------------------------------------------------------------------------- 1 | from time import sleep 2 | import flet as ft 3 | 4 | 5 | def main(page: ft.Page): 6 | def button_click(e): 7 | my_bar = ft.ProgressBar() 8 | 9 | page.overlay.append(my_bar) 10 | btn.disabled = True 11 | page.update() 12 | sleep(3) 13 | 14 | page.overlay.remove(my_bar) 15 | btn.disabled = False 16 | page.update() 17 | 18 | btn = ft.ElevatedButton("Do some lengthy task!", on_click=button_click) 19 | page.add(btn) 20 | 21 | 22 | ft.app(main) 23 | -------------------------------------------------------------------------------- /python/controls/layout/page/window-hidden-on-start.py: -------------------------------------------------------------------------------- 1 | from time import sleep 2 | 3 | import flet as ft 4 | 5 | 6 | def main(page: ft.Page): 7 | 8 | page.add(ft.Text("Hello!")) 9 | sleep(3) 10 | page.window.visible = True 11 | page.update() 12 | 13 | 14 | ft.app(main, view=ft.AppView.FLET_APP_HIDDEN) 15 | -------------------------------------------------------------------------------- /python/controls/layout/placeholder/placeholder-example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | page.add( 6 | ft.Placeholder(expand=True, color=ft.Colors.random()) # random material color 7 | ) 8 | 9 | 10 | ft.app(main) 11 | -------------------------------------------------------------------------------- /python/controls/layout/safe-area/safe-area-example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | class State: 5 | counter = 0 6 | 7 | 8 | def main(page: ft.Page): 9 | state = State() 10 | 11 | def add_click(e): 12 | state.counter += 1 13 | counter.value = str(state.counter) 14 | counter.update() 15 | 16 | page.floating_action_button = ft.FloatingActionButton( 17 | icon=ft.Icons.ADD, on_click=add_click 18 | ) 19 | page.add( 20 | ft.SafeArea( 21 | ft.Container( 22 | counter := ft.Text("0", size=50), 23 | alignment=ft.alignment.center, 24 | ), 25 | expand=True, 26 | ) 27 | ) 28 | 29 | 30 | ft.app(main) 31 | -------------------------------------------------------------------------------- /python/controls/layout/stack/avatar-with-status.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page): 5 | page.add( 6 | ft.Stack( 7 | [ 8 | ft.CircleAvatar( 9 | foreground_image_src="https://avatars.githubusercontent.com/u/5041459?s=88&v=4" 10 | ), 11 | ft.Container( 12 | content=ft.CircleAvatar(bgcolor=ft.Colors.GREEN, radius=5), 13 | alignment=ft.alignment.bottom_left, 14 | ), 15 | ], 16 | width=40, 17 | height=40, 18 | ) 19 | ) 20 | 21 | 22 | ft.app(main) 23 | -------------------------------------------------------------------------------- /python/controls/layout/stack/image-title.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | st = ft.Stack( 6 | [ 7 | ft.Image( 8 | src=f"https://picsum.photos/300/300", 9 | width=300, 10 | height=300, 11 | fit=ft.ImageFit.CONTAIN, 12 | ), 13 | ft.Row( 14 | [ 15 | ft.Text( 16 | "Image title", 17 | color=ft.Colors.ON_SURFACE, 18 | size=40, 19 | weight=ft.FontWeight.BOLD, 20 | opacity=0.5, 21 | ) 22 | ], 23 | alignment=ft.MainAxisAlignment.CENTER, 24 | ), 25 | ], 26 | width=300, 27 | height=300, 28 | ) 29 | 30 | page.add(st) 31 | 32 | 33 | ft.app(main) 34 | -------------------------------------------------------------------------------- /python/controls/navigation/navigation-bar/navigation-bar-sample.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | 6 | page.title = "NavigationBar Example" 7 | page.navigation_bar = ft.NavigationBar( 8 | destinations=[ 9 | ft.NavigationBarDestination(icon=ft.Icons.EXPLORE, label="Explore"), 10 | ft.NavigationBarDestination(icon=ft.Icons.COMMUTE, label="Commute"), 11 | ft.NavigationBarDestination( 12 | icon=ft.Icons.BOOKMARK_BORDER, 13 | selected_icon=ft.Icons.BOOKMARK, 14 | label="Favorites", 15 | ), 16 | ] 17 | ) 18 | page.add(ft.Text("Body!")) 19 | 20 | 21 | ft.app(target=main) 22 | -------------------------------------------------------------------------------- /python/controls/utility/audio/audio-autoplay.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | page.title = "Audio Example" 6 | 7 | def change_button(e): 8 | if e.state == ft.AudioState.PAUSED: 9 | b.text = "Resume playing" 10 | b.on_click = lambda e: audio1.resume() 11 | 12 | elif e.state == ft.AudioState.PLAYING: 13 | b.text = "Pause playing" 14 | b.on_click = lambda e: audio1.pause() 15 | 16 | b.update() 17 | 18 | audio1 = ft.Audio( 19 | src="https://luan.xyz/files/audio/ambient_c_motion.mp3", 20 | autoplay=True, 21 | on_state_changed=change_button, 22 | ) 23 | b = ft.ElevatedButton("Pause playing", on_click=lambda _: audio1.pause()) 24 | 25 | page.overlay.append(audio1) 26 | page.add(ft.Text("This is an app with background audio."), b) 27 | 28 | 29 | ft.app(main) 30 | -------------------------------------------------------------------------------- /python/controls/utility/file-picker/file-picker-all-modes.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | def pick_files_result(e: ft.FilePickerResultEvent): 6 | selected_files.value = ( 7 | ", ".join(map(lambda f: f.name, e.files)) if e.files else "Cancelled!" 8 | ) 9 | selected_files.update() 10 | 11 | pick_files_dialog = ft.FilePicker(on_result=pick_files_result) 12 | selected_files = ft.Text() 13 | 14 | page.overlay.append(pick_files_dialog) 15 | 16 | page.add( 17 | ft.Row( 18 | [ 19 | ft.ElevatedButton( 20 | "Pick files", 21 | icon=ft.Icons.UPLOAD_FILE, 22 | on_click=lambda _: pick_files_dialog.pick_files( 23 | allow_multiple=True 24 | ), 25 | ), 26 | selected_files, 27 | ] 28 | ) 29 | ) 30 | 31 | 32 | ft.app(main) 33 | -------------------------------------------------------------------------------- /python/controls/utility/flashlight/flashlight-example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | flashlight = ft.Flashlight() 6 | page.overlay.append(flashlight) 7 | page.add(ft.TextButton("toggle", on_click=lambda _: flashlight.toggle())) 8 | 9 | 10 | ft.app(main) 11 | -------------------------------------------------------------------------------- /python/controls/utility/haptic-feedback/haptic-feedback-example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | hf = ft.HapticFeedback() 6 | page.overlay.append(hf) 7 | 8 | page.add( 9 | ft.ElevatedButton("Heavy impact", on_click=lambda _: hf.heavy_impact()), 10 | ft.ElevatedButton("Medium impact", on_click=lambda _: hf.medium_impact()), 11 | ft.ElevatedButton("Light impact", on_click=lambda _: hf.light_impact()), 12 | ft.ElevatedButton("Vibrate", on_click=lambda _: hf.vibrate()), 13 | ) 14 | 15 | 16 | ft.app(main) 17 | -------------------------------------------------------------------------------- /python/controls/utility/interactive-viewer/interactive-viewer-example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | page.add( 6 | ft.InteractiveViewer( 7 | min_scale=0.1, 8 | max_scale=15, 9 | boundary_margin=ft.margin.all(20), 10 | on_interaction_start=lambda e: print(e), 11 | on_interaction_end=lambda e: print(e), 12 | on_interaction_update=lambda e: print(e), 13 | content=ft.Image( 14 | src="https://picsum.photos/500/500", 15 | ), 16 | ) 17 | ) 18 | 19 | 20 | ft.app(main) 21 | -------------------------------------------------------------------------------- /python/controls/utility/selection-area/selection-area-example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | ts = ft.TextStyle( 6 | size=22, 7 | weight=ft.FontWeight.W_600, 8 | decoration=ft.TextDecoration( 9 | ft.TextDecoration.UNDERLINE | ft.TextDecoration.OVERLINE 10 | ), 11 | decoration_style=ft.TextDecorationStyle(ft.TextDecorationStyle.WAVY), 12 | ) 13 | 14 | page.add( 15 | ft.SelectionArea( 16 | content=ft.Column( 17 | [ 18 | ft.Text("Selectable text", color=ft.Colors.GREEN, style=ts), 19 | ft.Text("Also selectable", color=ft.Colors.GREEN, style=ts), 20 | ] 21 | ) 22 | ) 23 | ) 24 | page.add(ft.Text("Not selectable", color=ft.Colors.RED, style=ts)) 25 | 26 | 27 | ft.app(main) 28 | -------------------------------------------------------------------------------- /python/controls/utility/semantics/semantics-example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | tf = ft.TextField( 6 | label="Occupation", 7 | hint_text="Use 20 words or less", 8 | value="What is your occupation?", 9 | ) 10 | 11 | def on_focus(e): 12 | print("focus gained") 13 | 14 | def on_lose_focus(e): 15 | print("focus lost") 16 | 17 | page.add( 18 | ft.Column( 19 | [ 20 | ft.Semantics( 21 | tf, 22 | label="Input your occupation", 23 | on_did_gain_accessibility_focus=on_focus, 24 | on_did_lose_accessibility_focus=on_lose_focus, 25 | ), 26 | ft.Icon(name="settings", color="#c1c1c1"), 27 | ] 28 | ) 29 | ) 30 | 31 | 32 | ft.app(main) 33 | -------------------------------------------------------------------------------- /python/controls/utility/shader-mask/shader-mask-gradient.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | page.add( 6 | ft.Row( 7 | [ 8 | ft.ShaderMask( 9 | content=ft.Image(src="https://picsum.photos/200/200?2"), 10 | blend_mode=ft.BlendMode.DST_IN, 11 | shader=ft.LinearGradient( 12 | begin=ft.alignment.top_center, 13 | end=ft.alignment.bottom_center, 14 | colors=[ft.Colors.BLACK, ft.Colors.TRANSPARENT], 15 | stops=[0.5, 1.0], 16 | ), 17 | border_radius=10, 18 | ), 19 | ] 20 | ) 21 | ) 22 | 23 | 24 | ft.app(main) 25 | -------------------------------------------------------------------------------- /python/controls/utility/shake-detector/shake-detector-example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | shd = ft.ShakeDetector( 6 | minimum_shake_count=2, 7 | shake_slop_time_ms=300, 8 | shake_count_reset_time_ms=1000, 9 | on_shake=lambda _: print("SHAKE DETECTED!"), 10 | ) 11 | page.overlay.append(shd) 12 | 13 | page.add(ft.Text("Program body")) 14 | 15 | 16 | ft.app(main) 17 | -------------------------------------------------------------------------------- /python/controls/utility/transparent-pointer/transparent-pointer-example.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page): 5 | page.add( 6 | ft.Stack( 7 | [ 8 | ft.GestureDetector( 9 | on_tap=lambda _: print("TAP!"), 10 | multi_tap_touches=3, 11 | on_multi_tap=lambda e: print("MULTI TAP:", e.correct_touches), 12 | on_multi_long_press=lambda _: print("Multi tap long press"), 13 | ), 14 | ft.TransparentPointer( 15 | ft.Container(ft.ElevatedButton("Test button"), padding=50) 16 | ), 17 | ], 18 | expand=True, 19 | ) 20 | ) 21 | 22 | 23 | ft.app(main) 24 | -------------------------------------------------------------------------------- /python/controls/utility/window-drag-area/no-frame-window.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | page.window.title_bar_hidden = True 6 | page.window.title_bar_buttons_hidden = True 7 | 8 | page.add( 9 | ft.Row( 10 | [ 11 | ft.WindowDragArea( 12 | ft.Container( 13 | ft.Text( 14 | "Drag this area to move, maximize and restore application window." 15 | ), 16 | bgcolor=ft.Colors.AMBER_300, 17 | padding=10, 18 | ), 19 | expand=True, 20 | ), 21 | ft.IconButton(ft.Icons.CLOSE, on_click=lambda _: page.window.close()), 22 | ] 23 | ) 24 | ) 25 | 26 | 27 | ft.app(main) 28 | -------------------------------------------------------------------------------- /python/pyproject.toml: -------------------------------------------------------------------------------- 1 | [tool.poetry] 2 | name = "flet-examples" 3 | version = "0.1.0" 4 | description = "Sample apps for Flet" 5 | authors = ["Appveyor Systems Inc. "] 6 | license = "Apache-2.0" 7 | readme = "README.md" 8 | 9 | [tool.poetry.dependencies] 10 | python = "^3.10" 11 | flet = "^0.27.2" 12 | flet-contrib = "^2023.8.9" 13 | 14 | [tool.poetry.group.dev.dependencies] 15 | black = "^23.3.0" 16 | flet = {extras = ["all"], version = "^0.27.2"} 17 | 18 | [build-system] 19 | requires = ["poetry-core"] 20 | build-backend = "poetry.core.masonry.api" 21 | -------------------------------------------------------------------------------- /python/tutorials/calc/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM python:3-alpine 2 | 3 | WORKDIR /app 4 | 5 | COPY requirements.txt ./ 6 | RUN pip install --no-cache-dir -r requirements.txt 7 | 8 | COPY . . 9 | 10 | EXPOSE 8080 11 | 12 | CMD ["python", "./calc.py"] -------------------------------------------------------------------------------- /python/tutorials/calc/fly.toml: -------------------------------------------------------------------------------- 1 | app = "flet-calc" 2 | 3 | kill_signal = "SIGINT" 4 | kill_timeout = 5 5 | processes = [] 6 | 7 | [env] 8 | FLET_SERVER_PORT = "8080" 9 | FLET_FORCE_WEB_VIEW = "true" 10 | 11 | [experimental] 12 | allowed_public_ports = [] 13 | auto_rollback = true 14 | 15 | [[services]] 16 | http_checks = [] 17 | internal_port = 8080 18 | processes = ["app"] 19 | protocol = "tcp" 20 | script_checks = [] 21 | 22 | [services.concurrency] 23 | hard_limit = 25 24 | soft_limit = 20 25 | type = "connections" 26 | 27 | [[services.ports]] 28 | force_https = true 29 | handlers = ["http"] 30 | port = 80 31 | 32 | [[services.ports]] 33 | handlers = ["tls", "http"] 34 | port = 443 35 | 36 | [[services.tcp_checks]] 37 | grace_period = "1s" 38 | interval = "15s" 39 | restart_limit = 0 40 | timeout = "2s" -------------------------------------------------------------------------------- /python/tutorials/calc/requirements.txt: -------------------------------------------------------------------------------- 1 | flet>=0.25.1 -------------------------------------------------------------------------------- /python/tutorials/chat/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM python:3-alpine 2 | 3 | WORKDIR /app 4 | 5 | COPY requirements.txt ./ 6 | RUN pip install --no-cache-dir -r requirements.txt 7 | 8 | COPY . . 9 | 10 | EXPOSE 8000 11 | 12 | CMD ["python", "chat.py"] -------------------------------------------------------------------------------- /python/tutorials/chat/chat_1.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | chat = ft.Column() 6 | new_message = ft.TextField() 7 | 8 | def send_click(e): 9 | chat.controls.append(ft.Text(new_message.value)) 10 | new_message.value = "" 11 | page.update() 12 | 13 | page.add( 14 | chat, 15 | ft.Row(controls=[new_message, ft.ElevatedButton("Send", on_click=send_click)]), 16 | ) 17 | 18 | 19 | ft.app(target=main) 20 | -------------------------------------------------------------------------------- /python/tutorials/chat/chat_2.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | class Message: 5 | def __init__(self, user: str, text: str): 6 | self.user = user 7 | self.text = text 8 | 9 | 10 | def main(page: ft.Page): 11 | 12 | chat = ft.Column() 13 | new_message = ft.TextField() 14 | 15 | def on_message(message: Message): 16 | chat.controls.append(ft.Text(f"{message.user}: {message.text}")) 17 | page.update() 18 | 19 | page.pubsub.subscribe(on_message) 20 | 21 | def send_click(e): 22 | page.pubsub.send_all(Message(user=page.session_id, text=new_message.value)) 23 | new_message.value = "" 24 | page.update() 25 | 26 | page.add( 27 | chat, ft.Row([new_message, ft.ElevatedButton("Send", on_click=send_click)]) 28 | ) 29 | 30 | 31 | ft.app(target=main) 32 | -------------------------------------------------------------------------------- /python/tutorials/chat/fly.toml: -------------------------------------------------------------------------------- 1 | app = "flet-chat" 2 | 3 | kill_signal = "SIGINT" 4 | kill_timeout = 5 5 | processes = [] 6 | 7 | [env] 8 | FLET_SESSION_TIMEOUT = "60" 9 | 10 | [http_service] 11 | internal_port = 8000 12 | force_https = true 13 | auto_stop_machines = true 14 | auto_start_machines = true 15 | min_machines_running = 0 16 | 17 | [http_service.concurrency] 18 | type = "connections" 19 | soft_limit = 200 20 | hard_limit = 250 -------------------------------------------------------------------------------- /python/tutorials/chat/requirements.txt: -------------------------------------------------------------------------------- 1 | flet -------------------------------------------------------------------------------- /python/tutorials/solitaire/solitaire-classes/main.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | from solitaire import Solitaire 3 | 4 | 5 | def main(page: ft.Page): 6 | 7 | solitaire = Solitaire() 8 | 9 | page.add(solitaire) 10 | 11 | 12 | ft.app(target=main) 13 | -------------------------------------------------------------------------------- /python/tutorials/solitaire/solitaire-classes/slot.py: -------------------------------------------------------------------------------- 1 | SLOT_WIDTH = 70 2 | SLOT_HEIGHT = 100 3 | 4 | import flet as ft 5 | 6 | class Slot(ft.Container): 7 | def __init__(self, top, left): 8 | super().__init__() 9 | self.pile=[] 10 | self.width=SLOT_WIDTH 11 | self.height=SLOT_HEIGHT 12 | self.left=left 13 | self.top=top 14 | self.border=ft.border.all(1) 15 | -------------------------------------------------------------------------------- /python/tutorials/solitaire/solitaire-drag-and-drop/step1.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | # Use of GestureDetector for with on_pan_update event for dragging card 4 | # Absolute positioning of controls within stack 5 | 6 | def main(page: ft.Page): 7 | 8 | def drag(e: ft.DragUpdateEvent): 9 | e.control.top = max(0, e.control.top + e.delta_y) 10 | e.control.left = max(0, e.control.left + e.delta_x) 11 | e.control.update() 12 | 13 | card = ft.GestureDetector( 14 | mouse_cursor=ft.MouseCursor.MOVE, 15 | drag_interval=5, 16 | on_pan_update=drag, 17 | left=0, 18 | top=0, 19 | content=ft.Container(bgcolor=ft.colors.GREEN, width=70, height=100), 20 | ) 21 | 22 | page.add(ft.Stack(controls=[card], width=1000, height=500)) 23 | 24 | ft.app(target=main) 25 | -------------------------------------------------------------------------------- /python/tutorials/solitaire/solitaire-fanned-piles/main.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | from solitaire import Solitaire 3 | 4 | 5 | def main(page: ft.Page): 6 | 7 | solitaire = Solitaire() 8 | 9 | page.add(solitaire) 10 | 11 | ft.app(target=main) 12 | -------------------------------------------------------------------------------- /python/tutorials/solitaire/solitaire-fanned-piles/slot.py: -------------------------------------------------------------------------------- 1 | SLOT_WIDTH = 70 2 | SLOT_HEIGHT = 100 3 | 4 | import flet as ft 5 | 6 | class Slot(ft.Container): 7 | def __init__(self, top, left): 8 | super().__init__() 9 | self.pile=[] 10 | self.width=SLOT_WIDTH 11 | self.height=SLOT_HEIGHT 12 | self.left=left 13 | self.top=top 14 | self.border=ft.border.all(1) 15 | -------------------------------------------------------------------------------- /python/tutorials/solitaire/solitaire-final-part1/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM python:3-alpine 2 | 3 | WORKDIR /app 4 | 5 | COPY requirements.txt ./ 6 | RUN pip install --no-cache-dir -r requirements.txt 7 | 8 | COPY . . 9 | 10 | EXPOSE 8080 11 | 12 | CMD ["python", "./main.py"] -------------------------------------------------------------------------------- /python/tutorials/solitaire/solitaire-final-part1/assets/images/card_back.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flet-dev/examples/2545ad18af084211c97ab012b31c9aca02e90266/python/tutorials/solitaire/solitaire-final-part1/assets/images/card_back.png -------------------------------------------------------------------------------- /python/tutorials/solitaire/solitaire-final-part1/fly.toml: -------------------------------------------------------------------------------- 1 | app = "solitaire-part1" 2 | 3 | kill_signal = "SIGINT" 4 | kill_timeout = 5 5 | processes = [] 6 | 7 | [env] 8 | FLET_SERVER_PORT = "8080" 9 | FLET_FORCE_WEB_VIEW = "true" 10 | 11 | [experimental] 12 | allowed_public_ports = [] 13 | auto_rollback = true 14 | 15 | [[services]] 16 | http_checks = [] 17 | internal_port = 8080 18 | processes = ["app"] 19 | protocol = "tcp" 20 | script_checks = [] 21 | 22 | [services.concurrency] 23 | hard_limit = 25 24 | soft_limit = 20 25 | type = "connections" 26 | 27 | [[services.ports]] 28 | force_https = true 29 | handlers = ["http"] 30 | port = 80 31 | 32 | [[services.ports]] 33 | handlers = ["tls", "http"] 34 | port = 443 35 | 36 | [[services.tcp_checks]] 37 | grace_period = "1s" 38 | interval = "15s" 39 | restart_limit = 0 40 | timeout = "2s" -------------------------------------------------------------------------------- /python/tutorials/solitaire/solitaire-final-part1/main.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | from solitaire import Solitaire 3 | 4 | 5 | def main(page: ft.Page): 6 | 7 | page.on_error = lambda e: print("Page error:", e.data) 8 | 9 | solitaire = Solitaire() 10 | 11 | page.add(solitaire) 12 | 13 | 14 | ft.app(target=main, assets_dir="assets") 15 | -------------------------------------------------------------------------------- /python/tutorials/solitaire/solitaire-final-part1/requirements.txt: -------------------------------------------------------------------------------- 1 | flet>=0.25.1 -------------------------------------------------------------------------------- /python/tutorials/solitaire/solitaire-final-part1/slot.py: -------------------------------------------------------------------------------- 1 | SLOT_WIDTH = 70 2 | SLOT_HEIGHT = 100 3 | 4 | import flet as ft 5 | 6 | class Slot(ft.Container): 7 | def __init__(self, solitaire, top, left, border): 8 | super().__init__() 9 | self.pile=[] 10 | self.width=SLOT_WIDTH 11 | self.height=SLOT_HEIGHT 12 | self.left=left 13 | self.top=top 14 | self.on_click=self.click 15 | self.solitaire=solitaire 16 | self.border=border 17 | self.border_radius = ft.border_radius.all(6) 18 | 19 | def get_top_card(self): 20 | if len(self.pile) > 0: 21 | return self.pile[-1] 22 | 23 | def click(self, e): 24 | if self == self.solitaire.stock: 25 | self.solitaire.restart_stock() 26 | -------------------------------------------------------------------------------- /python/tutorials/solitaire/solitaire-final/assets/images/card.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flet-dev/examples/2545ad18af084211c97ab012b31c9aca02e90266/python/tutorials/solitaire/solitaire-final/assets/images/card.png -------------------------------------------------------------------------------- /python/tutorials/solitaire/solitaire-final/assets/images/card_back0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flet-dev/examples/2545ad18af084211c97ab012b31c9aca02e90266/python/tutorials/solitaire/solitaire-final/assets/images/card_back0.png -------------------------------------------------------------------------------- /python/tutorials/solitaire/solitaire-final/assets/images/card_back1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flet-dev/examples/2545ad18af084211c97ab012b31c9aca02e90266/python/tutorials/solitaire/solitaire-final/assets/images/card_back1.png -------------------------------------------------------------------------------- /python/tutorials/solitaire/solitaire-final/assets/images/card_back2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flet-dev/examples/2545ad18af084211c97ab012b31c9aca02e90266/python/tutorials/solitaire/solitaire-final/assets/images/card_back2.png -------------------------------------------------------------------------------- /python/tutorials/solitaire/solitaire-final/assets/images/card_back3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flet-dev/examples/2545ad18af084211c97ab012b31c9aca02e90266/python/tutorials/solitaire/solitaire-final/assets/images/card_back3.png -------------------------------------------------------------------------------- /python/tutorials/solitaire/solitaire-final/main.py: -------------------------------------------------------------------------------- 1 | import logging 2 | 3 | import flet as ft 4 | from layout import create_appbar 5 | from settings import Settings 6 | from solitaire import Solitaire 7 | 8 | # logging.basicConfig(level=logging.DEBUG) 9 | 10 | 11 | def main(page: ft.Page): 12 | def on_new_game(settings): 13 | page.controls.pop() 14 | new_solitaire = Solitaire(settings, on_win) 15 | page.add(new_solitaire) 16 | page.update() 17 | 18 | def on_win(): 19 | page.add(ft.AlertDialog(title=ft.Text("YOU WIN!"), open=True, on_dismiss=lambda e: page.controls.pop())) 20 | print("You win") 21 | page.update() 22 | 23 | settings = Settings() 24 | create_appbar(page, settings, on_new_game) 25 | 26 | solitaire = Solitaire(settings, on_win) 27 | page.add(solitaire) 28 | 29 | 30 | ft.app(target=main, assets_dir="assets") 31 | -------------------------------------------------------------------------------- /python/tutorials/solitaire/solitaire-game-rules/assets/images/card_back.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flet-dev/examples/2545ad18af084211c97ab012b31c9aca02e90266/python/tutorials/solitaire/solitaire-game-rules/assets/images/card_back.png -------------------------------------------------------------------------------- /python/tutorials/solitaire/solitaire-game-rules/main.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | from solitaire import Solitaire 3 | 4 | 5 | def main(page: ft.Page): 6 | 7 | solitaire = Solitaire() 8 | 9 | page.add(solitaire) 10 | 11 | 12 | ft.app(target=main, assets_dir="assets") 13 | -------------------------------------------------------------------------------- /python/tutorials/solitaire/solitaire-game-rules/slot.py: -------------------------------------------------------------------------------- 1 | SLOT_WIDTH = 70 2 | SLOT_HEIGHT = 100 3 | 4 | import flet as ft 5 | 6 | 7 | class Slot(ft.Container): 8 | def __init__(self, solitaire, top, left, border): 9 | super().__init__() 10 | self.pile = [] 11 | self.width = SLOT_WIDTH 12 | self.height = SLOT_HEIGHT 13 | self.left = left 14 | self.top = top 15 | self.on_click = self.click 16 | self.solitaire = solitaire 17 | self.border = border 18 | self.border_radius = ft.border_radius.all(6) 19 | 20 | def get_top_card(self): 21 | if len(self.pile) > 0: 22 | return self.pile[-1] 23 | 24 | def click(self, e): 25 | if self == self.solitaire.stock: 26 | self.solitaire.restart_stock() 27 | -------------------------------------------------------------------------------- /python/tutorials/solitaire/solitaire-game-setup/assets/images/card_back.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flet-dev/examples/2545ad18af084211c97ab012b31c9aca02e90266/python/tutorials/solitaire/solitaire-game-setup/assets/images/card_back.png -------------------------------------------------------------------------------- /python/tutorials/solitaire/solitaire-game-setup/main.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | from solitaire import Solitaire 3 | 4 | 5 | def main(page: ft.Page): 6 | 7 | solitaire = Solitaire() 8 | 9 | page.add(solitaire) 10 | 11 | 12 | ft.app(target=main, assets_dir="assets") 13 | -------------------------------------------------------------------------------- /python/tutorials/solitaire/solitaire-game-setup/slot.py: -------------------------------------------------------------------------------- 1 | SLOT_WIDTH = 70 2 | SLOT_HEIGHT = 100 3 | 4 | import flet as ft 5 | 6 | class Slot(ft.Container): 7 | def __init__(self, top, left, border): 8 | super().__init__() 9 | self.pile=[] 10 | self.width=SLOT_WIDTH 11 | self.height=SLOT_HEIGHT 12 | self.left=left 13 | self.top=top 14 | self.border=border 15 | self.border_radius = ft.border_radius.all(6) 16 | 17 | def get_top_card(self): 18 | if len(self.pile) > 0: 19 | return self.pile[-1] 20 | -------------------------------------------------------------------------------- /python/tutorials/todo/to-do-1.py: -------------------------------------------------------------------------------- 1 | import flet 2 | from flet import Checkbox, FloatingActionButton, Page, TextField, icons 3 | 4 | 5 | def main(page: Page): 6 | def add_clicked(e): 7 | page.add(Checkbox(label=new_task.value)) 8 | new_task.value = "" 9 | page.update() 10 | 11 | new_task = TextField(hint_text="Whats needs to be done?") 12 | 13 | page.add(new_task, FloatingActionButton(icon=icons.ADD, on_click=add_clicked)) 14 | 15 | 16 | flet.app(target=main) 17 | -------------------------------------------------------------------------------- /python/tutorials/todo/to-do-2.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | def add_clicked(e): 6 | tasks_view.controls.append(ft.Checkbox(label=new_task.value)) 7 | new_task.value = "" 8 | view.update() 9 | 10 | new_task = ft.TextField(hint_text="What needs to be done?", expand=True) 11 | tasks_view = ft.Column() 12 | view = ft.Column( 13 | width=600, 14 | controls=[ 15 | ft.Row( 16 | controls=[ 17 | new_task, 18 | ft.FloatingActionButton(icon=ft.icons.ADD, on_click=add_clicked), 19 | ], 20 | ), 21 | tasks_view, 22 | ], 23 | ) 24 | 25 | page.horizontal_alignment = ft.CrossAxisAlignment.CENTER 26 | page.add(view) 27 | 28 | 29 | ft.app(target=main) 30 | -------------------------------------------------------------------------------- /python/tutorials/todo/to-do-hello.py: -------------------------------------------------------------------------------- 1 | import flet as ft 2 | 3 | 4 | def main(page: ft.Page): 5 | page.add(ft.Text(value="Hello, world!")) 6 | 7 | 8 | ft.app(target=main) 9 | --------------------------------------------------------------------------------