Added edge cutouts to color picker

This commit is contained in:
Vadim 2023-03-14 11:57:01 +01:00
parent 89ad717fe7
commit 0fb4fc1e47

View file

@ -29,7 +29,9 @@ class _PrimaryColorDialogPickerState extends State<PrimaryColorDialogPicker> {
content: SizedBox( content: SizedBox(
height: Dimens.grid48, height: Dimens.grid48,
width: double.maxFinite, width: double.maxFinite,
child: SingleChildScrollView( child: Stack(
children: [
SingleChildScrollView(
controller: _scrollController, controller: _scrollController,
scrollDirection: Axis.horizontal, scrollDirection: Axis.horizontal,
padding: EdgeInsets.zero, padding: EdgeInsets.zero,
@ -54,7 +56,18 @@ class _PrimaryColorDialogPickerState extends State<PrimaryColorDialogPicker> {
), ),
), ),
), ),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: const [
_Cutout(),
RotatedBox(
quarterTurns: 2,
child: _Cutout(),
), ),
],
),
],
)),
actionsPadding: Dimens.dialogActionsPadding, actionsPadding: Dimens.dialogActionsPadding,
actions: [ actions: [
TextButton( TextButton(
@ -120,3 +133,47 @@ class _SelectableColorItemState extends State<_SelectableColorItem> {
); );
} }
} }
class _Cutout extends StatelessWidget {
const _Cutout();
@override
Widget build(BuildContext context) {
return SizedBox(
height: Dimens.grid48,
width: Dimens.grid24,
child: ClipPath(
clipper: const _CutoutClipper(),
child: Material(
color: Theme.of(context).dialogTheme.backgroundColor,
surfaceTintColor: Theme.of(context).colorScheme.surfaceTint,
elevation: Theme.of(context).dialogTheme.elevation!,
shadowColor: Colors.transparent,
),
),
);
}
}
class _CutoutClipper extends CustomClipper<Path> {
const _CutoutClipper();
@override
Path getClip(Size size) {
final path = Path();
final radius = size.height / 2;
path.lineTo(radius, 0);
path.arcToPoint(
Offset(radius, size.height),
radius: Radius.circular(radius),
rotation: 180,
clockwise: false,
);
path.lineTo(0, size.height);
path.close();
return path;
}
@override
bool shouldReclip(CustomClipper oldClipper) => false;
}