flutter编写一个可拖动的圆形进度条，举一个实例

在 Flutter 中，我们可以使用 `Draggable` 和 `CircleAvatar` 或者自定义一个带有 `GestureDetector` 的 CustomPaint 组件来创建可拖动的圆形进度条。下面是一个使用 `Draggable` 和 `CircleAvatar` 的简单示例：

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart'; // 导入 CustomPaint

class draggableCircularProgress extends StatefulWidget {
  @override
  _draggableCircularProgressState createState() => _draggableCircularProgressState();
}

class _draggableCircularProgressState extends State<draggableCircularProgress> {
  double progress = 0;
  Offset position;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanUpdate: (DragUpdateDetails details) {
        setState(() {
          position = details.globalPosition;
        });
      },
      child: Draggable(
        feedback: Container(color: Colors.grey.withOpacity(0.2)),
        child: Stack(
          children: [
            CircleAvatar(
              radius: 40,
              color: Colors.blue,
              child: Center(child: Text("$progress%")),
            ),
            Container(
              height: 40,
              width: 40,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.white,
              ),
              child: Center(
                child: Transform.translate(
                  offset: position - Offset.zero,
                  child: Container(
                    width: 40,
                    height: 40,
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      border: Border.all(width: 2, color: Colors.black),
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个圆形的 `CircleAvatar`，并在其上添加了一个可拖动的小圈作为进度指示。当手指在屏幕上移动时，`onPanUpdate` 函数会被触发，更新 `position`，进而带动小圈的位置变化，模拟进度条的滑动。