date_range_picker_sheet 0.1.1

A pretty, customizable date range picker presented as a Material bottom sheet, with an inline month calendar and quick-select chips.

example/lib/main.dart

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'date_range_picker_sheet demo',
      theme: ThemeData(
        colorSchemeSeed: const Color(0xFFFF6F00),
        useMaterial3: true,
      ),
      home: const DemoPage(),
    );
  }
}

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

  @override
  State<DemoPage> createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {
  String _from = DateRangePickerSheet.formatOrderDate(DateTime.now());
  String _to = DateRangePickerSheet.formatOrderDate(
    DateTime.now().add(const Duration(days: 7)),
  );

  Future<void> _openDefault() {
    return DateRangePickerSheet.show(
      context,
      initialFromStr: _from,
      initialToStr: _to,
      onApply: (from, to) => setState(() {
        _from = from;
        _to = to;
      }),
      onReset: () {},
    );
  }

  Future<void> _openCustomized() {
    return DateRangePickerSheet.show(
      context,
      initialFromStr: _from,
      initialToStr: _to,
      maxDate: DateTime.now().add(const Duration(days: 60)),
      theme: const DateRangePickerSheetTheme(
        primaryColor: Color(0xFF2E7D32),
      ),
      labels: const DateRangePickerSheetLabels(
        title: 'Pick a range',
        confirm: 'Apply',
        close: 'Cancel',
      ),
      onApply: (from, to) => setState(() {
        _from = from;
        _to = to;
      }),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('date_range_picker_sheet')),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Card(
              child: ListTile(
                title: const Text('Selected range'),
                subtitle: Text('$_from  →  $_to'),
                leading: const Icon(Icons.event),
              ),
            ),
            const SizedBox(height: 24),
            ElevatedButton(
              onPressed: _openDefault,
              child: const Text('Open default picker'),
            ),
            const SizedBox(height: 12),
            OutlinedButton(
              onPressed: _openCustomized,
              child: const Text('Open customized picker'),
            ),
          ],
        ),
      ),
    );
  }
}