2.10.0

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 2.10.0 - 2024-02-19
+- Added `dialogBorderSide:` property to allow you define the border side of the dialog (default is `BorderSide.none`).
+- Added `blockScrolling:` property to allow you block the user from scrolling the months/years (default is `true`).
+- Wraped portrait dialog in a SingleChildScrollView to avoid overflow [#85](https://github.com/Macacoazul01/month_picker_dialog/issues/85).
+
 ## 2.8.0 - 2024-02-19
 - Added `currentMonthTextColor` property to allow you control the text color of the current month/year.
 

README.md

@@ -93,6 +93,10 @@ There are other parameters to configure on the dialog if you want:
 
 `customDivider` lets you add a custom divider between the months/years and the confirm/cancel buttons.
 
+`dialogBorderSide:` lets you define the border side of the dialog (default is `BorderSide.none`).
+
+`blockScrolling:` lets you block the user from scrolling the months/years (default is `true`).
+
 ## Screenshots
 ### Left-To-Right
 ![LTR portrait](screenshots/ltr_portrait.png)

lib/src/helpers/controller.dart

@@ -36,6 +36,8 @@ class MonthpickerController {
     this.arrowSize,
     required this.forcePortrait,
     this.customDivider,
+    required this.blockScrolling,
+    required this.dialogBorderSide,
   });
 
   //User defined variables
@@ -50,7 +52,8 @@ class MonthpickerController {
       forceSelectedDate,
       hideHeaderRow,
       useMaterial3,
-      forcePortrait;
+      forcePortrait,
+      blockScrolling;
   final Color? headerColor,
       headerTextColor,
       selectedMonthBackgroundColor,
@@ -62,6 +65,7 @@ class MonthpickerController {
   final double? customHeight, textScaleFactor, arrowSize;
   final double roundedCornersRadius, selectedMonthPadding, customWidth;
   final int animationMilliseconds;
+  final BorderSide dialogBorderSide;
 
   //local variables
   final GlobalKey<YearSelectorState> yearSelectorState = GlobalKey();
@@ -79,10 +83,13 @@ class MonthpickerController {
     if (initialDate != null) {
       selectedDate = initialDate!.firstDayOfMonth();
     }
-    if (firstDate != null)
+    if (firstDate != null) {
       localFirstDate = DateTime(firstDate!.year, firstDate!.month);
-    if (lastDate != null)
+    }
+
+    if (lastDate != null) {
       localLastDate = DateTime(lastDate!.year, lastDate!.month);
+    }
 
     yearItemCount = getYearItemCount(localFirstDate, localLastDate);
     yearPageCount = getYearPageCount(localFirstDate, localLastDate);

lib/src/month_picker_dialog.dart

@@ -90,13 +90,21 @@ class MonthPickerDialogState extends State<MonthPickerDialog> {
       data: widget.controller.theme
           .copyWith(dialogBackgroundColor: Colors.transparent),
       child: Dialog(
+        shape: RoundedRectangleBorder(
+          side: widget.controller.dialogBorderSide,
+          borderRadius:
+              BorderRadius.circular(widget.controller.roundedCornersRadius),
+        ),
         child: Builder(
           builder: (BuildContext context) {
             if (portrait) {
-              return IntrinsicWidth(
-                child: Column(
-                  mainAxisSize: MainAxisSize.min,
-                  children: <Widget>[header, content],
+              return SingleChildScrollView(
+                physics: ClampingScrollPhysics(),
+                child: IntrinsicWidth(
+                  child: Column(
+                    mainAxisSize: MainAxisSize.min,
+                    children: <Widget>[header, content],
+                  ),
                 ),
               );
             }

lib/src/month_selector/month_year_grid.dart

@@ -15,7 +15,9 @@ class MonthYearGridBuilder extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return GridView.count(
-      physics: const NeverScrollableScrollPhysics(),
+      physics: controller.blockScrolling
+          ? const NeverScrollableScrollPhysics()
+          : const ClampingScrollPhysics(),
       padding: const EdgeInsets.all(8.0),
       crossAxisCount: 4,
       children: List<Widget>.generate(

lib/src/show_month_picker.dart

@@ -30,69 +30,74 @@ import 'package:provider/provider.dart';
 ///
 /// `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).
+/// `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).
+/// `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).
+/// `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).
+/// `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).
+/// `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).
+/// `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.
+/// `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.
 ///
-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,
-}) async {
+/// `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`).
+///
+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);
@@ -128,6 +133,8 @@ Future<DateTime?> showMonthPicker({
     arrowSize: arrowSize,
     forcePortrait: forcePortrait,
     customDivider: customDivider,
+    blockScrolling: blockScrolling,
+    dialogBorderSide: dialogBorderSide,
   );
   final DateTime? dialogDate = await showDialog<DateTime>(
     context: context,

lib/src/year_selector/year_grid.dart

@@ -17,7 +17,9 @@ class YearGrid extends StatelessWidget {
     final String localeString =
         getLocale(context, selectedLocale: controller.locale);
     return GridView.count(
-      physics: const NeverScrollableScrollPhysics(),
+      physics: controller.blockScrolling
+          ? const NeverScrollableScrollPhysics()
+          : const ClampingScrollPhysics(),
       padding: const EdgeInsets.all(8.0),
       crossAxisCount: 4,
       children: List<Widget>.generate(

pubspec.yaml

@@ -1,6 +1,6 @@
 name: month_picker_dialog
 description: Internationalized dialog for picking a single month from an infinite list of years.
-version: 2.8.0
+version: 2.10.0
 homepage: https://github.com/hmkrivoj/month_picker_dialog
 
 environment:

test/month_picker_dialog_test.dart

@@ -17,6 +17,8 @@ void main() {
       selectedMonthPadding: 0,
       forcePortrait: false,
       customWidth: 320,
+      blockScrolling: false,
+      dialogBorderSide: BorderSide.none,
     );
     controller.initialize();
     expect(controller.yearItemCount, 9999);
@@ -49,6 +51,8 @@ void main() {
       useMaterial3: false,
       selectedMonthPadding: 1,
       forcePortrait: true,
+      blockScrolling: false,
+      dialogBorderSide: BorderSide.none,
     );
     controller.initialize();
     expect(controller.yearItemCount, 6);