added customization for navigation row's title

lib/src/day_based_changable_picker.dart

@@ -2,7 +2,6 @@ import 'dart:async';
 
 import 'package:flutter/material.dart';
 import 'package:flutter_localizations/flutter_localizations.dart';
-
 import 'package:intl/intl.dart' as intl;
 
 import 'basic_day_based_widget.dart';
@@ -66,6 +65,18 @@ class DayBasedChangeablePicker<T> extends StatefulWidget {
   /// Called when the user changes the month
   final ValueChanged<DateTime>? onMonthChanged;
 
+  /// Margin for title.
+  final EdgeInsetsGeometry? monthTitleMargin;
+
+  /// Padding for title.
+  final EdgeInsetsGeometry? monthTitlePadding;
+
+  /// Month Navigation Row Main AxisAlignment.
+  final MainAxisAlignment? navigationMonthMainAxisAlignment;
+
+  /// Month Navigation Title Container decoration.
+  final BoxDecoration? navigationMonthTitleDecoration;
+
   /// Create picker with option to change month.
   DayBasedChangeablePicker({
     Key? key,
@@ -81,6 +92,10 @@ class DayBasedChangeablePicker<T> extends StatefulWidget {
     this.onSelectionError,
     this.eventDecorationBuilder,
     this.onMonthChanged,
+    this.navigationMonthMainAxisAlignment,
+    this.monthTitleMargin,
+    this.monthTitlePadding,
+    this.navigationMonthTitleDecoration,
   })  : initiallyShowDate =
             _getInitiallyShownDate(initiallyShownDate, selection),
         super(key: key);
@@ -240,6 +255,10 @@ class _DayBasedChangeablePickerState<T>
             ),
             nextIcon: widget.datePickerStyles.nextIcon,
             prevIcon: widget.datePickerStyles.prevIcon,
+            titleMargin: widget.monthTitleMargin,
+            titlePadding: widget.monthTitlePadding,
+            mainAxisAlignment: widget.navigationMonthMainAxisAlignment,
+            titleDecoration: widget.navigationMonthTitleDecoration,
           );
         });
   }

lib/src/day_picker.dart

