Flutter 圆角圆形图片效果图集

总结了一下这个flutter圆形图片效果的做法。需要的可以参考一下。

class _RoundImageLayoutState extends State<RoundImageLayout> {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("测试图片"),
      ),
      body: new Column(
        children: <Widget>[
//          new Image.asset(
//            "image/lake.jpg",
//            width: 20,
//            height: 20,
//          ),
          ///CircleAvatar  圆形图像
          new Container(
//      new CircleAvatar(
//          backgroundImage: new AssetImage('images/p_box1.png'),
//      backgroundColor: Colors.transparent,
//      radius: 10.0,),),

            width: 100,
            height: 100,
            child: CircleAvatar(
//              backgroundColor: Colors.red,
//              foregroundColor: Colors.green,
              radius: 10.0,
//            minRadius: 2,
//            maxRadius: 2,
              backgroundImage: AssetImage("image/lake.jpg"),
//              child: new Image.asset(
//                "image/lake.jpg",
//                width: 95,
//                height: 95,
//                fit: BoxFit.cover,
//              ),
            ),
          ),
          ///ClipOval  第三个
          new Container(
            child: new ClipOval(
              clipBehavior: Clip.antiAliasWithSaveLayer,
              child: new Image.asset(
                "image/lake.jpg",
                fit: BoxFit.cover,
                width: 50,
                height: 50,
              ),
            ),
          ),
      new Container(
        width: 100.0,
        height: 100.0,
        padding: const EdgeInsets.symmetric(horizontal: 20),
        decoration: BoxDecoration(
            border: Border.all(color: Colors.grey, width: 1.0),
            borderRadius: BorderRadius.circular(90),
//          shape: BoxShape.circle,
          image: DecorationImage(
            image: AssetImage(
                "image/ali_connors.png",
            ),
          ),
        ),
      ),
          new Container(
            padding: const EdgeInsets.symmetric(horizontal: 20),
            child: new ClipRRect(
              borderRadius: BorderRadius.only(topLeft: Radius.circular(6),topRight: Radius.circular(6),bottomLeft: Radius.zero,bottomRight:Radius.zero),
              child: new Image.asset( "image/lake.jpg",),
            ),
          ),
      new Container(
        width: 80.0,
        height: 80.0,
        decoration: BoxDecoration(
//          backgroundBlendMode: BlendMode.colorBurn,
          shape: BoxShape.rectangle,
          color: Colors.green,
//          border: Border(top: BorderSide(width: 2,color: Colors.red)),
          borderRadius: BorderRadius.circular(10.0),
          image: DecorationImage(
            fit: BoxFit.fill,  //这个地方很重要，需要设置才能充满
            image: AssetImage("image/lake.jpg",
            ),
          ),
        ),
      ),
        ],
      ),
    );
  }
}