向 CircleAvatar 添加颜色叠加

Question

我正在尝试向圆形小部件添加颜色叠加。 我想显示一种背景颜色，上面覆盖另一种颜色，如下所示：

我得到了这样的圆圈： const CircleAvatar(radius: 30, backgroundColor: Colors.grey)

这是我可以使用CircleAvatar或其他小部件实现的吗？

Answer 1

试试这个代码它工作正常https://pub.dev/packages/liquid_progress_indicator

Answer 2

检查这个，

// progress
double progress = 0.5;
// size of circle
double cSize = 200;
Container(
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    color: Colors.blue.shade100,
  ),
  height: cSize,
  width: cSize,
  child: Stack(
    children: [
      ClipRRect(
        borderRadius: BorderRadius.all(Radius.circular(cSize)),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            AnimatedContainer(
              duration: new Duration(milliseconds: 500),
              height: cSize * progress,
              width: cSize,
              decoration: BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.only(
                  bottomLeft: Radius.circular(cSize),
                  bottomRight: Radius.circular(cSize),
                ),
              ),
            ),
          ],
        ),
      ),
      // progress text
      Center(child: Text("${progress * 100}")),
    ],
  ),
),