CODEWITHSUNDEEP
flutter
mohammad
mohammad

Reputation: 2900

Image as child in Container don't follow Container border

the problem is that image edge is visible and don't follow the border that I set for Container.

Container(
              decoration: BoxDecoration(
                color: Colors.grey[900],
                borderRadius: BorderRadius.all(Radius.circular(24.0)),
              ),
              child: Image(
                image: NetworkImage(thisSongInfo.albumImageUrl),
                fit: BoxFit.cover,
                color: Colors.black87,
                colorBlendMode: BlendMode.darken,
              ),
),

the fit: BoxFit.contain fix the edge problem but this not cover the container

Upvotes: 2

Views: 665

Answers (2)

James Casia
James Casia

Reputation: 1527

Try wrapping the image with a ClipRRect, more info on the docs here https://api.flutter.dev/flutter/widgets/ClipRRect-class.html ,

Try this code:

Container(
                      decoration: BoxDecoration(
                        color: Colors.grey[900]
                      ),
                      child: ClipRRect(
                          borderRadius: BorderRadius.all(Radius.circular(24.0)),
                          child: Image(
                            image: NetworkImage(thisSongInfo.albumImageUrl),
                            fit: BoxFit.cover,
                            color: Colors.black87,
                            colorBlendMode: BlendMode.darken,
                          )),
                    )

Upvotes: 2

Ankit Mahadik
Ankit Mahadik

Reputation: 2435

if you want rounded corner image you can use "ClipRRect" widget

ClipRRect(
              borderRadius: BorderRadius.circular(10),
              child:  Image(
                image: NetworkImage(thisSongInfo.albumImageUrl),
                fit: BoxFit.cover,
                color: Colors.black87,
                colorBlendMode: BlendMode.darken,
              ),
         )

Upvotes: 0

Related Questions