flutter problem: How to fill collor on card? - flutter

Question

I want to fill red color abbove my card image and below text as a showing in screen shot but problem is that color not being cerculer I mentioned in my Screenshot.
This is my card code.
ListView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: mpListData.length,
itemBuilder: (context, index) {
return isMPLoading
? SingleChildScrollView(
child: Column(
children: [
CardSkeleton(),
CardSkeleton(),
CardSkeleton(),
],
),
)
: Padding(
padding: const EdgeInsets.only(
left: 12,
right: 12,
bottom: 15,
),
child: SizedBox(
height:
mpListData[index]['name'] == "Starter" ? 160 : 167,
width: MediaQuery.of(context).size.width,
child: Stack(
alignment: Alignment.center,
children: [
Stack(
children: [
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
image: DecorationImage(
image: mpListData[index]['name'] ==
"Starter"
? AssetImage(
"assets/light_green_card.png")
: AssetImage("assets/white_card.png"),
fit: BoxFit.fill,
),
),
height: 142,
width: MediaQuery.of(context).size.width,
child: Container(
color: Colors.red.withOpacity(0.25),
child: Container(
margin: const EdgeInsets.only(top: 10),
padding: EdgeInsets.only(
right: 15, left: 15, top: 8),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.only(
top: 20.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
"${mpListData[index]['name']!.length <= 10 ? mpListData[index]['name'] : mpListData[index]['name']!.substring(0, 10) + ".."} Package",
style: TextStyle(
fontSize: tSize18,
fontWeight:
FontWeight.w500),
),
SizedBox(
height: 6,
),
Text(
"Best package for price",
style: TextStyle(
fontSize: tSize14,
),
),
SizedBox(
height: 13,
),
Text(
mpListData[index]['name'] ==
"Starter"
? "FREE"
: "\$99 USD",
style: TextStyle(
fontSize: tSize27,
fontWeight:
FontWeight.w500),
),
],
),
),
Padding(
padding: EdgeInsets.only(bottom: 8),
child: Image.asset(
mpListData[index]['name'] ==
"Starter"
? 'assets/onaa.png'
: mpListData[index]['name'] ==
"Explorer"
? 'assets/white_ex.png'
: 'assets/white_champ.png',
height: 114,
width: 114,
),
)
],
),
),
),
),
mpListData[index]['name'] == "Starter"
? Container()
: Positioned(
top: 0,
right: 15,
child: Container(
decoration: BoxDecoration(
color: Color(0xff158998),
borderRadius: BorderRadius.all(
Radius.circular(8)),
),
width: 130,
height: 22,
child: Center(
child: Text(
'Upcoming Plans',
style: TextStyle(
color: Colors.white,
fontSize: tSize14,
),
),
),
),
),
],
),
Positioned(
width: 18,
bottom: 0,
child: Center(
child: Container(
height: 15,
width: 15,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(50),
),
child: Theme(
data: ThemeData(
//here change to your color
unselectedWidgetColor: Color(0xff3a99a4),
),
child: Radio(
activeColor: Colors.green,
overlayColor:
MaterialStateProperty.all(Colors.red),
value: index,
groupValue: 0,
onChanged: (int? value) {
// setState(() {
// isSelect = value!;
// });
},
),
),
),
),
),
],
),
),
);
}),

Answer 1

Wrap with ClipRRect with providing borderRadius as #Dima Rostopira commented.
itemBuilder: (context, index) {
return ClipRRect(
borderRadius: ,
child: isMPLoading?
If you like to have only for Cart, wrap card Widget with ClipRRect.