如何根据 flutter 中的屏幕大小重新缩放应用程序

Question

最近我在不同设备上测试我的 flutter 应用程序时遇到了一些问题。该应用程序在我的 google 像素 XL 上以及在 iphone 的任何其他 android 上看起来都不错，但是最近有人试用了 iPhone SE（较小的类型），我不知道它是什么确切的版本。 iphone 应用程序完全崩溃，小部件的高度和大小不适合屏幕并使其整体无法使用...

我现在的问题是如何以最佳方式调整大小？我查找了一些适用于媒体查询或其他内容的解决方案，但为此我必须通过大量代码并根据屏幕大小重写每个小部件。有没有一种方法可以让这一切变得更容易，并立即缩放整个应用程序，使其在所有显示器上看起来都一样？

这是我的第一个真正的项目，这就是为什么我不知道这会是一件大事。我看过的所有教程都没有谈到这个问题，只是使用了没有响应的普通字体大小。您甚至会说适应较小的屏幕尺寸甚至不值得，因为它们在当今用户中所占的比例如此之小？

非常感谢您的帮助！

Answer 1

您可以使用媒体查询，但正如您所说，我认为这是我不想做的一些额外工作:)

幸运的是有一个很酷的插件，满足flutter_screenutil它非常容易使用！

首先，您必须设置设计设备（您正在开发的设备）的尺寸

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
        designSize: Size(1080, 2340),
        builder: () => MaterialApp(
              theme: ThemeData(
                  accentColor: Color(0xFF38bddc),
                  scaffoldBackgroundColor: Colors.white),
              debugShowCheckedModeBanner: false,
              home: LoginScreen(),
            ));
  }
}

然后像这样设置高度、宽度和字体大小值：

Container(
      width: 300.w,
      height: 200.h,
      child: Text("Hello world", style: TextStyle(fontSize: 50.sp) ,),
    );

如果您花时间阅读文档，还有更多内容。

如何根据 flutter 中的屏幕大小重新缩放应用程序

How to rescale an app depending on screensize in flutter

responsive-design

flutter