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` // `CenteredSlider`
static const double cameraSliderTrackHeight = grid4; static const double cameraSliderTrackHeight = grid4;
static const double cameraSliderTrackRadius = cameraSliderTrackHeight / 2; static const double cameraSliderTrackRadius = cameraSliderTrackHeight / 2;
static const double cameraSliderHandleArea = 32;
static const double cameraSliderHandleSize = 24; static const double cameraSliderHandleSize = 24;
static const double cameraSliderHandleIconSize = cameraSliderHandleSize * 2 / 3; static const double cameraSliderHandleIconSize = cameraSliderHandleSize * 2 / 3;

View file

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

View file

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