v1: DateRangePicker and more integration tests (#5642)

* Add DatePicker theme integration test and doc updates

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.

* Comment out DateRangePicker theme properties

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

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 DateRangePicker control and documentation

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.

* Update DateRangePicker docs and refactor entry mode import

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.

* Enable full DateRangePicker theme customization

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.

* Add and update DateRangePicker integration tests

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.

* Update date range picker integration test screenshots

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.

* Add date range picker theme integration test

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.

* Update docstrings for DateRangePicker and ListTile

Corrected references and improved clarity in docstrings for DateRangePicker and ListTile controls. Updated event handler type annotations in the date_range_picker example for better type safety.

* Update doc references to use generic (c). links

Replaced specific class references in docstrings with generic [(c).] links in DateRangePicker and ListTile controls. This change improves maintainability and consistency in documentation references.

* Update docstrings and mkdocs config for clarity

Set 'inherited_members' to false in mkdocs.yml to exclude inherited members from documentation. Updated docstrings in date_range_picker.py and divider.py for improved clarity and accuracy.

* Refactor on_tap_down event type in Container

Simplified the on_tap_down event handler type in the Container control to only accept TapEvent, removing support for Event. Also removed outdated documentation regarding the event argument type.

---------

Co-authored-by: Feodor Fitsner <feodor@appveyor.com>

Author: InesaFitsner

packages/flet/lib/src/controls/date_range_picker.dart

@@ -0,0 +1,104 @@
+import 'package:flutter/material.dart';
+
+import '../models/control.dart';
+import '../utils/colors.dart';
+import '../utils/form_field.dart';
+import '../utils/icons.dart';
+import '../utils/numbers.dart';
+import '../utils/time.dart';
+
+class DateRangePickerControl extends StatefulWidget {
+  final Control control;
+
+  DateRangePickerControl({Key? key, required this.control})
+      : super(key: key ?? ValueKey("control_${control.id}"));
+
+  @override
+  State<DateRangePickerControl> createState() => _DateRangePickerControlState();
+}
+
+class _DateRangePickerControlState extends State<DateRangePickerControl> {
+  @override
+  Widget build(BuildContext context) {
+    debugPrint("DateRangePicker build: ${widget.control.id}");
+
+    bool lastOpen = widget.control.getBool("_open", false)!;
+
+    var open = widget.control.getBool("open", false)!;
+    var currentDate = widget.control.getDateTime("current_date");
+    var startValue = widget.control.getDateTime("start_value");
+    var endValue = widget.control.getDateTime("end_value");
+    var value = DateTimeRange<DateTime>(
+        start: startValue ?? currentDate ?? DateTime.now(),
+        end: endValue ?? currentDate ?? DateTime.now());
+
+    var switchToCalendarEntryModeIcon =
+        widget.control.getIconData("switch_to_calendar_icon");
+    var switchToInputEntryModeIcon =
+        widget.control.getIconData("switch_to_input_icon");
+
+    void onClosed(DateTimeRange<DateTime>? dateRangeValue) {
+      widget.control.updateProperties({"_open": false}, python: false);
+      var props = {
+        "start_value": dateRangeValue?.start ?? startValue,
+        "end_value": dateRangeValue?.end ?? endValue,
+        "open": false
+      };
+      widget.control.updateProperties(props);
+      if (dateRangeValue != null) {
+        widget.control.triggerEvent("change", dateRangeValue);
+      }
+      widget.control.triggerEvent("dismiss", dateRangeValue == null);
+    }
+
+    Widget createSelectDateDialog() {
+      Widget dialog = DateRangePickerDialog(
+        initialDateRange: value,
+        firstDate: widget.control.getDateTime("first_date", DateTime(1900))!,
+        lastDate: widget.control.getDateTime("last_date", DateTime(2050))!,
+        currentDate: currentDate ?? DateTime.now(),
+        helpText: widget.control.getString("help_text"),
+        cancelText: widget.control.getString("cancel_text"),
+        confirmText: widget.control.getString("confirm_text"),
+        saveText: widget.control.getString("save_text"),
+        errorInvalidRangeText:
+            widget.control.getString("error_invalid_range_text"),
+        errorFormatText: widget.control.getString("error_format_text"),
+        errorInvalidText: widget.control.getString("error_invalid_text"),
+        fieldStartHintText: widget.control.getString("field_start_hint_text"),
+        fieldEndHintText: widget.control.getString("field_end_hint_text"),
+        fieldStartLabelText: widget.control.getString("field_start_label_text"),
+        fieldEndLabelText: widget.control.getString("field_end_label_text"),
+        keyboardType: parseTextInputType(
+            widget.control.getString("keyboard_type"), TextInputType.text)!,
+        initialEntryMode: widget.control.getDatePickerEntryMode(
+            "date_picker_entry_mode", DatePickerEntryMode.calendar)!,
+        switchToCalendarEntryModeIcon: switchToCalendarEntryModeIcon != null
+            ? Icon(switchToCalendarEntryModeIcon)
+            : null,
+        switchToInputEntryModeIcon: switchToInputEntryModeIcon != null
+            ? Icon(switchToInputEntryModeIcon)
+            : null,
+      );
+
+      return dialog;
+    }
+
+    if (open && (open != lastOpen)) {
+      widget.control.updateProperties({"_open": open}, python: false);
+
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        showDialog<DateTimeRange<DateTime>>(
+            barrierDismissible: !widget.control.getBool("modal", false)!,
+            barrierColor: widget.control.getColor("barrier_color", context),
+            useRootNavigator: false,
+            context: context,
+            builder: (context) => createSelectDateDialog()).then((result) {
+          debugPrint("pickDate() completed");
+          onClosed(result);
+        });
+      });
+    }
+    return const SizedBox.shrink();
+  }
+}

