[Flutter / RichText] 일반 텍스트 크기와 RichText 텍스트 크기가 다를 때 해결 방법

solra·2023년 1월 23일
0
post-thumbnail

RichText를 사용할 때 폰트 크기가 달라지는 문제 발생

RichText를 사용해 작업하던 중 같은 폰트, 같은 사이즈, 모든 옵션이 모두 같은데
WidgetSpan 내의 TextTextSpanText가 사이즈가 달라보이는 것을 확인했습니다


widgetSpan-Text, 우 TextSpan

문제의 코드

RichText(
  text: TextSpan(
    text: '',
    style: TextStyle(
      fontSize: 13,
      fontWeight: FontWeight.w400,
      fontFamily: 'NotoSans',
      color: Colors.black,
    ),
    children: [
      WidgetSpan(
        child: Text(
          '안녕하세요',
          style: TextStyle(
            fontSize: 13,
            fontWeight: FontWeight.w400,
            fontFamily: 'NotoSans',
            color: Colors.black,
          ),
        ),
      ),
      TextSpan(
        text: '안녕하세요',
        style: TextStyle(
          fontSize: 13,
          fontWeight: FontWeight.w400,
          fontFamily: 'NotoSans',
          color: Colors.black,
        ),
      ),
    ],
  ),
)

해결 방법

이것은 Text 위젯의 size가 절대적인 크기로 동일하게 들어가는 것이 아닌
기기의 폰트 크기에 영향을 받고 있어 생긴 문제입니다.

MaterialAppbuilder에서(없으면 추가) 기준 스케일이 변경되지 않도록 1로 고정시켜주면 됩니다.

MaterialApp{
	...
   builder: (context, child) {
     return MediaQuery(
         data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
         child: child!);
   },
}
profile
현 Flutter 개발자 🥴

0개의 댓글