Several implementations of Flutter rounded pictures

Several implementations of Flutter rounded pictures

---

The rounded corner picture is a common setting in APP development. How do we implement it in Flutter?

Use ClipRRect to achieve

The first way is to use ClipRRect directly, which is very simple:

ClipRRect(
  borderRadius: BorderRadius.circular(10),
  child: Image.asset('assets/images/task_icon.jpg'),
),

Use Card to achieve

The second way, use Card to achieve:

Card(
  shape: RoundedRectangleBorder(
      borderRadius: BorderRadiusDirectional.circular(10)),
  clipBehavior: Clip.antiAlias,
  child: Image.asset("assets/images/task_icon.jpg",
    width: double.maxFinite,
  ),
),

Use Container's decoration implementation

In the above two methods, you can set the rounded image normally, but what if we want the image as the background and overlay other widgets on the background?

At this time, you can use the decoration of Container to achieve:

Container(
          decoration: ShapeDecoration(
            image: new DecorationImage(
              //设置背景图片
              image: AssetImage("assets/images/task_icon.jpg"),
              fit: BoxFit.cover,
            ),
            //设置圆角
            shape:RoundedRectangleBorder(borderRadius: BorderRadiusDirectional.circular(20)),
          ),
          //设置边距
          margin: EdgeInsets.only(top: 16, left: 20, right: 20),
          child: new Card(
            color: Colors.transparent,
         ……
)

---

**PS: For more exciting content, please check --> "Flutter Development"
**PS: For more exciting content, please check --> "Flutter Development"
**PS: For more exciting content, please check --> "Flutter Development"