rubber_range_picker.dart

import 'dart:math' as math; import 'package:flutter/material.dart'; import 'package:flutter/rendering.dart'; import 'package:flutter/scheduler.dart'; void main() => runApp(ExampleApp()); class ExampleApp extends StatelessWidget { @override Widget build(BuildContext context) { var theme = ThemeData( primaryColor: Color(0xFF285DD4), accentColor: Colors.pinkAccent, ); return MaterialApp( title: 'Flutter Demo', theme: theme.copyWith( sliderTheme: theme.sliderTheme.copyWith( thumbColor: const Color(0xFFD1DFFF), ), ), home: ExampleScreen(), ); } } class ExampleScreen extends StatefulWidget { @override _ExampleScreenState createState() => _ExampleScreenState(); } class _ExampleScreenState extends State<ExampleScreen> { final min = 0.0; final max = 20000.0; final lower = ValueNotifier(4680.0); final upper = ValueNotifier(14780.0); @override Widget build(BuildContext context) { final theme = Theme.of(context); return Material( child: Container( padding: const EdgeInsets.all(32.0), alignment: Alignment.center, child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Text.rich( TextSpan( children: [ TextSpan( text: 'Price', style: const TextStyle( fontWeight: FontWeight.bold, ), ), TextSpan(text: ' Range'), ], ), style: TextStyle( fontWeight: FontWeight.w300, fontSize: 42.0, color: theme.primaryColor, ), ), const SizedBox(height: 32.0), AnimatedBuilder( animation: Listenable.merge([lower, upper]), builder: (BuildContext context, Widget child) { final localizations = MaterialLocalizations.of(context); final lowerAmount = '\$${localizations.formatDecimal(lower.value.toInt())}'; final upperAmount = '\$${localizations.formatDecimal(upper.value.toInt())}'; return Text( '$lowerAmount - $upperAmount', style: TextStyle( fontSize: 21.0, color: theme.primaryColor, ), ); }, ), const SizedBox(height: 8.0), Text( 'Average price: \$1200', style: TextStyle( fontSize: 21.0, color: theme.disabledColor.withOpacity(0.4), ), ), const SizedBox(height: 32.0), RubberRangePicker( minValue: min, lowerValue: lower.value, upperValue: upper.value, maxValue: max, onRangeChanged: (double lowerValue, double upperValue) { lower.value = lowerValue; upper.value = upperValue; }, ), const SizedBox(height: 32.0), ], ), ), ); } } typedef RubberRangeChanged = void Function(double lowerValue, double upperValue); class RubberRangePicker extends LeafRenderObjectWidget { const RubberRangePicker({ Key key, @required this.lowerValue, @required this.upperValue, this.minValue = 0.0, this.maxValue = 1.0, this.onRangeChanged, }) : assert(minValue != null && maxValue != null && minValue < maxValue), super(key: key); final double lowerValue; final double upperValue; final double minValue; final double maxValue; final RubberRangeChanged onRangeChanged; @override RenderObject createRenderObject(BuildContext context) { final theme = Theme.of(context); final slider = SliderTheme.of(context); return RenderRubberRangePicker( minValue: minValue, maxValue: maxValue, lowerValue: lowerValue, upperValue: upperValue, inactiveTrackColor: slider.inactiveTrackColor, activeTrackColor: slider.activeTrackColor, inactiveThumbColor: theme.canvasColor, activeThumbColor: slider.thumbColor, onRangeChanged: onRangeChanged, ); } @override void updateRenderObject(BuildContext context, RenderRubberRangePicker renderObject) { final theme = Theme.of(context); final slider = SliderTheme.of(context); renderObject ..minValue = minValue ..maxValue = maxValue ..lowerValue = lowerValue ..upperValue = upperValue ..inactiveTrackColor = slider.inactiveTrackColor ..activeTrackColor = slider.activeTrackColor ..inactiveThumbColor = theme.canvasColor ..activeThumbColor = slider.thumbColor ..onRangeChanged = onRangeChanged; } } class RenderRubberRangePicker extends RenderBox { RenderRubberRangePicker({ @required double minValue, @required double maxValue, @required double lowerValue, @required double upperValue, Color inactiveTrackColor, Color activeTrackColor, Color inactiveThumbColor, Color activeThumbColor, RubberRangeChanged onRangeChanged, }) : _minValue = minValue, _maxValue = maxValue, _lowerValue = lowerValue, _upperValue = upperValue, _onRangeChanged = onRangeChanged { _inactiveTrackPaint = Paint() ..style = PaintingStyle.stroke ..color = inactiveTrackColor ..strokeWidth = 1.0; _activeTrackPaint = Paint() ..style = PaintingStyle.stroke ..color = activeTrackColor ..strokeWidth = 1.5; _inactiveThumbPaint = Paint() ..style = PaintingStyle.fill ..color = inactiveThumbColor; _activeThumbPaint = Paint() ..style = PaintingStyle.fill ..color = activeThumbColor; } static const double thumbSize = 28.0; static const double damping = 0.5; static const double elasticity = 0.5; static const bool constraintStretch = true; static const double stretchRange = 60; static const double animationSpeed = 0.8; final firstSegment = Path(); final secondSegment = Path(); final thirdSegment = Path(); Paint _inactiveTrackPaint; Paint _activeTrackPaint; Paint _inactiveThumbPaint; Paint _activeThumbPaint; double _minValue = 0.0; double _maxValue = 1.0; double _lowerValue = 0.0; double _upperValue = 1.0; RubberRangeChanged _onRangeChanged; Ticker _ticker; double _currentTime = 0.0; Rect _lowerThumb = Rect.zero; Rect _upperThumb = Rect.zero; Offset _previousLocation = Offset.zero; bool _movingLower = false; bool _movingUpper = false; double _lowerAnimationStart = 0.0; double _lowerStartOffset = 0.0; double _upperAnimationStart = 0.0; double _upperStartOffset = 0.0; double _vertOffset = 0.0; set minValue(double value) { _minValue = value; markNeedsPaint(); } double get minValue { if (_minValue > _maxValue) { _maxValue = _minValue; markNeedsPaint(); } return _minValue; } set maxValue(double value) { _maxValue = value; markNeedsPaint(); } double get maxValue { if (_maxValue < _minValue) { _minValue = _maxValue; markNeedsPaint(); } return _maxValue; } double get lowerValue => _lowerValue; set lowerValue(double value) { _lowerValue = value.clamp(minValue, maxValue); if (_lowerValue > upperValue) { upperValue = _lowerValue; } markNeedsPaint(); } double get upperValue => _upperValue; set upperValue(double value) { _upperValue = value.clamp(minValue, maxValue); if (_upperValue < lowerValue) { lowerValue = _upperValue; } markNeedsPaint(); } RubberRangeChanged get onRangeChanged => _onRangeChanged; set onRangeChanged(RubberRangeChanged value) { _onRangeChanged = value; notifyRangeChanged(); } void notifyRangeChanged() { _onRangeChanged.call(lowerValue, upperValue); } Color get inactiveTrackColor => _inactiveTrackPaint.color; set inactiveTrackColor(Color value) { _inactiveTrackPaint.color = value; markNeedsPaint(); } Color get activeTrackColor => _activeTrackPaint.color; set activeTrackColor(Color value) { _activeTrackPaint.color = value; markNeedsPaint(); } Color get inactiveThumbColor => _inactiveThumbPaint.color; set inactiveThumbColor(Color value) { _inactiveThumbPaint.color = value; markNeedsPaint(); } Color get activeThumbColor => _activeThumbPaint.color; set activeThumbColor(Color value) { _activeThumbPaint.color = value; markNeedsPaint(); } @override void performLayout() { assert(constraints.hasBoundedWidth); size = Size(constraints.maxWidth, thumbSize); } @override void attach(PipelineOwner owner) { super.attach(owner); _ticker = Ticker((Duration time) { _currentTime = time.inMicroseconds / Duration.microsecondsPerSecond; markNeedsPaint(); }); _ticker.start(); } @override void detach() { _ticker.dispose(); super.detach(); } @override bool hitTestSelf(Offset position) => true; @override void handleEvent(PointerEvent event, HitTestEntry entry) { assert(debugHandleEvent(event, entry)); if (event is PointerDownEvent) { _beginTracking(globalToLocal(event.position)); } else if (event is PointerMoveEvent) { _continueTracking(globalToLocal(event.position)); } else if (event is PointerUpEvent || event is PointerCancelEvent) { _endTracking(); } } bool _beginTracking(Offset location) { _previousLocation = location; _vertOffset = 0; if (_lowerThumb.contains(location)) { _movingLower = true; _lowerAnimationStart = 0.0; _lowerStartOffset = 0.0; } else if (_upperThumb.contains(location)) { _movingUpper = true; _upperAnimationStart = 0.0; _upperStartOffset = 0.0; } return _movingLower || _movingUpper; } bool _continueTracking(Offset location) { final deltaLocation = (location.dx - _previousLocation.dx); final deltaValue = (maxValue - minValue) * deltaLocation / (size.width - thumbSize * 2); _previousLocation = location; if (_movingLower) { lowerValue = (lowerValue + deltaValue).clamp(minValue, maxValue); upperValue = math.max(upperValue, lowerValue); } else if (_movingUpper) { upperValue = (upperValue + deltaValue).clamp(minValue, maxValue); lowerValue = math.min(upperValue, lowerValue); } notifyRangeChanged(); final touchOffset = (location.dy - size.height / 2.0); final touchOffsetVal = touchOffset.abs(); final double sign = touchOffset.sign; double maxVal = stretchRange; if (constraintStretch) { maxVal = math.min(maxVal, (upperOffset - lowerOffset) / 2.0); if (_movingLower) { maxVal = math.min(maxVal, lowerOffset / 2.0); } if (_movingUpper) { maxVal = math.min(maxVal, (size.width - upperOffset) / 2.0); } } double offsetVal = (maxVal - 1 / (touchOffsetVal * math.pow(48, -(1.9 + 0.6 * elasticity)) + 1 / maxVal)); _vertOffset = sign * math.min(offsetVal, touchOffsetVal); return true; } void _endTracking() { if (_movingLower) { _lowerAnimationStart = _currentTime; _lowerStartOffset = _vertOffset; notifyRangeChanged(); } if (_movingUpper) { _upperAnimationStart = _currentTime; _upperStartOffset = _vertOffset; notifyRangeChanged(); } _movingLower = false; _movingUpper = false; } void paint(PaintingContext context, Offset offset) { _updateThumbPositions(); final canvas = context.canvas; canvas.save(); canvas.translate(offset.dx, offset.dy); final margin = 2.0; //thumbSize / 2; final midY = size.height / 2; final pt1 = Offset(margin, midY); final pt2 = Offset(margin + lowerOffset, midY + _lowerThumb.center.dy - size.height / 2.0); final pt3 = Offset(margin + upperOffset, midY + _upperThumb.center.dy - size.height / 2.0); final pt4 = Offset(size.width - margin, midY); firstSegment.reset(); firstSegment.moveTo(pt1.dx, pt1.dy); firstSegment.cubicTo(pt1.dx + lowerOffset / 2.0, pt1.dy, pt2.dx + -lowerOffset / 2.0, pt2.dy, pt2.dx, pt2.dy); canvas.drawPath(firstSegment, _inactiveTrackPaint); final diff = _upperThumb.center.dx - _lowerThumb.center.dx; secondSegment.reset(); secondSegment.moveTo(pt2.dx, pt2.dy); secondSegment.cubicTo(pt2.dx + diff / 2.0, pt2.dy, pt3.dx + -diff / 2.0, pt3.dy, pt3.dx, pt3.dy); canvas.drawPath(secondSegment, _activeTrackPaint); final controlOffset = (size.width - margin * 2 - upperOffset) / 2.0; thirdSegment.reset(); thirdSegment.moveTo(pt3.dx, pt3.dy); thirdSegment.cubicTo(pt3.dx + controlOffset, pt3.dy, pt4.dx + -controlOffset, pt4.dy, pt4.dx, pt4.dy); canvas.drawPath(thirdSegment, _inactiveTrackPaint); canvas.drawCircle( _lowerThumb.center, _lowerThumb.shortestSide / 2, _movingLower ? _activeThumbPaint : _inactiveThumbPaint, ); canvas.drawCircle(_lowerThumb.center, _lowerThumb.shortestSide / 2, _activeTrackPaint); canvas.drawCircle( _upperThumb.center, _upperThumb.shortestSide / 2, _movingUpper ? _activeThumbPaint : _inactiveThumbPaint, ); canvas.drawCircle(_upperThumb.center, _upperThumb.shortestSide / 2, _activeTrackPaint); canvas.restore(); } void _updateThumbPositions() { final timeMultiplier = 2.5 * animationSpeed; double lowerVertOffset = (_movingLower ? _vertOffset : 0); if (!_movingLower) { final elapsedTime = (_currentTime - _lowerAnimationStart) * timeMultiplier; lowerVertOffset = _springCoordinate(elapsedTime, _lowerStartOffset); } lowerVertOffset = _strokeClamp(lowerVertOffset); double upperVertOffset = (_movingUpper ? _vertOffset : 0); if (!_movingUpper) { final elapsedTime = (_currentTime - _upperAnimationStart) * timeMultiplier; upperVertOffset = _springCoordinate(elapsedTime, _upperStartOffset); } upperVertOffset = _strokeClamp(upperVertOffset); _lowerThumb = Rect.fromLTWH(lowerOffset, (size.height - thumbSize) / 2.0 + lowerVertOffset, thumbSize, thumbSize); _upperThumb = Rect.fromLTWH(upperOffset, (size.height - thumbSize) / 2.0 + upperVertOffset, thumbSize, thumbSize); } double get lowerOffset => (size.width - thumbSize * 2) * ((lowerValue - minValue) / (maxValue - minValue)); double get upperOffset => (size.width - thumbSize * 2) * ((upperValue - minValue) / (maxValue - minValue)) + thumbSize; static double _springCoordinate(double time, double offset) { final m = 6.0; final beta = 40.0 / (2 * m); final omega0 = (20 + 100 * damping) / m; final omega = math.pow(-math.pow(beta, 2) + math.pow(omega0, 2), 0.5); return offset * math.exp(-beta * time) * math.cos(omega * time); } static double _strokeClamp(double value, [double strokeWidth = 2.0]) { return (value < -strokeWidth || value > strokeWidth) ? value : 0.0; } } /* MIT License Copyright (c) 2019 Cuberto Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */