Flutter应用商店截图生成插件simple_appstore_screenshot的使用

Flutter应用商店截图生成插件simple_appstore_screenshot的使用

这个包帮助你直接在应用程序中创建应用商店的截图。

特性

该包可以在应用内轻松创建截图。截图的尺寸可以直接上传到Google Play Store和Apple AppStore。建议在平板设备上使用此包。

开始使用

包裹需要生成截图的页面

SimpleScreenShot(
  child: YourPage() // 将你的页面包裹在这里
)

SimpleScreenShot必须位于MaterialApp或CupertinoApp之下

截图

指定如何处理捕获的图像（Uint8List）。 例如，如果你想直接分享截图，可以添加share_plus包然后：

SimpleScreenShot(
  callback: (Uint8List? image) async {
    // 分享截图
    await Share.shareXFiles([XFile.fromData(image!, name: "image.png", mimeType: "png")]);
  },
  child: YourPage()
)

使用方法

添加描述

SimpleScreenShot(
  description: (context) => Text("Some Description", style: TextStyle()), // 添加描述文本
  child: YourPage()
)

设置背景图片

SimpleScreenShot(
  image: const DecorationImage(
    image: AssetImage("assets/background.png"), // 设置背景图片
    fit: BoxFit.cover,
  ),
  child: YourPage()
)

设置颜色背景

SimpleScreenShot(
  color: Colors.red, // 设置背景颜色为红色
  child: YourPage()
)

设置渐变背景

SimpleScreenShot(
  gradient: const LinearGradient(colors: [Colors.red, Colors.blue]), // 设置渐变背景
  child: YourPage()
)

只能设置颜色背景或渐变背景之一

设置活动状态

默认情况下，该包仅在调试模式下有效。如果要在发布模式下启用，请将active设置为true：

SimpleScreenShot(
  active: true, // 在发布模式下启用
  child: YourPage()
)

注意事项

该包使用上下文来确定大小。因此，请确保传递给SimpleScreenShot的子元素没有使用其上方的上下文。 例如：

Widget build(BuildContext context) {
  return SimpleScreenShot(
    child: Column(
      children: [
        Text("Hi"),
        SomeWidget(context: context) // 这可能导致意外行为
      ]
    )
  );
}

解决方法：将Column包裹在Builder中，以便上下文在SimpleScreenShot下方：

Widget build(BuildContext context) {
  return Builder(
    builder: (BuildContext innerContext) {
      return SimpleScreenShot(
        child: Column(
          children: [
            Text("Hi"),
            SomeWidget(context: innerContext) // 上下文现在在SimpleScreenShot下方
          ]
        )
      );
    }
  );
}

完整示例代码

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

import 'dart:typed_data';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:simple_appstore_screenshot/simple_appstore_screenshot.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  final bool isCupertino = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    if (isCupertino) {
      return const CupertinoApp(
        localizationsDelegates: [
          GlobalMaterialLocalizations.delegate,
          GlobalWidgetsLocalizations.delegate,
          GlobalCupertinoLocalizations.delegate,
        ],
        supportedLocales: [
          Locale('en'), // 英语
          Locale('es'), // 西班牙语
        ],
        debugShowCheckedModeBanner: false,
        home: CupertinoPage(
          title: "Demo Page",
        ),
      );
    }

    return MaterialApp(
      title: 'Simple AppStore Demo',
      localizationsDelegates: const [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: const [
        Locale('en'), // 英语
        Locale('es'), // 西班牙语
      ],
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MaterialPage(title: 'Demo Page'),
    );
  }
}

class CupertinoPage extends StatelessWidget {
  const CupertinoPage({super.key, required this.title});
  final String title;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SimpleScreenShot(
      callback: (Uint8List? image) async {
        if (image != null) {
          // 对图像进行操作
        }
      },
      description: (context) => const Text(
        "This is description", // 描述文本
        style: TextStyle(fontSize: 16),
      ),
      child: CupertinoPageScaffold(
        navigationBar: CupertinoNavigationBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          middle: Text(title),
        ),
        child: const Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'This is simple appstore screenshot cupertino demo', // 示例文本
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class MaterialPage extends StatelessWidget {
  const MaterialPage({super.key, required this.title});
  final String title;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SimpleScreenShot(
      callback: (Uint8List? image) async {
        if (image != null) {
          // 对图像进行操作
        }
      },
      description: (context) => const Text(
        "This is description", // 描述文本
        style: TextStyle(fontSize: 16),
      ),
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: Text(title),
        ),
        body: const Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'This is simple appstore screenshot material demo', // 示例文本
              ),
            ],
          ),
        ),
      ),
    );
  }
}