month_picker_dialog

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

무한한 연도 목록에서 단일 월을 선택할 수 있는 국제화된 대화 상자를 제공하는 플러터 패키지입니다. 다양한 플랫폼 간 원활한 통합을 위해 설계되었으며, 로컬라이제이션을 지원하고 날짜 선택을 위한 깔끔하고 직관적인 인터페이스를 제공합니다. 대화 상자는 연도 탐색을 동적으로 처리하며, 안드로이드, iOS, 웹, 맥OS, 윈도우, 리눅스에서 접근성과 반응성을 보장합니다. 글로벌 언어 지원이 필요한 월 단위 날짜 입력을 필요로 하는 애플리케이션에 적합합니다.

사용 사례

양식에서 월 선택하기
월별로 데이터 필터링
월간 선호 설정
일자 기반 보고
사용자 프로필 설정
캘린더 관련 기능

주요 기능

국제화 지원
무한 연도 스크롤
크로스 플랫폼 호환성
로컬라이즈된 텍스트 및 형식 지정
간단한 API 통합
반응형 디자인

적합한 대상

월 선택이 필요한 앱
다국어 사용자를 가진 글로벌 애플리케이션
날짜를 입력해야 하는 폼 입력
월별 데이터 필터링
가벼운 날짜 선택기 찾는 개발자

고려 사항

년도만 별도로 선택하는 것을 지원하지 않습니다
단일 월 선택에 제한됨
내장된 검증 없음
선택한 날짜를 수동으로 처리해야 합니다
월 보기 이상의 큰 데이터 세트에 최적화되지 않음

원본 README

연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.

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.