showDateRangeDialog function

Future<DateTimeRange<DateTime>?> showDateRangeDialog({ required BuildContext context, required DateTime firstDate, required DateTime lastDate, DateTimeRange<DateTime>? initialDateRange, String? helpText, String? cancelText, String? confirmText, })

A styled date range picker following the design system.

final DateTimeRange? range = await showDateRangeDialog(
  context: context,
  firstDate: DateTime(2024),
  lastDate: DateTime(2026),
)

Implementation

Future<DateTimeRange?> showDateRangeDialog({
  required BuildContext context,
  required DateTime firstDate,
  required DateTime lastDate,
  DateTimeRange? initialDateRange,
  String? helpText,
  String? cancelText,
  String? confirmText,
}) {
  final ColorScheme scheme = Theme.of(context).colorScheme;
  return showDateRangePicker(
    context: context,
    firstDate: firstDate,
    lastDate: lastDate,
    initialDateRange: initialDateRange,
    helpText: helpText ?? 'SELECT DATE RANGE',
    cancelText: cancelText,
    confirmText: confirmText,
    builder: (BuildContext context, Widget? child) => Theme(
      data: Theme.of(context).copyWith(
        colorScheme: scheme,
        datePickerTheme: DatePickerThemeData(
          backgroundColor: scheme.surfaceContainerLow,
          headerBackgroundColor: scheme.primary,
          headerForegroundColor: scheme.onPrimary,
          dayBackgroundColor: WidgetStateProperty.resolveWith(
            (Set<WidgetState> states) {
              if (states.contains(WidgetState.selected)) {
                return scheme.primary;
              }
              return null;
            },
          ),
          todayBackgroundColor: WidgetStateProperty.resolveWith(
            (Set<WidgetState> states) {
              if (states.contains(WidgetState.selected)) {
                return scheme.primary;
              }
              return scheme.primary.withValues(alpha: 0.12);
            },
          ),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(AppRadius.extraLarge),
          ),
        ),
      ),
      child: child!,
    ),
  );
}