mirror of
https://github.com/vodemn/m3_lightmeter.git
synced 2024-11-21 23:10:40 +00:00
Added edge cutouts to color picker
This commit is contained in:
parent
89ad717fe7
commit
0fb4fc1e47
1 changed files with 83 additions and 26 deletions
|
@ -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;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue