본문 바로가기

Flutter

플러터(Flutter) - 앱의 폰트 크기 유지

반응형

스마트폰의 디스플레이 설정에서 글자 크기를 변경할 경우 앱에서 설정된 폰트 크기는 무시되며

스마트폰 글자 크기로 변경 됩니다.

글자 크기의 변화로 인해 Text의 Overflow가 발생하게 되는 문제들이 있는데 이럴 경우

Text(
     '폰트 크기 설정',
     overflow: TextOverflow.ellipsis,
     style: TextStyle(fontSize: 16),
)

overflow: TextOverflow.ellipsis  기능으로 일부 해결이 되겠지만 원하는 디자인은 결코 아닐 겁니다.

스마트폰의 설정에서 변경된 글자 크기에 영향을 받지 않고 일정한 크기의 폰트 크기를 유지하려면

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (context, child) {
        return MediaQuery(
          data: MediaQuery.of(context).copyWith(textScaleFactor: 1),
          child: child!,
        );
      },
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

MaterialApp ->  안에서 builder를 추가하여 MediaQuery.of(context).copyWith(textScaleFactor: 1) 추가해 주시면 됩니다.

* textScaleFactor의 값을 변경하여 원하는 사이즈의 폰트 크기를 조절 하시면 됩니다. *

MaterialApp에서 주셔야 모든 View에 적용이 되며 다른 곳에서 주신다면 해당 뷰만 적용이 되니 뷰마다 따로 적용을 하고 싶으시면 각 뷰 시작점에서 적용해 주시면 됩니다.

Flutter 2.0 이하 버전을 사용하신다면 child: 에서 ! 만 빼 주시면 됩니다.

반응형