showMonthPicker function

Future<DateTime?> showMonthPicker({
  1. required BuildContext context,
  2. DateTime? initialDate,
  3. DateTime? firstDate,
  4. DateTime? lastDate,
  5. Locale? locale,
  6. bool selectableMonthPredicate(
    1. DateTime
    )?,
  7. ButtonStyle? monthStylePredicate(
    1. DateTime
    )?,
  8. ButtonStyle? yearStylePredicate(
    1. int
    )?,
  9. bool capitalizeFirstLetter = true,
  10. Color? headerColor,
  11. Color? headerTextColor,
  12. Color? selectedMonthBackgroundColor,
  13. Color? selectedMonthTextColor,
  14. Color? unselectedMonthTextColor,
  15. Color? currentMonthTextColor,
  16. double selectedMonthPadding = 0,
  17. Color? backgroundColor,
  18. Widget? confirmWidget,
  19. Widget? cancelWidget,
  20. double? customHeight,
  21. double customWidth = 320,
  22. bool yearFirst = false,
  23. bool dismissible = false,
  24. double roundedCornersRadius = 0,
  25. bool forceSelectedDate = false,
  26. int animationMilliseconds = 450,
  27. bool hideHeaderRow = false,
  28. double? textScaleFactor,
  29. double? arrowSize,
  30. bool forcePortrait = false,
  31. Widget? customDivider,
  32. bool blockScrolling = true,
  33. BorderSide dialogBorderSide = BorderSide.none,
})

Displays month picker dialog.

initialDate: is the initially selected month.

firstDate: is the optional lower bound for month selection.

lastDate: is the optional upper bound for month selection.

selectableMonthPredicate: lets you control enabled months just like the official selectableDayPredicate.

monthStylePredicate: allows you to individually customize each month.

yearStylePredicate: allows you to individually customize each year.

capitalizeFirstLetter: lets you control if your months names are capitalized or not.

headerColor: lets you control the calendar header color.

headerTextColor: lets you control the calendar header text and arrows color.

selectedMonthBackgroundColor: lets you control the current selected month/year background color.

selectedMonthTextColor: lets you control the text color of the current selected month/year.

unselectedMonthTextColor: lets you control the text color of the current unselected months/years.

currentMonthTextColor: lets you control the text color of the current month/year.

selectedMonthPadding: lets you control the size of the current selected month/year circle by increasing the padding of it (default is 0).

confirmWidget: lets you set a custom confirm widget.

cancelWidget: lets you set a custom cancel widget.

customHeight: lets you set a custom height for the calendar widget (default is 240).

customWidth: lets you set a custom width for the calendar widget (default is 320).

yearFirst: lets you define that the user must select first the year, then the month.

roundedCornersRadius: lets you define the Radius of the rounded dialog (default is 0).

dismissible: lets you define if the dialog will be dismissible by clicking outside it.

forceSelectedDate: lets you define that the current selected date will be returned if the user clicks outside of the dialog. Needs dismissible = true.

animationMilliseconds: lets you define the speed of the page transition animation (default is 450).

hideHeaderRow: lets you hide the row with the arrows + years/months page range from the header, forcing the user to scroll to change the page (default is false).

textScaleFactor: lets you control the scale of the texts in the widget.

arrowSize: lets you control the size of the header arrows.

forcePortrait: lets you block the widget from entering in landscape mode (default is false).

customDivider: lets you add a custom divider between the months/years and the confirm/cancel buttons.

blockScrolling: lets you block the user from scrolling the months/years (default is true).

dialogBorderSide: lets you define the border side of the dialog (default is BorderSide.none).

Implementation

Future<DateTime?> showMonthPicker(
    {required BuildContext context,
    DateTime? initialDate,
    DateTime? firstDate,
    DateTime? lastDate,
    Locale? locale,
    bool Function(DateTime)? selectableMonthPredicate,
    ButtonStyle? Function(DateTime)? monthStylePredicate,
    ButtonStyle? Function(int)? yearStylePredicate,
    bool capitalizeFirstLetter = true,
    Color? headerColor,
    Color? headerTextColor,
    Color? selectedMonthBackgroundColor,
    Color? selectedMonthTextColor,
    Color? unselectedMonthTextColor,
    Color? currentMonthTextColor,
    double selectedMonthPadding = 0,
    Color? backgroundColor,
    Widget? confirmWidget,
    Widget? cancelWidget,
    double? customHeight,
    double customWidth = 320,
    bool yearFirst = false,
    bool dismissible = false,
    double roundedCornersRadius = 0,
    bool forceSelectedDate = false,
    int animationMilliseconds = 450,
    bool hideHeaderRow = false,
    double? textScaleFactor,
    double? arrowSize,
    bool forcePortrait = false,
    Widget? customDivider,
    bool blockScrolling = true,
    BorderSide dialogBorderSide = BorderSide.none}) async {
  assert(forceSelectedDate == dismissible || !forceSelectedDate,
      'forceSelectedDate can only be used with dismissible = true');
  final ThemeData theme = Theme.of(context);
  final MonthpickerController controller = MonthpickerController(
    initialDate: initialDate,
    firstDate: firstDate,
    lastDate: lastDate,
    locale: locale,
    selectableMonthPredicate: selectableMonthPredicate,
    monthStylePredicate: monthStylePredicate,
    yearStylePredicate: yearStylePredicate,
    capitalizeFirstLetter: capitalizeFirstLetter,
    headerColor: headerColor,
    headerTextColor: headerTextColor,
    selectedMonthBackgroundColor: selectedMonthBackgroundColor,
    selectedMonthTextColor: selectedMonthTextColor,
    unselectedMonthTextColor: unselectedMonthTextColor,
    currentMonthTextColor: currentMonthTextColor,
    selectedMonthPadding: selectedMonthPadding,
    backgroundColor: backgroundColor,
    confirmWidget: confirmWidget,
    cancelWidget: cancelWidget,
    customHeight: customHeight,
    customWidth: customWidth,
    yearFirst: yearFirst,
    roundedCornersRadius: roundedCornersRadius,
    forceSelectedDate: forceSelectedDate,
    animationMilliseconds: animationMilliseconds,
    hideHeaderRow: hideHeaderRow,
    theme: theme,
    useMaterial3: theme.useMaterial3,
    textScaleFactor: textScaleFactor,
    arrowSize: arrowSize,
    forcePortrait: forcePortrait,
    customDivider: customDivider,
    blockScrolling: blockScrolling,
    dialogBorderSide: dialogBorderSide,
  );
  final DateTime? dialogDate = await showDialog<DateTime>(
    context: context,
    barrierDismissible: dismissible,
    builder: (BuildContext context) {
      return MultiProvider(
        providers: [
          ChangeNotifierProvider.value(
            value: YearUpDownPageProvider(),
          ),
          ChangeNotifierProvider.value(
            value: MonthUpDownPageProvider(),
          ),
        ],
        child: MonthPickerDialog(controller: controller),
      );
    },
  );
  if (dismissible && forceSelectedDate && dialogDate == null) {
    return controller.selectedDate;
  }
  return dialogDate;
}