main.dart

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

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: App(),
    );
  }
}

class App extends StatefulWidget {
  @override
  _AppState createState() => _AppState();
}

class _AppState extends State<App> {
  double _dragPercentage = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          WaveSlider(
            onChanged: (double dragUpdate) {
              setState(() {
                print(dragUpdate);
              });
            },
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
              'Drag percentage',
              style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
              '$_dragPercentage',
              style: TextStyle(fontSize: 16),
            ),
          )
        ],
      ),
    );
  }
}

class WaveSlider extends StatefulWidget {
  final double value;
  final double barWidth;
  final int maxBarHight;
  final double width;
  final double min;
  final double max;
  final Color barColor;
  final Color barSideColor;
  final Color inActiveColor;
  final ValueChanged<double> onChanged;

  WaveSlider(
      {this.value = 0.0,
      this.barWidth = 5.0,
      this.maxBarHight = 50,
      this.width = 60.0,
      this.min = 0.0,
      this.max = 1.0,
      this.barColor = Colors.white,
      this.barSideColor = Colors.black,
      this.inActiveColor = Colors.grey,
      @required this.onChanged});
  @override
  State<StatefulWidget> createState() => WaveSliderState();
}

class WaveSliderState extends State<WaveSlider>
    with SingleTickerProviderStateMixin {
  AnimationController positionController;

  List<int> bars = [];
  double barPosition;
  double barWidth;
  int maxBarHight;
  double width;

  int numberOfBars;

  @override
  void initState() {
    super.initState();
    barPosition = widget.value;
    barWidth = widget.barWidth;
    maxBarHight = widget.maxBarHight.toInt();
    width = widget.width;
    if (bars.isNotEmpty) bars = [];
    numberOfBars = width ~/ barWidth;
    randomNumberGenerator();
  }

  void randomNumberGenerator() {
    Random r = Random();
    for (var i = 0; i < numberOfBars; i++) {
      bars.add(r.nextInt(maxBarHight - 10) + 10);
    }
  }

  _onTapDown(TapDownDetails details) {
    var x = details.globalPosition.dx;
    print("tapped " + (x).toString());
    // print(positionController.value);
    setState(() {
      barPosition = x;
    });
     widget.onChanged(x);
  }

  void _onHorizontalDragUpdate(DragUpdateDetails details) {
    setState(() {
      barPosition = details.globalPosition.dx;
    });
  }

  @override
  Widget build(BuildContext context) {
    int barItem = 0;
    return Center(
      child: GestureDetector(
        onTapDown: _onTapDown,
        onHorizontalDragUpdate: _onHorizontalDragUpdate,
        child: Container(
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.end,
            mainAxisAlignment: MainAxisAlignment.center,
            children: bars.map((int height) {
              Color color = barItem + 1 < barPosition / barWidth
                  ? widget.barColor
                  : widget.inActiveColor;
              barItem++;
              return Row(
                children: <Widget>[
                  Container(
                    width: .1,
                    height: height.toDouble(),
                    color: widget.barSideColor,
                  ),
                  Container(
                    decoration: BoxDecoration(
                      color: color,
                      borderRadius: BorderRadius.only(
                        topLeft: const Radius.circular(1.0),
                        topRight: const Radius.circular(1.0),
                      ),
                    ),
                    height: height.toDouble(),
                    width: 4.8,
                  ),
                  Container(
                    width: .1,
                    height: height.toDouble(),
                    color: widget.barSideColor,
                  ),
                ],
              );
            }).toList(),
          ),
        ),
      ),
    );
  }
}