Flutter 自定义 进度拖动控件

代码如下：

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:wenshushu/style/wenshushu_style.dart';

class SeekToView extends StatefulWidget {
  final Function() onDragStart;
  final Function() onDragEnd;
  final Function() onDragUpdate;
  final Function(double value) onChange;
  double value;

  SeekToView(
      {Key key,
      this.onDragStart,
      this.onDragEnd,
      this.onDragUpdate,
      this.value,
      this.onChange})
      : super(key: key);

  @override
  _VideoProgressBarState createState() {
    return _VideoProgressBarState();
  }
}

class _VideoProgressBarState extends State<SeekToView> {
  @override
  void initState() {
    super.initState();
  }

  @override
  void deactivate() {
    super.deactivate();
  }

  void seekToRelativePosition(Offset globalPosition) {
    final box = context.findRenderObject() as RenderBox;
    final Offset tapPos = box.globalToLocal(globalPosition);
    final double relative = tapPos.dx / box.size.width;
    if (relative >= 0 && relative <= 1) {
      widget.value = relative;
      if (widget.onChange != null) {
        widget.onChange(relative);
      }
      setState(() {});
    }
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      child: Center(
        child: Container(
          height: 16,
          width: 180,
          color: Colors.transparent,
          child: CustomPaint(
            painter: _ProgressBarPainter(
              widget.value,
            ),
          ),
        ),
      ),
      onHorizontalDragStart: (DragStartDetails details) {
        if (widget.onDragStart != null) {
          widget.onDragStart();
        }
      },
      onHorizontalDragUpdate: (DragUpdateDetails details) {
        seekToRelativePosition(details.globalPosition);
        if (widget.onDragUpdate != null) {
          widget.onDragUpdate();
        }
      },
      onHorizontalDragEnd: (DragEndDetails details) {
        if (widget.onDragEnd != null) {
          widget.onDragEnd();
        }
      },
      onTapDown: (TapDownDetails details) {
        seekToRelativePosition(details.globalPosition);
      },
    );
  }
}

class _ProgressBarPainter extends CustomPainter {
  _ProgressBarPainter(
    this.value,
  );

  double value;

  @override
  bool shouldRepaint(CustomPainter painter) {
    return true;
  }

  @override
  void paint(Canvas canvas, Size size) {
    final height = 2.0;
    Paint paint = Paint();
    paint.color = WSSColors.color_DDDDDD;
    canvas.drawRRect(
      RRect.fromRectAndRadius(
        Rect.fromPoints(
          Offset(0.0, size.height / 2),
          Offset(size.width, size.height / 2 + height),
        ),
        Radius.circular(4.0),
      ),
      paint,
    );
    paint.color = WSSColors.color_5189ff;
    final double playedPart = value > 1 ? size.width : value * size.width;
    canvas.drawRRect(
      RRect.fromRectAndRadius(
        Rect.fromPoints(
          Offset(0.0, size.height / 2),
          Offset(playedPart, size.height / 2 + height),
        ),
        Radius.circular(4.0),
      ),
      paint,
    );
    paint.color = Colors.white;
    canvas.drawCircle(
      Offset(playedPart, size.height / 2 + height / 2),
      height * 3,
      paint,
    );
  }
}

效果：