From 104ed426b5dbbc371c606d5a38aa9613089ba1b1 Mon Sep 17 00:00:00 2001 From: Brighton van den End Date: Tue, 22 Nov 2022 10:26:54 +0100 Subject: [PATCH 1/2] reworked bartheme to contain a textstyle --- lib/src/models/date_time_picker_bar_theme.dart | 4 ++++ lib/src/widgets/overlay_date_time_picker/overlay.dart | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/lib/src/models/date_time_picker_bar_theme.dart b/lib/src/models/date_time_picker_bar_theme.dart index f673fca..784c91f 100644 --- a/lib/src/models/date_time_picker_bar_theme.dart +++ b/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; } diff --git a/lib/src/widgets/overlay_date_time_picker/overlay.dart b/lib/src/widgets/overlay_date_time_picker/overlay.dart index a1a2ac0..b0081f6 100644 --- a/lib/src/widgets/overlay_date_time_picker/overlay.dart +++ b/lib/src/widgets/overlay_date_time_picker/overlay.dart @@ -96,7 +96,7 @@ class _OverlayDateTimeContentState extends State { DateFormat.yMMMM().format( widget.controller.browsingDate, ), - style: widget.theme.baseTheme.textStyle, + style: widget.theme.barTheme.textStyle, ), (widget.onNextPageButtonChild != null) ? widget.onNextPageButtonChild!( From 0bfd255ffd53714727b952e67e5ba558c6b2caab Mon Sep 17 00:00:00 2001 From: Brighton van den End Date: Tue, 22 Nov 2022 11:50:40 +0100 Subject: [PATCH 2/2] fixed rouded corners not showing and added custom shapeborder --- example/lib/main.dart | 2 ++ example/lib/shaped_border.dart | 36 ++++++++++++++++++++++ lib/src/models/date_time_picker_theme.dart | 4 +++ lib/src/overlay_date_time_picker.dart | 32 +++++++++++++------ 4 files changed, 64 insertions(+), 10 deletions(-) create mode 100644 example/lib/shaped_border.dart diff --git a/example/lib/main.dart b/example/lib/main.dart index 173e855..0fb86d4 100644 --- a/example/lib/main.dart +++ b/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( diff --git a/example/lib/shaped_border.dart b/example/lib/shaped_border.dart new file mode 100644 index 0000000..6663d77 --- /dev/null +++ b/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; + } +} diff --git a/lib/src/models/date_time_picker_theme.dart b/lib/src/models/date_time_picker_theme.dart index bec6d5d..a40c3d2 100644 --- a/lib/src/models/date_time_picker_theme.dart +++ b/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; } diff --git a/lib/src/overlay_date_time_picker.dart b/lib/src/overlay_date_time_picker.dart index 27bc7b2..8a815ad 100644 --- a/lib/src/overlay_date_time_picker.dart +++ b/lib/src/overlay_date_time_picker.dart @@ -119,6 +119,7 @@ class _OverlayDateTimePickerState extends State { top: offset.dy, left: offset.dx, child: Material( + color: Colors.transparent, child: _buildOverlay(context), ), ); @@ -210,16 +211,27 @@ class _OverlayDateTimePickerState extends State { 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,