Reputation: 1009
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()
),
),
Upvotes: 2
Views: 1233
Reputation: 1469
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()
),
),
Upvotes: 1