Flutter贴纸编辑插件sticker_editor_plus的使用

Flutter贴纸编辑插件sticker_editor_plus的使用

插件介绍

sticker_editor_plus 是一个Flutter插件，支持iOS、Android和Mac平台，允许用户旋转、缩放、移动和编辑文本、照片和贴纸。它提供了丰富的功能，包括手动控制小部件的位置、设置拖动区域、自定义样式、序列化文本和图片为JSON格式等。

功能特性

• 手动控制位置：用户可以手动拖动小部件。
• 限制拖动区域：通过 boundHeight 和 boundWidth 参数限制小部件的拖动范围。
• 事件回调：提供 onTap 和 onCancel 回调函数，用户可以自定义这些事件的行为。
• 缩放功能：支持通过手势缩放小部件。
• 高度可定制：可以根据需求自定义编辑器的外观和行为。
• 灵活使用：可以选择使用整个贴纸视图或单独的小部件。
• JSON序列化：可以将文本和图片序列化为JSON格式，便于保存和恢复。

安装

首先，在 pubspec.yaml 文件中添加 sticker_editor_plus 作为依赖项：

dependencies:
  sticker_editor_plus: ^最新版本号

macOS平台

如果你在macOS平台上使用 NetworkImage，需要在 macos/Runner/DebugProfile.entitlements 文件中添加以下键值对，以允许访问网络：

<key>com.apple.security.network.client</key>
<true/>

使用示例

以下是完整的示例代码，展示了如何使用 sticker_editor_plus 插件创建一个包含文本编辑框、图片编辑框和贴纸编辑视图的应用程序。

1. 主应用入口 (main.dart)

import 'package:flutter/material.dart';
import 'package:sticker_editor_plus/sticker_editor_plus.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 const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

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

class _HomePageState extends State<HomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('StickerEditor Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => const StickerEditingViewScreen(),
                  ),
                );
              },
              child: const Text('Sticker Editing View'),
            ),
            const SizedBox(height: 10),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => const TextEditingBoxScreen(),
                  ),
                );
              },
              child: const Text('Text Editing Box'),
            ),
            const SizedBox(height: 10),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => const StickerEditingBoxScreen(),
                  ),
                );
              },
              child: const Text('Picture Editing Box'),
            ),
          ],
        ),
      ),
    );
  }
}

2. 贴纸编辑视图 (StickerEditingViewScreen.dart)

import 'package:flutter/material.dart';
import 'package:sticker_editor_plus/sticker_editor_plus.dart';
import 'package:google_fonts/google_fonts.dart';

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Sticker Editing View'),
      ),
      body: Center(
        child: StickerEditingView(
          height: 300,
          width: 300,
          child: Container(), // 目标小部件
          fonts: [], // 自定义字体列表
          palletColor: Colors.blue, // 颜色面板颜色
          assetList: [], // 贴纸资源列表
          texts: [], // 初始文本列表
          pictures: [], // 初始图片列表
          viewOnly: false, // 是否只读模式
        ),
      ),
    );
  }
}

3. 文本编辑框 (TextEditingBoxScreen.dart)

import 'package:flutter/material.dart';
import 'package:sticker_editor_plus/sticker_editor_plus.dart';
import 'package:google_fonts/google_fonts.dart';

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Text Editing Box'),
      ),
      body: Center(
        child: Container(
          height: 300,
          width: 300,
          color: Colors.blue,
          child: Stack(
            children: [
              TextEditingBox(
                fonts: [], // 自定义字体列表
                boundHeight: 200, // 拖动区域高度
                boundWidth: 100, // 拖动区域宽度
                isSelected: true, // 是否选中
                palletColor: Colors.blue, // 颜色面板颜色
                newText: TextModel(
                  name: 'Text Editing Box',
                  textStyle: GoogleFonts.pacifico(fontSize: 25, color: Colors.white),
                  top: 50, // 初始顶部位置
                  left: 50, // 初始左侧位置
                  scale: 1, // 初始缩放比例
                  isSelected: true, // 是否选中
                  textAlign: TextAlign.center, // 文本对齐方式
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

4. 图片编辑框 (StickerEditingBoxScreen.dart)

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Picture Editing Box'),
      ),
      body: Center(
        child: Container(
          height: 300,
          width: 300,
          color: Colors.blue,
          child: Stack(
            children: [
              StickerEditingBox(
                boundHeight: 200, // 拖动区域高度
                boundWidth: 200, // 拖动区域宽度
                pictureModel: PictureModel(
                  isSelected: false, // 是否选中
                  left: 50, // 初始左侧位置
                  top: 50, // 初始顶部位置
                  scale: 1, // 初始缩放比例
                  stringUrl: 'https://github.com/tinyjin/sticker_editor_plus/blob/main/example/assets/t-shirt.jpeg?raw=true', // 图片URL
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}