mirror of
https://github.com/Iconica-Development/flutter_date_time_picker.git
synced 2025-05-18 18:33:49 +02:00
fixed rouded corners not showing and added custom shapeborder
This commit is contained in:
parent
104ed426b5
commit
0bfd255ffd
4 changed files with 64 additions and 10 deletions
|
@ -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(
|
||||
|
|
36
example/lib/shaped_border.dart
Normal file
36
example/lib/shaped_border.dart
Normal file
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -119,6 +119,7 @@ class _OverlayDateTimePickerState extends State<OverlayDateTimePicker> {
|
|||
top: offset.dy,
|
||||
left: offset.dx,
|
||||
child: Material(
|
||||
color: Colors.transparent,
|
||||
child: _buildOverlay(context),
|
||||
),
|
||||
);
|
||||
|
@ -210,7 +211,8 @@ class _OverlayDateTimePickerState extends State<OverlayDateTimePicker> {
|
|||
|
||||
Widget _buildOverlay(BuildContext context) {
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
decoration: (widget.theme.shapeBorder == null)
|
||||
? BoxDecoration(
|
||||
color: widget.theme.backgroundColor,
|
||||
borderRadius: const BorderRadius.all(Radius.circular(16)),
|
||||
boxShadow: [
|
||||
|
@ -219,6 +221,16 @@ class _OverlayDateTimePickerState extends State<OverlayDateTimePicker> {
|
|||
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,
|
||||
|
|
Loading…
Reference in a new issue