使用 Flutter 中的 device_preview 插件 MediaQuery.of(context).size.width 不会给出模拟的 phone 的 witdh

Question

为了在 Flutter 中实践响应式设计，我决定使用 device_preview。我尝试了不同的手机。但是每次我得到原始设备的宽度。

例如，原始设备的宽度为1700px，而模拟设备的宽度为600px。无法获取模拟设备的witdh

是否有任何设置可以解决该问题？或者它基本上是如何工作的？

Answer 1

我漏掉了一点。在 MaterialApp 中，我们应该添加 locale 和 builder 以消耗模拟设备的屏幕尺寸。


    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
            locale: DevicePreview.of(context).locale,
            builder: DevicePreview.appBuilder,
            home: MyApp());
      }
    }

使用 Flutter 中的 device_preview 插件 MediaQuery.of(context).size.width 不会给出模拟的 phone 的 witdh

With device_preview plugin in Flutter MediaQuery.of(context).size.width doesn't give the emulated phone's witdh

responsive-design

flutter

flutter-layout