Flutter 圆形图片

实现方式一:
通过borderRadius 属性实现. 半径为宽度的一半.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("ImageDemo"),
        ),
        body: MyHome(),
      ),
    );
  }
}
class MyHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: Container(
            height: 200,
            width: 200,
            decoration: BoxDecoration(
              color: Colors.red,
              border: Border.all(width: 3.0, color: Colors.yellow),
              borderRadius: BorderRadius.all(Radius.circular(100.0)),
              image: DecorationImage(
                  image: NetworkImage(
                      "https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg")),
            )));
  }
}

实现效果

WX20210831-180702.png

通过第二种方式:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("ImageDemo"),
        ),
        body: MyHome(),
      ),
    );
  }
}

class MyHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ClipOval(
          child: Image.network(
        "https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg",
        height: 200,
        width: 200,
        fit: BoxFit.cover,
      )),
    );
  }
}

实现效果

WX20210831-180648.png