Color picker controls based on flutter_colorpicker #6109
Open
InesaFitsner wants to merge 37 commits intomainfrom
Open
Color picker controls based on flutter_colorpicker #6109InesaFitsner wants to merge 37 commits intomainfrom
InesaFitsner wants to merge 37 commits intomainfrom
Conversation
Introduce a new flet-color-picker extension (v0.1.0). Adds a Python package (src/flet_color_picker) with control implementation, pyproject, README, LICENSE, and CHANGELOG, plus a Flutter wrapper (src/flutter/flet_color_picker) and pubspec. Includes example (examples/controls/color_picker/example_1.py) and docs (docs/color_picker). Integrates the package into the client by adding the dependency to client/pubspec.yaml, importing the package in client/lib/main.dart, and registering its Extension(). Also updates workspace python metadata (sdk/python/pyproject.toml), mkdocs navigation, and lockfile entries (adds package and transitive flutter_colorpicker).
Introduce a new HueRingPicker LayoutControl for the flet-color-picker extension and expose it from the package __init__. Added an example (sdk/python/examples/controls/color_picker/example_2.py) demonstrating usage and a documentation page (sdk/python/packages/flet/docs/color_picker/hue_ring_picker.md). Updated mkdocs.yml to include the new doc in the ColorPicker section.
Add two new color picker controls (MaterialPicker and SlidePicker) to the flet-color-picker package and export them from __init__.py. Add corresponding control implementations, usage docs, and examples (example_3.py, example_4.py); update existing examples to call ft.run instead of ft.app. Register the new docs in mkdocs.yml and include an integration test plus a golden image for color picker screenshots.
Introduce BlockPicker and MultipleChoiceBlockPicker controls to the flet-color-picker package. Adds control implementations (block_picker.py, multiple_choice_block_picker.py), updates package exports (__init__.py), and provides usage examples (example_5.py, example_6.py). Also adds documentation pages for both pickers and updates mkdocs navigation to include them. Handlers expose on_color_change/on_colors_change events returning selected color(s) as hex strings.
Add macOS golden images for multiple color picker variants and extend the integration tests to cover them. Update test_color_picker.py to import specific picker classes (HueRingPicker, SlidePicker, MaterialPicker, BlockPicker, MultipleChoiceBlockPicker) and add screenshot-based tests that assert rendering for each picker with example colors.
Add several new configurable properties to the ColorPicker control to improve customization: color_history (list of colors), display_thumb_color (bool), enable_alpha (bool), hex_input_bar (bool), and label_text_style (TextStyle). Each property includes a short docstring. Update the example to disable the thumb color and increase the picker width (display_thumb_color=False, color_picker_width=420). These changes allow toggling UI elements and providing a color history palette.
Introduce ColorLabelType enum and expose it from package root; add label_types and on_history_change properties to ColorPicker (with updated docstrings). Update example to demonstrate color_history, label_types, and an on_history_change handler; adjust a few picker defaults (disable alpha/hex input in example). This enables configurable color label formats and notification when the history palette changes.
Introduce a PaletteType enum with various palette variants (HSV/HSL/RGB and hue wheel), export it from the package, and add an optional palette_type attribute to ColorPicker with documentation. Update the example to import PaletteType and demonstrate using palette_type=PaletteType.RGB_WITH_BLUE. This enables choosing different picker area layouts for the color picker control.
Introduce an optional picker_area_border_radius (ft.BorderRadiusValue) property to the ColorPicker control to allow customizing the picker area's corner radius. Added a docstring for the new property and updated the example (sdk/python/examples/controls/color_picker/example_1.py) to demonstrate usage with picker_area_border_radius=ft.BorderRadius.all(20).
Introduce a new optional property picker_area_height_percent on ColorPicker (Optional[ft.Number]) to control the picker area's height as a percentage of the picker width. Update the color picker example to demonstrate usage by setting picker_area_height_percent=0.3.
Add a new picker_hsv_color property to ColorPicker to store the currently selected HSV color (dict with keys: alpha, hue, saturation, value). Also add an on_hsv_color_change event handler which receives the HSV values via Event.data. This complements the existing on_color_change (hex values) and lets consumers work with HSV data directly.
Introduce a new Flutter extension package flet_color_picker for the Flet Python SDK. Adds multiple picker controls (ColorPicker, HueRingPicker, SlidePicker, MaterialPicker, BlockPicker, MultipleChoiceBlockPicker) with an Extension entrypoint and wiring to Flet Control properties/events (picker_color, picker_hsv_color, color_history, picker_colors and events like color_change, hsv_color_change, history_change, colors_change). Includes parsing helpers, label/palette mapping, and a .gitignore for the package.
Add runtime logging and HSV support to the color picker example: print selected color on change, enable the history change handler, and introduce on_hsv_color_change to log HSV data (reads picker_hsv_color). Also set an initial picker_hsv_color dict to demonstrate HSV initialization.
Remove unused imports and consolidate numerous conditional ColorPicker constructions into a single, unified instantiation. Add sensible defaults (colorPickerWidth defaults to 300.0, paletteType defaults to PaletteType.hsvWithHue) and introduce labelTypesArg fallback when rawLabelTypes is not a List. Also apply minor formatting changes (split long call, align variable parsing) and reduce code duplication for a smaller, clearer build method.
Refactor ColorPicker to use the shared parseEnum helper: add import of flet/src/utils/enums.dart and replace the custom _parseLabelType and _parsePaletteType implementations with calls to parseEnum (supporting an optional defaultValue). This centralizes enum parsing and removes duplicated switch logic. Also update the Python example to use PaletteType.HSV_WITH_HUE instead of RGB_WITH_BLUE.
Expose configurable color swatches and dialog behavior for BlockPicker. Added available_colors (list) and use_in_show_dialog (bool) to the Python control API, updated the example to provide a default color list and enable the dialog display, and implemented parsing/handling in the Flutter control: import parseColor utility, convert raw color values to Flutter Color objects, and pass availableColors/useInShowDialog into the underlying BlockPicker. Falls back to the default picker when no available_colors are provided.
Change example to host BlockPicker inside an AlertDialog and open it with a Button instead of embedding the picker directly in the page. Remove the deprecated use_in_show_dialog property from the Python BlockPicker API and stop reading/passing that flag in the Flutter wrapper. Note: this removes the use_in_show_dialog option (breaking change) and consolidates dialog usage to the example.
Expose several configurable options for the HueRingPicker across Python and Flutter layers: color_picker_height, enable_alpha, hue_ring_stroke_width, picker_area_border_radius, and portrait_only. The example was updated to demonstrate these options (larger height, disabled alpha, wider hue ring, square picker area, portrait-only). The Flutter control now reads these properties from the control with sensible defaults and passes them into the underlying HueRingPicker widget.
Expose primary color changes and layout/label options for MaterialPicker. Added enable_label and portrait_only properties and an on_primary_change event handler in the Python control API. The Flutter control now forwards enable_label and portrait_only to the picker and triggers a "primary_change" event (hex color) via onPrimaryChanged. Updated example to handle on_primary_change and demonstrate portrait_only/enable_label usage.
Expose an available_colors property for MultipleChoiceBlockPicker so callers can provide a custom palette. Added the available_colors attribute and docstring to the Python control class, updated the Flutter control state to parse raw available_colors from the control into a List<Color> and pass it into the picker (with fallback to the previous constructor when none provided). Also updated the example to demonstrate supplying an available_colors list.
Add ColorModel enum and multiple new SlidePicker configuration options across Python and Flutter bindings. Expose ColorModel in package __init__.py. slide_picker.py defines ColorModel and many optional properties (color_model, display_thumb_color, enable_alpha, indicator alignment/size/radius, label text/style/types, show_indicator/label/params/slider_text, slider_size/text_style) and keeps on_color_change. Update Dart control to parse these new fields (import enums, parse color model and label types, forward args to Flutter SlidePicker). Update example to demonstrate new options and print color changes.
Update slide picker example and internals: tweak example_3 defaults (indicator alignments, indicator_size increased, show_indicator enabled) to improve indicator positioning/visibility. Improve Python docstrings for indicator_alignment_begin/end with clearer wording and usage examples. Simplify Dart color-change handler by removing local setState and property update; now it only emits the color_change event with the hex value to avoid redundant state updates.
Add documentation and assets for the ColorPicker extension: new docs page (color_picker.md) with usage and example link, an example package stub (sdk/python/examples/controls/color_picker/__init__.py), and a screenshot image used for docs. Include an integration test (test_color_picker_examples.py) that renders the ColorPicker for documentation screenshots. Update color_picker index to list available pickers and update mkdocs navigation to include the new ColorPicker doc.
Update sdk/python/packages/flet/docs/color_picker/color_picker.md to use ../test-images/examples/... for example_images instead of ../../integration_tests/examples/... to reflect the relocated test image assets and correct the relative path.
Add example_images references and embedded class_summary screenshots to color picker docs (BlockPicker, HueRingPicker, MaterialPicker, MultipleChoiceBlockPicker, SlidePicker). Add golden macOS PNGs for each picker under integration_tests/examples/color_picker/golden/macos/color_picker_examples. Expand integration tests (test_color_picker_examples.py): import individual picker classes and add visual snapshot tests (assert_control_screenshot) for hue ring, slide, material, block, and multiple-choice block pickers. Also adjust the SlidePicker example_images frontmatter path.
Update example_images frontmatter in color_picker docs to use ../test-images/examples/color_picker/golden/macos/color_picker_examples instead of the old ../../integration_tests path. Applies to BlockPicker, HueRingPicker, MaterialPicker, and MultipleChoiceBlockPicker to reflect reorganization of image assets.
Streamline the color picker example files by removing the separate swatch and selected Text controls and replacing in-UI updates with simple console logging of color events. Clean up imports, remove many optional styling/behavior properties, and adjust a few defaults (e.g. border radii, stroke widths). Replace open-dialog Buttons with compact IconButtons; in example_6 create an AlertDialog that hosts the MultipleChoiceBlockPicker. Overall cleanup to make the demos leaner and focused on the picker controls.
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
sdk/python/packages/flet-color-picker/src/flutter/flet_color_picker/lib/src/color_picker.dart
Outdated
Show resolved
Hide resolved
sdk/python/packages/flet-color-picker/src/flutter/flet_color_picker/lib/src/color_picker.dart
Outdated
Show resolved
Hide resolved
sdk/python/packages/flet-color-picker/src/flutter/flet_color_picker/lib/src/color_picker.dart
Outdated
Show resolved
Hide resolved
...python/packages/flet-color-picker/src/flutter/flet_color_picker/lib/src/material_picker.dart
Show resolved
Hide resolved
Add the new flet-color-picker package to the CI workflow matrix and include flet_color_picker in the package iteration list so the package is tested and handled alongside other flet packages during CI/publishing.
Deploying flet-docs with
|
| Latest commit: |
6e4852a
|
| Status: | 🚫 Build failed. |
Deploying flet-examples with
|
| Latest commit: |
6e4852a
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://2bbfde5a.flet-examples.pages.dev |
| Branch Preview URL: | https://inesa-color-picker.flet-examples.pages.dev |
ndonkoHenri
reviewed
Feb 4, 2026
Contributor
There was a problem hiding this comment.
Please remove the underscore in all markdown documentation file names. So instead of block_picker.md we use blockpicker.md, which would become /controls/blockpicker in website.
Concerning the other already-existing files still having an underscore, they have been updated in one of my recent PRs.
Contributor
Author
There was a problem hiding this comment.
now we have for example charts that are not controls/charts but https://docs.flet.dev/charts/bar_chart/
should block picker be at https://docs.flet.dev/colorpicker/blockpicker/ or https://docs.flet.dev/controls/colorpicker/blockpicker/ or https://docs.flet.dev/controls/blockpicker/
Contributor
There was a problem hiding this comment.
will say we can keep current extensions style, like in charts and others, at least, for this PR. so... https://docs.flet.dev/colorpicker/blockpicker/
but yh, in this case it sounds a little weird when reading to have picker/picker. and looking at your additions right now, it seems like we would have /colorpicker/colorpicker
this makes me come to the suggestion: similar to "flet-charts", which is kind of a collection of chart types, we could maybe name this new extension flet-color-pickers (plural form)? so we instead have /colorpickers/colorpicker in docs. wdyt?
ndonkoHenri
reviewed
Feb 4, 2026
ndonkoHenri
reviewed
Feb 4, 2026
sdk/python/packages/flet-color-picker/src/flet_color_picker/block_picker.py
Outdated
Show resolved
Hide resolved
ndonkoHenri
reviewed
Feb 4, 2026
Comment on lines
+77
to
+82
|
|
||
| Values: | ||
| - `ColorLabelType.HEX` | ||
| - `ColorLabelType.RGB` | ||
| - `ColorLabelType.HSV` | ||
| - `ColorLabelType.HSL` |
Contributor
There was a problem hiding this comment.
since the enum is already provided through the type of this property, no need to list out its members here.
Suggested change
| Values: | |
| - `ColorLabelType.HEX` | |
| - `ColorLabelType.RGB` | |
| - `ColorLabelType.HSV` | |
| - `ColorLabelType.HSL` |
ndonkoHenri
reviewed
Feb 4, 2026
Comment on lines
+100
to
+105
| picker_hsv_color: Optional[dict[str, ft.Number]] = None | ||
| """ | ||
| The currently selected HSV color. | ||
|
|
||
| Expected keys: `alpha`, `hue`, `saturation`, `value`. | ||
| """ |
Contributor
There was a problem hiding this comment.
Provide these keys as Enum class for best dev experience?
ndonkoHenri
reviewed
Feb 4, 2026
| A color picker control based on flutter_colorpicker. | ||
| """ | ||
|
|
||
| picker_color: Optional[ft.ColorValue] = None |
Contributor
There was a problem hiding this comment.
I personally find "picker" in these props (here and in others) a little redundant. Feels like having AlertDialog.dialog_bgcolor.
Will suggest direct namings, except if there is a reason for repeating.
ndonkoHenri
reviewed
Feb 4, 2026
Comment on lines
+45
to
+52
|
|
||
| Examples: | ||
| - `Alignment(-1, 0)` for left | ||
| - `Alignment(1, 0)` for right | ||
| - `Alignment(0, -1)` for top | ||
| - `Alignment(0, 1)` for bottom | ||
| - `Alignment(-1, -1)` for top-left | ||
| - `Alignment(1, 1)` for bottom-right |
Contributor
There was a problem hiding this comment.
No need to list this here honestly. Alignment docs does that: https://docs.flet.dev/types/alignment/#flet.Alignment
ndonkoHenri
reviewed
Feb 4, 2026
Comment on lines
+58
to
+65
|
|
||
| Examples: | ||
| - `Alignment(-1, 0)` for left | ||
| - `Alignment(1, 0)` for right | ||
| - `Alignment(0, -1)` for top | ||
| - `Alignment(0, 1)` for bottom | ||
| - `Alignment(-1, -1)` for top-left | ||
| - `Alignment(1, 1)` for bottom-right |
Contributor
There was a problem hiding this comment.
same here (not needed).
Use the shared parseDouble function to parse HSV map fields (alpha, hue, saturation, value) instead of the local _toDouble helper, and remove the now-unused _toDouble method. Null checks are preserved before constructing the HSVColor.
Move HSV parsing logic into a new utils file and update usages. Added src/utils/color_picker.dart with parseHsvColor(), removed the private _parseHsvColor() from color_picker.dart and imported the new utility. Updated the Python example to use picker_hsv_color (alpha/hue/saturation/value map) and commented out the old hex picker_color. This consolidates parsing logic for reuse and makes the example demonstrate HSV input.
move parsePalletteType to utils
Refactor picker widgets to inline widget.control.get* calls instead of creating many intermediate local variables. Applied changes in color_picker.dart, hue_ring_picker.dart, material_picker.dart, and slide_picker.dart, adding sensible inline defaults (e.g. color_picker_width: 300.0, color_picker_height: 250.0, const BorderRadius.all(Radius.zero), etc.). Also removed unused import 'package:flet/src/utils/enums.dart' from affected files. This simplifies the code, removes unused variables/imports, and centralizes default handling.
Refactor color picker utilities: rename utils/color_picker.dart to utils/color_pickers.dart, add parseColorModel(), and update imports in color_picker.dart and slide_picker.dart. Remove duplicated parsing helpers from SlidePicker and use shared parseLabelType/parseColorModel functions to centralize parsing logic and avoid duplication.
Rename several color_picker documentation files to use compact filenames (remove underscores) and update references. Files renamed: color_picker/*.md -> color_picker/*(no_underscore).md (color_picker, block_picker, hue_ring_picker, material_picker, multiple_choice_block_picker, slide_picker). Updated color_picker/index.md and sdk/python/packages/flet/mkdocs.yml nav entries to point to the new filenames for consistent docs linking.
Update picker class docstrings to be more descriptive and specific (BlockPicker, ColorPicker, HueRingPicker, MaterialPicker, MultipleChoiceBlockPicker, SlidePicker). Remove redundant introductory paragraphs and the repeated "Usage"/installation sections (uv/pip and flutter_colorpicker mentions) from the color picker docs, leaving the class summaries and examples. This cleans up documentation and standardizes descriptions across the color picker components.
Replace the old "## Description" sections and {{ class_all_options(class_name) }} with the unified {{ class_members(class_name) }} macro in color picker docs for consistency. Also tweak the index copy to "Multiple color picker controls built on Flutter's..." and rename the section to "Available color pickers" for clarity. Affected files: blockpicker.md, colorpicker.md, hueringpicker.md, materialpicker.md, multiplechoiceblockpicker.md, slidepicker.md, and index.md.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Test Code
# Test code for the review of this PRType of change
Checklist
Screenshots
Additional details
Summary by Sourcery
Add a new flet-color-picker extension package providing multiple Flutter-based color picker controls and integrate it into the Flet client and Python SDK.
New Features:
Enhancements:
Build:
Documentation:
Tests: