horizontal_date_range_picker 1.4.0

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,
                  rangeSelectionBackground:
                      Theme.of(context).colorScheme.primaryContainer,
                ),
              ),
            ),
            const SizedBox(height: 16),
            Text(
              'Selected: $_result',
              style: Theme.of(context).textTheme.bodyLarge,
            ),
          ],
        ),
      ),
    );
  }
}