fluttertextsized-box

How to make text align to centre of a Sizedbox in Flutter


i use text inside a sizedbox in flutter and the text is sticked to the top of the box how can i put the text in the middle of the box.

child: Container(
                width: 240.0,
                height: 42.0,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(24.0),
                  color: const Color(0xff2c2c2c),
                ),
                child: SizedBox(
                  child: Text(
                    'SIGN UP',
                    style: TextStyle(
                      fontFamily: 'Arial',
                      fontSize: 18,
                      color: Colors.white,
                      height: 1,
                    ),
                    textAlign: TextAlign.center,
                  ),
                ),
              ),

Solution

  • Wrap the Text in a Center widget

       child: Container(
              width: 240.0,
              height: 42.0,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(24.0),
                color: const Color(0xff2c2c2c),
              ),
              child: Center(
                child: Text(
                  'SIGN UP',
                  style: TextStyle(
                    fontFamily: 'Arial',
                    fontSize: 18,
                    color: Colors.white,
                    height: 1,
                  ),
                  textAlign: TextAlign.center,
                ),
              ),
            ),
    

    Also, as far I can tell, you can remove the SizedBox widget, This is the result

    enter image description here