simple_date_range_picker 0.0.3

A simple, stylish date range picker component for Flutter.

SimpleDateRangePicker

A simple, stylish DateTimeRange picker component for Flutter.

Features

• In-line widget for selecting a range of dates (DateTimeRange)
• showSimpleDateRangePickerDialog method to easily display the picker in a dialog
• Highly customizable colors, borders, and TextStyles

Getting started

Install the package by adding it to your pubspec.yaml file.

dependencies:
  simple_date_range_picker: ^0.0.3

Usage

Import the package into your project:

import 'package:simple_date_range_picker/simple_date_range_picker.dart';

Use the SimpleDateRangePicker widget to display the picker as an in-line widget:

SimpleDateRangePicker(
  onChanged: (dateRange) => setState(() => selectedDates = dateRange),
),

Or, use showSimpleDateRangePickerDialog to display the picker as a modal dialog:

final dateRange = await showSimpleDateRangePickerDialog(context);

Customization

The SimpleDateRangePicker exposes a styling API that uses the SimpleDateRangePickerStyle and the SimpleDateRangePickerColors classes.

class SimpleDateRangePickerColors {
  ...
  final Color backgroundColor;
  final Color foregroundColor;
  final double boundaryOpacity;
  final double hoveredOpacity;
  final double selectedOpacity;
  ...
}

This class determines the background and foreground colors of the selected dates in the picker. The three opacities are:

• boundaryOpacity - the opacity of the first and last dates in the selected range (the "boundaries")
• hoveredOpacity - the opacity of the date actively hovered over by the user
• selectedOpacity - the opacity of all other dates in the selected range

By default, hoveredOpacity > boundaryOpacity > selectedOpacity.

The SimpleDateRangePickerStyle contains the colors, as well as other styles for the picker:

class SimpleDateRangePickerStyle {
  final SimpleDateRangePickerColors? colors;
  final TextStyle? monthTitleTextStyle;
  final TextStyle? weekdayTextStyle;
  final TextStyle? dayTextStyle;
  final Radius? activeItemRadius;
  final ButtonStyle? nextIconButtonStyle;
  final ButtonStyle? previousIconButtonStyle;
}

Using this class, you can customize the style of almost every component within te picker.

For example, to change the background color of the picker to red, the foreground color to white, and selected date border radius to zero:

SimpleDateRangePicker(
  style: SimpleDateRangePickerStyle(
    colors: SimpleDateRangePickerColors(
      backgroundColor: Colors.red,
      foregroundColor: Colors.white,
    ),
    activeItemRadius: Radius.zero,
  ),
  onChanged: (dateRange) => setState(() => selectedDates = dateRange),
),

Roadmap

Additional features planned for the future include:

• Customizable colors, borders, and TextStyles for the picker
• Customizable colors, border, TextStyles, and buttons for the dialog
• Date validation - determine which dates are selectable
• Custom initial month view - specify which month to display first