ContextQMD
Back to Flet

Controls and theming enhancements

website/blog/2024-04-10-controls-and-theming-enhancements.md

0.85.0.dev210.9 KB
Original Source

One month after the release of Flet 0.21.0, we are excited to announce the release of Flet 0.22.0.

This release comes with a lot of enhancements, bug fixes, and deprecations:

Enhancements

This was one of the main concerns while coming up with this release. Two types of enhancements were made:

Controls Enhancement

We went through the long list of already-present controls and exposed, where possible, more properties - PR #2882. This will grant you more power/control over the Flet Controls you use in your awesome applications.

Below is the complete list:

  • AppBar: elevation_on_scroll, exclude_header_semantics, force_material_transparency, is_secondary, shadow_color, surface_tint_color, clip_behavior, title_spacing, toolbar_opacity, title_text_style, toolbar_text_style, shape
  • AlertDialog: action_button_padding, clip_behavior, icon_padding, shadow_color, surface_tint_color
  • Banner: content_text_style, margin, elevation, divider_color, shadow_color, surface_tint_color, on_visible
  • CupertinoListTile: leading_size, leading_to_title
  • CupertinoSegmentedButton: click_color
  • CupertinoSwitch:on_label_color, off_label_color
  • CupertinoTimerPicker: item_extent
  • Chip: surface_tint_color, color, click_elevation, clip_behavior, visual_density, border_side
  • Divider: leading_indent, trailing_indent
  • ExpansionTile: dense, enable_feedback, visual_density
  • Card: clip_behavior, is_semantic_container, show_border_on_foreground, variant
  • Checkbox: border_side, semantics_label, shape, splash_radius, is_error, visual_density, mouse_cursor
  • CircleAvatar: on_image_error
  • DataTable: clip_behavior
  • DatePicker: on_entry_mode_change
  • Draggable: on_drag_complete, on_drag_start
  • DragTarget: on_move
  • Dropdown: fill_color, hint_content, icon_content, elevation, item_height, max_menu_height, icon_size, enable_feedback, padding, icon_enabled_color, icon_disabled_color, on_click
  • ElevatedButton: clip_behavior
  • FloatingActionButton: clip_behavior, enable_feedback, focus_color, foreground_color, disabled_elevation, elevation, focus_elevation, highlight_elevation, hover_elevation, mouse_cursor
  • GridView: cache_extent, clip_behavior, semantic_child_count
  • IconButton: alignment, disabled_color, focus_color, enable_feedback, hover_color, padding, splash_color, splash_radius, focus_color, mouse_cursor, visual_density
  • Image: exclude_from_semantics, filter_quality
  • ListTile: enable_feedback, horizontal_spacing, min_leading_width, min_vertical_padding, selected_color, selected_tile_color, style, title_alignment, icon_color, text_color, shape, visual_density, mouse_cursor, title_text_style, subtitle_text_style, leading_and_trailing_text_style
  • ListView: cache_extent, clip_behavior, semantic_child_count
  • NavigationBar: animation_duration, overlay_color
  • NavigationDrawerDestination: bgcolor
  • NavigationBarDestination: bgcolor
  • NavigationRail: selected_label_text_style, unselected_label_text_style
  • NavigationRailDestination: indicator_color, indicator_shape
  • Option: alignment, on_click
  • OutlinedButton: clip_behavior
  • Page: locale_configuration
  • PopupMenuItem: height, padding, mouse_cursor
  • PopupMenuButton: bgcolor, clip_behavior, elevation, enable_feedback, icon_color, shadow_color, surface_tint_color, icon_size, padding, splash_radius, shape, on_open, on_cancel
  • ProgressBar: border_radius, semantics_label, semantics_value
  • ProgressRing: semantics_label, semantics_value, stroke_cap, stroke_align
  • Radio: focus_color, hover_color, overlay_color, splash_radius, toggleable, visual_density, mouse_cursor
  • SearchBar: keyboard_type, view_surface_tint_color, autofocus
  • SelectionArea: on_change
  • Slider: interaction, overlay_color, mouse_cursor, secondary_track_value, secondary_active_color
  • Stack: alignment, fit
  • SnackBar: clip_behavior, shape, on_visible, action_overflow_threshold
  • Switch: hover_color, splash_radius, overlay_color, track_outline_color, mouse_cursor
  • Tabs: divider_height, enable_feedback, indicator_thickness, is_secondary, mouse_cursor, clip_behavior
  • TextField: fill_color, hover_color
  • TimePicker: orientation, on_entry_mode_change
  • Tooltip: enable_tap_to_dismiss, exclude_from_semantics
  • VerticalDivider: leading_indent, trailing_indent

If you however feel that something lacks and should be added, don't hesitate to let us know.

Check out the article I wrote concerning Page.locale_configuration here.

Theme Enhancements

The Theme class which is used for application theming in light and dark mode has equally been further enhanced. Lots of new themes were introduced - PR #2955.

See the Theming Guide here.

Rive Animations

Rive is a very popular real-time interactive design and animation tool. The newly introduced Rive Control allows you to load and visualize any Rive animation in your applications.

The animation's source (Rive.src) can either be a local asset file or a URL - as usual, it all depends on your needs.

Parent Control

As requested in #952, the ability to access the parent of any control has been added: Control.parent.

Read more on it here.

Bug Fixes

The below issues were successfully fixed:

  • #2560 - Dropdown.bgcolor was not visually respected
  • #2740 - CircleAvatar not working with local asset images
  • #2781 - 'FletSocketServer' Error raised on Linux
  • #2826 - PopupMenuItem.data not respected
  • #2839 - ExpansionTile.initially_expanded had no visual effect
  • #2867 - PopupMenuButton had an always-visible tooltip of "Show menu"
  • On some Python versions, you might have seen a RuntimeError('Event loop is closed') which usually shows up when closing the app's window. The Python-dev team fixed this asyncio-related issue recently, but this fix is only present in the versions released from the year 2024. So if you face this issue, please download one of the latest Python releases and replace the one used in your environment.

Special Thanks to the dynamic Flet community for reporting all the issues they encountered. We keep working hard on solving the remaining ones.

Deprecations

As previously mentioned in the announcement concerning Flet v0.21.0, all deprecations will be completely removed from the API in version 1.0 - so you have enough time to update your apps.

You must not completely memorize what has been deprecated as we've added DeprecationWarnings which will be shown directly in your console (without breaking your app).

Documentation

The Flet documentation has been reorganized to ease navigation (especially for beginners/new users).

Upgrade to Flet 0.22.0, test your apps and let us know how you find the new features we added. If you have any questions, please join Flet Discord server or create a new thread on Flet GitHub discussions.

Happy Flet-ing!