根据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时，它变得如此之大。在这种情况下，我希望根据不同的设备屏幕来扩展文本。

Answer 1

我们可以使用view 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

Answer 2

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

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

Answer 3

您的问题也与容器，按钮等有关。因此，我建议您检查一下this惊人的开源（使用阿里巴巴redux）如何使用utility-adapter文件解决了此问题account标题页中的几个地方。

另一个不错的选择是检查flutter-screen-util依赖项，那里有一个很好的例子。

Answer 4

您可以使用flutter_screenutil来设置字体大小以响应任何屏幕布局，与此包一起，您还可以通过setWidth（）和setHeight（）方法使其他窗口小部件响应， 您可以在这里查看其文档：flutter_screenutil