Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to align card view center in flutter

I have designed this layout in the flutter. I want to move the card into the center (horizontally and vertically). Card width and height should be wrap content.

Does anyone know how to achieve this ?

class ContactUsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("CONTACT US"),
          backgroundColor: Colors.redAccent,
        ),
        body: Card(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Container(
                child: Text("Need Help ?",
                    style: TextStyle(
                        fontWeight: FontWeight.bold,
                        color: Colors.black,
                        fontSize: 22)),
              ),
              Container(
                margin: EdgeInsets.only(top: 10),
                child: Text("Max MagiX,",
                    style: TextStyle(
                        fontWeight: FontWeight.normal,
                        color: Colors.black,
                        fontSize: 16)),
              ),
              Container(
                child: Text("San Francisco,",
                    style: TextStyle(
                        fontWeight: FontWeight.normal,
                        color: Colors.black,
                        fontSize: 16)),
              ),
              Container(
                child: Text("CA, USA",
                    style: TextStyle(
                        fontWeight: FontWeight.normal,
                        color: Colors.black,
                        fontSize: 16)),
              ),
              Container(
                margin: EdgeInsets.only(top: 10),
                  child: Row(
                children: <Widget>[
                  Icon(Icons.phone),
                  Container(
                    margin: EdgeInsets.only(left: 2),
                    child: Text("+1 8002 8002 82",
                        style: TextStyle(
                            fontWeight: FontWeight.normal,
                            color: Colors.black,
                            fontSize: 16)),
                  )
                ],
              )),
              Container(
                  margin: EdgeInsets.only(top: 10),
                  child: Row(
                    children: <Widget>[
                      Icon(Icons.email),
                      Container(
                        margin: EdgeInsets.only(left: 2),
                        child: Text("[email protected]",
                            style: TextStyle(
                                fontWeight: FontWeight.normal,
                                color: Colors.black,
                                fontSize: 16)),
                      )
                    ],
                  ))
            ],
          ),
        ));
  }
}

enter image description here

like image 821
N Sharma Avatar asked Jan 20 '26 10:01

N Sharma


1 Answers

Change the parameter value of crossAxisAlignment to CrossAxisAlignment.center, then add mainAxisAlignment: MainAxisAlignment.center and mainAxisSize: MainAxisSize.min

like image 129
Oliver Atienza Avatar answered Jan 23 '26 01:01

Oliver Atienza



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!