Alphabet

Requested in #54 issue

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> labels = [];
  List<Map<dynamic, dynamic>> mLabels = [];
  double llv = 3;
  double uuv = 18;

  void initState() {
    super.initState();

    for (int i = 0; i < 26; i++) {
      mLabels
          .add({"percent": i * 100 / 25, "label": String.fromCharCode(i + 65)});
    }
    labels =
        updateLabels(llv * 100 / mLabels.length, uuv * 100 / mLabels.length);
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
              height: 110,
              padding: EdgeInsets.all(20),
              child: FlutterSlider(
                  rangeSlider: true,
                  min: 0,
                  max: labels.length.toDouble(),
                  values: [llv, uuv],
                  handler: FlutterSliderHandler(
                      decoration: BoxDecoration(),
                      child: Container(
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(3),
                            color: Color(0xffFBCA45),
                            border:
                                Border.all(color: Colors.deepOrange, width: 1)),
                      )),
                  rightHandler: FlutterSliderHandler(
                      decoration: BoxDecoration(),
                      child: Container(
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(3),
                            color: Color(0xffFBCA45),
                            border:
                                Border.all(color: Colors.deepOrange, width: 1)),
                      )),
                  handlerWidth: 10,
                  handlerHeight: 30,
                  touchSize: 20,
                  tooltip: FlutterSliderTooltip(
                      disabled: true,
                      boxStyle: FlutterSliderTooltipBox(
                          decoration: BoxDecoration(
                              color: Colors.orangeAccent,
                              border: Border.all(
                                  color: Colors.black54, width: 1)))),
                  hatchMark: FlutterSliderHatchMark(
                    labels: labels,
                    labelsDistanceFromTrackBar: 1.2,
                    linesAlignment: FlutterSliderHatchMarkAlignment.right,
                    density: 0.5,
                  ),
                  trackBar: FlutterSliderTrackBar(
                      inactiveTrackBar: BoxDecoration(
                        borderRadius: BorderRadius.circular(30),
                      ),
                      activeTrackBarHeight: 22,
                      inactiveTrackBarHeight: 18,
                      activeTrackBar: BoxDecoration(
                        color: Colors.deepOrange,
                      )),
                  onDragging: (a, b, c) {
                    setState(() {
                      llv = b;
                      uuv = c;
                      labels = updateLabels(
                          b * 100 / mLabels.length, c * 100 / mLabels.length);
                    });
                  },
                  onDragCompleted: (a, b, c) {
                    setState(() {
                      labels = updateLabels(
                          b * 100 / mLabels.length, c * 100 / mLabels.length);
                    });
                  }),
            ),
    );
  }

  List<FlutterSliderHatchMarkLabel> updateLabels(
      double leftPercent, double rightPercent) {
    List<FlutterSliderHatchMarkLabel> newLabels = [];
    for (Map<dynamic, dynamic> label in mLabels) {
      if (label['percent'] >= leftPercent && label['percent'] <= rightPercent) {
        newLabels.add(FlutterSliderHatchMarkLabel(
            percent: label['percent'],
            label: Text(
              label['label'],
              style: TextStyle(
                  color: Colors.white,
                  fontSize: 14,
                  fontWeight: FontWeight.bold),
            )));
      } else {
        newLabels.add(FlutterSliderHatchMarkLabel(
            percent: label['percent'],
            label: Text(
              label['label'],
              style: TextStyle(
                  color: Colors.grey,
                  fontSize: 10,
                  fontWeight: FontWeight.normal),
            )));
      }
    }
    return newLabels;
  }
}