Search code examples
widgetslidertouchflutter

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


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),
      ),
   ),
);

Solution

  • 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),
      ),
    );