increased slider tappable area

This commit is contained in:
Vadim 2024-03-22 18:11:12 +01:00
parent d6ed053079
commit 5614ef8ef3
3 changed files with 31 additions and 30 deletions

View file

@ -38,6 +38,7 @@ class Dimens {
// `CenteredSlider`
static const double cameraSliderTrackHeight = grid4;
static const double cameraSliderTrackRadius = cameraSliderTrackHeight / 2;
static const double cameraSliderHandleArea = 32;
static const double cameraSliderHandleSize = 24;
static const double cameraSliderHandleIconSize = cameraSliderHandleSize * 2 / 3;

View file

@ -41,12 +41,12 @@ class _CenteredSliderState extends State<CenteredSlider> {
@override
Widget build(BuildContext context) {
return SizedBox(
height: widget.isVertical ? double.maxFinite : Dimens.cameraSliderHandleSize,
width: !widget.isVertical ? double.maxFinite : Dimens.cameraSliderHandleSize,
height: widget.isVertical ? double.maxFinite : Dimens.cameraSliderHandleArea,
width: !widget.isVertical ? double.maxFinite : Dimens.cameraSliderHandleArea,
child: LayoutBuilder(
builder: (context, constraints) {
final biggestSize = widget.isVertical ? constraints.maxHeight : constraints.maxWidth;
final handleDistance = biggestSize - Dimens.cameraSliderHandleSize;
final handleDistance = biggestSize - Dimens.cameraSliderHandleArea;
return RotatedBox(
quarterTurns: widget.isVertical ? -1 : 0,
child: GestureDetector(
@ -60,11 +60,11 @@ class _CenteredSliderState extends State<CenteredSlider> {
handleDistance,
),
child: SizedBox(
height: Dimens.cameraSliderHandleSize,
height: Dimens.cameraSliderHandleArea,
width: biggestSize,
child: _Slider(
handleDistance: handleDistance,
handleSize: Dimens.cameraSliderHandleSize,
handleSize: Dimens.cameraSliderHandleArea,
trackThickness: Dimens.cameraSliderTrackHeight,
value: relativeValue,
icon: RotatedBox(
@ -81,12 +81,12 @@ class _CenteredSliderState extends State<CenteredSlider> {
}
void _updateHandlePosition(double offset, double handleDistance) {
if (offset <= Dimens.cameraSliderHandleSize / 2) {
if (offset <= Dimens.cameraSliderHandleArea / 2) {
relativeValue = 0;
} else if (offset >= handleDistance + Dimens.cameraSliderHandleSize / 2) {
} else if (offset >= handleDistance + Dimens.cameraSliderHandleArea / 2) {
relativeValue = 1;
} else {
relativeValue = (offset - Dimens.cameraSliderHandleSize / 2) / handleDistance;
relativeValue = (offset - Dimens.cameraSliderHandleArea / 2) / handleDistance;
}
setState(() {});
widget.onChanged(relativeValue * (widget.max - widget.min) + widget.min);
@ -124,7 +124,7 @@ class _Slider extends StatelessWidget {
),
),
AnimatedPositioned.fromRect(
duration: Dimens.durationM,
duration: Dimens.durationS,
rect: Rect.fromCenter(
center: Offset(
handleSize / 2 + handleDistance * value,
@ -133,15 +133,17 @@ class _Slider extends StatelessWidget {
width: handleSize,
height: handleSize,
),
child: _Handle(
color: Theme.of(context).colorScheme.primary,
size: handleSize,
child: IconTheme(
data: Theme.of(context).iconTheme.copyWith(
color: Theme.of(context).colorScheme.onPrimary,
size: Dimens.cameraSliderHandleIconSize,
),
child: icon,
child: Center(
child: _Handle(
color: Theme.of(context).colorScheme.primary,
size: Dimens.cameraSliderHandleSize,
child: IconTheme(
data: Theme.of(context).iconTheme.copyWith(
color: Theme.of(context).colorScheme.onPrimary,
size: Dimens.cameraSliderHandleIconSize,
),
child: icon,
),
),
),
),
@ -163,15 +165,15 @@ class _Handle extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ClipRRect(
borderRadius: BorderRadius.circular(size / 2),
child: SizedBox(
height: size,
width: size,
child: ColoredBox(
return SizedBox(
height: size,
width: size,
child: DecoratedBox(
decoration: BoxDecoration(
color: color,
child: child,
shape: BoxShape.circle,
),
child: child,
),
);
}

View file

@ -31,7 +31,7 @@ class RulerSlider extends StatelessWidget {
valueAdapter(value),
style: Theme.of(context).textTheme.labelLarge,
),
const SizedBox(height: Dimens.grid8),
const SizedBox(height: Dimens.grid4),
Expanded(
child: Row(
children: [
@ -51,7 +51,6 @@ class RulerSlider extends StatelessWidget {
],
),
),
const SizedBox(height: Dimens.grid4),
IconButton(
icon: const Icon(Icons.sync),
onPressed: value != defaultValue ? () => onChanged(defaultValue) : null,
@ -79,7 +78,7 @@ class _Ruler extends StatelessWidget {
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) {
final bool showAllMainTicks = Dimens.cameraSliderHandleSize * mainTicksCount <= constraints.maxHeight;
final bool showAllMainTicks = Dimens.cameraSliderHandleArea * mainTicksCount <= constraints.maxHeight;
return Column(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
@ -92,7 +91,7 @@ class _Ruler extends StatelessWidget {
}
final bool showValue = (index % (showAllMainTicks ? 2 : 4) == 0.0);
return SizedBox(
height: index == itemsCount - 1 || showValue ? Dimens.cameraSliderHandleSize : 1,
height: index == itemsCount - 1 || showValue ? Dimens.cameraSliderHandleArea : 1,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
@ -109,7 +108,6 @@ class _Ruler extends StatelessWidget {
width: isMainTick ? Dimens.grid8 : Dimens.grid4,
),
),
const SizedBox(width: Dimens.grid4),
],
),
);