Custom Date Range Plus #

A customizable Flutter widget for selecting date ranges with additional UI elements such as buttons and dropdowns.

Features #

• Select start and end dates within a given range.
• Customize UI elements such as colors, text styles, and buttons.
• Dropdown for month and year selection.
• Reset and confirm action buttons with customizable appearance.
• Weekday labels with customizable text styles.
• Fully responsive UI.

Installation #

Add the following dependency to your pubspec.yaml:

dependencies:
  custom_date_range_plus: latest_version

Then, run:

flutter pub get

Usage #

Import the Package #

import 'package:custom_date_range_plus/custom_date_range_picker.dart';

Example Implementation #

DateRangePicker(
  startDate: DateTime.now().subtract(Duration(days: 7)),
  endDate: DateTime.now(),
  minDate: DateTime(2020, 1, 1),
  maxDate: DateTime(2030, 12, 31),
  onStartDateChanged: (date) => print("Start Date: \$date"),
  onEndDateChanged: (date) => print("End Date: \$date"),
  onDateRangeChanged: (range) => print("Selected Range: \${range?.start} - \${range?.end}"),
  selectedDateColor: Colors.blue,
  selectedDateTextColor: Colors.white,
  highlightColor: Colors.green,
  highlightTextColor: Colors.black,
  unselectedDateColor: Colors.grey,
  unselectedDateTextColor: Colors.black,
  weekDayTextStyle: TextStyle(fontWeight: FontWeight.bold),
  
  // Action Buttons
  onOutlinePressed: () => print("Reset Button Pressed"),
  onFilledPressed: () => print("Confirm Button Pressed"),
  filledColor: Colors.blue,
  outlinedColor: Colors.red,
  filledButtonText: "Confirm",
  outlinedButtonText: "Reset",
  
  // Dropdown Options
  dropDownHintText: "Select a Month",
  dropDownItems: ["January", "February", "March"],
  dropDownOnChanged: (value) => print("Selected Month: \$value"),
);

Parameters #

Date Selection #

Styling #

Buttons #

Dropdown #

Screenshots #

License #

This package is open-source and licensed under the MIT License.