SecondaryValueSlider

main.dart

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

void main() => runApp(RunSlider());

class RunSlider extends StatefulWidget {
  @override
  _RunSliderState createState() => _RunSliderState();
}

class _RunSliderState extends State<RunSlider> {
  double _currentSliderValue = .2;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SecondaryValueSlider(
          value: _currentSliderValue,
          onChanged: (double value) {
            setState(() {
              _currentSliderValue = value;
            });
          },
          activeColorStartValue: .4,
          divisions: 5,
        ),
      ),
    );
  }
}

class SecondaryValueSlider extends StatefulWidget {
  final double value;
  final ValueChanged<double> onChanged;
  final double activeColorStartValue;
  final double min;
  final double max;
  final int divisions;
  final SemanticFormatterCallback semanticFormatterCallback;

  const SecondaryValueSlider({
    Key key,
    @required this.value,
    @required this.onChanged,
    @required this.activeColorStartValue,
    this.min = 0.0,
    this.max = 1.0,
    this.divisions,
    this.semanticFormatterCallback,
  }) : super(key: key);

  @override
  _SecondaryValueSliderState createState() => _SecondaryValueSliderState();
}

/// State for [CustomStartPositionSlider].
class _SecondaryValueSliderState extends State<SecondaryValueSlider> {
  SliderThemeData _sliderBaseThemeData;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();

    _sliderBaseThemeData = SliderTheme.of(context).copyWith(
      activeTrackColor: Colors.green,
      inactiveTrackColor: Colors.green,
      activeTickMarkColor: Colors.green,
      inactiveTickMarkColor: Colors.green,
      thumbColor: Colors.red,
    );
  }

  @override
  Widget build(BuildContext context) {
    final isBeforeActiveStart = widget.value < widget.activeColorStartValue;
    return Stack(
      children: [
        SliderTheme(
          data: _sliderBaseThemeData.copyWith(
            trackHeight: 1,
            activeTrackColor: isBeforeActiveStart
                ? null
                : _sliderBaseThemeData.inactiveTrackColor,
            inactiveTrackColor: isBeforeActiveStart
                ? null
                : _sliderBaseThemeData.activeTrackColor,
            activeTickMarkColor: isBeforeActiveStart
                ? null
                : _sliderBaseThemeData.inactiveTickMarkColor,
            inactiveTickMarkColor: isBeforeActiveStart
                ? null
                : _sliderBaseThemeData.activeTickMarkColor,
            thumbShape: _NullSliderComponentShape(),
          ),
          child: ExcludeSemantics(
            child: Slider(
              value: widget.activeColorStartValue,
              onChanged: (_) {},
              min: widget.min,
              max: widget.max,
              divisions: widget.divisions,
            ),
          ),
        ),
        SliderTheme(
          data: _sliderBaseThemeData.copyWith(
            trackHeight: 1,
            activeTrackColor: isBeforeActiveStart
                ? _sliderBaseThemeData.inactiveTrackColor
                : Colors.transparent,
            inactiveTrackColor: isBeforeActiveStart ? Colors.transparent : null,
            activeTickMarkColor: isBeforeActiveStart
                ? _sliderBaseThemeData.inactiveTickMarkColor
                : Colors.transparent,
            inactiveTickMarkColor:
                isBeforeActiveStart ? Colors.transparent : null,
          ),
          child: Slider(
            value: widget.value,
            onChanged: widget.onChanged,
            min: widget.min,
            max: widget.max,
            divisions: widget.divisions,
            semanticFormatterCallback: widget.semanticFormatterCallback,
          ),
        ),
      ],
    );
  }
}

/// A [SliderComponentShape] that does not paint anything and takes up no size.
class _NullSliderComponentShape extends SliderComponentShape {
  @override
  Size getPreferredSize(bool isEnabled, bool isDiscrete) => Size.zero;

  @override
  void paint(
    PaintingContext context,
    Offset thumbCenter, {
    Animation<double> activationAnimation,
    Animation<double> enableAnimation,
    bool isDiscrete,
    TextPainter labelPainter,
    RenderBox parentBox,
    SliderThemeData sliderTheme,
    TextDirection textDirection,
    double value,
    double textScaleFactor,
    Size sizeWithOverflow,
  }) {}
}