Description:

simple date range picker

SimpleDateRangePicker #
A simple, stylish DateTimeRange picker component for Flutter.
Note: This package is under active development and may change significantly between versions. Once a stable implementation is reached, the package will be bumped to version 1.0.0.
Features #

In-line widgets and dialogs for selecting a range of dates (DateTimeRange) or a single date (DateTime)
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.5
copied to clipboard
Usage #
Import #
Import the package into your project:
import 'package:simple_date_range_picker/simple_date_range_picker.dart';
copied to clipboard
Picker Widget #
Use the SimpleDateRangePicker widget to display the picker as an in-line widget:
Use the config property to control the behavior of the widget. To select a DateTimeRange, use the SimpleDateRangePickerRange config class:
SimpleDateRangePicker(
config: SimpleDateRangePickerRange(
initialDateRange: null,
onChanged: (dateRange) => setState(() => selectedDates = dateRange),
),
),
copied to clipboard
To select a single DateTime value, use the SimpleDateRangePickerSingle config class:
SimpleDateRangePicker(
config: SimpleDateRangePickerSingle(
initialDate: null,
onChanged: (date) => setState(() => selectedDate = date),
),
),
copied to clipboard
Picker Dialog #
Or, you can show the picker in a dialog.
To select a DateTimeRange, use showSimpleDateRangePickerDialog:
final dateRange = await showSimpleDateRangePickerDialog(context);
copied to clipboard
To select a single DateTime, use showSimpleDatePickerDialog:
final date = await showSimpleDatePickerDialog(context);
copied to clipboard
Customization #
Styles
Aside from a config class for changing the picker's behavior, most of the styles, labels, colors, etc are customizable.
The SimpleDateRangePicker widget 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;
...
}
copied to clipboard
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, but this is entirely up to you.
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;
}
copied to clipboard
Using this class, you can customize the style of almost every component within the picker.
For example, to change the background color of the picker to red, the foreground color to white, and the selected-date border radius to zero:
SimpleDateRangePicker(
style: SimpleDateRangePickerStyle(
colors: SimpleDateRangePickerColors(
backgroundColor: Colors.red,
foregroundColor: Colors.white,
),
activeItemRadius: Radius.zero,
),
config: SimpleDateRangePickerRange(
initialDateRange: null,
onChanged: (dateRange) => setState(() => selectedDates = dateRange),
),
),
copied to clipboard
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
Single date selection
Date validation - determine which dates are selectable
Custom initial month view - specify which month to display first

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter