Flutter贴纸视图插件sticker_view的使用

Flutter插件sticker_view允许你旋转、调整大小、移动、更新层级和删除任何文本、图片或其他小部件。它为用户提供了一个交互式的编辑环境，以创建个性化的图像或设计。

可用功能

• ✅ 旋转
• ✅ 调整大小
• ✅ 移动
• ✅ 层级更新（改变堆叠位置）
• ✅ 删除

🚀 安装

该插件可在Pub上获取：https://pub.dev/packages/sticker_view

在你的应用程序的pubspec.yaml文件中的dependencies部分添加如下内容：

sticker_view : latest_version

请将latest_version替换为你需要的具体版本号或使用^符号跟随最新稳定版。

🔖 使用方法

集成sticker_view

要集成sticker_view，你需要创建一个StickerView实例，并提供一个包含Sticker对象的列表作为参数。每个Sticker可以是任意的小部件，并且必须有一个唯一的ID。下面是一个简单的例子：

StickerView(
  stickerList: [
    Sticker(
      child: Image.network("https://tinyurl.com/48ne4wj5"),
      id: "uniqueId_111",
    ),
    Sticker(
      child: const Text("Hello"),
      id: "uniqueId_222",
      isText: true,
    ),
  ],
),

将StickerView保存为Uint8List

你可以通过调用StickerView.saveAsUint8List()方法来将当前的StickerView保存为图像数据（Uint8List）。此方法接受一个参数指定图像质量（高、中、低）。

await StickerView.saveAsUint8List(ImageQuality.high);

示例代码

以下是一个完整的示例代码，演示了如何使用sticker_view创建一个带有浮动按钮的应用程序，用户可以通过点击按钮保存当前编辑的内容到本地存储。

import 'dart:io';
import 'dart:typed_data';
import 'package:path_provider/path_provider.dart';
import 'package:flutter/material.dart';
import 'package:sticker_view/stickerview.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        floatingActionButton: FloatingActionButton(
          child: const Icon(Icons.save_alt),
          onPressed: () async {
            Uint8List? imageData = await StickerView.saveAsUint8List(ImageQuality.high);
            if (imageData != null) {
              var imageName = DateTime.now().microsecondsSinceEpoch.toString();
              var appDocDir = await getApplicationDocumentsDirectory();
              String imagePath = '${appDocDir.path}/$imageName.png';
              File imageFile = File(imagePath);
              imageFile.writeAsBytesSync(imageData);
              // ignore: avoid_print
              print("imageFile::::$imageFile");
            }
          },
        ),
        body: Center(
          // Sticker Editor View
          child: StickerView(
            // List of Stickers
            stickerList: [
              Sticker(
                id: "uniqueId_111",
                child: Image.network(
                  "https://images.unsplash.com/photo-1640113292801-785c4c678e1e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=736&q=80",
                ),
              ),
              Sticker(
                id: "uniqueId_222",
                isText: true,
                child: const Text("Hello"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

如果你发现这个项目对你有帮助，请考虑给它一个⭐️并在社交媒体上与你的朋友们分享。欢迎贡献代码！如果你有任何特性请求或遇到bug，可以通过Create a Ticket提交问题。