MediaQuery 取得字型放大倍率 | 點燈坊

當使用者字型將字型放大後，可能造成跑版，可藉由 MediaQuery 取得字型放大倍率後，做相對應的處理。

Version

Flutter 3.24

Flutter

• Android 成功使用 mediaQuery.textScaler.scale() 取得目前縮放比例為 1.00

• 設定 -> 螢幕

• 顯示大小和文字

• 字型大小：將 字型大小 拉到 最大
• 顯示大小：顯示大小 隨便，不會 影響結果

• Android 成功使用 mediaQuery.textScaler.scale() 取得目前縮放比例為 2.00

MediaQuery

import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  const Home({super.key});

  @override
  State<Home> createState() => _Home();
}

class _Home extends State<Home> {
  var _scaleRatio = 1.0;

  double getScaleRatio(context) {
    final baseFontSize = 14.0;
    final mediaQuery = MediaQuery.of(context);
    final scaledFontSize = mediaQuery.textScaler.scale(baseFontSize);

    return scaledFontSize / baseFontSize;
  }

  @override
  Widget build(BuildContext context) {
    _scaleRatio = getScaleRatio(context);

    var appBar = AppBar(
      title: const Text('Counter'),
    );

    var body = Center(
      child: Text('Scale Ratio: ${_scaleRatio.toStringAsFixed(2)}'),
    );

    return Scaffold(
      appBar: appBar,
      body: body,
    );
  }
}

Line 13

double getScaleRatio(context) {
  final baseFontSize = 14.0;
  final mediaQuery = MediaQuery.of(context);
  final scaledFontSize = mediaQuery.textScaler.scale(baseFontSize);

  return scaledFontSize / baseFontSize;
}

• mediaQuery.textScaler.scale()：將傳入的字型大小轉成 目前放大 的字型大小
• scaledFontSize / baseFontSize：相除即可得出 放大倍率

Conclusion

• 這種方式僅對 Android 有效，若在 iOS 設定 放大字型，使用此法依然得到放大倍率為 1