flutter_date_time_range_picker 0.0.9

flutter_date_time_range_picker: ^0.0.9 copied to clipboard

example/lib/main.dart

import 'package:flutter/material.dart' hide DateTimeRange;

import 'package:flutter_date_time_range_picker/flutter_date_time_range_picker.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Date and time range picker example',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const MyHomePage(title: 'Date and time range picker example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  DateTimeRange? selectedDateRange;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: SingleChildScrollView(
          child: Column(
            children: [
              const SizedBox(height: 100),
              const Text("The simple form field example:"),
              Container(
                padding: const EdgeInsets.all(8),
                width: 250,
                child: DateRangeFormField(
                    labelBuilder: (dateRange) {
                      return "Days between ${dateRange.start} and ${dateRange.end}";
                    },
                    decoration: const InputDecoration(
                      label: Text("Date and time range picker"),
                      hintText: 'Please select a date and time range',
                    ),
                    pickerBuilder: (context, onDateRangeChanged) {
                      return datePickerBuilder(
                        context,
                        (DateTimeRange? range) {
                          onDateRangeChanged(range);
                        },
                        false,
                      );
                    }),
              ),
              TextButton(
                onPressed: () => showDateRangePickerModalDialog(
                        context: context, builder: datePickerBuilder)
                    .then((value) {
                  debugPrint("Selected date range: $value");
                }),
                child: const Text("Open the picker"),
              ),
              Column(
                children: [
                  const SizedBox(height: 100),
                  const Text("The simple field example:"),
                  Container(
                    padding: const EdgeInsets.all(8),
                    width: 250,
                    child: DateRangeField(
                      decoration: const InputDecoration(
                        label: Text("Date range picker"),
                        hintText: 'Please select a date range',
                      ),
                      onDateRangeSelected: (DateTimeRange? value) {
                        setState(() {
                          selectedDateRange = value;
                        });
                      },
                      selectedDateRange: selectedDateRange,
                      pickerBuilder: datePickerBuilder,
                    ),
                  ),
                ],
              ),
            ],
          ),
        ));
  }

  Widget datePickerBuilder(
    BuildContext context,
    DateRangeChangedCallback onDateRangeChanged, [
    bool doubleMonth = true,
  ]) =>
      DateRangePickerWidget(
        firstDayOfWeek: 1, // 1 = Monday
        doubleMonth: doubleMonth,
        maximumDateRangeLength: 10,
        quickDateRanges: [
          QuickDateRange(dateRange: null, label: "Remove date range"),
          QuickDateRange(
            label: 'Last 3 days',
            dateRange: DateTimeRange(
              start: DateTime.now().subtract(const Duration(days: 3)),
              end: DateTime.now(),
            ),
          ),
          QuickDateRange(
            label: 'Last 7 days',
            dateRange: DateTimeRange(
              start: DateTime.now().subtract(const Duration(days: 7)),
              end: DateTime.now(),
            ),
          ),
          QuickDateRange(
            label: 'Last 30 days',
            dateRange: DateTimeRange(
              start: DateTime.now().subtract(const Duration(days: 30)),
              end: DateTime.now(),
            ),
          ),
          QuickDateRange(
            label: 'Last 90 days',
            dateRange: DateTimeRange(
              start: DateTime.now().subtract(const Duration(days: 90)),
              end: DateTime.now(),
            ),
          ),
          QuickDateRange(
            label: 'Last 180 days',
            dateRange: DateTimeRange(
              start: DateTime.now().subtract(const Duration(days: 180)),
              end: DateTime.now(),
            ),
          ),
        ],
        minimumDateRangeLength: 3,
        initialDateRange: selectedDateRange,
        disabledDates: [DateTime(2023, 11, 20)],
        maxDate: DateTime(2023, 12, 31),
        initialDisplayedDate:
            selectedDateRange?.start ?? DateTime(2023, 11, 20),
        onDateRangeChanged: onDateRangeChanged,
        height: 450,
        theme: const CalendarTheme(
          selectedColor: Colors.blue,
          dayNameTextStyle: TextStyle(color: Colors.black45, fontSize: 10),
          inRangeColor: Color(0xFFD9EDFA),
          inRangeTextStyle: TextStyle(color: Colors.blue),
          selectedTextStyle: TextStyle(color: Colors.white),
          todayTextStyle: TextStyle(fontWeight: FontWeight.bold),
          defaultTextStyle: TextStyle(color: Colors.black, fontSize: 12),
          radius: 10,
          tileSize: 40,
          disabledTextStyle: TextStyle(color: Colors.grey),
          quickDateRangeBackgroundColor: Color(0xFFFFF9F9),
          selectedQuickDateRangeColor: Colors.blue,
        ),
      );
}