@@ -11,28 +11,36 @@ import 'utils.dart';
 
 /// Date picker for selection one day.
 class DayPicker<T extends Object> extends StatelessWidget {
-  DayPicker._(
-      {Key? key,
-      required this.onChanged,
-      required this.firstDate,
-      required this.lastDate,
-      required this.selectionLogic,
-      required this.selection,
-      this.initiallyShowDate,
-      this.datePickerLayoutSettings = const DatePickerLayoutSettings(),
-      this.datePickerStyles,
-      this.datePickerKeys,
-      this.selectableDayPredicate,
-      this.eventDecorationBuilder,
-      this.onMonthChanged})
-      : super(key: key);
+  DayPicker._({
+    Key? key,
+    required this.onChanged,
+    required this.firstDate,
+    required this.lastDate,
+    required this.selectionLogic,
+    required this.selection,
+    this.initiallyShowDate,
+    this.datePickerLayoutSettings = const DatePickerLayoutSettings(),
+    this.datePickerStyles,
+    this.datePickerKeys,
+    this.selectableDayPredicate,
+    this.eventDecorationBuilder,
+    this.onMonthChanged,
+    this.monthTitleMargin,
+    this.monthTitlePadding,
+    this.navigationMonthMainAxisAlignment,
+    this.navigationMonthTitleDecoration,
+  }) : super(key: key);
 
   /// Creates a day picker where only one single day can be selected.
   ///
   /// See also:
   /// * [DayPicker.multi] - day picker where many single days can be selected.
   static DayPicker<DateTime> single(
       {Key? key,
+      BoxDecoration? navigationMonthTitleDecoration,
+      EdgeInsetsGeometry? monthTitleMargin,
+      EdgeInsetsGeometry? monthTitlePadding,
+      MainAxisAlignment? navigationMonthMainAxisAlignment,
       required DateTime selectedDate,
       required ValueChanged<DateTime> onChanged,
       required DateTime firstDate,
@@ -82,6 +90,10 @@ class DayPicker<T extends Object> extends StatelessWidget {
       datePickerKeys: datePickerKeys,
       datePickerStyles: datePickerStyles,
       datePickerLayoutSettings: datePickerLayoutSettings,
+      navigationMonthMainAxisAlignment: navigationMonthMainAxisAlignment,
+      monthTitlePadding: monthTitlePadding,
+      monthTitleMargin: monthTitleMargin,
+      navigationMonthTitleDecoration: navigationMonthTitleDecoration,
     );
   }
 
@@ -90,20 +102,25 @@ class DayPicker<T extends Object> extends StatelessWidget {
   /// See also:
   /// * [DayPicker.single] - day picker where only one single day
   /// can be selected.
-  static DayPicker<List<DateTime>> multi(
-      {Key? key,
-      required List<DateTime> selectedDates,
-      required ValueChanged<List<DateTime>> onChanged,
-      required DateTime firstDate,
-      required DateTime lastDate,
-      DatePickerLayoutSettings datePickerLayoutSettings =
-          const DatePickerLayoutSettings(),
-      DateTime? initiallyShowDate,
-      DatePickerRangeStyles? datePickerStyles,
-      DatePickerKeys? datePickerKeys,
-      SelectableDayPredicate? selectableDayPredicate,
-      EventDecorationBuilder? eventDecorationBuilder,
-      ValueChanged<DateTime>? onMonthChanged}) {
+  static DayPicker<List<DateTime>> multi({
+    Key? key,
+    required List<DateTime> selectedDates,
+    required ValueChanged<List<DateTime>> onChanged,
+    required DateTime firstDate,
+    required DateTime lastDate,
+    DatePickerLayoutSettings datePickerLayoutSettings =
+        const DatePickerLayoutSettings(),
+    DateTime? initiallyShowDate,
+    DatePickerRangeStyles? datePickerStyles,
+    DatePickerKeys? datePickerKeys,
+    SelectableDayPredicate? selectableDayPredicate,
+    EventDecorationBuilder? eventDecorationBuilder,
+    ValueChanged<DateTime>? onMonthChanged,
+    EdgeInsetsGeometry? monthTitleMargin,
+    EdgeInsetsGeometry? monthTitlePadding,
+    MainAxisAlignment? navigationMonthMainAxisAlignment,
+    BoxDecoration? navigationMonthTitleDecoration,
+  }) {
     final startOfTheFirstDate = DatePickerUtils.startOfTheDay(firstDate);
     final endOfTheLastDate = DatePickerUtils.endOfTheDay(lastDate);
     final startOfTheInitiallyShowDate = initiallyShowDate == null
@@ -140,6 +157,10 @@ class DayPicker<T extends Object> extends StatelessWidget {
       datePickerKeys: datePickerKeys,
       datePickerStyles: datePickerStyles,
       datePickerLayoutSettings: datePickerLayoutSettings,
+      monthTitlePadding: monthTitlePadding,
+      monthTitleMargin: monthTitleMargin,
+      navigationMonthMainAxisAlignment: navigationMonthMainAxisAlignment,
+      navigationMonthTitleDecoration: navigationMonthTitleDecoration,
     );
   }
 
@@ -188,6 +209,18 @@ class DayPicker<T extends Object> extends StatelessWidget {
   /// Logic to handle user's selections.
   final ISelectablePicker<T> selectionLogic;
 
+  /// Margin for title.
+  final EdgeInsetsGeometry? monthTitleMargin;
+
+  /// Padding for title.
+  final EdgeInsetsGeometry? monthTitlePadding;
+
+  /// Month Navigation Row Main AxisAlignment.
+  final MainAxisAlignment? navigationMonthMainAxisAlignment;
+
+  /// Month Navigation Title Container decoration.
+  final BoxDecoration? navigationMonthTitleDecoration;
+
   @override
   // ignore: prefer_expression_function_bodies
   Widget build(BuildContext context) {
@@ -203,6 +236,10 @@ class DayPicker<T extends Object> extends StatelessWidget {
       datePickerKeys: datePickerKeys,
       eventDecorationBuilder: eventDecorationBuilder,
       onMonthChanged: onMonthChanged,
+      monthTitleMargin: monthTitleMargin,
+      monthTitlePadding: monthTitlePadding,
+      navigationMonthMainAxisAlignment: navigationMonthMainAxisAlignment,
+      navigationMonthTitleDecoration: navigationMonthTitleDecoration,
     );
   }
 }

lib/src/month_navigation_row.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+
 import 'day_picker.dart' as day_picker;
 import 'icon_btn.dart';
 import 'range_picker.dart';
@@ -44,25 +45,41 @@ class MonthNavigationRow extends StatelessWidget {
   /// Usually [Text] widget.
   final Widget? title;
 
+  /// Margin for title.
+  final EdgeInsetsGeometry? titleMargin;
+
+  /// Padding for title.
+  final EdgeInsetsGeometry? titlePadding;
+
+  /// Month Navigation Row MainAxisAlignment.
+  final MainAxisAlignment? mainAxisAlignment;
+
+  /// Month Navigation Title Container decoration.
+  final BoxDecoration? titleDecoration;
+
   /// Creates month navigation row.
-  const MonthNavigationRow({
-    Key? key,
-    this.previousPageIconKey,
-    this.nextPageIconKey,
-    this.onNextMonthTapped,
-    this.onPreviousMonthTapped,
-    this.nextMonthTooltip,
-    this.previousMonthTooltip,
-    this.title,
-    required this.nextIcon,
-    required this.prevIcon
-  }) : super(key: key);
+  const MonthNavigationRow(
+      {Key? key,
+      this.previousPageIconKey,
+      this.nextPageIconKey,
+      this.onNextMonthTapped,
+      this.onPreviousMonthTapped,
+      this.nextMonthTooltip,
+      this.previousMonthTooltip,
+      this.title,
+      this.mainAxisAlignment,
+      this.titleMargin,
+      this.titlePadding,
+      this.titleDecoration,
+      required this.nextIcon,
+      required this.prevIcon})
+      : super(key: key);
 
   @override
   // ignore: prefer_expression_function_bodies
   Widget build(BuildContext context) {
     return Row(
-      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      mainAxisAlignment: mainAxisAlignment ?? MainAxisAlignment.spaceBetween,
       crossAxisAlignment: CrossAxisAlignment.center,
       children: <Widget>[
         Semantics(
@@ -74,14 +91,12 @@ class MonthNavigationRow extends StatelessWidget {
             onTap: onPreviousMonthTapped,
           ),
         ),
-        Expanded(
-          child: Container(
-            alignment: Alignment.center,
-            child: Center(
-              child: ExcludeSemantics(
-                child: title,
-              ),
-            ),
+        Container(
+          padding: titlePadding,
+          margin: titleMargin,
+          decoration: titleDecoration,
+          child: ExcludeSemantics(
+            child: title,
           ),
         ),
         Semantics(