Flutter屏幕截图插件screenshot_maker的使用

Screenshot_maker 是一个用于生成使用 Flutter 布局的图像的包。该插件允许你使用 Flutter 强大的布局系统来生成图像。你可以用它来创建适用于 App Store 和 Play Store 的截图。

使用

ScreenshotMaker

ScreenshotMaker 渲染子部件并根据指定的大小将其写入指定的文件。

通过将此部件传递给 runPkg 并将其作为 Flutter 应用程序运行在模拟器上，可以输出图像。使用的模拟器与输出大小无关。为了更容易调整布局，建议使用具有大显示屏的平板设备（如 iPad）。

目前，Android 模拟器和 Web 浏览器不能在开发机器上输出图像，因此请使用 iOS 模拟器。

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:screenshot_maker/screenshot_maker.dart';

void main() {
  runApp(
    ScreenshotMaker(
      // TODO: 写你的绝对路径。
      outputFile: File('/Users/your_name/Desktop/simple.png'),
      size: Size(500, 1000),
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(),
          body: Text('text'),
        ),
      ),
    ),
  );
}

Simulated

Simulated 将你的 Flutter 应用嵌入到你指定的设备框架图像中并进行组合。

位置和大小由 innerScreenOffset 和 innerScreenSize 指定。

“凹口”等区域由 viewPadding 表示。

设备的分辨率由 originalLogicalScreenSize 表示。这需要用逻辑像素表示。

设备框架图像必须有透明的显示区域。此包中不包含设备框架图像，你需要自己准备。示例中有一个非常简单的图像（位于 example/assets），但不建议在生产环境中使用。

使用 Simulated 时，请使用 runPkg 而不是 runApp。这是为了确保正确应用 viewPadding 设置。

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

void main() {
  // 使用 runPkg 而不是 runApp。
  runPkg(
    Directionality(
      textDirection: TextDirection.ltr,
      child: Simulated(
        innerScreenSize: const Size(1658, 3588),
        innerScreenOffset: const Size(116, 103),
        originalLogicalScreenSize: const Size(414, 896),
        deviceFrameImage: Image.asset('assets/example_device_frame.png'),
        viewPadding:
            const PhysicalViewPadding(left: 0, top: 68, right: 0, bottom: 66),
        child: const MyAwesomeApp(),
      ),
    ),
  );
}

class MyAwesomeApp extends StatelessWidget {
  const MyAwesomeApp();
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(title: Text("My Awesome App")),
            body: ElevatedButton(child: Text('foobar'), onPressed: () {})));
  }
}

完整示例

以下是完整的示例代码：

import 'dart:async';
import 'dart:io';

import 'package:flutter/material.dart';

import 'package:screenshot_maker/screenshot_maker.dart';

void main() {
  runPkg(MakeScreenshotsContinuously());
}

class MakeScreenshotsContinuously extends StatefulWidget {
  final sizes = <Size>[
    Size(1242, 2688),
    Size(1242, 2208),
    Size(2048, 2732),
  ];
  final outputFiles = <File>[
    // TODO: 写你的绝对路径。
    File('/Users/your_name/Desktop/out1.png'),
    File('/Users/your_name/Desktop/out2.png'),
    File('/Users/your_name/Desktop/out3.png'),
  ];
  MakeScreenshotsContinuously({
    Key? key,
  }) : super(key: key);

  [@override](/user/override)
  _MakeScreenshotsContinuouslyState createState() => _MakeScreenshotsContinuouslyState();
}

class _MakeScreenshotsContinuouslyState extends State<MakeScreenshotsContinuously> {
  late int index;
  late Completer<void> completer;
  late File outputFile;
  late Size size;

  [@override](/user/override)
  void initState() {
    super.initState();
    index = 0;
    completer = Completer();
    outputFile = widget.outputFiles[index];
    size = widget.sizes[index];
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    completer.future.then((_) {
      if (index < widget.outputFiles.length - 1 && completer.isCompleted) {
        setState(() {
          ++index;
          completer = Completer();
          outputFile = widget.outputFiles[index];
          size = widget.sizes[index];
        });
      }
    });

    return ScreenshotMaker(
      outputFile: outputFile,
      size: size,
      completer: completer,
      child: Directionality(
        textDirection: TextDirection.ltr,
        child: Stack(
          children: [
            // 背景
            Container(
              width: double.infinity,
              height: double.infinity,
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [Colors.purple[200]!, Colors.cyan[200]!],
                ),
              ),
            ),
            Column(
              children: [
                Expanded(
                  flex: 1,
                  child: Center(
                    child: Text(
                      'You Can Do Everything with This App!',
                      style: TextStyle(
                          fontSize: 60,
                          color: Colors.white,
                          decoration: TextDecoration.none),
                    ),
                  ),
                ),
                Expanded(
                  flex: 4,
                  child: Simulated(
                    innerScreenSize: const Size(1658, 3588),
                    innerScreenOffset: const Size(116, 103),
                    originalLogicalScreenSize: const Size(414, 896),
                    viewPadding: const PhysicalViewPadding(
                        left: 0, top: 68, right: 0, bottom: 66),
                    deviceFrameImage:
                        Image.asset('assets/example_device_frame.png'),
                    child: MyAwesomeApp(),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

class MyAwesomeApp extends StatelessWidget {
  const MyAwesomeApp();
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          appBar: AppBar(
            title: Text('My Awesome App'),
          ),
          body: Center(
              child: Text(
            'foobar',
            style: TextStyle(fontSize: 50),
          )),
        ));
  }
}