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

8,913 阅读1分钟

Flutter 里面实现实现圆形剪切有3种方法:

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

ClipOval 只能剪切图片,CircleAvatarContainer 能适配复杂视图,比如这样:

下面几种方法我挨个把代码贴一下:

1. 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,
        ),
      ),
    );
  }
}

2. 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,
        ),
      ),
    );
  }
}

3. 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,
            ),
          ),
        ),
      ],
    );
  }
}