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

Question

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

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

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

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

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

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

希望对您有所帮助！ :)

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

Best way to calculate responsive font size in flutter?

user-interface

dart

flutter

responsive

flutter-layout