Flutter show a container in center of stack - flutter

Question

I am using stack to show a container but there is one issue i need to show the small date container in mid of stack.
My code
Widget _buildListItem(int index) {
double statusBarHeight = MediaQuery.of(context).padding.top;
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;
return ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(20)),
child: Container(
margin: EdgeInsets.only(left: width * 0.1),
child: Stack(
children: <Widget>[
Container(
width: width * 0.6,
height: height * 0.17,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
'assets/images/1.jpg',
),
fit: BoxFit.fill,
),
),
),
Padding(padding: EdgeInsets.only(top: height * 0.17),
child: Container(
height: height * 0.15,
color: Colors.white,
width: MediaQuery.of(context).size.width * 0.6,
child: Padding(
padding: const EdgeInsets.only(top: 7, bottom: 7, left: 7, right: 7),
child: Row(
children: <Widget>[
Column(crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
_events[index]['name'],
style: TextStyle(
color : Color(0xff000000),
fontWeight: FontWeight.bold,
fontSize: 17
),
),
Text(
_events[index]['sentence'],
style: TextStyle(
color : Color(0xff808080),
fontSize: 15
),
textAlign: TextAlign.left,
),
Text(
'${_events[index]['date']} ${_events[index]['month']} ${_events[index]['year']}',
style: TextStyle(
color : Color(0xff808080),
fontSize: 15
),
textAlign: TextAlign.left,
),
],),
Spacer(),
Icon(Icons.favorite_border, size: 20, color : Color(0xff808080),),
],
),
),
),)
],
),
),
);
}
}
Here is the output of my code
I need something this in middle of image and content
Also one thing is there is any icon in flutter or we can add borders colors in the heart as in the second image heart icon?

Answer 1

Positioned widget helps you position the item which is in stack.
Use the Positioned.fill with Align inside a Stack:
Stack(
children: <Widget>[
Positioned.fill(
child: Align(
alignment: Alignment.centerRight,
child: ....
),
),
],
),

Answer 2

Positioned(
left:10,
right:0,
top:height * 0.14,
child:Container(
height:height *0.05
padding: EdgeInsets.symmetric(horizontal: 15,vertical: 10),
decoration:BoxDecoration(
borderRadius:BorderRadius.circular(15),
color:Colors.white
),
child:Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children:<Widget>[
Text("8"),
Text("Jun")
]
)
)
)
add this to your stack as last child so its above other widgets and icon is Icons.favorite