CODEWITHSUNDEEP
imageflutter
SilkeNL
SilkeNL

Reputation: 540

Flutter ClipRRect not working because of child Image height and width?

I wish to make my logo with rounded corners and did that with ClipRRect from Flutter. I also wanted a set height and width to my image. These together make it seem if the image was never rounded. When I remove the set height and width from the image, ClipRRect makes the image rounded, but very large.

The code:

         body: Container(
            padding: EdgeInsets.all(20),
            child: Column(children: [
              ClipRRect(
                borderRadius: BorderRadius.circular(15.0),
                child: Image.asset('assets/images/logo.png', width: 300, height: 150),
              ),
            ])));

Thank you, all help is appreciated.

Upvotes: 3

Views: 7879

Answers (1)

Dinesh Nagarajan
Dinesh Nagarajan

Reputation: 1243

Clear padding for the container and use fit property for the image widget.

Example

    ClipRRect(
      borderRadius: BorderRadius.circular(75.0),
      child: Image.network(
        'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80',
        height: 150.0,
        width: 150.0,
        fit: BoxFit.cover,
      ),
    ),

Update for Container with column widget tree:

Container(
    child: Column(
      children: [
        ClipRRect(
          borderRadius: BorderRadius.circular(75.0),
          child: Image.network(
            'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80',
            height: 150.0,
            width: 150.0,
            fit: BoxFit.cover,
          ),
        ),
      ],
    ),
  ),

Upvotes: 10

Related Questions