[Flutter] TextBaseline 적용하기

Text 여러 개를 Row 안에 넣을 때 baseline 을 맞추려면, Row에서 처리해줘야한다.

Row(
  children: [
    Text('짧쌞타', style: TextStyle(fontSize: 30)),
    Text('yYq', style: TextStyle(fontSize: 25)),
    Text('124', style: TextStyle(fontSize: 20)),
  ],
),

Row(
  crossAxisAlignment: CrossAxisAlignment.baseline,
  textBaseline: TextBaseline.alphabetic,
  children: [
    Text('짧쌞타', style: TextStyle(fontSize: 30)),
    Text('yYq', style: TextStyle(fontSize: 25)),
    Text('124', style: TextStyle(fontSize: 20)),
  ],
),

TextBaseline.alphabetic 랑 TextBaseline.ideographic 는 글자의 가장 아래를 기준으로 잡을지, y 처럼 기준선 아래로 내려가는 건 무시하는지를 설정하는 거라는데, 눈으로 봐서는 잘 모르겠다. 자세한 내용은 https://stackoverflow.com/a/56910192/1025379 에 있다.

[Flutter] TextBaseline 적용하기

관련