Flutter设备模拟插件device_simulator的使用

DeviceSimulator 允许您轻松测试您的 Flutter 应用在不同屏幕分辨率和平台上的表现。如果您使用了此插件，请考虑下载 Newsvoice 应用并给我们一个五星评价。谢谢！

通过 DeviceSimulator，您可以快速查看您的应用在所有 iOS/iPadOS 设备和一些常见的 Android 设备上的效果。此外，它还提供了截图模式，这使得为 App Store 和 Google Play 提供不同分辨率的截图变得非常容易。

开始使用

这个项目诞生于对在多个设备上测试应用程序以确保布局在所有分辨率下都看起来良好的挫败感。DeviceSimulator 将让您快速模拟不同的设备类型。它在 iPad Pro 上运行效果最佳，但也可以很好地在 iOS 模拟器和较小的平板电脑上工作。

若想了解更多有关为多种分辨率设计的内容，请查看我写的一篇关于该主题的 Medium 文章。

在您的 widget 树中添加 DeviceSimulator

将 DeviceSimulator 添加到您的应用中非常简单。只需将其添加到您的 widget 树的根部，就在您的 App widget 下面即可。然后像往常一样构建其余的 widget 树。这是一个最小的例子：

import 'package:flutter/material.dart';
import 'package:device_simulator/device_simulator.dart';

// 定义一个常量来控制设备模拟器的开关，这样可以方便地启用或禁用它
const bool debugEnableDeviceSimulator = true;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'DeviceSimulator demo',
      home: DeviceSimulator(
        // 设置亮度为深色模式
        brightness: Brightness.dark,
        // 控制设备模拟器是否启用
        enable: debugEnableDeviceSimulator,
        child: Scaffold(
          appBar: AppBar(
            title: Text('DeviceSimulator Demo'),
          ),
          body: Center(
            child: Text('Hello multiple resolutions!'),
          ),
        ),
      ),
    );
  }
}

已知问题与限制

• Hero 动画可能损坏：当启用了 DeviceSimulator 时，Hero 动画可能会出现问题。但它不会影响生产环境的应用程序。
• 仅支持 MaterialApp 的主页路由：目前只能使用 MaterialApp 的主页路由。为了解决此限制，可以在 MaterialApp 下放置另一个 Navigator。

注意事项

我为自己的需求构建了 DeviceSimulator，并且它对我来说工作得很好，但它没有经过大量测试，因此提供的是原样。欢迎反馈和提交拉取请求。

享受开发的乐趣！/ Vik

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 中使用 device_simulator 插件：

import 'package:flutter/material.dart';
import 'package:device_simulator/device_simulator.dart';

// 定义一个常量来控制设备模拟器的开关
const bool debugEnableDeviceSimulator = true;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'DeviceSimulator Demo',
      home: DeviceSimulator(
        // 设置设备的亮度为深色模式
        brightness: Brightness.dark,
        // 启用设备模拟器
        enable: debugEnableDeviceSimulator,
        child: Scaffold(
          appBar: AppBar(
            title: Text('设备模拟器演示'),
          ),
          body: Center(
            child: Text(
              'Hello 多种分辨率!',
              style: TextStyle(fontSize: 20),
            ),
          ),
        ),
      ),
    );
  }
}