사용자 기기에 설정된 글자 크기를 무시하는 방법

앱을 Build해서 배포했을 때 기기마다 글자 크기가 다른 경우를 본 적 있을 것이다.

  자체 설정에 있는 폰트 크기에 따라 내가 fontSize를 10으로 설정했든, 15로 설정했든 default 값은 휴대폰 설정에 글자 크기를 따라간다.

이를 해결하기 위해서는 Text에서 옵션을 하나만 추가해주면 된다. Text 위젯에는 textScaleFactor 라는 옵션이 있다. default 값은 휴대폰 설정에 따라 앱이 글자 크기를 나타낸다면 textScaleFactor 라는 옵션을 넣어주면 앱의 설정에 따라 글자 크기를 나타내준다.

 

아래 사진 두 장은 fontSize를 35로 지정하고 글꼴 크기 작게/크기를 비교한 사진이다.

예시로 저렇게 적었지만 실제 개발 과정에서 Container에서 제한적인 width 안에 구성하려면 내가 개발하는 환경에서는 괜찮았지만 실제 배포 후 불편함을 겪는 유저들이 있을 수 있다.

휴대폰 설정: 폰트 작게

휴대폰 설정: 폰트 크게

너무 비교를 애매하게 했는지 모르겠지만 실제로 이렇다. 단순하게 구현해서 그렇지만 실제로는 공간을 넘어가서 Text가 짤리는 경우도 있고, overflow 발생으로 오류를 겪는 일들도 있다.

 

이를 해결하기 위해서는 위에서 말했듯이 앱을 기기에 맞추는게 아니라 기기를 앱에 맞춰야 한다.

간단한 Text의 경우에는

Text(
  '가나다라마바사', textScaleFactor: 1.0,
  style: TextStyle(fontSize: 35),
),

이런식으로 구현해주면 된다.

textScaleFactor의 경우 단어 그대로 Text의 Scale을 나타내며, 1.0이면 기존 fontSize를 따라가고 2.0이면 70을 따라간다.

 

추가로 이렇게 Text 하나하나 작업을 한다는건 코드를 생각해서도 비효율적이다.

그럴땐 전체 글자 크기를 고정하는게 맞지 않을까?

return Scaffold(
  appBar: AppBar(
    title: Text(widget.title),
  ),
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(
          '가나다라마바사', textScaleFactor: 1.0,
          style: TextStyle(fontSize: 35),
        ),
      ],
    ),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: _incrementCounter,
    tooltip: 'Increment',
    child: const Icon(Icons.add),
  ), // This trailing comma makes auto-formatting nicer for build methods.
);

기존 프로젝트 생성 후 Text만 바꾼 코드다.

기존에 Scaffold로 쌓아올렸다면 하나만 추가해주면 된다.

return MaterialApp(
      builder: (context, child) => MediaQuery(
        data: MediaQuery.of(context).copyWith(
          textScaleFactor: 1.0,
        ),
        child: Scaffold(
            appBar: AppBar(
              title: Text(widget.title),
            ),
            body: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    '가나다라마바사',
                    textScaleFactor: 1.0,
                    style: TextStyle(fontSize: 35),
                  ),
                ],
              ),
            ),
            floatingActionButton: FloatingActionButton(
              onPressed: _incrementCounter,
              tooltip: 'Increment',
              child: const Icon(Icons.add),
            )),
      ),
    );
  }
}

이와 같이 구현해주면 전체 글자 크기가 고정되며, 상단에서 설정한 scale 값에 따라 fontSize만 지정해주면 된다.

 

끝!