近似您的应用在其他设备上的外观和性能

估算您的应用在另一台设备上的外观和性能。

主要特性

• 预览任何设备上的任何设备
• 更改设备方向
• 动态系统配置（语言、暗模式、文本缩放系数，…）
• 具有可调分辨率和安全区域的自由格式设备
• 保持应用程序状态
• 插件系统（截图、文件浏览器、…）
• 可定制的插件

快速入门

将依赖项添加到您的 pubspec 文件

由于 Device Preview 是一个简单的 Dart 包，您需要像声明任何其他依赖项一样在您的 pubspec.yaml 文件中声明它。

dependencies:
  device_preview: <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 Preview 永远无法模拟移动设备的一些方面。如有疑问，最好的办法是实际在真实设备上运行您的应用。

GitHub

查看 Github