如何在flutter中给CircleAvatar赋予渐变效果？

Question

如何在 flutter 中为

CircleAvatar();

小部件赋予渐变颜色？

Answer 1

Container(
  decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  gradient: LinearGradient(
                  colors: [
                          color1,
                          color2,
                  ],
                  begin: Alignment.bottomLeft,
                  end: Alignment.topRight
                  )
              ),
              child: CircleAvatar(
                  child: Text(
                        'MS',
                        style: TextStyle(
                          color: Colors.white
                        )
                  ),
                  backgroundColor: Colors.transparent
              )
    )

Answer 2

通过使用 Container 作为 CircleAvatar 的子级并向 Container 赋予 gradient 属性，我能够实现我正在寻找的功能。

 CircleAvatar(
        radius: 40,
        child: Container(
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            gradient: LinearGradient(
              colors: [
                color1,
                color2,
              ],
            ),
          ),
        ),
      ),

Answer 3

首先，我用

circularAvatar

包裹

container

，然后将

shape

和

 gradient colors

赋予

container

，将

transparent color

赋予

circularAvatar

 child: Container(
              decoration: BoxDecoration(
                gradient:
                    LinearGradient(colors: [Colors.red, Colors.orange]),
                shape: BoxShape.circle,
              ),
              child: CircleAvatar(
                backgroundColor: Colors.transparent,
                radius: 45,
                
              ),
            ),