How can I increase the "touch zone" of my Flutter slider widget? - widget

Question

I am using a Flutter slider widget, where tapping/dragging on the slider moves the progress/activeColor of the slider. However, it seems like only directly touching the slider causes an event to happen, and it's hard to always touch a finger directly onto the slider. Is there a way to expand the Slider's "touch zone"?
This is what I have:
return new Center(
child: new Container(
height: 2.0,
child: new Slider(
min: 0.0,
max: 1.0,
activeColor: Colors.grey[50],
value: _getUnitProgress(model),
onChanged: (double value) => _unitSeek(value, model),
),
),
);

Answer 1

I faced a very similar issue recently and found that it was too easy a problem!
The flutter slider which you are using is in itself a renderBox which detects gesture all over it's given area (it uses a GestureArena), the only thing you have to do is too increase the tap area is that you give the widget more area, one of the easiest way to do that is that wrap the slider in a container and give the container enough height and width!
return Container(
height: 100,
child: Slider(
value: _value.toDouble(),
min: 1,
max: 10,
divisions: 10,
label: _value.toString(),
onChanged: (double newValue) {
setState(() {
_value = newValue.round();
},
);
},
),
);
In this example the container height is 100 thus the tap area in this case will be 50 above the slider and 50 below, the slider will be exactly in the middle.
Hope it helps!

Answer 2

You don't want to wrap your Slider in a Container with a height. The Slider has a _kReactionRadius that expands the touch zone for a user. This means that a user doesn’t have to touch directly onto the Slider’s horizontal line to trigger the onTap():
return Center(
child: new Slider(
min: 0.0,
max: 1.0,
activeColor: Colors.grey[50],
value: _getUnitProgress(model),
onChanged: (double value) => _unitSeek(value, model),
),
);

Answer 3

The easy way is to get the actual SliderTheme used in your context and modify only the properties you need. For example, to modify one slide:
SliderTheme(
data: SliderTheme.of(context).copyWith(
activeTrackColor: Colors.white,
thumbShape: RoundSliderThumbShape(enabledThumbRadius: 15.0),
overlayShape: RoundSliderOverlayShape(overlayRadius: 30.0),
),
child: Slider(
value: height.toDouble(),
min: 120.0,
max: 220.0,
activeColor: Colors.white,
inactiveColor: Color(0xFF8D8E98),
onChanged: (double newValue) {
setState(() {
height = newValue.round();
});
},
),
),
Another option is modify the theme you're using in your app; in this way you modify all the sliders in the app:
MaterialApp(
theme: ThemeData.dark().copyWith(
sliderTheme: SliderTheme.of(context).copyWith( //slider modifications
thumbColor: Color(0xFFEB1555),
inactiveTrackColor: Color(0xFF8D8E98),
activeTrackColor: Colors.white,
overlayColor: Color(0x99EB1555),
thumbShape: RoundSliderThumbShape(enabledThumbRadius: 15.0),
overlayShape: RoundSliderOverlayShape(overlayRadius: 30.0),
),
primaryColor: Color(0xFF0A0E21), // theme color
scaffoldBackgroundColor: Color(0xFF0A0E21)), // theme background color
home: InputPage(),
);