Flutter设备预览插件device_preview_community的使用

主要功能

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

快速开始

在 pubspec.yaml 文件中添加依赖

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

dependencies:
  device_preview: <最新版本>

添加 DevicePreview

将你的应用根部件包裹在一个 DevicePreview 中，并确保：

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

import 'package:device_preview_community/device_preview.dart';

void main() => runApp(
  DevicePreview(
    enabled: !kReleaseMode, // 生产模式下禁用预览
    builder: (context) => MyApp(), // 包裹你的应用
  ),
);

class MyApp extends StatelessWidget {
  [@override](/user/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 永远无法模拟的。如有疑问，最好在真实设备上运行你的应用。

完整示例代码

以下是一个完整的示例代码，展示了如何使用 device_preview_community 插件来预览应用在不同设备上的表现。

import 'package:device_preview_community/device_preview.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import 'basic.dart';
import 'custom_plugin.dart';

void main() {
  runApp(
    DevicePreview(
      enabled: true, // 在开发模式下启用预览
      tools: [
        ...DevicePreview.defaultTools, // 添加默认工具
        const CustomPlugin(), // 添加自定义工具
      ],
      builder: (context) => const BasicApp(), // 包裹基本应用
    ),
  );
}

// 基本应用类
class BasicApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Device Preview Example'),
      ),
      body: Center(
        child: Text('Hello, Device Preview!'),
      ),
    );
  }
}

// 自定义插件类
class CustomPlugin extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      child: Center(
        child: Text(
          'This is a custom plugin',
          style: TextStyle(color: Colors.white),
        ),
      ),
    );
  }
}