Flutter设备预览截图插件device_preview_shot的使用

这是一个用于保持与新版本Flutter兼容的device_preview的分支。

对于从device_preview_plus包迁移过来的用户，只需要更改pubspec.yaml文件以指向device_preview_shot，并将任何导入语句更改为更新后的\device_preview_shot.dart。

在另一个设备上预览你的应用的外观和性能。主要功能包括：

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

开始使用

将以下内容添加到项目的pubspec.yaml文件中：

dependencies:
  device_preview_shot: ^2.1.5

使用方法

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

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

确保按上述方式覆盖这些属性。如果未定义，MediaQuery不会为所选设备模拟。

import '/device_preview_shot.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_shot插件。

import 'package:device_preview_shot/device_preview_shot.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

void main() {
  runApp(
    DevicePreviewShot(
      enabled: true,
      tools: const [
        ...DevicePreviewShot.defaultTools,
        CustomPlugin(),
      ],
      builder: (context) => const BasicApp(),
    ),
  );
}

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

// 自定义插件类
class CustomPlugin extends StatelessWidget implements DevicePreviewShot.Plugin {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container();
  }

  [@override](/user/override)
  String get name => 'Custom Plugin';

  [@override](/user/override)
  Widget buildToolbarButton(BuildContext context) {
    return IconButton(
      icon: Icon(Icons.add),
      onPressed: () {},
    );
  }
}