Flutter WhatsApp故事编辑器插件 whatsapp_story_editor 的使用

whatsapp_story_editor 是一个Flutter插件，允许用户在应用中添加类似WhatsApp的故事编辑功能。用户可以添加文本、贴纸、绘画到照片上，并且支持基本的裁剪、旋转和添加标题等功能。

如何使用

Step 1: 添加插件依赖

首先，在您的 pubspec.yaml 文件中添加插件依赖：

dependencies:
  flutter:
    sdk: flutter
  whatsapp_story_editor: ^latest_version # 替换为最新版本号

Step 2: 导入包

在需要使用的 .dart 文件中导入该插件：

import 'package:whatsapp_story_editor/whatsapp_story_editor.dart';

Step 3: 导航至WhatsApp故事编辑页面

当用户点击按钮时，导航到 WhatsappStoryEditor 页面。此页面将引导用户进入相机页面，允许他们拍摄或从相册中选择照片（需获得用户同意）。

示例代码如下：

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => const WhatsappStoryEditor()),
).then((whatsappStoryEditorResult) {
  if (whatsappStoryEditorResult != null) {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => SavedImageView(
          image: whatsappStoryEditorResult.image,
          caption: whatsappStoryEditorResult.caption,
        ),
      ),
    );
  }
});

注意：如果用户没有对照片进行任何编辑并离开，则 whatsappStoryEditorResult 可能为 null。SavedImageView 是一个展示编辑后的照片和标题的页面，您可以根据需要修改它。

示例

以下是一个完整的示例，展示了如何集成 whatsapp_story_editor 插件：

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => const WhatsappStoryEditor()),
          ).then((whatsappStoryEditorResult) {
            if (whatsappStoryEditorResult != null) {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => SavedImageView(
                    image: whatsappStoryEditorResult.image,
                    caption: whatsappStoryEditorResult.caption,
                  ),
                ),
              );
            }
          });
        },
        child: Container(
          height: 60,
          width: 60,
          decoration: BoxDecoration(color: Colors.green, shape: BoxShape.circle),
          child: const Icon(
            Icons.camera_alt,
            color: Colors.white,
            size: 20,
          ),
        ),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "Click the camera icon to start editing your story!",
              style: TextStyle(color: Colors.white),
            ),
          ],
        ),
      ),
    );
  }
}

class SavedImageView extends StatelessWidget {
  final String image;
  final String caption;

  const SavedImageView({Key? key, required this.image, required this.caption}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Edited Story"),
      ),
      body: Column(
        children: [
          Image.network(image),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(caption),
          ),
        ],
      ),
    );
  }
}