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,