dart 如何在Flutter中为CircleAvatar给予梯度?

fzsnzjdm  于 2023-09-28  发布在  Flutter
关注(0)|答案(3)|浏览(104)

如何在flutter中给予CircleAvatar();小部件一个渐变色?

fykwrbwg

fykwrbwg1#

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
              )
    )
50few1ms

50few1ms2#

通过将Container作为CircleAvatar的子项,并将gradient属性赋予Container,我实现了我想要的功能。

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

62lalag43#

首先,我用Container Package CircleAvatar,并给予形状渐变色赋予Container,将透明色赋予CircleAvatar

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

相关问题