How to center a Text (vertical and horizontal) in a given space of a card with Flutter?-CodePudding

This is a flutter code and i cant find a way to center the text in the white space. Does anybody know how to center the text of the code in the white space? I have tried to wrap the text with a container and set the textalign to center but nothing worked.

Card(
        margin: EdgeInsets.only(left: 24),
      elevation: 12,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(12),
      ),
      child: Container(
        height: MediaQuery.of(context).size.height/4,
        width: MediaQuery.of(context).size.width-48,
        child:  Stack(
          children:[
          Column(
            mainAxisAlignment: MainAxisAlignment.start,
              children: const [
                 Text(
                        'My',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 28,
                          color: Colors.black,
                        ),
                      ),
                        Text(
                        'Text',
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 28,
                          color: Colors.black,
                        ),
                      ),
              ],
          ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    Ink(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.only(
                          topRight: Radius.circular(12), 
                          bottomRight: Radius.circular(12),
                        ),
                        color: Colors.blueAccent,
                      ),
                      width: 120,
                      height: MediaQuery.of(context).size.height/4,
                      child: Align(
                        alignment: Alignment.center,
                        child: Icon(
                          Icons.myicon,
                          size: 60,
                        ),
                      ),
                    ),
                  ],
                ),
            InkWell(
              onTap: () => {},
            ),
          ],
        ),
      ),
      ),

CodePudding user response：

@rew, welcome to stackoverflow. have you tried wrapping the text widget by "Center"

  Center(
       child:Text(
                    'My',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 28,
                      color: Colors.black,
                    ),
                  ),

CodePudding user response：

Try this

Card(
  margin: EdgeInsets.only(left: 24),
  elevation: 12,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(12),
  ),
  child: Container(
    height: MediaQuery.of(context).size.height/4,
    width: MediaQuery.of(context).size.width-48,
    child:  Stack(
      children:[
        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: const [
            Center(
              child: Text(
                'My',
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 28,
                  color: Colors.black,
                ),
              ),
            ),
            Center(
              child: Text(
                'Text',
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 28,
                  color: Colors.black,
                ),
              ),
            ),
          ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            Ink(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.only(
                  topRight: Radius.circular(12),
                  bottomRight: Radius.circular(12),
                ),
                color: Colors.blueAccent,
              ),
              width: 120,
              height: MediaQuery.of(context).size.height/4,
              child: Align(
                alignment: Alignment.center,
                child: Icon(
                  Icons.myicon,
                  size: 60,
                ),
              ),
            ),
          ],
        ),
        InkWell(
          onTap: () => {},
        ),
      ],
    ),
  ),
),