如何在 flutter 中将 CircleAvatar 的一半涂上一种颜色，另一半涂上另一种颜色

Question

我想将圆形头像的一半颜色为深蓝色，另一半颜色为浅蓝色。我的意思是正好一半。我怎样才能实现这个目标？

就像他们一样 -

我尝试过这个，但没有成功-

Container(
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [
                Color(0xFF040663),
                Color(0xFF434599),
              ],
            ),
          ),
          child: CircleAvatar(
            backgroundColor: Colors.transparent,
            radius: MediaQuery.of(context).size.height*0.045,
            child: Icon(
              icon,
              size: size,
              color: Colors.white,
            ),
          ),
        ),

有人可以告诉我如何编辑此代码，或者告诉我一种实现此目的的新方法吗？

Answer 1

你快到了。您需要在渐变中重复一种颜色，并使用“stops”属性来获得锐利的渐变。

return Container(
      padding: const EdgeInsets.all(8.0),
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [
            Colors.purple,
            Colors.purple,
            Colors.blue,
          ],
          stops: [
            0, 0.5, 0.5
          ]
        ),
      ),
      child: Icon(
        Icons.camera,
        size: 32,
        color: Colors.white,
      ),
    );

结果如下：

有关更多信息，请参阅 Stops 属性文档：https://api.flutter.dev/flutter/painting/Gradient/stops.html