packages/flet/lib/src/flet_core_extension.dart

@@ -44,6 +44,7 @@ import 'controls/cupertino_textfield.dart';
 import 'controls/cupertino_timer_picker.dart';
 import 'controls/datatable.dart';
 import 'controls/date_picker.dart';
+import 'controls/date_range_picker.dart';
 import 'controls/dismissible.dart';
 import 'controls/divider.dart';
 import 'controls/drag_target.dart';
@@ -223,6 +224,8 @@ class FletCoreExtension extends FletExtension {
         return DataTableControl(key: key, control: control);
       case "DatePicker":
         return DatePickerControl(key: key, control: control);
+      case "DateRangePicker":
+        return DateRangePickerControl(key: key, control: control);
       case "Dismissible":
         return DismissibleControl(key: key, control: control);
       case "Divider":

packages/flet/lib/src/utils/theme.dart

@@ -16,7 +16,6 @@ import 'dismissible.dart';
 import 'edge_insets.dart';
 import 'geometry.dart';
 import 'icons.dart';
-import 'locale.dart';
 import 'material_state.dart';
 import 'menu.dart';
 import 'misc.dart';
@@ -773,7 +772,7 @@ DatePickerThemeData? parseDatePickerTheme(
     yearOverlayColor: parseWidgetStateColor(value["year_overlay_color"], theme),
     weekdayStyle: parseTextStyle(value["weekday_text_style"], theme),
     dayShape: parseWidgetStateOutlinedBorder(value["day_shape"], theme),
-    locale: parseLocale(value["locale"]),
+    //locale: parseLocale(value["locale"]),
   );
 }
 

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

@@ -0,0 +1,36 @@
+import datetime
+
+import flet as ft
+
+
+def main(page: ft.Page):
+    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
+
+    def handle_change(e: ft.Event[ft.DateRangePicker]):
+        page.add(
+            ft.Text(
+                f"Start Date changed: {e.control.start_value.strftime('%m/%d/%Y')}"
+            ),
+            ft.Text(f"End Date changed: {e.control.end_value.strftime('%m/%d/%Y')}"),
+        )
+
+    def handle_dismissal(e: ft.Event[ft.DialogControl]):
+        page.add(ft.Text("DatePicker dismissed"))
+
+    page.add(
+        ft.Button(
+            content=ft.Text("Pick date"),
+            icon=ft.Icons.PHONE,
+            on_click=lambda e: page.show_dialog(
+                ft.DateRangePicker(
+                    start_value=datetime.datetime(year=2000, month=10, day=1),
+                    end_value=datetime.datetime(year=2000, month=10, day=15),
+                    on_change=handle_change,
+                    on_dismiss=handle_dismissal,
+                )
+            ),
+        )
+    )
+
+
+ft.run(main)

sdk/python/examples/controls/date_range_picker/media/basic.png

@@ -0,0 +1,15 @@
+## Examples
+
+[Live example](https://flet-controls-gallery.fly.dev/dialogs/daterangepicker)
+
+### Basic Example
+
+```python
+--8<-- "../../examples/controls/date_range_picker/basic.py"
+```
+
+![basic](../test-images/controls/golden/macos/date_range_picker/basic.png){width="60%"}
+/// caption
+///
+
+::: flet.DateRangePicker