In Flutter, non-english language in Text Widget has strange margin value

Issue

I’m a developer who just started flutter.

While using the flutter to configure a screen, I visited to ask about something strange.

I set the crossAxisAlignment option to center in the Row widget and set one of the children to Text.

The code is here.

child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          SizedBox(width: 22.0),
          Text(
            'Test',
            style: TextStyle(
                fontSize: 22,
                fontWeight: FontWeight.w500,
                fontStyle: FontStyle.normal),
          ),
        ],
      ),

Then, I created the text in Korean.

The result is the same as the picture below, but as you can see, the upper and lower margins of the letters are slightly different (it is slightly skewed down).

enter image description here

If this is English, the top and bottom margins are the same as follows.

enter image description here

This issue is the same for all Widgets written in Korean, but does anyone know the solution to this?

Solution

It seems there might be a similar issue logged here.

The proposed solution (although there is no input from OP to indicate it worked), is to pass textAlign: TextAlign.center to your Text Widget. This might help as crossAxisAlignment is a property applied via Row and Column to their children, whereas TextAlign is applied to the Text widget directly. Perhaps in conjunction with crossAxisAlignment it might produce the desired result.

That or you might want to experiment with padding on the Text widget. You can do this by wrapping your Text widget in a Padding widget or in a Container widget. See below.

Padding

Padding(
          padding: EdgeInsets.fromLTRB(20, 20, 20, 20),
          child: Text('Padding Via Padding Widget',
            style: TextStyle(fontSize: 22))),
)

Container

Container(
          padding: EdgeInsets.fromLTRB(20, 20, 20, 20),
          child: Text('Padding Via Container Widget', 
            style: TextStyle(fontSize: 22)),
)

Answered By – Matt Croak

Answer Checked By – Cary Denson (FlutterFixes Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *