From 6c3459e0b67a76438942ecabd2d18ddc0075765c Mon Sep 17 00:00:00 2001 From: Hixie Date: Fri, 4 Dec 2015 11:11:20 -0800 Subject: [PATCH] Slider Improvements Have the widget support min/max arguments to make the widget easier to use. Also, fix the dragging so it's actually where the knob is. --- .../lib/demo/slider_demo.dart | 20 ++++++++------ packages/flutter/lib/src/material/slider.dart | 27 +++++++++++++++---- 2 files changed, 34 insertions(+), 13 deletions(-) diff --git a/examples/material_gallery/lib/demo/slider_demo.dart b/examples/material_gallery/lib/demo/slider_demo.dart index 05229b4cdfb..245b3dcc701 100644 --- a/examples/material_gallery/lib/demo/slider_demo.dart +++ b/examples/material_gallery/lib/demo/slider_demo.dart @@ -11,13 +11,9 @@ class SliderDemo extends StatefulComponent { } class _SliderDemoState extends State { - double _value = 0.25; + double _value = 25.0; Widget build(BuildContext context) { - Widget label = new Container( - padding: const EdgeDims.symmetric(horizontal: 16.0), - child: new Text(_value.toStringAsFixed(2)) - ); return new Block([ new Container( height: 100.0, @@ -25,13 +21,18 @@ class _SliderDemoState extends State { child: new Row([ new Slider( value: _value, + min: 0.0, + max: 100.0, onChanged: (double value) { setState(() { _value = value; }); } ), - label, + new Container( + padding: const EdgeDims.symmetric(horizontal: 16.0), + child: new Text(_value.round().toString().padLeft(3, '0')) + ), ], justifyContent: FlexJustifyContent.collapse) ) ), @@ -40,8 +41,11 @@ class _SliderDemoState extends State { child: new Center( child: new Row([ // Disabled, but tracking the slider above. - new Slider(value: _value), - label, + new Slider(value: _value / 100.0), + new Container( + padding: const EdgeDims.symmetric(horizontal: 16.0), + child: new Text((_value / 100.0).toStringAsFixed(2)) + ), ], justifyContent: FlexJustifyContent.collapse) ) ) diff --git a/packages/flutter/lib/src/material/slider.dart b/packages/flutter/lib/src/material/slider.dart index 3a44cb17a1e..9090195c1e3 100644 --- a/packages/flutter/lib/src/material/slider.dart +++ b/packages/flutter/lib/src/material/slider.dart @@ -13,17 +13,34 @@ import 'constants.dart'; import 'theme.dart'; class Slider extends StatelessComponent { - Slider({ Key key, this.value, this.onChanged }) - : super(key: key); + Slider({ + Key key, + this.value, + this.min: 0.0, + this.max: 1.0, + this.onChanged + }) : super(key: key) { + assert(value != null); + assert(min != null); + assert(max != null); + assert(value >= min && value <= max); + } final double value; + final double min; + final double max; final ValueChanged onChanged; + void _handleChanged(double value) { + assert(onChanged != null); + onChanged(value * (max - min) + min); + } + Widget build(BuildContext context) { return new _SliderRenderObjectWidget( - value: value, + value: (value - min) / (max - min), primaryColor: Theme.of(context).accentColor, - onChanged: onChanged + onChanged: onChanged != null ? _handleChanged : null ); } } @@ -106,7 +123,7 @@ class _RenderSlider extends RenderConstrainedBox { void _handleDragStart(Point globalPosition) { if (onChanged != null) { _active = true; - _currentDragValue = globalToLocal(globalPosition).x / _trackLength; + _currentDragValue = (globalToLocal(globalPosition).x - _kReactionRadius) / _trackLength; onChanged(_currentDragValue.clamp(0.0, 1.0)); _reaction.forward(); markNeedsPaint();