How to do Rounded Corners Image in Flutter

Question

I am using Flutter to make a list of information about pictures in galary. Now I want the cover image on the left to be a rounded corners picture. I did the following, but it didn’t work. Thanks!

    getItem(var subject) {
    var row = Container(
      margin: EdgeInsets.all(8.0),
      child: Row(
        children: <Widget>[
          Container(
            width: 100.0,
            height: 150.0,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(8.0)),
              color: Colors.redAccent,
            ),
            child: Image.network(
              subject['images']['large'],
              height: 150.0,
              width: 100.0,
            ),
          ),
        ],
      ),
    );
    return Card(
      color: Colors.blueGrey,
      child: row,
    );
  }

Answer 1

To make the image in your Flutter code have rounded corners, you should modify the decoration property of the Container widget that holds the image. Here's an updated version of your code that implements this:

getItem(var subject) {
    var row = Container(
      margin: EdgeInsets.all(8.0),
      child: Row(
        children: <Widget>[
          Container(
            width: 100.0,
            height: 150.0,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(8.0)),
              color: Colors.redAccent,
              image: DecorationImage(
                fit: BoxFit.cover,
                image: NetworkImage(
                  subject['images']['large'],
                ),
              ),
            ),
          ),
        ],
      ),
    );
    return Card(
      color: Colors.blueGrey,
      child: row,
    );
  }

In this updated code, the BoxDecoration for the Container includes an image property that sets the image to be displayed in the container, and a borderRadius property that sets the corner radius for the image to 8.0. The fit property of the DecorationImage is set to BoxFit.cover to ensure that the image covers the entire area of the Container.

To know more about Flutter, join our Best Flutter Course today.