🚨Flutter 폰트 사이즈 조절 문제

Flutter에서 WebView를 사용하다 보면 디바이스의 시스템 폰트 크기가 커질 때, 웹 페이지의 폰트 크기도 함께 커지는 문제가 발생할 수 있다.

예전에 Flutter에서만 개발할 때 클라이언트의 노안이슈로 화면 내 방지턱 현상이 발생해서 한번 크게 고생했던 적이있다.

그래서 이번에는 미리 해당 문제를 방지하고자 했다.
이 문제는 Android와 iOS에서 각각 다르게 처리해야 할 부분이 있다!

🤖 Android에서의 해결 방법

첫 번째 시도: MediaQuery에서 textScaler 사용

final MediaQueryData data = MediaQuery.of(context);
return MediaQuery(
  data: data.copyWith(textScaler: const TextScaler.noScaling),
  child: child!,
);

final MediaQueryData data = MediaQuery.of(context);
return MediaQuery(
  data: data.copyWith(textScaler: const TextScaler.linear(1)),
  child: child!,
);

textScaleFactor 는 텍스트의 크기를 비율로 설정하여 조정하고, 기본값 1.0은 기본 크기를 유지하게 한다.
textScaler (예: TextScaler.noScaling) 는 텍스트 크기의 스케일링을 완전히 비활성화하여, 시스템의 텍스트 크기 설정을 무시하게 만든다.

[Flutter] TextScale fix (텍스트 크기 고정) 참고링크

시도결과

처음에는 MediaQuery를 사용하여 앱 전체의 폰트 크기를 고정하려 했음. 그러나 MediaQuery는 WebView의 텍스트 크기까지 제어할 수 없었음. WebView는 HTML 콘텐츠를 로드하는 별도의 컴포넌트이므로 MediaQuery 설정만으로는 해결되지 않았음. ㅠ^ㅠ

두 번째 시도: textZoom 속성 설정

Flutter에서는 WebViewController를 통해 직접 setTextZoom 메서드를 호출하여 텍스트 크기를 제어할 수 있음. 이 방법은 주로 Android에서 사용된다.
android WebSettings 관련 공식 문서

WebViewController의 platform 속성을 사용해서 AndroidWebViewController에 접근한 후, setTextZoom을 통해 텍스트 크기를 100%로 고정했다.

class WebviewMainController extends GetxController {
  late final WebViewController controller;

  WebviewMainController() {
    // WebViewController 초기화
    controller = WebViewController();

    // WebViewController 설정
    controller
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setBackgroundColor(const Color(0x00000000))
      ..setNavigationDelegate(...);

    // Android 플랫폼에서 텍스트 줌 고정
    if (controller.platform is AndroidWebViewController) {
      final androidController = controller.platform as AndroidWebViewController;
      androidController.setTextZoom(100);  // 텍스트 줌을 100%로 고정
    }
  }
}

드디어 됐다!!!!!! 폰트가 고정되어서 작아졌지만.. 알게뭐람 우선해!! 나중에 비율 수정만 하면 되니까!!!

🍏 iOS에서의 해결 방법

iOS는 기본적으로 -webkit-text-size-adjust: none;을 무시할 때가 있지만, HTML 내에서 폰트 크기를 명시적으로 설정하면 시스템 폰트 크기 변경이 WebView에 영향을 미치지 않게 된다. 🧐

html{
  font-size: 62.5%; // 기본 10px 기준
  background-color: $bg-color;
  -webkit-text-size-adjust: none; /*Chrome, Safari, newer versions of Opera*/
  -moz-text-size-adjust: none; /*Firefox*/
  -ms-text-size-adjust: none; /*Ie*/
  -o-text-size-adjust: none; /*old versions of Opera*/
}

해결 완료...장렬하게 전사해.