horizontal_date_range_picker 1.7.6

A horizontally-scrollable date picker widget with single date and date range selection modes.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:horizontal_date_range_picker/horizontal_date_range_picker.dart';

void main() {
  runApp(const ExampleApp());
}

class ExampleApp extends StatelessWidget {
  const ExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Date Picker Example',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SelectionMode _mode = SelectionMode.single;
  String _result = 'No selection';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Horizontal Date Range Picker'),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            SegmentedButton<SelectionMode>(
              segments: const [
                ButtonSegment(
                  value: SelectionMode.single,
                  label: Text('Single'),
                  icon: Icon(Icons.calendar_today),
                ),
                ButtonSegment(
                  value: SelectionMode.range,
                  label: Text('Range'),
                  icon: Icon(Icons.date_range),
                ),
              ],
              selected: {_mode},
              onSelectionChanged: (selection) {
                setState(() {
                  _mode = selection.first;
                  _result = 'No selection';
                });
              },
            ),
            const SizedBox(height: 16),
            SizedBox(
              height: 400,
              child: HorizontalDateRangePicker(
                key: ValueKey('picker-${_mode.name}'),
                selectionMode: _mode,
                minDate: DateTime.utc(DateTime.now().year - 1, 1, 1),
                maxDate: DateTime.utc(DateTime.now().year + 1, 12, 31),
                onDateSelected: (date) {
                  setState(() {
                    _result =
                        '${date.year}-${date.month.toString().padLeft(2, '0')}-${date.day.toString().padLeft(2, '0')}';
                  });
                },
                onDateRangeChanged: (start, end) {
                  setState(() {
                    final startStr =
                        '${start.year}-${start.month.toString().padLeft(2, '0')}-${start.day.toString().padLeft(2, '0')}';
                    final endStr =
                        '${end.year}-${end.month.toString().padLeft(2, '0')}-${end.day.toString().padLeft(2, '0')}';
                    _result = '$startStr to $endStr';
                  });
                },
                style: DatePickerStyle(
                  selectedDateBackground:
                      Theme.of(context).colorScheme.primary,
                  selectedDateForeground:
                      Theme.of(context).colorScheme.onPrimary,
                  rangeStripColor:
                      Theme.of(context).colorScheme.primaryContainer,
                ),
              ),
            ),
            const SizedBox(height: 16),
            Text(
              'Selected: $_result',
              style: Theme.of(context).textTheme.bodyLarge,
            ),
            const SizedBox(height: 24),
            FilledButton.icon(
              onPressed: () => _showPickerBottomSheet(context),
              icon: const Icon(Icons.open_in_new),
              label: const Text('Open in Bottom Sheet'),
            ),
          ],
        ),
      ),
    );
  }

  void _showPickerBottomSheet(BuildContext context) {
    showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      builder: (ctx) {
        String sheetResult = 'No selection';
        return StatefulBuilder(
          builder: (ctx, setSheetState) {
            return SizedBox(
              height: MediaQuery.of(context).size.height * 0.6,
              child: Padding(
                padding: const EdgeInsets.all(16.0),
                child: Column(
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          'Pick a date',
                          style: Theme.of(context).textTheme.titleMedium,
                        ),
                        IconButton(
                          onPressed: () => Navigator.pop(ctx),
                          icon: const Icon(Icons.close),
                        ),
                      ],
                    ),
                    Expanded(
                      child: HorizontalDateRangePicker(
                        selectionMode: _mode,
                        minDate:
                            DateTime.utc(DateTime.now().year - 1, 1, 1),
                        maxDate:
                            DateTime.utc(DateTime.now().year + 1, 12, 31),
                        onDateSelected: (date) {
                          final s =
                              '${date.year}-${date.month.toString().padLeft(2, '0')}-${date.day.toString().padLeft(2, '0')}';
                          setSheetState(() => sheetResult = s);
                          setState(() => _result = s);
                        },
                        onDateRangeChanged: (start, end) {
                          final startStr =
                              '${start.year}-${start.month.toString().padLeft(2, '0')}-${start.day.toString().padLeft(2, '0')}';
                          final endStr =
                              '${end.year}-${end.month.toString().padLeft(2, '0')}-${end.day.toString().padLeft(2, '0')}';
                          final r = '$startStr to $endStr';
                          setSheetState(() => sheetResult = r);
                          setState(() => _result = r);
                        },
                        style: DatePickerStyle(
                          selectedDateBackground:
                              Theme.of(context).colorScheme.primary,
                          selectedDateForeground:
                              Theme.of(context).colorScheme.onPrimary,
                          rangeStripColor: Theme.of(context)
                              .colorScheme
                              .primaryContainer,
                        ),
                      ),
                    ),
                    const SizedBox(height: 8),
                    Text('Selected: $sheetResult'),
                  ],
                ),
              ),
            );
          },
        );
      },
    );
  }
}