[译]Flutter可在任意设备上预览任意设备上的(近似)画面效果的组件device_preview

「这是我参与2022首次更文挑战的第13天，活动详情查看：2022首次更文挑战」。

本文翻译自pub:  device_preview | Flutter Package (pub.dev)

今天在 Flutter pub 发现一个挺猛的组件，说是可在任意设备上预览任意设备上的画面效果的组件。

那开发完，直接就能桌面版上预览在其它各种设备上的画面了。

虽说是近似效果，估计不会有太大差别。要是有太大差别，那就只能在真实的设备上查看了。

文档： Device Preview for Flutter (aloisdeniel.github.io)

译时版本： device_preview 1.0.0

---

预览应用在其它设备上的近似画面效果和表现如何

主要特性

• 在任意设备上对任意目标设备上（的应用）预览
• 改变设备的（纵横）方向
• 动态系统配置（语言、黑暗模式、文字比例因子、等）
• 带有可调节分辨率和安全区域的自由形式的设备
• 保持应用状态
• 插件系统 (截屏、文件浏览器、等 )
• 自定义插件

快速开始

添加依赖到 pubspec 文件

由于 Device Preview 是一个简单的 Dart 包，所以需要在 pubspec.yaml 文件中添加声明。

dependencies:
  device_preview: <latest version>

<latest version> 需要改成具体的最新版本哦

添加 DevicePreview

用 DevicePreview 包裹应用的根组件，并确保：

• 将应用的 useInheritedMediaQuery 设置为 true 。
• 将应用的 builder 设置为 DevicePreview.appBuilder 。
• 将应用的 locale 设置为 DevicePreview.locale(context) 。

确保按照上述覆盖上面的属性。如果未定义， MediaQuery 不会为选中的设备进行模拟 。

import 'package:device_preview/device_preview.dart';

void main() => runApp(
  DevicePreview(
    enabled: !kReleaseMode,
    builder: (context) => MyApp(), // Wrap your app
  ),
);

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      useInheritedMediaQuery: true,
      locale: DevicePreview.locale(context),
      builder: DevicePreview.appBuilder,
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      home: const HomePage(),
    );
  }
}

文档

打开网站

演示应用

打开演示应用

局限性

将 Device Preview 看作在移动设备上画面效果和感受的一流的近似表现。但是使用 Device Mode （设备模式）时并没有真正地在移动设备上运行。你是在笔记本、台式机或平板上模拟你的移动设备。

移动设备的一些方面，Device Preview 永远无法模拟。如果有疑问，最好的办法就是真正地在真实的设备上运行应用。

---