Flutter图片贴纸插件image_stickers的使用

image_stickers是一个用于在Flutter应用中添加和编辑图片贴纸的插件。本文将介绍如何安装和使用该插件，并提供一个完整的示例Demo。

功能演示

你可以尝试在线Demo来体验该插件的功能。

开始使用

安装

在你的pubspec.yaml文件中添加以下依赖：

dependencies:
  ...
  image_stickers: 0.0.6

然后运行flutter pub get命令来安装插件。

使用方法

基本用法

下面是一个简单的示例，展示了如何使用ImageStickers组件：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Image Stickers Demo')),
        body: ImageStickers(
          backgroundImage: AssetImage("assets/background.png"),
          stickerList: [
            UISticker(
              imageProvider: AssetImage("assets/sticker.png"),
              x: 100,
              y: 100,
              editable: true,
            ),
          ],
        ),
      ),
    );
  }
}

完整示例

以下是一个更完整的示例，包括添加、保存和显示贴纸功能：

import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:image_stickers/image_stickers.dart';
import 'package:image_stickers/image_stickers_controls_style.dart';
import 'dart:ui' as ui;

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(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<UISticker> stickers = [];
  late ImageStickersController controller;
  Uint8List? resultImage;

  [@override](/user/override)
  void initState() {
    super.initState();
    stickers.add(createSticker(0));
    controller = ImageStickersController();
  }

  UISticker createSticker(int index) {
    return UISticker(
      imageProvider: const AssetImage("assets/sticker.png"),
      x: 100 + 100.0 * index,
      y: 360,
      editable: true,
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Row(
              children: [
                TextButton(
                  onPressed: () {
                    setState(() {
                      stickers.add(createSticker(stickers.length));
                    });
                  },
                  child: const Text("Add sticker"),
                ),
                TextButton(
                  onPressed: () async {
                    var image = await controller.getImage();
                    var byteData = await image.toByteData(format: ui.ImageByteFormat.png);
                    setState(() {
                      resultImage = byteData!.buffer.asUint8List();
                    });
                  },
                  child: const Text("Save Image"),
                ),
              ],
            ),
            Expanded(
              flex: 7,
              child: ImageStickers(
                backgroundImage: const AssetImage("assets/car.png"),
                stickerList: stickers,
                stickerControlsStyle: ImageStickersControlsStyle(
                  color: Colors.blueGrey,
                  child: const Icon(Icons.zoom_out_map, color: Colors.white),
                ),
                controller: controller,
                stickerControlsBehaviour: StickerControlsBehaviour.alwaysShow,
              ),
            ),
            Expanded(
              flex: 3,
              child: resultImage == null
                  ? Container()
                  : Image(image: MemoryImage(resultImage!)),
            ),
          ],
        ),
      ),
    );
  }
}