Device Preview for Flutter

大致了解您的应用在其他设备上的外观和性能。




Device Preview for Flutter

主要功能

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

快速入门

将您的应用程序的根 widget 包装在 DevicePreview 中,并将专用的 builderlocale 注入到您的应用程序中。

请确保为您的 WidgetsApp 提供 localebuilder。如果未定义,MediaQuery 将不会为选定的设备进行模拟,并且不会应用选定的 locale。

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(
      locale: DevicePreview.locale(context), // Add the locale here
      builder: DevicePreview.appBuilder, // Add the builder here
      home: HomePage(),
    );
  }
}

文档

打开网站

演示

打开演示

限制

将 Device Preview 视为您的应用在移动设备上外观和感觉的第一顺序近似。使用设备模式,您实际上并不在移动设备上运行代码。您从笔记本电脑、台式机或平板电脑模拟移动用户体验。

!> Device Preview 永远无法模拟移动设备的某些方面。如有疑问,最好的办法是在真实设备上运行您的应用程序。

GitHub

查看 Github