Radius Border for Background Image Flutter-CodePudding

I have some question, is it possible to create background image with rounded border? I have a Card widget, and I want to put an image as a background. Because i put a radius border on Card, background image is overflowing because its not affected by radius border. Thank you.

                    Card(
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(15.0),
                        ),
                        color: Colors.white,
                        child: Container(
                          decoration: BoxDecoration(
                            image: DecorationImage(
                                fit: BoxFit.fill,
                                colorFilter: ColorFilter.mode(Colors.black.withOpacity(0.3), BlendMode.dstATop),
                                image: new AssetImage("assets/images/dummy_card.jpg")
                            ),
                          ),
                          child: Column()
                        ),
                      ),

CodePudding user response：

Wrap your container in a ClipRRect

CodePudding user response：

Please refer to below code

ClipRRect(
borderRadius: BorderRadius.circular(15.0),
child: Container(
                          decoration: BoxDecoration(
                            image: DecorationImage(
                                fit: BoxFit.fill,
                                colorFilter: ColorFilter.mode(Colors.black.withOpacity(0.3), BlendMode.dstATop),
                                image: new AssetImage("assets/images/dummy_card.jpg")
                            ),
                          ),
                          child: Column()
                        ),
),