向 CircleAvatar 添加颜色叠加答案

【问题标题】：Add color overlay to CircleAvatar向 CircleAvatar 添加颜色叠加
【发布时间】：2021-04-17 20:49:32
【问题描述】：

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

我的圆圈是这样完成的： const CircleAvatar(radius: 30, backgroundColor: Colors.grey)

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

【问题讨论】：

标签： flutter user-interface dart

【解决方案1】：

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

【讨论】：

【解决方案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}")),
    ],
  ),
),

【讨论】：