Skip to content

v1: IconButton variants #5522

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 19 commits into
base: main
Choose a base branch
from
Draft

v1: IconButton variants #5522

wants to merge 19 commits into from

Conversation

ndonkoHenri
Copy link
Contributor

@ndonkoHenri ndonkoHenri commented Aug 7, 2025

Closes #5469

Test Code

def main(page: ft.Page):
    page.vertical_alignment = page.horizontal_alignment = "center"
    page.add(
        ft.IconButton(icon=ft.Icons.ADD),
        ft.FilledIconButton(icon=ft.Icons.ADD),
        ft.FilledTonalIconButton(icon=ft.Icons.ADD),
        ft.OutlinedIconButton(icon=ft.Icons.ADD),
    )

Summary by Sourcery

Introduce Material 3 icon button variants and update both Python SDK and Dart control implementations to support filled, filled tonal, and outlined IconButtons, while refining style handling and documentation for IconButton properties.

New Features:

  • Add FilledIconButton, FilledTonalIconButton, and OutlinedIconButton classes in Python SDK
  • Support new icon button variants in Dart control and FletCoreExtension
  • Expose new icon button variants in module exports

Enhancements:

  • Merge bgcolor and visual_density into ButtonStyle via before_update hook
  • Switch Dart IconButtonControl to use variant-specific constructors for filled, tonal, outlined styles
  • Add assertion to enforce positive splash_radius and refine AppBar/ElevatedButton before_update validations

Documentation:

  • Clarify IconButton property descriptions and docstrings for color, style, and toggle behavior
  • Document new icon button variants with usage guidance

Summary by Sourcery

Introduce new Material 3 icon button variants, unify URL handling with a Url type, refine style mapping and validations, and update documentation and tests accordingly.

New Features:

  • Add FilledIconButton, FilledTonalIconButton, and OutlinedIconButton variants in Python SDK.
  • Enable Dart IconButtonControl to render filled, filled tonal, outlined variants using variant-specific constructors.
  • Define a Url data type and replace separate url and url_target properties across Python and Dart controls.

Enhancements:

  • Combine bgcolor, visual_density, and mouse_cursor into ButtonStyle via before_update in IconButton.
  • Add assertions for splash_radius and refine validations in before_update hooks for various controls.
  • Streamline style internals and remove manual background decoration in Dart IconButtonControl.

Documentation:

  • Document new icon button variants in controls index and create example pages.
  • Add Url type to user-facing documentation.

Tests:

  • Adjust object diff tests to account for new style internals and Url handling changes.

Copy link

cloudflare-workers-and-pages bot commented Aug 7, 2025

Deploying flet-docs with  Cloudflare Pages  Cloudflare Pages

Latest commit: 83a8098
Status: ✅  Deploy successful!
Preview URL: https://020357c9.flet-docs.pages.dev
Branch Preview URL: https://v1-icon-button-variants.flet-docs.pages.dev

View logs

@ndonkoHenri ndonkoHenri marked this pull request as ready for review August 7, 2025 21:58
@ndonkoHenri ndonkoHenri requested a review from Copilot August 7, 2025 21:58
Copy link
Contributor

@sourcery-ai sourcery-ai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We've reviewed this pull request using the Sourcery rules engine

Copilot

This comment was marked as outdated.



@pytest.mark.asyncio(loop_scope="module")
async def test_button_1(flet_app: ftt.FletTestApp, request):
flet_app.page.theme_mode = ft.ThemeMode.LIGHT
await flet_app.assert_control_screenshot(
request.node.name,
ft.Button("Click me"),
control=ft.Button("Click me"),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

control in that method is a normal, positional, required parameter. Why using it by name here?

@ndonkoHenri ndonkoHenri requested a review from Copilot August 9, 2025 17:06
Copy link
Contributor

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR introduces Material 3 icon button variants to the Flet Python SDK and Flutter controls, adding support for filled, filled tonal, and outlined IconButtons while consolidating URL handling and style management. The changes include:

  • Addition of new icon button variants (FilledIconButton, FilledTonalIconButton, OutlinedIconButton)
  • Introduction of a unified Url data type to replace separate url and url_target properties
  • Improved style handling in IconButton controls with consolidated button properties into ButtonStyle

Reviewed Changes

Copilot reviewed 54 out of 59 changed files in this pull request and generated 4 comments.

Show a summary per file
File Description
sdk/python/packages/flet/src/flet/controls/material/icon_button.py Added new icon button variants and improved style handling
sdk/python/packages/flet/src/flet/controls/types.py Introduced new Url dataclass for unified URL handling
packages/flet/lib/src/controls/icon_button.dart Updated Flutter control to support new variants with proper constructors
packages/flet/lib/src/utils/launch_url.dart Implemented new URL handling logic and parsing
sdk/python/packages/flet/src/flet/init.py Exported new icon button classes

@ndonkoHenri ndonkoHenri marked this pull request as draft August 10, 2025 19:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

v1: Add "variants" to IconButton: FilledIconButton, FilledTonalIconButton, OutlinedIconButton
2 participants