Merge pull request #11 from Iconica-Development/hotfix/added-textstyle-to-bar-theme

reworked bartheme to contain a textstyle

example/lib/main.dart

@@ -2,6 +2,7 @@
 //
 // SPDX-License-Identifier: BSD-3-Clause
 
+import 'package:datetime_picker_example/shaped_border.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_date_time_picker/flutter_date_time_picker.dart';
 
@@ -54,6 +55,7 @@ class DatePickerDemo extends StatelessWidget {
         barOpacity: 1,
       ),
       paginationSize: 50,
+      shapeBorder: ArrowedBorder(),
     );
 
     return Scaffold(

example/lib/shaped_border.dart

@@ -0,0 +1,36 @@
+import 'package:flutter/material.dart';
+
+class ArrowedBorder extends ShapeBorder {
+  const ArrowedBorder();
+
+  @override
+  EdgeInsetsGeometry get dimensions => EdgeInsets.zero;
+
+  @override
+  Path getInnerPath(Rect rect, {TextDirection? textDirection}) {
+    rect = Rect.fromPoints(rect.topLeft, rect.bottomRight);
+    return Path()..addRect(rect);
+  }
+
+  @override
+  Path getOuterPath(Rect rect, {TextDirection? textDirection}) {
+    rect = Rect.fromPoints(rect.topLeft, rect.bottomRight);
+    return Path()
+      ..addRRect(RRect.fromRectAndRadius(
+        rect,
+        const Radius.circular(16),
+      ))
+      ..moveTo(rect.bottomCenter.dx - 15, rect.bottomCenter.dy)
+      ..relativeLineTo(15, 20)
+      ..relativeLineTo(15, -20)
+      ..close();
+  }
+
+  @override
+  void paint(Canvas canvas, Rect rect, {TextDirection? textDirection}) {}
+
+  @override
+  ShapeBorder scale(double t) {
+    return this;
+  }
+}

lib/src/models/date_time_picker_bar_theme.dart

@@ -12,6 +12,7 @@ class DateTimePickerBarTheme {
     this.barOpacity = 0.3,
     this.barWidth = 50,
     this.barHeight = 3,
+    this.textStyle,
   });
 
   /// The color used for the bar shown at the bottom of the date picker.
@@ -25,4 +26,7 @@ class DateTimePickerBarTheme {
 
   /// The width of the bar shown at the bottom of the date picker.
   final double barWidth;
+
+  /// The text style of the text in the bar.
+  final TextStyle? textStyle;
 }

lib/src/models/date_time_picker_theme.dart

@@ -18,6 +18,7 @@ class DateTimePickerTheme {
     this.weekViewSize = 0.2,
     this.monthViewSize = 0.6,
     this.weekMonthTriggerSize = 0.3,
+    this.shapeBorder,
     this.baseTheme = const DateBoxBaseTheme(
       Colors.white,
       TextStyle(color: Colors.black),
@@ -79,4 +80,7 @@ class DateTimePickerTheme {
 
   /// The size of the buttons for navigation the different pages
   final double paginationSize;
+
+  /// The shape of the border using a [ShapeBorder]
+  final ShapeBorder? shapeBorder;
 }

lib/src/overlay_date_time_picker.dart

@@ -119,6 +119,7 @@ class _OverlayDateTimePickerState extends State<OverlayDateTimePicker> {
         top: offset.dy,
         left: offset.dx,
         child: Material(
+          color: Colors.transparent,
           child: _buildOverlay(context),
         ),
       );
@@ -210,16 +211,27 @@ class _OverlayDateTimePickerState extends State<OverlayDateTimePicker> {
 
   Widget _buildOverlay(BuildContext context) {
     return Container(
-      decoration: BoxDecoration(
-        color: widget.theme.backgroundColor,
-        borderRadius: const BorderRadius.all(Radius.circular(16)),
-        boxShadow: [
-          BoxShadow(
-            blurRadius: 5,
-            color: Colors.black.withOpacity(0.25),
-          ),
-        ],
-      ),
+      decoration: (widget.theme.shapeBorder == null)
+          ? BoxDecoration(
+              color: widget.theme.backgroundColor,
+              borderRadius: const BorderRadius.all(Radius.circular(16)),
+              boxShadow: [
+                BoxShadow(
+                  blurRadius: 5,
+                  color: Colors.black.withOpacity(0.25),
+                ),
+              ],
+            )
+          : ShapeDecoration(
+              shape: widget.theme.shapeBorder!,
+              color: widget.theme.backgroundColor,
+              shadows: [
+                BoxShadow(
+                  blurRadius: 5,
+                  color: Colors.black.withOpacity(0.25),
+                ),
+              ],
+            ),
       child: SizedBox(
         width: widget.size.width,
         height: widget.size.height,

lib/src/widgets/overlay_date_time_picker/overlay.dart

@@ -96,7 +96,7 @@ class _OverlayDateTimeContentState extends State<OverlayDateTimeContent> {
               DateFormat.yMMMM().format(
                 widget.controller.browsingDate,
               ),
-              style: widget.theme.baseTheme.textStyle,
+              style: widget.theme.barTheme.textStyle,
             ),
             (widget.onNextPageButtonChild != null)
                 ? widget.onNextPageButtonChild!(