<div id="readability-page-1" class="page"><div><div><nav aria-label="breadcrumb"><ol itemscope="" itemtype="http://schema.org/BreadcrumbList"><li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemtype="http://schema.org/Thing" itemprop="item" href="/ko/">Home</a><meta itemprop="position" content="1"></li><li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemtype="http://schema.org/Thing" itemprop="item" href="/ko/flutter">flutter</a><meta itemprop="position" content="2"></li><li aria-current="page" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemtype="http://schema.org/Thing" itemprop="item" href="/ko/flutter/widget/textScaleFactor/">[Flutter] textScaleFactor를 사용해서 폰트 크기 고정하기</a><meta itemprop="position" content="3"></li></ol></nav></div><div><article><div id="contents_list"><h2 id="section">목차</h2><ul><li><a href="#개요">개요</a></li><li><a href="#기기-설정을-통해-폰트-크기-변경">기기 설정을 통해 폰트 크기 변경</a></li><li><a href="#textscalefactor">textScaleFactor</a></li><li><a href="#mediaquery의-textscalefactor">MediaQuery의 textScaleFactor</a></li><li><a href="#테스트-코드">테스트 코드</a></li><li><a href="#완료">완료</a></li></ul></div><h2 id="개요">개요</h2>앱을 개발하여 서비스를 제공하다보면, 사용자의 단말기 환경에 따라 다양한 문제가 발생하곤 합니다. 이번 블로그 포스트에서는 다음과 같이 사용자가 폰트 크기를 확대하여 사용하는 경우, 예상치 못하게 디자인이 깨지는 문제를 해결하는 방법에 대해서 알아보려고 합니다.<picture><source srcset="/assets/images/category/flutter/2023/textScaleFactor/design_broken.avif" type="image/avif"><source srcset="/assets/images/category/flutter/2023/textScaleFactor/design_broken.webp" type="image/webp"><img src="https://deku.posstree.com/assets/images/category/flutter/2023/textScaleFactor/design_broken.png" alt="Flutter textScaleFactor - design broken"></picture>여기서 소개하는 소스코드는 <code>GitHub</code>에서 확인하실 수 있습니다.<ul><li>GitHub: <a href="https://github.com/dev-yakuza/study-flutter/tree/main/widget/textscalefactor" rel="nofollow noreferrer" target="_blank">https://github.com/dev-yakuza/study-flutter/tree/main/widget/textscalefactor</a></li></ul><h2 id="기기-설정을-통해-폰트-크기-변경">기기 설정을 통해 폰트 크기 변경</h2>다음과 같이 사용자는 기기의 설정을 사용하여 폰트 크기를 변경할 수 있습니다.<picture><source srcset="/assets/images/category/flutter/2023/textScaleFactor/larger_text.avif" type="image/avif"><source srcset="/assets/images/category/flutter/2023/textScaleFactor/larger_text.webp" type="image/webp"><img src="https://deku.posstree.com/assets/images/category/flutter/2023/textScaleFactor/larger_text.png" alt="Flutter textScaleFactor - Larger text setting"></picture>우리는 때에 따라 다음과 같이 너비가 고정된 버튼 등을 만들때가 있습니다.<picture><source srcset="/assets/images/category/flutter/2023/textScaleFactor/fixed_width_button.avif" type="image/avif"><source srcset="/assets/images/category/flutter/2023/textScaleFactor/fixed_width_button.webp" type="image/webp"><img src="https://deku.posstree.com/assets/images/category/flutter/2023/textScaleFactor/fixed_width_button.png" alt="Flutter textScaleFactor - fixed width button"></picture>하지만, 사용자가 기기의 설정으로 폰트의 크기를 키운 경우, 다음과 같이 의도치 않게 버튼의 문자가 여러줄로 표시될 수 있습니다.<picture><source srcset="/assets/images/category/flutter/2023/textScaleFactor/design_broken.avif" type="image/avif"><source srcset="/assets/images/category/flutter/2023/textScaleFactor/design_broken.webp" type="image/webp"><img src="https://deku.posstree.com/assets/images/category/flutter/2023/textScaleFactor/design_broken.png" alt="Flutter textScaleFactor - design broken"></picture>이번 블로그 포스트에서는 사용자가 기기의 설정을 통해 폰트 크기를 조절한 경우에도, 동일한 폰트 크기가 보이도록 변경하는 방법에 대해서 알아보겠습니다.<h2 id="textscalefactor">textScaleFactor</h2>가장 간단한 방법은 다음과 같이 <code>Text</code> 위젯의 <code>textScaleFactor</code>를 사용하는 것입니다.<div><pre><code>ElevatedButton(
 style: const ButtonStyle(
 maximumSize: MaterialStatePropertyAll(
 Size.fromWidth(160),
 ),
 ),
 onPressed: () =&gt; {},
 child: const Text(
 'textScaleFactor',
 textScaleFactor: 1.0,
 ),
),
</code></pre></div>다음과 같이 <code>Text</code> 위젯의 <code>textScaleFactor</code>에 <code>1.0</code>을 설정하면, 사용자가 기기의 설정을 변경하여 폰트의 크기를 조절했어도, 기본 폰트 크기로 표시되게 됩니다.<div><pre><code>const Text(
 'textScaleFactor',
 textScaleFactor: 1.0,
),
</code></pre></div>이렇게 <code>textScaleFactor</code>를 설정하고 앱을 실행해보면 다음과 같이 버튼의 글자 크기가 기본 크기로 표시되는 것을 확인할 수 있습니다.<picture><source srcset="/assets/images/category/flutter/2023/textScaleFactor/only_button_font_size_normal.avif" type="image/avif"><source srcset="/assets/images/category/flutter/2023/textScaleFactor/only_button_font_size_normal.webp" type="image/webp"><img src="https://deku.posstree.com/assets/images/category/flutter/2023/textScaleFactor/only_button_font_size_normal.png" alt="Flutter textScaleFactor - only button font size is normal"></picture><h2 id="mediaquery의-textscalefactor">MediaQuery의 textScaleFactor</h2>하지만, 모든 <code>Text</code> 위젯마다 이를 설정하기에는 어려움이 있습니다. 그래서 아래 화면처럼, 버튼의 폰트 사이즈만 기본 사이즈로 변경이 되었을 뿐, <code>textScaleFactor</code>를 설정하지 않은 <code>AppBar</code> 위젯의 <code>title</code>은 여전히 큰 글자가 표시되는 것을 알 수 있습니다.<picture><source srcset="/assets/images/category/flutter/2023/textScaleFactor/only_button_font_size_normal.avif" type="image/avif"><source srcset="/assets/images/category/flutter/2023/textScaleFactor/only_button_font_size_normal.webp" type="image/webp"><img src="https://deku.posstree.com/assets/images/category/flutter/2023/textScaleFactor/only_button_font_size_normal.png" alt="Flutter textScaleFactor - only button font size is normal"></picture>만약, 앱의 모든 <code>Text</code> 위젯에 <code>textScaleFactor</code>을 적용하고 싶다면 <code>MaterialApp</code> 위젯의 <code>builder</code>에서 다음과 같이 <code>MediaQuery</code>를 설정할 수 있습니다.<div><pre><code>MaterialApp(
 builder: (context, child) {
 final MediaQueryData data = MediaQuery.of(context);
 return MediaQuery(
 data: data.copyWith(textScaleFactor: 1.0),
 child: child!,
 );
 },
 ...
);
</code></pre></div>이렇게 <code>MediaQuery</code>의 <code>data</code>에 <code>textScaleFactor</code>값을 변경 시키면, 다음과 같이 <code>textScaleFactor</code>를 설정하지 않은 <code>Text</code> 위젯에도 <code>textScaleFactor</code>가 잘 적용되는 것을 확인할 수 있습니다.<picture><source srcset="/assets/images/category/flutter/2023/textScaleFactor/fixed_width_button.avif" type="image/avif"><source srcset="/assets/images/category/flutter/2023/textScaleFactor/fixed_width_button.webp" type="image/webp"><img src="https://deku.posstree.com/assets/images/category/flutter/2023/textScaleFactor/fixed_width_button.png" alt="Flutter textScaleFactor - apply textScaleFactor to all text widget"></picture><h2 id="테스트-코드">테스트 코드</h2><code>MediaQuery</code>에 <code>textScaleFactor</code>을 설정한 경우, 다음과 같이 테스트 코드를 작성하여 <code>textScaleFactor</code>가 잘 설정되었는지 확인할 수 있습니다.<div><pre><code>testWidgets('textScaleFactor is 1.0', (WidgetTester tester) async {
 await tester.pumpWidget(const MyApp());

 final context = tester.element(find.byType(MyHomePage));
 expect(MediaQuery.of(context).textScaleFactor, 1.0);
});
</code></pre></div><h2 id="완료">완료</h2>이것으로 <code>textScaleFactor</code>을 사용하여 기기의 설정으로 폰트의 크기를 변경한 경우에도 동일한 폰트 사이즈가 표시되도록 하는 방법에 대해서 알아보았습니다. 사실, 이 방법은 좋은 방법은 아닙니다. 사용자는 작은 글씨를 보기 힘들기 때문에, 일부러 기기의 설정에서 폰트 사이즈를 변경하였지만, 여전히 작은 글씨를 표시하기 때문입니다. 하지만, 저처럼 다양한 글씨 크기를 대응할 리소스가 없는 분들에게는 간편하고 빠른 수정 방법이므로 큰 도움이 될거 같습니다.<code> 제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다! </code><h2>앱 홍보</h2><div> 지금 보고 계신 블로그를 작성하는 <code>Deku</code>가 개발한 앱을 한번 사용해보세요. <code>Deku</code>가 개발한 앱은 Flutter로 개발되었습니다. 관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.</div><h2>책 홍보</h2></article></div></div></div>

dev-yakuza

Flutter 앱에서 사용자가 기기 설정을 통해 폰트를 확대한 경우에도, 앱내의 폰트 크기를 고정하는 방법에 대해서 알아봅시다.