flutter_month_range 0.0.3

A simple and elegant horizontal month range picker widget for Flutter.

flutter_month_range

A simple, elegant horizontal month-based range picker for Flutter — designed for single month view selection with smooth navigation.

Features

✅ Single month view
✅ Smooth horizontal navigation with arrows
✅ Range highlight between start and end date
✅ Easy integration with showDialog
✅ Lightweight, no dependencies except intl

Installation

Add to your pubspec.yaml:

dependencies:
  flutter_month_range: ^0.0.3

📸 Screenshot

[Screenshot] [Screenshot]

Usage

FloatingActionButton(
onPressed: () async {
DateTimeRange? result = await showDialog<DateTimeRange>(
context: context,
builder: (context) => CustomDateRangePicker(
firstDate: DateTime(2022, 1, 1),
lastDate: DateTime(2030, 12, 31),
startDateLabel: 'Start Date',
endDateLabel: 'End Date',
dateFormat: 'dd-MM-yyyy',
monthYearFormat: 'MMM yyyy',
disablePastDates: true,
applyButtonText: 'Done',
applyButtonHeight: 46,
applyButtonBackgroundColor: Colors.blue,
applyButtonTextColor: Colors.white,
rangeColor: Colors.blue.shade300,
selectedDateColor: Colors.blue.shade700,
selectedDateBorderColor: Colors.white,
customApplyButton: Container(
padding: EdgeInsets.symmetric(vertical: 16, horizontal: 32),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.teal, Colors.purple],
),
borderRadius: BorderRadius.circular(25),
),
child: Center(
child: Text(
'Book Now',
style: TextStyle(color: Colors.white),
),
),
),
),
);

if (result != null) {
print('Selected: ${result.start} to ${result.end}');
}
},
child: const Icon(Icons.calendar_month_outlined),
),

Features

• Select range in a single-month horizontal view
• Smooth animation between months
• Customizable colors

License

MIT License © Rahul Sharma