重新缩放浏览器时更改 Web 上的字体大小答案

【问题标题】：Change font size on web when rescale browser重新缩放浏览器时更改 Web 上的字体大小
【发布时间】：2021-10-09 08:59:41
【问题描述】：

我正在尝试更改 Flutter 网页上的文本大小。通过谷歌搜索，我找到了这个解决方案：

  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (context, child) {
        final MediaQueryData data = MediaQuery.of(context);
        print('----> ${data.textScaleFactor}');
        return MediaQuery(
          data: data.copyWith(
              textScaleFactor:
                  data.textScaleFactor > 2.0 ? 2.0 : data.textScaleFactor),
          child: child!,
        );
      },

但是，当我更改 chrome 宽度大小并且print('----> ${data.textScaleFactor}'); 始终返回 1 时，字体大小不会更改。

为什么？

【问题讨论】：

标签： flutter flutter-web

【解决方案1】：

根据屏幕使用大小可变的容器，并使用 FittedBox 包装子 Text。

Container(
          height: height * 0.15,
          constraints: BoxConstraints(maxWidth: width * 0.9),
          padding: EdgeInsets.all(5),
          child: FittedBox(
            fit: BoxFit.fitWidth,
            child: Text(
              'Text you want to display',
              style: TextStyle(
                fontFamily: 'Calibri',
                color: Colors.white,
                fontWeight: FontWeight.bold,
                fontSize: 20,
              ),
            ),
          ),
        ),

【讨论】：

谢谢兄弟，我知道一些方法，但我想知道为什么我的代码不起作用。再次感谢。