在Flutter中根据屏幕宽度更改文本大小

Question

我希望文本大小保持不变，但在更大的屏幕宽度设备上时，希望它变得更大。

MediaQueryData queryData;

  @override
  Widget build(BuildContext context) {
    queryData = MediaQuery.of(context);
    Text("Hello.",
        style: TextStyle(
        fontSize: queryData.size.width, color: Colors.white),
 ),

}

然而，当我尝试使用queryData.size.width时，它变得非常大。在这种情况下，我希望文本根据不同设备屏幕进行扩展。

- irongirl

---

你找到解决方案了吗？ - No N

Answer 1

你只需要将媒体查询的结果乘以一个常数即可。

double width = MediaQuery.of(context).size.width;
return Text(
  "Hello.",
  style: TextStyle(
    fontSize: width * 0.2,
    color: Colors.white,
  ),
);

- Alexander Blyth

Answer 2

定义一个名为sizeconfig的类：

  class SizeConfig {
  static MediaQueryData _mediaQueryData;
  static double screenWidth;
  static double screenHeight;
  static double blockSizeHorizontal;
  static double blockSizeVertical;

  static double _safeAreaHorizontal;
  static double _safeAreaVertical;
  static double safeBlockHorizontal;
  static double safeBlockVertical;

  void init(BuildContext context) {
    _mediaQueryData = MediaQuery.of(context);
    screenWidth = _mediaQueryData.size.width;
    screenHeight = _mediaQueryData.size.height;
    blockSizeHorizontal = screenWidth / 100;
    blockSizeVertical = screenHeight / 100;

    _safeAreaHorizontal =
        _mediaQueryData.padding.left + _mediaQueryData.padding.right;
    _safeAreaVertical =
        _mediaQueryData.padding.top + _mediaQueryData.padding.bottom;
    safeBlockHorizontal = (screenWidth - _safeAreaHorizontal) / 100;
    safeBlockVertical = (screenHeight - _safeAreaVertical) / 100;
  }
}

在您的页面中使用SizeConfig().init(context)来初始化这个类，然后在您的字体大小上使用：SizeConfig.screenWidth * .02。

- sahad

Answer 3

你的问题也与容器、按钮等有关...因此，我建议你查看这个this惊人的开源项目（使用阿里巴巴的redux）是如何在多个地方（例如account头部页面）使用utility-adapter文件解决了这个问题。

另一个绝佳的选择是查看flutter-screen-util依赖项，他们在那里有一个很好的示例。

- Henry H.

Answer 4

你可以使用 flutter_screenutil 来设置字体大小，使其响应任何屏幕布局。此外，通过该软件包的 setWidth() 和 setHeight() 方法，您还可以使其他小部件具有响应性。

您可以在此处查看其文档：flutter_screenutil

- Aditya

Answer 5

我们可以使用视口单位vw和vh来提供字体大小，这将使您的文本在不同的视口大小下更加可见。

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}


1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger

- Samyak Jain