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.


Libraries

mp_month_picker
A customizable Flutter package to select a month and year in a dialog.