flutter下实现圆形图标的三种方法

  • 第一种方法:
        width: 300.0,
        height: 300.0,
        decoration: BoxDecoration(
           color: Colors.yellow,
           borderRadius: BorderRadius.circular(150),
           image: DecorationImage(
             image: NetworkImage("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201205%2F03%2F01400598djmyeczcskh2yr.jpg&refer=http%3A%2F%2Fattach.bbs.miui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627481795&t=ac64760ca020d1e2b40fefa165446e2a"),
        )
    ),
  • 第二种方法:
Container(
        child: ClipOval(
          child: Image.network( "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201205%2F03%2F01400598djmyeczcskh2yr.jpg&refer=http%3A%2F%2Fattach.bbs.miui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627481795&t=ac64760ca020d1e2b40fefa165446e2a",
              width: 300.0,
              height: 300.0,
              fit: BoxFit.cover,
          ),
        ),
      ),
  • 第三种方法
    在decoration: BoxDecoration()中进行设置,如下:
borderRadius: BorderRadius.all(Radius.circular(150))

你可能感兴趣的:(flutter下实现圆形图标的三种方法)