TextBaseline's alphabetic and ideographic enums do not work in Flutter

user_1506104 0
Viewed 1455

I thought I understand how these enums work based on this post. When I tried it using the following code, it does not seem to work.

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.baseline,
  textBaseline: TextBaseline.ideographic,
  children: <Widget>[
    Text(
      'abcdefg',
      style: TextStyle(
          fontSize: 50.0, fontWeight: FontWeight.w900),
    ),
    Text(
      'hi',
      style: TextStyle(fontSize: 15.0),
    ),
  ],
),

However, whatever I choose to use as text baseline (ideographic or aphabetic), the result is always the same:

enter image description here

I expect that "hi" aligns to the ideographic baseline of "abcdefg", not to its alphabetic baseline like so:

enter image description here

What am I doing wrong?

EDIT:

There should be a difference between the two in the context of Row widget. I tried removing the line textBaseline: TextBaseline.ideographic, I got this error:

'package:flutter/src/widgets/basic.dart': Failed assertion: line 3791 pos 15: 'crossAxisAlignment != CrossAxisAlignment.baseline || textBaseline != null': is not true.

Requiring which baseline to use must be Flutter's way of knowing which baseline to align against.

flutter baseline text
3 Answers

Screenshot:

enter image description here

You don't need baseline. 

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.end,
  children: <Widget>[
    Text(
      'abcdefg',
      style: TextStyle(fontSize: 50.0, fontWeight: FontWeight.w900),
    ),
    Text(
      'hi',
      style: TextStyle(fontSize: 15.0),
    ),
  ],
)
user_66186220

I don't completely know your problem, but I think your problem's solved by adding the following parameter:

mainAxisSize: MainAxisSize.min,

so we have:

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.baseline,
  mainAxisSize: MainAxisSize.min,
  textBaseline: TextBaseline.ideographic,
  children: <Widget>[
    Text(
      'abcdefg',
      style: TextStyle(
          fontSize: 50.0, fontWeight: FontWeight.w900),
    ),
    Text(
      'hi',
      style: TextStyle(fontSize: 15.0),
    ),
  ],
),
user_92808480

So, I did some digging and found some info on this article here.

According to this article : 

"alphabetic"

The text baseline is the normal alphabetic baseline. Default value.

"ideographic"

The text baseline is the ideographic baseline; this is the bottom of the body of the characters, 
if the main body of characters protrudes beneath the alphabetic baseline. 
(Used by Chinese, Japanese, and Korean scripts.)

According to this, the output should be differentiable as stated in the problem. So, in order to test the second part of the explanation, I tried using it with Chinese characters.

Column(
              children: <Widget>[
                  Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.baseline,
                  textBaseline: TextBaseline.ideographic,
                  children: <Widget>[
                  Text(
                    '的',
                    style: TextStyle(
                      fontSize: 100.0),
                    ),
                    Text(
                      '的',
                      style: TextStyle(fontSize: 15.0),
                    ),
                  ],
               ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.baseline,
                  textBaseline: TextBaseline.alphabetic,
                  children: <Widget>[
                  Text(
                    '的',
                    style: TextStyle(
                      fontSize: 100.0),
                    ),
                    Text(
                      '的',
                      style: TextStyle(fontSize: 15.0),
                    ),
                  ],
               ),
                ],
          ),
      ),

The output was this.

As you can see, this too is not the expected output, and both work in the same manner. Hence, it is safe to assume that there may be some problem in Flutter's implementation of these enums.

user_56018390
Related