v1: DateRangePicker and more integration tests #5642

InesaFitsner · 2025-09-16T16:27:18Z

Description

Test Code

# Test code for the review of this PR

Type of change

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
This change requires a documentation update

Checklist

I signed the CLA.
My code follows the style guidelines of this project
I have performed a self-review of my own code
I have commented my code, particularly in hard-to-understand areas
My changes generate no new warnings
New and existing tests pass locally with my changes
I have made corresponding changes to the documentation (if applicable)

Screenshots

Additional details

Summary by Sourcery

Add Material-style DateRangePicker support with theming, register it in SDKs, remove obsolete locale setting, and provide examples and integration tests

New Features:

Introduce DateRangePicker control in Python and Dart SDKs with full customization properties

Enhancements:

Extend Theme API to include DataTable and DatePicker theme entries and remove deprecated locale from DatePickerTheme
Register DateRangePicker in core extensions and expose it in the Python package
Clarify ListTile hover_color behavior in documentation

Documentation:

Add DateRangePicker documentation page and basic example
Update mkdocs configuration to include test images and navigation entry for DateRangePicker

Tests:

Add integration tests for DateRangePicker functionality and theme rendering for both DatePicker and DateRangePicker

Chores:

Remove locale field and parsing logic from DatePickerTheme

Introduces an integration test for DatePicker theme customization with a golden screenshot for macOS. Updates docstrings for Theme class to clarify DataTableTheme and DatePickerTheme usage. Also refines ListTile hover_color docstring to specify when it takes effect.

DateRangePicker-related theme properties have been commented out in both Dart and Python implementations. This change likely reflects that these properties are not yet supported or are pending future implementation.

Introduced DateRangePicker control for both Dart and Python SDKs, including its registration in FletCoreExtension and Python __init__.py. This enables Material-style date range selection dialogs with customizable properties and event handling.

Introduces the DateRangePicker control to the Python SDK, including its implementation, example usage, documentation, and integration tests. Updates the Dart backend to support new properties and events for date range selection. Adds related documentation and navigation entry in mkdocs.

Updated the image path and size in the DateRangePicker documentation. Modified mkdocs.yml to include test images from integration_tests. Refactored date_range_picker.py to import DatePickerEntryMode from the material.date_picker module instead of defining it locally.

Uncommented and activated all DateRangePicker theme properties in both Dart and Python implementations, allowing full customization of elevation, background, header, shape, and selection colors. Also improved event handling in the Dart DateRangePicker control by passing the selected range to 'change' and 'dismiss' events.

Updated the 'basic' DateRangePicker test and golden image, and added a new 'properties1' test with corresponding screenshot. The new test covers various DateRangePicker properties to improve test coverage and reliability.

Renamed properties1.png to properties_calendar.png and added properties_input.png for input mode. Modified test_date_range_picker.py to capture screenshots for both calendar and input modes, improving test coverage for date picker entry modes.

Introduces a new integration test for the DateRangePicker theme on macOS, including a golden screenshot for visual regression. This ensures custom theme properties are correctly applied and rendered.

sourcery-ai

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

cloudflare-workers-and-pages · 2025-09-16T16:34:48Z

Deploying flet-docs with Cloudflare Pages

Latest commit:	`45830ae`
Status:	✅ Deploy successful!
Preview URL:	https://6b8f941a.flet-docs.pages.dev
Branch Preview URL:	https://inesa-v1-integration-tests-p.flet-docs.pages.dev

View logs

ndonkoHenri · 2025-09-17T04:56:31Z

sdk/python/packages/flet/docs/controls/daterangepicker.md

+--8<-- "../../examples/controls/date_range_picker/basic.py"
+```
+
+![basic](../test-images/controls/golden/macos/date_range_picker/basic.png){width="60%"}


I won't suggest we use references to golden images folder. The image for this example should be in examples/controls/daterangepicker/media. You could basically copy the golden image in there.

ndonkoHenri · 2025-09-17T04:58:49Z

sdk/python/examples/controls/date_range_picker/basic.py

+            ft.Text(f"End Date changed: {e.control.end_value.strftime('%m/%d/%Y')}"),
+        )
+
+    def handle_dismissal(e):


Can you please type annotate e in both functions?

ndonkoHenri · 2025-09-17T05:00:55Z

sdk/python/packages/flet/mkdocs.yml

+        - source_dir: integration_tests
+          target_url_path: test-images
+          include_exts: [".png", ".gif", ".svg"]


Can be removed when addressing #5642 (comment).

ndonkoHenri · 2025-09-17T05:03:03Z

sdk/python/packages/flet/src/flet/controls/material/date_range_picker.py

+)
+
+__all__ = [
+    "DatePickerEntryMode",


Isn't defined in this file.

ndonkoHenri · 2025-09-17T05:04:38Z

sdk/python/packages/flet/src/flet/controls/material/date_range_picker.py

+    error_invalid_text: Optional[str] = None
+    """
+    The error message displayed below the TextField if the date is earlier than
+    `first_date` or later than `last_date`.


Props could be cross-referenced.
[y][flet.X.y]

ndonkoHenri · 2025-09-17T05:05:43Z

sdk/python/packages/flet/src/flet/controls/material/list_tile.py

+    The tile's color when hovered. Only takes effect if `toggle_inputs` is True or if
+    `on_click` is provided.


Props can be cross referenced.

ndonkoHenri · 2025-09-17T05:06:38Z

sdk/python/packages/flet/src/flet/controls/theme.py

-    locale: Optional[Locale] = None
-    """
-    An optional locale argument can be used to set the locale for the date picker. It
-    defaults to the ambient locale provided by Localizations.
-    """
-


Any reason for this change?

Copilot

Pull Request Overview

This PR introduces support for the DateRangePicker control with Material-style theming, integrates it into both Python and Dart SDKs, and includes comprehensive testing.

Adds DateRangePicker control with full customization properties for date range selection
Extends Theme API with improved documentation and removes deprecated locale field from DatePickerTheme
Provides integration tests, documentation, and examples for the new control

Reviewed Changes

Copilot reviewed 14 out of 20 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
`sdk/python/packages/flet/src/flet/controls/theme.py`	Removes locale field from DatePickerTheme and adds documentation for theme properties
`sdk/python/packages/flet/src/flet/controls/material/list_tile.py`	Clarifies hover_color behavior documentation
`sdk/python/packages/flet/src/flet/controls/material/date_range_picker.py`	Implements new DateRangePicker control with comprehensive properties
`sdk/python/packages/flet/src/flet/controls/material/date_picker.py`	Updates DatePicker documentation for consistency
`sdk/python/packages/flet/src/flet/__init__.py`	Registers DateRangePicker in Python package exports
`sdk/python/packages/flet/mkdocs.yml`	Adds DateRangePicker documentation and test image support
`integration_tests/controls/test_date_range_picker_theme.py`	Tests DateRangePicker theme rendering
`integration_tests/controls/test_date_range_picker.py`	Tests DateRangePicker functionality and properties
`integration_tests/controls/test_date_picker_theme.py`	Tests DatePicker theme rendering
`docs/controls/daterangepicker.md`	Provides DateRangePicker documentation page
`examples/controls/date_range_picker/basic.py`	Basic example demonstrating DateRangePicker usage
`packages/flet/lib/src/utils/theme.dart`	Comments out locale parsing in Dart theme implementation
`packages/flet/lib/src/flet_core_extension.dart`	Registers DateRangePicker in Dart SDK
`packages/flet/lib/src/controls/date_range_picker.dart`	Implements DateRangePicker control in Dart

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-09-17T05:10:43Z

sdk/python/packages/flet/src/flet/controls/material/date_range_picker.py

+    Called when user clicks confirm button.
+    [`value`][flet.DatePicker.value] is updated with selected date.
+
+    The `data` property of the event handler argument contains the selected date.


The documentation incorrectly references DatePicker.value instead of the appropriate DateRangePicker properties. It should reference start_value and end_value and mention that the data contains the selected date range, not a single date.

Suggested change

Called when user clicks confirm button.

[`value`][flet.DatePicker.value] is updated with selected date.

The `data` property of the event handler argument contains the selected date.

Called when user clicks the confirm button.

[`start_value`][flet.DateRangePicker.start_value] and [`end_value`][flet.DateRangePicker.end_value] are updated with the selected date range.

The `data` property of the event handler argument contains the selected date range (start and end dates).

sdk/python/packages/flet/src/flet/controls/material/date_range_picker.py

Copilot · 2025-09-17T05:10:44Z

sdk/python/packages/flet/src/flet/controls/material/date_range_picker.py

+    switch_to_calendar_icon: Optional[IconData] = None
+    """
+    The name of the icon displayed in the corner of the dialog when
+    [`date_picker_entry_mode`][flet.DatePicker.date_picker_entry_mode]


The link incorrectly references flet.DatePicker.date_picker_entry_mode but should reference flet.DateRangePicker.date_picker_entry_mode since this is documentation for DateRangePicker.

Copilot · 2025-09-17T05:10:44Z

sdk/python/packages/flet/src/flet/controls/material/date_range_picker.py

+    switch_to_input_icon: Optional[IconData] = None
+    """
+    The name of the icon displayed in the corner of the dialog when
+    [`date_picker_entry_mode`][flet.DatePicker.date_picker_entry_mode]


The link incorrectly references flet.DatePicker.date_picker_entry_mode but should reference flet.DateRangePicker.date_picker_entry_mode since this is documentation for DateRangePicker.

InesaFitsner added 9 commits September 10, 2025 15:27

Comment out DateRangePicker theme properties

c9d957f

DateRangePicker-related theme properties have been commented out in both Dart and Python implementations. This change likely reflects that these properties are not yet supported or are pending future implementation.

Add DateRangePicker control to Flet

6a46316

Introduced DateRangePicker control for both Dart and Python SDKs, including its registration in FletCoreExtension and Python __init__.py. This enables Material-style date range selection dialogs with customizable properties and event handling.

Add and update DateRangePicker integration tests

a1918b9

Updated the 'basic' DateRangePicker test and golden image, and added a new 'properties1' test with corresponding screenshot. The new test covers various DateRangePicker properties to improve test coverage and reliability.

Add date range picker theme integration test

45830ae

Introduces a new integration test for the DateRangePicker theme on macOS, including a golden screenshot for visual regression. This ensures custom theme properties are correctly applied and rendered.

InesaFitsner requested a review from FeodorFitsner September 16, 2025 16:27

sourcery-ai bot reviewed Sep 16, 2025

View reviewed changes

ndonkoHenri reviewed Sep 17, 2025

View reviewed changes

ndonkoHenri requested a review from Copilot September 17, 2025 05:09

Copilot AI reviewed Sep 17, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

v1: DateRangePicker and more integration tests #5642

v1: DateRangePicker and more integration tests #5642

Uh oh!

InesaFitsner commented Sep 16, 2025 •

edited by sourcery-ai bot

Loading

Uh oh!

sourcery-ai bot left a comment

Uh oh!

cloudflare-workers-and-pages bot commented Sep 16, 2025

Uh oh!

ndonkoHenri Sep 17, 2025

Uh oh!

ndonkoHenri Sep 17, 2025

Uh oh!

ndonkoHenri Sep 17, 2025

Uh oh!

ndonkoHenri Sep 17, 2025

Uh oh!

ndonkoHenri Sep 17, 2025

Uh oh!

ndonkoHenri Sep 17, 2025

Uh oh!

ndonkoHenri Sep 17, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Sep 17, 2025

Uh oh!

Uh oh!

Copilot AI Sep 17, 2025

Uh oh!

Copilot AI Sep 17, 2025

Uh oh!

Uh oh!

		The tile's color when hovered. Only takes effect if `toggle_inputs` is True or if
		`on_click` is provided.

v1: DateRangePicker and more integration tests #5642

Are you sure you want to change the base?

v1: DateRangePicker and more integration tests #5642

Uh oh!

Conversation

InesaFitsner commented Sep 16, 2025 • edited by sourcery-ai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Test Code

Type of change

Checklist

Screenshots

Additional details

Summary by Sourcery

Uh oh!

sourcery-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

cloudflare-workers-and-pages bot commented Sep 16, 2025

Deploying flet-docs with Cloudflare Pages

Uh oh!

ndonkoHenri Sep 17, 2025

Choose a reason for hiding this comment

Uh oh!

ndonkoHenri Sep 17, 2025

Choose a reason for hiding this comment

Uh oh!

ndonkoHenri Sep 17, 2025

Choose a reason for hiding this comment

Uh oh!

ndonkoHenri Sep 17, 2025

Choose a reason for hiding this comment

Uh oh!

ndonkoHenri Sep 17, 2025

Choose a reason for hiding this comment

Uh oh!

ndonkoHenri Sep 17, 2025

Choose a reason for hiding this comment

Uh oh!

ndonkoHenri Sep 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Sep 17, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Sep 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 17, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

InesaFitsner commented Sep 16, 2025 •

edited by sourcery-ai bot

Loading