Alan Bosco
Alan Bosco

Reputation: 837

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

Upvotes: 5

Views: 8701

Answers (1)

Claudio Redi
Claudio Redi

Reputation: 68440

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

Upvotes: 9

Related Questions