[Flutter] 플러터 텍스트 베이스라인 맞추기 (하단 정렬, CrossAxisAlignment.baseline, textBaseline)

 

 

 

 

안드로이드에서는 제약뷰로 제약을 주면 되었는데 플러터에서는 선언형 UI 방식이기도해서 구현 방법이 좀 다르다.

많이 써먹을 것 같아 기록한다. 

 

crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.alphabetic,

을 사용해서 크기가 다른 Text위젯인 100과 cm를 가운데 정렬 + cm는 숫자 100과 더 크기가 큰 위젯인 100의 하단 베이스라인에 맞추는것을 구현했다.

 

베이스라인은 이렇게 서로 다른 위젯, 폰트의 기준을 잡아주는 역할을 한다고 보면 된다.

그리고 textBaseLine은 알파벳을 기준선으로하는 alphabetic과 텍스트영역 최하단 기준인 ideographic가 있다.

Expanded(
                child: ReusableCard(
              colour: kActiveCardColour,
              cardChild: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    "HEIGHT",
                    style: kLabelTextStyle,
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.baseline,
                    textBaseline: TextBaseline.alphabetic,
                    children: <Widget>[
                      Text('100', style: kNumberTextStyle),
                      Text(
                        'cm',
                        style: kLabelTextStyle,
                      )
                    ],
                  )
                ],
              ),
            )),

 

 

댓글과 공감은 큰 힘이 됩니다. 감사합니다. !!!