Alone in the Dark

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  List<FlutterSliderHatchMarkLabel> rDEffects = [];
  List<Map<dynamic, dynamic>> mRDEffects = [];
  double rdellv = 30;

  void initState() {
    super.initState();

    for (double i = 0; i <= 100; i++) {
      mRDEffects.add({"percent": i, "size": 50.0});
    }
    rDEffects = updateRDEffects(
        ellv * 100 / mRDEffects.length, euuv * 100 / mRDEffects.length);
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
              padding: EdgeInsets.symmetric(horizontal: 0, vertical: 60),
              color: Color(0xff222222),
              height: 200,
              child: FlutterSlider(
                  min: 0,
                  max: 100,
                  values: [rdellv],
                  handler: FlutterSliderHandler(
                      decoration: BoxDecoration(),
                      child: Container(
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(3),
                            color: Colors.yellowAccent.withOpacity(0.7),
                            border: Border.all(
                                color: Colors.black.withOpacity(0.65),
                                width: 1)),
                      )),
                  handlerAnimation: FlutterSliderHandlerAnimation(
                    scale: 1
                  ),
                  handlerWidth: 3,
                  handlerHeight: 70,
                  touchSize: 20,
                  tooltip: FlutterSliderTooltip(
                      format: (value) {
                        return value + ' MHz';
                      },
                      textStyle: TextStyle(fontSize: 40, color: Colors.white38),
                      boxStyle: FlutterSliderTooltipBox(
                          decoration: BoxDecoration(
                              color: Color(0xff444444),
                              border: Border.all(
                                  color: Colors.black54, width: 1)))),
                  hatchMark: FlutterSliderHatchMark(
                    labels: rDEffects,
                    linesAlignment: FlutterSliderHatchMarkAlignment.right,
                    density: 0.5,
                  ),
                  trackBar: FlutterSliderTrackBar(
                      inactiveTrackBar: BoxDecoration(
                        borderRadius: BorderRadius.circular(30),
                      ),
                      activeTrackBarHeight: 2,
                      inactiveTrackBarHeight: 1,
                      activeTrackBar: BoxDecoration(
                        color: Colors.transparent,
                      )),
                  onDragging: (a, b, c) {
                    rdellv = b;
                    rdeuuv = c;
                    rDEffects = updateRDEffects(b * 100 / mRDEffects.length,
                        c * 100 / mRDEffects.length);
                    setState(() {});
                  }),
            ),
    );
  }

    List<FlutterSliderHatchMarkLabel> updateRDEffects(
      double leftPercent, double rightPercent) {
    List<FlutterSliderHatchMarkLabel> newLabels = [];
    Color color;
    for (Map<dynamic, dynamic> label in mRDEffects) {

      double opacity = 1;

      if (leftPercent > label['percent']) {
        if (leftPercent > label['percent'] + 40)
          opacity = 0.1;
        else {
          opacity = 1 - (leftPercent - label['percent']) / 40;
        }
      } else if (leftPercent < label['percent']) {
        if (leftPercent < label['percent'] - 40)
          opacity = 0.1;
        else {
          opacity = 1 - (label['percent'] - leftPercent) / 40;
        }
      }
      if(opacity < 0.1) opacity = 0.1;

      if (label['percent'] % 10 == 0) {


        newLabels.add(FlutterSliderHatchMarkLabel(
            percent: label['percent'],
            label: Container(
              height: label['size'],
              width: 15,
              child: Stack(
                overflow: Overflow.visible,
                children: <Widget>[
                  Positioned(
                    top: 0,
                    bottom: 0,
                    left: 0,
                    right: 0,
                    child: Center(
                        child: Container(
                          width: 2,
                          color: Color(0xff999999).withOpacity(opacity),
                        )),
                  ),
                  Positioned(
                    bottom: -20,
                    left: 0,
                    right: 0,
                    child: Center(
                        child: Container(
                          width: 40,
                          child: Text(
                            (label['percent']).toStringAsFixed(0),
                            softWrap: false,
                            style: TextStyle(fontSize: 13, color: Color(0xffeeeeee).withOpacity(opacity)),
                          ),
                        )),
                  ),
                  Positioned(
                    top: 0,
                    bottom: 0,
                    left: 0,
                    right: 0,
                    child: Center(
                      child: Container(
                        height: 25,
                        width: 10,
                        color: Color(0xff222222),
                        child: Center(
                            child: Text(
                              (label['percent'] / 10).toStringAsFixed(0),
                              softWrap: false,
                              style: TextStyle(fontSize: 13, color: Color(0xffeeeeee).withOpacity(opacity)),
                            )),
                      ),
                    ),
                  ),
                ],
              ),
            )));
      } else if(label['percent'] % 2 == 0) {
        newLabels.add(FlutterSliderHatchMarkLabel(
            percent: label['percent'],
            label: Container(
              height: label['size'],
              width: 3,
              child: Stack(
                children: <Widget>[

                  Positioned(
                    top: 0,
                    bottom: 0,
                    left: 0,
                    right: 0,
                    child: Center(
                        child: Container(
                          width: 1,
                          color: Color(0xff777777).withOpacity(opacity),
                        )),
                  )
                ],
              ),
            )));
      }

      newLabels.add(FlutterSliderHatchMarkLabel(
          percent: label['percent'],
          label: Container(
            height: label['size'],
            width: 3,
            child: Stack(
              children: <Widget>[
                Positioned(
                  top: 0,
                  left: 0,
                  right: 0,
                  child: Container(
                    width: 2,
                    height: 1,
                    color: Color(0xff777777).withOpacity(opacity),
                  ),
                ),
                Positioned(
                  bottom: 0,
                  left: 0,
                  right: 0,
                  child: Container(
                    width: 2,
                    height: 1,
                    color: Color(0xff777777).withOpacity(opacity),
                  ),
                ),
                Positioned(
                  top: 0,
                  bottom: 0,
                  left: 0,
                  right: 0,
                  child: Center(
                      child: Container(
                        width: 2,
                        height: 1,
                        color: Color(0xff777777).withOpacity(opacity),
                      )),
                )
              ],
            ),
          )));

    }
    return newLabels;
  }
}