New to flutter and trying to recreate a website but cant figure out how to have text over my card and include the full width opacity behind the text. I also tried to add rounded corners to the card but I'm noticing that there are still white sharp corners. any advice would be greatly appreciated!.
Card(
elevation: 5,
child: Container(
height: 300,
width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
image: DecorationImage(
fit: BoxFit.cover,
image: AssetImage(urlImage),
colorFilter: ColorFilter.mode(
Colors.black.withOpacity(0.1), BlendMode.softLight),
)),
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Expanded(
child: Align(
alignment: Alignment.bottomCenter,
child: Text(
title,
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 24,
backgroundColor: Colors.black.withOpacity(0.6),
),
),
),
),
),
),
margin: EdgeInsets.only(left: 10.0, right: 10.0, top: 5.0),
);