Commit 6c3459e0 authored by Hixie's avatar Hixie

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.
parent 87667cb7
...@@ -11,13 +11,9 @@ class SliderDemo extends StatefulComponent { ...@@ -11,13 +11,9 @@ class SliderDemo extends StatefulComponent {
} }
class _SliderDemoState extends State<SliderDemo> { class _SliderDemoState extends State<SliderDemo> {
double _value = 0.25; double _value = 25.0;
Widget build(BuildContext context) { Widget build(BuildContext context) {
Widget label = new Container(
padding: const EdgeDims.symmetric(horizontal: 16.0),
child: new Text(_value.toStringAsFixed(2))
);
return new Block([ return new Block([
new Container( new Container(
height: 100.0, height: 100.0,
...@@ -25,13 +21,18 @@ class _SliderDemoState extends State<SliderDemo> { ...@@ -25,13 +21,18 @@ class _SliderDemoState extends State<SliderDemo> {
child: new Row([ child: new Row([
new Slider( new Slider(
value: _value, value: _value,
min: 0.0,
max: 100.0,
onChanged: (double value) { onChanged: (double value) {
setState(() { setState(() {
_value = value; _value = value;
}); });
} }
), ),
label, new Container(
padding: const EdgeDims.symmetric(horizontal: 16.0),
child: new Text(_value.round().toString().padLeft(3, '0'))
),
], justifyContent: FlexJustifyContent.collapse) ], justifyContent: FlexJustifyContent.collapse)
) )
), ),
...@@ -40,8 +41,11 @@ class _SliderDemoState extends State<SliderDemo> { ...@@ -40,8 +41,11 @@ class _SliderDemoState extends State<SliderDemo> {
child: new Center( child: new Center(
child: new Row([ child: new Row([
// Disabled, but tracking the slider above. // Disabled, but tracking the slider above.
new Slider(value: _value), new Slider(value: _value / 100.0),
label, new Container(
padding: const EdgeDims.symmetric(horizontal: 16.0),
child: new Text((_value / 100.0).toStringAsFixed(2))
),
], justifyContent: FlexJustifyContent.collapse) ], justifyContent: FlexJustifyContent.collapse)
) )
) )
......
...@@ -13,17 +13,34 @@ import 'constants.dart'; ...@@ -13,17 +13,34 @@ import 'constants.dart';
import 'theme.dart'; import 'theme.dart';
class Slider extends StatelessComponent { class Slider extends StatelessComponent {
Slider({ Key key, this.value, this.onChanged }) Slider({
: super(key: key); 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 value;
final double min;
final double max;
final ValueChanged<double> onChanged; final ValueChanged<double> onChanged;
void _handleChanged(double value) {
assert(onChanged != null);
onChanged(value * (max - min) + min);
}
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new _SliderRenderObjectWidget( return new _SliderRenderObjectWidget(
value: value, value: (value - min) / (max - min),
primaryColor: Theme.of(context).accentColor, primaryColor: Theme.of(context).accentColor,
onChanged: onChanged onChanged: onChanged != null ? _handleChanged : null
); );
} }
} }
...@@ -106,7 +123,7 @@ class _RenderSlider extends RenderConstrainedBox { ...@@ -106,7 +123,7 @@ class _RenderSlider extends RenderConstrainedBox {
void _handleDragStart(Point globalPosition) { void _handleDragStart(Point globalPosition) {
if (onChanged != null) { if (onChanged != null) {
_active = true; _active = true;
_currentDragValue = globalToLocal(globalPosition).x / _trackLength; _currentDragValue = (globalToLocal(globalPosition).x - _kReactionRadius) / _trackLength;
onChanged(_currentDragValue.clamp(0.0, 1.0)); onChanged(_currentDragValue.clamp(0.0, 1.0));
_reaction.forward(); _reaction.forward();
markNeedsPaint(); markNeedsPaint();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment