如何在 flutter 中居中对齐卡片内的小部件

Question

im stuck somewhere in my design, Im trying to put 2 containers that have further few Childs and they are all wrapped inside a card widget. Now the problem im facing is that I want to align my widgets at an exact center position but when I do it on one screen size, it disperses on the other screen size and vice versa. Im not able to make a generic design for this part to be able to work on all types of screen sizes. Below are the attached screenshots for reference.

if you see the thumbs up and gift icon, they're not aligned exactly in the middle of the greyed area of the container. I want them exactly to be centered. Right now if I center them on one screen, they overflow on other and vice versa. Below is the code for these parts.

 //code for card 1, i-e: 98/100 card
SizedBox(
                height: 193,
                width: 180,
                child: Card(
                  color: Color(0xfffaf5f5),
                  child: Column(
                    children: <Widget>[
                      Container(
                        width: MediaQuery.of(context).size.width,
                        height: MediaQuery.of(context).size.height * 0.16,
                        color: Colors.white,
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            Text(
                              '98',
                              style: TextStyle(
                                fontFamily: 'Karla',
                                fontSize: 60,
                                fontWeight: FontWeight.bold,
                                color: Color(0xff54c19f),
                              ),
                            ),
                            Text(
                              '/100',
                              style: TextStyle(
                                fontFamily: 'Karla',
                                fontSize: 20,
                                fontWeight: FontWeight.bold,
                                color: Color(0xff75777d),
                              ),
                            ),
                          ],
                        ),
                      ),
                      Container(
                        alignment: Alignment.center,
                        color: Colors.transparent,
                        width: MediaQuery.of(context).size.width,
                        margin: EdgeInsets.only(top: 7),
                        child: Image.asset(
                          'images/pouce-ok.png',
                          width: 30,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              //code for card 2, i-e: 129pts card
              SizedBox(
                height: 193,
                width: 180,
                child: Card(
                  color: Color(0xfffaf5f5),
                  child: Column(
                    children: <Widget>[
                      Container(
                        width: MediaQuery.of(context).size.width,
                        height: MediaQuery.of(context).size.height * 0.16,
                        color: Colors.white,
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            Text(
                              '129',
                              style: TextStyle(
                                fontFamily: 'Karla',
                                fontSize: 60,
                                fontWeight: FontWeight.bold,
                                color: Color(0xff478dd0),
                              ),
                            ),
                            Text(
                              'pts',
                              style: TextStyle(
                                fontFamily: 'Karla',
                                fontSize: 20,
                                fontWeight: FontWeight.bold,
                                color: Color(0xff75777d),
                              ),
                            ),
                          ],
                        ),
                      ),
                      Container(
                        margin: EdgeInsets.only(top: 7),
                        child: Image.asset(
                          'images/cadeaux.png',
                          width: 35,
                        ),
                      ),
                    ],
                  ),
                ),
              ),

I want them all to be centered align regardless of the screen size, any help would be appreciated, thnx in advance.

Answer 1

guys I appreciate your help but I figured it out myself after experimenting different techniques and spending heck lot if time. so basically I was looking at the wrong place in the code. I shouldn't have provided a fixed height of the card instead by using a media query in place of height property of SizedBox I did it responsive relative to all the devices. below is the code of how I did it:

//old code
SizedBox(
            height: 193,
            width: 180,
            child: Card(
              color: Color(0xfffaf5f5),
              child: Column(...

//new code
SizedBox(
            //this is the how the height should be given
            height: MediaQuery.of(context).size.height * 0.25,
            width: 180,
            child: Card(
              color: Color(0xfffaf5f5),
              child: Column(....

So that's how I have achieved it. Thankyou for your help again, Thanks:)

Answer 2

mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,

That should do it.