How to do Rounded Corners Image in Flutter

0 votes

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,
    );
  }

Mar 1, 2023 in Android by Ashwini
• 5,430 points
1,805 views

1 answer to this question.

0 votes

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.

answered Mar 1, 2023 by vishalini

Related Questions In Android

0 votes
1 answer

How can I add a border to a widget in Flutter?

To add a border to a widget ...READ MORE

answered Mar 1, 2023 in Android by vishalini
11,671 views
0 votes
1 answer

How to create number input field in Flutter?

Yes, Flutter has a built-in widget called ...READ MORE

answered Mar 1, 2023 in Android by vishalini
8,183 views
0 votes
1 answer

How do I use hexadecimal color strings in Flutter?

To use a hexadecimal color string in ...READ MORE

answered Mar 1, 2023 in Android by vishalini
12,937 views
0 votes
1 answer

How do I disable a Button in Flutter?

To disable a button in Flutter, you ...READ MORE

answered Mar 10, 2023 in Android by vinayak
14,990 views
0 votes
1 answer

How do I give text or an image a transparent background using CSS?

In order to ensure that your image ...READ MORE

answered Feb 8, 2022 in HTML by Rahul
• 9,680 points
1,241 views
0 votes
1 answer

How can I remove the debug banner in Flutter?

The debug banner in Flutter can be ...READ MORE

answered Mar 1, 2023 in Android by vishalini
790 views
0 votes
1 answer

How to add a ListView to a Column in Flutter?

To add a ListView to a Column ...READ MORE

answered Mar 9, 2023 in Android by pooja
15,897 views
0 votes
1 answer

How to deal with unwanted widget build?

There are a few strategies that you ...READ MORE

answered Mar 10, 2023 in Android by vinayak
3,207 views
0 votes
1 answer

How do I Set Background image in Flutter?

To set a background image in Flutter, ...READ MORE

answered Mar 10, 2023 in Android by vinayak
39,981 views
0 votes
1 answer

How to change package name in flutter?

Yes, you can change the package name ...READ MORE

answered Mar 1, 2023 in Android by vishalini
3,265 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP