Package detailsv6.7.3

month_picker_dialog

Internationalized dialog for picking a single month from an infinite list of years.

AndroidiOSWebmacOSWindowsLinux

pub.dev API documentation Source code

30-day downloads: 44K
Likes: 162
Pub points: 160

Install package

flutter pub add month_picker_dialog

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

A Flutter package that provides an internationalized dialog for selecting a single month from an infinite list of years. Designed for seamless integration across platforms, it supports localization and offers a clean, intuitive interface for date selection. The dialog dynamically handles year navigation and ensures accessibility and responsiveness on Android, iOS, Web, macOS, Windows, and Linux. It is ideal for applications requiring month-level date input with global language support.

Use cases

Selecting a month in forms
Filtering data by month
Setting monthly preferences
Date-based reporting
User profile setup
Calendar-related features

Key features

Internationalization support
Infinite year scrolling
Cross-platform compatibility
Localized text and formatting
Simple API integration
Responsive design

Suitable for

Apps needing month selection
Global applications with multilingual users
Form inputs requiring dates
Data filtering by month
Developer seeking lightweight date pickers

Considerations

Does not support year selection alone
Limited to single month selection
No built-in validation
Requires manual handling of selected date
Not optimized for large datasets beyond month view

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

month_picker_dialog

Build Status

Internationalized material style dialog for picking a single month from an infinite list of years. This package makes use of the intl package and flutter's i18n abilities to provide labels in all languages known to flutter.

Setting up an internationalized app: the flutter localization package

LTR portrait

How to use it:

Just add:

showMonthPicker() to select a single month;

showMonthRangePicker() to select a range of months;

showYearPicker() to select only a year;

...inside your button function like a normal date picker dialog (context parameter is required):

Example:

FloatingActionButton(
    onPressed: () {
        showMonthPicker(
        context: context,
        initialDate: DateTime.now(),
        ).then((date) {
        if (date != null) {
            setState(() {
            selectedDate = date;
            });
        }
        });
    },
    child: Icon(Icons.calendar_today),
),

FloatingActionButton(
    onPressed: () {
        showMonthRangePicker(
        context: context,
        initialDate: DateTime.now(),
        rangeList: true,
        ).then((List<DateTime>? dates) {
        if (dates != null) {
            print(dates);
            print(dates.last.lastDayOfMonth());
        }
        });
    },
    child: Icon(Icons.calendar_today),
),

FloatingActionButton(
    onPressed: () {
        showYearPicker(
        context: context,
        initialDate: DateTime.now(),
        ).then((year) {
        if (year != null) {
            setState(() {
            selectedYear = year;
            });
        }
        });
    },
    child: Icon(Icons.calendar_today),
),

Migrating to 5.0:

Starting with version 5.0.0 of the package, everything related to the behavior/style of it that isn't a function, date parameter or custom widget is now under the new MonthPickerDialogSettings class.

It contains three subclasses:

PickerDialogSettings to customize the dialog part of the package;

PickerHeaderSettings to customize the header part of the package;

PickerButtonsSettings to customize the buttons part of the package;

And will be used like this:

FloatingActionButton(
    onPressed: () {
        showMonthPicker(
        context: context,
        initialDate: DateTime.now(),
        monthPickerDialogSettings: const MonthPickerDialogSettings(
            headerSettings: PickerHeaderSettings(
                headerCurrentPageTextStyle: TextStyle(fontSize: 14),
                headerSelectedIntervalTextStyle: TextStyle(fontSize: 16),
            ),
            dialogSettings: PickerDialogSettings(
                locale: const Locale('en'),
                dialogRoundedCornersRadius: 20,
                dialogBackgroundColor: Colors.blueGrey[50],
            ),
            buttonsSettings: PickerButtonsSettings(
                buttonBorder: const RoundedRectangleBorder(),
                selectedMonthBackgroundColor: Colors.amber[900],
                selectedMonthTextColor: Colors.white,
                unselectedMonthsTextColor: Colors.black,
                currentMonthTextColor: Colors.green,
                yearTextStyle: const TextStyle(
                    fontSize: 10,
                ),
                monthTextStyle: const TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 18,
                ),
            ),
        ),
        ).then((date) {
        if (date != null) {
            setState(() {
            selectedDate = date;
            });
        }
        });
    },
    child: Icon(Icons.calendar_today),
),

If you have any doubts on how to use this new settings class (that the sample app can't solve), please feel free to open an issue on the github project.