在颤振中计算响应式字体大小的最佳方法？

Question

基于谷歌的研究。我找到了三种计算响应式字体大小的方法。

这里 414 指设备宽度 720 指设备高度 50 指字体大小值 方法一：responsivefontSize =50(字体的输入值) * Media query.width/414

方法2：responsivefontSize=(50/720)*MediaQuery.height

方法3：responsivefontSize = (MediaQuery.height/100)*50

建议我计算颤动中不同设备的响应式字体大小的最佳方法。

Answer 1

第一种方法： 我个人最喜欢的也是我可以推荐的方法是使用“responsive_framework”包。您只需用几行代码包装您的 Widget，整个项目就会自动缩放。

澄清：此软件包会调整项目中所有内容的大小，而不仅仅是文本大小。

包：https: //pub.dev/packages/responsive_framework

如何实施：

void main() {
  runApp(MaterialApp(
      builder: (context, widget) => ResponsiveWrapper.builder(
          BouncingScrollWrapper.builder(context, widget),
          maxWidth: 1200,
          minWidth: 450,
          defaultScale: true,
          breakpoints: [
            ResponsiveBreakpoint.resize(450, name: MOBILE),
            ResponsiveBreakpoint.autoScale(800, name: TABLET),
            ResponsiveBreakpoint.autoScale(1000, name: TABLET),
            ResponsiveBreakpoint.autoscale(1200, name: DESKTOP),
            ResponsiveBreakpoint.autoScale(2460, name: "4K"),
          ],
          background: Container(color: Color(0xFF7E2323))),
      home: MyWidget()));

就是这样。您只需将其复制粘贴到您的项目中即可。另外：有时您想通过调整大小来更改自动缩放，反之亦然。

第二种方法：另一个应该适合你的包是 sizer 包，它允许你像这样编写字体大小：

fontSize: 15.0.sp

这将自动更改不同屏幕尺寸上的字体大小。

包： https: //pub.dev/packages/sizer

我希望这可以帮助你！:)