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

@ -27,34 +27,47 @@ class _PrimaryColorDialogPickerState extends State<PrimaryColorDialogPicker> {
titlePadding: Dimens.dialogTitlePadding, titlePadding: Dimens.dialogTitlePadding,
title: Text(S.of(context).choosePrimaryColor), title: Text(S.of(context).choosePrimaryColor),
content: SizedBox( content: SizedBox(
height: Dimens.grid48, height: Dimens.grid48,
width: double.maxFinite, width: double.maxFinite,
child: SingleChildScrollView( child: Stack(
controller: _scrollController, children: [
scrollDirection: Axis.horizontal, SingleChildScrollView(
padding: EdgeInsets.zero, controller: _scrollController,
child: Row( scrollDirection: Axis.horizontal,
children: List.generate( padding: EdgeInsets.zero,
ThemeProvider.primaryColorsList.length, child: Row(
(index) { children: List.generate(
final color = ThemeProvider.primaryColorsList[index]; ThemeProvider.primaryColorsList.length,
return Padding( (index) {
padding: EdgeInsets.only(left: index == 0 ? 0 : Dimens.paddingS), final color = ThemeProvider.primaryColorsList[index];
child: _SelectableColorItem( return Padding(
color: color, padding: EdgeInsets.only(left: index == 0 ? 0 : Dimens.paddingS),
selected: color.value == _selected.value, child: _SelectableColorItem(
onTap: () { color: color,
setState(() { selected: color.value == _selected.value,
_selected = color; onTap: () {
}); setState(() {
_selected = color;
});
},
),
);
}, },
), ),
); ),
}, ),
), 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;
}