mp_month_picker 0.0.2
mp_month_picker: ^0.0.2 copied to clipboard
A customizable Flutter package to select a month and year in a dialog with various options like transition effects, localization, and flexible UI components, ideal for scheduling and date selection features.
MpMonthPicker #
MpMonthPicker is a highly customizable Flutter widget that provides a user-friendly dialog for selecting a month and year. It supports custom styles, localization, and animation effects, making it ideal for apps that require month-based date selection.
Features #
- Customizable UI: Change the colors, text styles, and icons to fit your app's theme.
- Smooth Animations: Includes a fade transition effect that can be customized for duration.
- Auto Selection: Option to automatically select the month upon tapping, bypassing the need for a done button.
Installation #
Add the following line to your pubspec.yaml:
dependencies:
mp_month_picker: latest_version
Then, run:
flutter pub get
Usage #
Here's a basic example of how to use MpMonthPicker in your Flutter project:
import 'package:flutter/material.dart';
import 'package:mp_month_picker/mp_month_picker.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Month Picker Example')),
body: Center(
child: ElevatedButton(
onPressed: () async {
DateTime? selectedDate = await showMpMonthPicker(
context: context,
initialDate: DateTime.now(),
firstDate: DateTime(2020, 1),
lastDate: DateTime(2030, 12),
selectedMonthColor: Colors.blue,
unselectedMonthColor: Colors.grey,
headerBgColor: Colors.blueAccent,
doneTxt: 'Select',
cancelTxt: 'Cancel',
transitionDuration: Duration(milliseconds: 300),
backIcon: Icons.chevron_left,
forwardIcon: Icons.chevron_right,
cancelTxtStyle: TextStyle(color: Colors.red),
doneTxtStyle: TextStyle(color: Colors.green),
selectedMonthBorderRadius: BorderRadius.circular(16),
);
if (selectedDate != null) {
print('Selected Date: $selectedDate');
}
},
child: Text('Pick a Month'),
),
),
),
);
}
}
Parameters #
MpMonthPicker Widget #
initialDate: The initial selected date.firstDate: The earliest selectable date.lastDate: The last selectable date.onMonthChanged: Callback function triggered when a month is selected.selectedMonthColor: Background color of the selected month.headerBgColor: Background color of the header.backgroundColor: Background color of the picker dialog.headerTxtStyle: Text style for the header.unselectedMonthColor: Background color of unselected months.monthTextStyle: Text style for month names.isAutoSelect: Automatically selects the month on tap without showing the done button.transitionDuration: Duration of the fade transition animation.backIcon: Icon for navigating to the previous year.forwardIcon: Icon for navigating to the next year.doneTxt: Text for the done button.cancelTxt: Text for the cancel button.cancelTxtStyle: Text style for the cancel button.doneTxtStyle: Text style for the done button.selectedMonthBorderRadius: Border radius for the selected month container.
showMpMonthPicker Function #
context: Build context.initialDate: The initial selected date.firstDate: The earliest selectable date.lastDate: The latest selectable date.- Other parameters: Similar to those in
MpMonthPicker.
Customization #
You can customize the appearance of the picker using various parameters:
- Colors: Change the colors of selected/unselected months, headers, and background.
- Text Styles: Customize the text styles for the header, month names, and buttons.
- Icons: Use custom icons for navigating between years.
- Animation: Adjust the transition duration to control the speed of the fade effect.
Contributing #
If you encounter any issues or have suggestions for improvements, feel free to open an issue.
License #
This project is licensed under the MIT License - see the LICENSE file for details.