Flutter贴纸编辑插件stickereditor的使用

Sticker Editor

一个用于iOS、Android和Mac的Flutter插件，支持旋转、缩放、移动和编辑文本、照片和贴纸。

功能 💚

• 手动控制部件的位置，可以拖拽。
• 可以通过boundHeight和boundWidth参数限制拖拽区域。
• onTap和onCancel函数允许用户自定义操作。
• 可以通过缩放功能调整大小。
• 高度可定制化。
• 可以使用整个贴纸视图或特定组件。

安装

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

dependencies:
  stickereditor: ^x.y.z

macOS

对于NetworkImage，macOS需要请求特定权限才能访问网络。打开macos/Runner/DebugProfile.entitlements文件，并添加以下键值对：

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

如何使用

贴纸视图

StickerEditingView(
  isnetwork: false,
  height: 300,
  width: 300,
  imgUrl: backgroundImageUrl,
  fonts: fonts,
  palletColor: colorPallet,
  assetList: stickerList,
),

文本编辑框

Container(
  height: 300,
  width: 300,
  color: Colors.blue,
  child: Stack(
    children: [
      TextEditingBox(
        fonts: fonts,
        boundHeight: 200,
        boundWidth: 100,
        isSelected: true,
        palletColor: colorPallet,
        newText: TextModel(
            name: 'Text EditingBox',
            textStyle:
                GoogleFonts.pacifico(fontSize: 25, color: Colwhite),
            top: top,
            isSelected: true,
            textAlign: TextAlign.center,
            scale: 1,
            left: left),
      ),
    ],
  ),
),

图片编辑框

Container(
  height: 300,
  width: 300,
  color: Colors.blue,
  child: Stack(
    children: [
      StickerEditingBox(
          boundHeight: 200,
          boundWidth: 200,
          pictureModel: PictureModel(
            isNetwork: true,
            isSelected: false,
            left: 50,
            top: 50,
            scale: 1,
            stringUrl:
                'https://raw.githubusercontent.com/Harsh-Radadiya/sticker_editor/master/assets/t-shirt.jpeg',
          )),
    ],
  ),
)

示例代码

运行示例应用以了解更多信息。以下是示例代码：

import 'package:flutter/material.dart';
import 'package:stickereditor_example/view.dart';

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@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('StickerEditingViewScreen')),
            const SizedBox(height: 10),
            ElevatedButton(
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => const TextEditingBoxScreen()),
                  );
                },
                child: const Text('TextEditingBox')),
            const SizedBox(height: 10),
            ElevatedButton(
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => const StickerEditingBoxScreen()),
                  );
                },
                child: const Text('StickerEditingBox'))
          ],
        ),
      ),
    );
  }
}