how to make row text going center

Question

Hello i want to ask how to make the text going center. i have row that contain 2 text. below is my code.

Container(
        child: Padding(
          padding: const EdgeInsets.only(bottom: 60.0),
          child: Center(
            child: Row(
              children: [
                Text(
                  "Great",
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 44.0,
                      fontWeight: FontWeight.w700,
                      fontFamily: "Berlin"),
                ),
                Text(
                  "Ocean",
                  style: TextStyle(
                      color: Colors.blue,
                      fontSize: 44.0,
                      fontWeight: FontWeight.w700,
                      fontFamily: "Berlin"),
                ),
              ],
            ),
          ),
        ),
      ),

and output from that code is going like this.

how to make that row going center?

Answer 1

There are a couple of ways to achieve this but first, I would like to refactor your code. You are using Padding inside a Container widget, which is totally unnecessary as Container widget already has a property called padding. So, you should remove the Padding widget.

Also, you have used Center widget inside Container which is also unnecessary as Container has alignment property which you can use to center align child widgets (Alignment.center).

Lastly, in order to center align children widgets in a Row widget, there is mainAxisAlignment & crossAxisAlignment properties which you can use to align widgets.

Setting mainAxisAlignment to MainAxisAlignment.center will center all of your children widgets.

Also, you have used two different Text widgets to create different styled Text widgets, which you can do with a single RichText widget.

Your final code should look like this:

return Container(
  padding: const EdgeInsets.only(bottom: 60.0),
  alignment: Alignment.center,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      RichText(
        text: TextSpan(
          style: TextStyle(
              color: Colors.white,
              fontSize: 44.0,
              fontWeight: FontWeight.w700,
              fontFamily: "Berlin"),
          text: "Great",
          children: <TextSpan>[
            TextSpan(
              text: 'Ocean',
              style: TextStyle(
                  color: Colors.blue,
                  fontSize: 44.0,
                  fontWeight: FontWeight.w700,
                  fontFamily: "Berlin"),
            ),
          ],
        ),
      ),
    ],
  ),
);