How to make a Card lies between Body in flutter

0

enter image description here

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),
            ),
          )
        ],
      ),
    ),
  )
);
}
flutter
flutter-layout
asked on Stack Overflow May 18, 2020 by Liew Syet Chau • edited May 19, 2020 by halfer

2 Answers

2

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", ),
        ),)
        )
      ],
      )

This is the result

answered on Stack Overflow May 18, 2020 by Constantin N.
1

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

answered on Stack Overflow May 18, 2020 by Wail Hayaly

User contributions licensed under CC BY-SA 3.0