Flutter - 3种方式实现圆形背景，圆形头像-蒲公英云

Flutter - 3种方式实现圆形背景，圆形头像

一、Flutter 里面实现实现圆形剪切有3种方法：

Container decoration 装饰器里设置圆形+圆角
ClipOval
CircleAvatar

ClipOval 只能剪切图片，CircleAvatar 和 Container 能适配复杂视图,比如这样：
在这里插入图片描述
第一种方法 Container：

class EE extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 350,
      height: 350,
      alignment: Alignment.center,
      decoration: BoxDecoration(
          image: DecorationImage(image: AssetImage(
              "assets/icons/icon_3.png"),
            fit: BoxFit.cover
          ),
          borderRadius: BorderRadius.circular(1000)),
      child: Text(
        "AAAAAAAAAA",
        style: TextStyle(
          fontSize: 30,
          color: Colors.lightGreenAccent,
        ),
      ),
    );
  }
}

第二种方式 CircleAvatar：

class FF extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CircleAvatar(
      backgroundImage: AssetImage(
        "assets/icons/icon_3.png",
      ),
      maxRadius: 200,
      child: Text(
        "AAAAAAAAAA",
        style: TextStyle(
          fontSize: 30,
          color: Colors.lightGreenAccent,
        ),
      ),
    );
  }
}

第三种方式 ClipOval:

class DD extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        ClipOval(
          child: Container(
            child: Image(
              image: AssetImage("assets/icons/icon_2.jpg"),
              height: 300,
              width: 300,
              fit: BoxFit.cover,
            ),
          ),
        ),
      ],
    );
  }
}