Add several different customization options, refactoring

- Replaced 4 identical box-themes with different names with 1 general box-theme
- Renamed ambiguously named textStyle-property of DatePicker that only affected weekday-styling as weekdayTextStyle
- Added custimzation option to change border of days
- Added customization option to change padding of calendar

CHANGELOG.md

@@ -1,7 +1,12 @@
 ## 3.0.0
 
 - Added customization options for box encapsulating the datetimepicker (Customize shadow, add image or gradient)
-- Removed ability to specify ShapeBorder directly in date_time_picker_theme. Specifying ShapeBorder now part of ShapeDecoration-customization. 
+- Removed ability to specify ShapeBorder directly in date_time_picker_theme. Specifying ShapeBorder now part of ShapeDecoration-customization
+- Replaced 4 identical box-themes with different names with 1 general box-theme
+- Renamed ambiguously named textStyle-property of DatePicker that only affected weekday-styling as weekdayTextStyle
+- Added custimzation option to change border of days
+- Added customization option to change padding of calendar
+ 
 ## 2.3.1
 
 - Added extra customization options for datetimepicker (Customizable buttons, text formatting for weekday and month)

example/lib/main.dart

@@ -56,26 +56,30 @@ class DatePickerDemo extends StatelessWidget {
       dateBoxShape: DateBoxShape.circle,
       backgroundColor: Colors.white,
       markedIndicatorColor: Colors.red,
-      baseTheme: const DateBoxBaseTheme(
+      baseTheme: const DateBoxTheme(
-        Colors.white,
+        backgroundColor: Colors.white,
-        TextStyle(color: Colors.black),
+        textStyle: TextStyle(color: Colors.black),
       ),
-      selectedTheme: const DateBoxSelectedTheme(
+      selectedTheme: const DateBoxTheme(
-        Color(0x4BF44336),
+        backgroundColor: Colors.red,
-        TextStyle(
+        textStyle: TextStyle(
           color: Colors.black,
         ),
       ),
-      highlightTheme: const DateBoxHighlightTheme(
+      highlightTheme: DateBoxTheme(
-        Colors.red,
+        borderStyle: Border.all(
-        TextStyle(
+          color: Colors.black,
+          width: 3,
+        ),
+        backgroundColor: Colors.red,
+        textStyle: const TextStyle(
           color: Colors.white,
         ),
       ),
       barTheme: const DateTimePickerBarTheme(
-          barColor: Colors.pinkAccent,
+          barColor: Colors.red,
           barOpacity: 1,
-          textStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
+          textStyle: TextStyle(fontSize: 14, fontWeight: FontWeight.bold)),
       paginationSize: 25,
     );
 
@@ -156,19 +160,19 @@ class DatePickerDemo extends StatelessWidget {
             dateTimePickerTheme: const DateTimePickerTheme(
               backgroundColor: Colors.white,
               markedIndicatorColor: Colors.red,
-              baseTheme: DateBoxBaseTheme(
+              baseTheme: DateBoxTheme(
-                Colors.white,
+                backgroundColor: Colors.white,
-                TextStyle(color: Colors.black),
+                textStyle: TextStyle(color: Colors.black),
               ),
-              selectedTheme: DateBoxSelectedTheme(
+              selectedTheme: DateBoxTheme(
-                Color(0x4BF44336),
+                backgroundColor: Color(0x4BF44336),
-                TextStyle(
+                textStyle: TextStyle(
                   color: Colors.red,
                 ),
               ),
-              highlightTheme: DateBoxHighlightTheme(
+              highlightTheme: DateBoxTheme(
-                Colors.red,
+                backgroundColor: Colors.red,
-                TextStyle(
+                textStyle: TextStyle(
                   color: Colors.white,
                 ),
               ),

lib/flutter_date_time_picker.dart

@@ -8,10 +8,7 @@ export 'src/drag_down_date_time_picker.dart' show DragDownDateTimePicker;
 export 'src/overlay_date_time_picker.dart' show OverlayDateTimePicker;
 export 'src/models/date_constraint.dart';
 export 'src/enums/date_box_shape.dart';
-export 'src/models/date_box_base_theme.dart';
-export 'src/models/date_box_disabled_theme.dart';
-export 'src/models/date_box_highlight_theme.dart';
-export 'src/models/date_box_selected_theme.dart';
 export 'src/models/date_time_picker_theme.dart';
 export 'src/models/date_time_picker_bar_theme.dart';
 export 'src/widgets/date_time_picker/date_time_picker.dart';
+export 'src/models/date_box_theme.dart';

lib/src/models/date_box_disabled_theme.dart

@@ -1,19 +0,0 @@
-// SPDX-FileCopyrightText: 2022 Iconica
-//
-// SPDX-License-Identifier: BSD-3-Clause
-
-import 'package:flutter/widgets.dart' show Color, TextStyle;
-
-class DateBoxDisabledTheme {
-  /// Disabled date theme.
-  const DateBoxDisabledTheme(
-    this.backgroundColor,
-    this.textStyle,
-  );
-
-  /// Background color of selected date.
-  final Color? backgroundColor;
-
-  /// The style of the date number.
-  final TextStyle? textStyle;
-}

lib/src/models/date_box_highlight_theme.dart

@@ -1,19 +0,0 @@
-// SPDX-FileCopyrightText: 2022 Iconica
-//
-// SPDX-License-Identifier: BSD-3-Clause
-
-import 'package:flutter/widgets.dart' show Color, TextStyle;
-
-class DateBoxHighlightTheme {
-  /// Highlighted date theme.
-  const DateBoxHighlightTheme(
-    this.backgroundColor,
-    this.textStyle,
-  );
-
-  /// Background color of highlighted date.
-  final Color? backgroundColor;
-
-  /// The style of the date number.
-  final TextStyle? textStyle;
-}

lib/src/models/date_box_selected_theme.dart

@@ -1,19 +0,0 @@
-// SPDX-FileCopyrightText: 2022 Iconica
-//
-// SPDX-License-Identifier: BSD-3-Clause
-
-import 'package:flutter/widgets.dart' show Color, TextStyle;
-
-class DateBoxSelectedTheme {
-  /// Selected date theme.
-  const DateBoxSelectedTheme(
-    this.backgroundColor,
-    this.textStyle,
-  );
-
-  /// Background color of selected date.
-  final Color? backgroundColor;
-
-  /// The style of the date number.
-  final TextStyle? textStyle;
-}

lib/src/models/date_box_theme.dart

@@ -2,18 +2,22 @@
 //
 // SPDX-License-Identifier: BSD-3-Clause
 
-import 'package:flutter/widgets.dart' show Color, TextStyle;
+import 'package:flutter/widgets.dart' show Color, TextStyle, BoxBorder;
 
-class DateBoxBaseTheme {
+class DateBoxTheme {
   /// Default date theme.
-  const DateBoxBaseTheme(
+  const DateBoxTheme({
     this.backgroundColor,
     this.textStyle,
-  );
+    this.borderStyle,
+  });
 
   /// Background color of default date
   final Color? backgroundColor;
 
   /// The style of the date number.
   final TextStyle? textStyle;
+
+  /// The style of the border
+  final BoxBorder? borderStyle;
 }

lib/src/models/date_time_picker_theme.dart

@@ -23,24 +23,24 @@ class DateTimePickerTheme {
     this.monthViewSize = 0.6,
     this.weekMonthTriggerSize = 0.3,
     this.shapeDecoration,
-    this.baseTheme = const DateBoxBaseTheme(
+    this.baseTheme = const DateBoxTheme(
-      Colors.white,
+        backgroundColor: Colors.white,
-      TextStyle(color: Colors.black),
+        textStyle: TextStyle(color: Colors.black)),
+    this.highlightTheme = const DateBoxTheme(
+      backgroundColor: Colors.blue,
+      textStyle: TextStyle(color: Colors.white),
     ),
-    this.highlightTheme = const DateBoxHighlightTheme(
+    this.selectedTheme = const DateBoxTheme(
-      Colors.blue,
+      backgroundColor: Color(0xFFBBDEFB),
-      TextStyle(color: Colors.white),
+      textStyle: TextStyle(color: Colors.blue),
     ),
-    this.selectedTheme = const DateBoxSelectedTheme(
+    this.disabledTheme = const DateBoxTheme(
-      Color(0xFFBBDEFB),
+      backgroundColor: Colors.grey,
-      TextStyle(color: Colors.blue),
+      textStyle: TextStyle(color: Colors.white),
-    ),
-    this.disabledTheme = const DateBoxDisabledTheme(
-      Colors.grey,
-      TextStyle(color: Colors.white),
     ),
     this.barTheme = const DateTimePickerBarTheme(),
     this.monthWeekDayHeaders = false,
+    this.calenderPadding = const EdgeInsets.all(8.0),
   });
 
   /// enum to define a shape dor the date. use [DateBoxShape.circle].
@@ -48,16 +48,16 @@ class DateTimePickerTheme {
   final DateBoxShape dateBoxShape;
 
   /// This theme is used to style a default look for the dates.
-  final DateBoxBaseTheme baseTheme;
+  final DateBoxTheme baseTheme;
 
   /// This theme is used for when a specific date is highlighted.
-  final DateBoxHighlightTheme highlightTheme;
+  final DateBoxTheme highlightTheme;
 
   /// This theme is used for when a specific date is slected by the user.
-  final DateBoxSelectedTheme selectedTheme;
+  final DateBoxTheme selectedTheme;
 
   /// This theme is used for when a specific date is disabled.
-  final DateBoxDisabledTheme disabledTheme;
+  final DateBoxTheme disabledTheme;
 
   /// This theme is used for the bar of the date picker.
   final DateTimePickerBarTheme barTheme;
@@ -103,4 +103,7 @@ class DateTimePickerTheme {
   final WidgetBuilder? nextIcon;
 
   final WidgetBuilder? prevIcon;
+
+  /// The padding surrounding the calendar
+  final EdgeInsetsGeometry calenderPadding;
 }

lib/src/overlay_date_time_picker.dart

@@ -223,7 +223,7 @@ class _OverlayDateTimePickerState extends State<OverlayDateTimePicker> {
           padding: const EdgeInsets.all(8.0),
           child: OverlayDateTimeContent(
             theme: widget.theme,
-            textStyle: widget.textStyle,
+            weekdayTextStyle: widget.textStyle,
             size: widget.size,
             controller: _dateTimePickerController,
             showWeekDays: true,

lib/src/widgets/date_time_picker/date_time_picker.dart

@@ -11,7 +11,7 @@ class DateTimePicker extends StatefulWidget {
   final DateTimePickerTheme theme;
 
   /// Style to base the text on
-  final TextStyle textStyle;
+  final TextStyle weekdayTextStyle;
 
   /// Callback that provides the date tapped on as a [DateTime] object.
   final Function(DateTime date)? onTapDay;
@@ -63,7 +63,7 @@ class DateTimePicker extends StatefulWidget {
       {super.key,
       this.child,
       required this.theme,
-      this.textStyle = const TextStyle(),
+      this.weekdayTextStyle = const TextStyle(),
       this.onTapDay,
       this.highlightToday = true,
       this.alwaysUse24HourFormat = true,
@@ -138,10 +138,10 @@ class _DateTimePickerState extends State<DateTimePicker> {
         width: widget.size.width,
         height: widget.size.height,
         child: Padding(
-          padding: const EdgeInsets.all(8.0),
+          padding: widget.theme.calenderPadding,
           child: OverlayDateTimeContent(
             theme: widget.theme,
-            textStyle: widget.textStyle,
+            weekdayTextStyle: widget.weekdayTextStyle,
             size: widget.size,
             controller: _dateTimePickerController,
             showWeekDays: true,

lib/src/widgets/overlay_date_time_picker/date_picker.dart

@@ -14,7 +14,7 @@ class DatePicker extends StatelessWidget {
     super.key,
     required this.controller,
     required this.theme,
-    required this.textStyle,
+    required this.weekdayTextStyle,
     required this.onSelectDate,
     required this.date,
     required this.showWeekDays,
@@ -23,7 +23,7 @@ class DatePicker extends StatelessWidget {
 
   final DateTimePickerController controller;
   final DateTimePickerTheme theme;
-  final TextStyle textStyle;
+  final TextStyle weekdayTextStyle;
   final void Function(DateTime date) onSelectDate;
   final DateTime date;
   final bool showWeekDays;
@@ -64,11 +64,14 @@ class DatePicker extends StatelessWidget {
                     child: Padding(
                       padding: const EdgeInsets.all(2.0),
                       child: Text(
-                        // The first day in November 2022 is monday
+                          // The first day in November 2022 is monday
-                        // We use it to properly show monday as the first day and sunday as the last one
+                          // We use it to properly show monday as the first day and sunday as the last one
-                        date,
+                          date,
-                        style: textStyle.copyWith(fontWeight: FontWeight.bold),
+                          style: weekdayTextStyle
-                      ),
+                          // .copyWith(
+                          // fontStyle: FontStyle.italic,
+                          // fontWeight: FontWeight.w200),
+                          ),
                     ),
                   ),
                 );

lib/src/widgets/overlay_date_time_picker/overlay.dart

@@ -14,7 +14,7 @@ class OverlayDateTimeContent extends StatefulWidget {
   const OverlayDateTimeContent({
     super.key,
     required this.theme,
-    required this.textStyle,
+    required this.weekdayTextStyle,
     required this.size,
     required this.controller,
     required this.showWeekDays,
@@ -26,7 +26,7 @@ class OverlayDateTimeContent extends StatefulWidget {
   });
 
   final DateTimePickerTheme theme;
-  final TextStyle textStyle;
+  final TextStyle weekdayTextStyle;
   final Size size;
   final DateTimePickerController controller;
   final bool showWeekDays;
@@ -151,7 +151,7 @@ class _OverlayDateTimeContentState extends State<OverlayDateTimeContent> {
                 controller: widget.controller,
                 onSelectDate: _onSelectDate,
                 theme: widget.theme,
-                textStyle: widget.textStyle,
+                weekdayTextStyle: widget.weekdayTextStyle,
                 date: previousDate,
                 dateTimeConstraint: widget.dateTimeConstraint,
                 showWeekDays: widget.showWeekDays,
@@ -160,7 +160,7 @@ class _OverlayDateTimeContentState extends State<OverlayDateTimeContent> {
                 controller: widget.controller,
                 onSelectDate: _onSelectDate,
                 theme: widget.theme,
-                textStyle: widget.textStyle,
+                weekdayTextStyle: widget.weekdayTextStyle,
                 date: widget.controller.browsingDate,
                 showWeekDays: widget.showWeekDays,
                 dateTimeConstraint: widget.dateTimeConstraint,
@@ -169,7 +169,7 @@ class _OverlayDateTimeContentState extends State<OverlayDateTimeContent> {
                 controller: widget.controller,
                 onSelectDate: _onSelectDate,
                 theme: widget.theme,
-                textStyle: widget.textStyle,
+                weekdayTextStyle: widget.weekdayTextStyle,
                 date: nextDate,
                 dateTimeConstraint: widget.dateTimeConstraint,
                 showWeekDays: widget.showWeekDays,

lib/src/widgets/overlay_date_time_picker/pickable_date.dart

@@ -40,11 +40,15 @@ class PickableDate extends StatelessWidget {
         children: [
           Container(
             decoration: BoxDecoration(
+              border: getBorder(
+                isToday,
+                isSelected,
+              ),
               color: getColor(
                 isToday,
                 isSelected,
               ),
-              borderRadius: getBorder(theme.dateBoxShape),
+              borderRadius: getBorderRadius(theme.dateBoxShape),
             ),
             child: Center(
               child: Opacity(
@@ -71,7 +75,7 @@ class PickableDate extends StatelessWidget {
     );
   }
 
-  BorderRadiusGeometry? getBorder(DateBoxShape shape) {
+  BorderRadiusGeometry? getBorderRadius(DateBoxShape shape) {
     switch (shape) {
       case DateBoxShape.circle:
         return BorderRadius.all(Radius.circular(theme.monthDateBoxSize));
@@ -83,8 +87,8 @@ class PickableDate extends StatelessWidget {
   }
 
   Color? getColor(bool isToday, bool isSelected) {
-    if (isToday) return theme.highlightTheme.backgroundColor;
     if (isSelected) return theme.selectedTheme.backgroundColor;
+    if (isToday) return theme.highlightTheme.backgroundColor;
     return null;
   }
 
@@ -93,4 +97,18 @@ class PickableDate extends StatelessWidget {
     if (isSelected) return theme.selectedTheme.textStyle;
     return theme.baseTheme.textStyle;
   }
+
+  BoxBorder getBorder(bool isToday, bool isSelected) {
+    if (isToday) {
+      if (theme.highlightTheme.borderStyle != null) {
+        return theme.highlightTheme.borderStyle!;
+      }
+    }
+    if (isSelected) {
+      if (theme.selectedTheme.borderStyle != null) {
+        return theme.selectedTheme.borderStyle!;
+      }
+    }
+    return Border.all(color: const Color.fromARGB(0, 255, 255, 255));
+  }
 }