How to make a Card lies between Body in flutter - flutter

Question

Anybody how to do the layout similar to the image? I am having difficulty on the CardView and it position is lies between the body. I am still consider quite new to Flutter, having some difficulty in UI part. Full code is as below:
Widget build(BuildContext context) {
return Scaffold(
extendBodyBehindAppBar: true,
appBar: PreferredSize(
preferredSize: Size.fromHeight(45.0),
child: AppBar(
automaticallyImplyLeading: false,
elevation: 0.0,
centerTitle: true,
backgroundColor: Color(0xFFED2849),
leading: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
margin: const EdgeInsets.only(left: 8.0),
child: GestureDetector(
onTap: (){
Navigator.of(context).pop(null);
},
child: Image.asset('assets/ic_user_title_back.png', width: 12.0, height: 12.0,),
),
),
],
),
title: Center(
child: Container(
child: Text(
'账号中心',
style: TextStyle(color: Color(0xFFFFFFFF), fontSize: 14),
),
),
),
actions: <Widget>[
Padding(
padding: const EdgeInsets.only(right: 8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
child: GestureDetector(
onTap: (){
//logout
},
child: Text(
'退出登陆',
style: TextStyle(color: Color(0xFFFFFFFF), fontSize: 11),
),
),
),
],
),
)
],
)
),
body: SafeArea(
top: false,
child: Material(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
flex: 3,
child: Container(
color: Color(0xFFED2849),
),
),
Expanded(
flex: 7,
child: Container(
color: Color(0xFFF1F1F1),
),
)
],
),
),
)
);
}

Answer 1

You can do this using Stack
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Stack(
// fit: StackFit.expand,
children: [
Column(
children: [
Expanded(
flex: 3,
child : Container(color: Colors.red)
),
Expanded(
flex: 7,
child: Container(
color : Colors.white)
)
]
),
Positioned(
top: MediaQuery.of(context).size.height * 0.2,
left: 20,
right: 20,
child:Card(
child: Padding(
padding : const EdgeInsets.all(16),
child: Text("Your Text here", ),
),)
)
],
)

Answer 2

Try using Stack() it will allow you to overlap several children in a simple way.