Flutter图片贴纸处理插件flutter_image_sticker的使用

Flutter 图片贴纸处理插件 flutter_image_sticker 的使用

简介

flutter_image_sticker 是一个用于在 Flutter 应用程序中添加和保存图片贴纸的插件。通过该插件，用户可以轻松地向图片添加各种贴纸，并将编辑后的图片保存到设备上。

安装

首先，在 pubspec.yaml 文件中添加 flutter_image_sticker 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_image_sticker: ^版本号

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

使用示例

以下是一个完整的示例代码，演示了如何使用 flutter_image_sticker 插件来实现图片贴纸处理功能。

import 'dart:io';
import 'dart:typed_data';

import 'package:flutter/material.dart';
import 'package:flutter_image_sticker/sticker.dart';
import 'package:path_provider/path_provider.dart';

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

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

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

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

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

class _HomePageState extends State<HomePage> {
  List<Sticker> stickers = [];
  File? imageFile;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          actions: [
            IconButton(
                onPressed: () {
                  setState(() {
                    stickers.add(Sticker(
                      key: UniqueKey(),
                      child: Image.asset(
                        'assets/images/sample.png',
                      ),
                    ));
                  });
                },
                icon: const Icon(Icons.add)),
          ],
        ),
        floatingActionButton: Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            FloatingActionButton(
                onPressed: () {
                  showModalBottomSheet(
                      context: context,
                      builder: (context) {
                        return SizedBox(
                          height: MediaQuery.of(context).size.height * 0.7,
                          child: imageFile != null
                              ? Image.file(imageFile!)
                              : const Center(
                                  child: Text('未选择图片'),
                                ),
                        );
                      });
                },
                child: const Icon(Icons.image)),
            const SizedBox(
              width: 10,
            ),
            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';
                  imageFile = File(imagePath);
                  imageFile!.writeAsBytesSync(imageData);
                  // ignore: avoid_print
                  print("imageFile::::$imageFile");
                }
              },
            ),
          ],
        ),
        body: Center(
          // Sticker Editor View
          child: StickerView(
            // List of Stickers
            // 可以从网络加载图片作为贴纸
            backgroundImage: 'assets/images/bg.png',
            stickerList: stickers,
          ),
        ),
      ),
    );
  }
}

代码解析

• 导入必要的库

  import 'dart:io';
  import 'dart:typed_data';
  
  import 'package:flutter/material.dart';
  import 'package:flutter_image_sticker/sticker.dart';
  import 'package:path_provider/path_provider.dart';
  

• 定义主应用入口

  void main() {
    runApp(const MyApp());
  }
  
  class MyApp extends StatelessWidget {
    const MyApp({Key? key}) : super(key: key);
  
    @override
    Widget build(BuildContext context) {
      return const MaterialApp(
        debugShowCheckedModeBanner: false,
        home: HomePage(),
      );
    }
  }
  

• 定义首页

  class HomePage extends StatefulWidget {
    const HomePage({Key? key}) : super(key: key);
  
    @override
    State<HomePage> createState() => _HomePageState();
  }
  
  class _HomePageState extends State<HomePage> {
    List<Sticker> stickers = [];
    File? imageFile;
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            actions: [
              IconButton(
                  onPressed: () {
                    setState(() {
                      stickers.add(Sticker(
                        key: UniqueKey(),
                        child: Image.asset(
                          'assets/images/sample.png',
                        ),
                      ));
                    });
                  },
                  icon: const Icon(Icons.add)),
            ],
          ),
          floatingActionButton: Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              FloatingActionButton(
                  onPressed: () {
                    showModalBottomSheet(
                        context: context,
                        builder: (context) {
                          return SizedBox(
                            height: MediaQuery.of(context).size.height * 0.7,
                            child: imageFile != null
                                ? Image.file(imageFile!)
                                : const Center(
                                    child: Text('未选择图片'),
                                  ),
                          );
                        });
                  },
                  child: const Icon(Icons.image)),
              const SizedBox(
                width: 10,
              ),
              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';
                    imageFile = File(imagePath);
                    imageFile!.writeAsBytesSync(imageData);
                    // ignore: avoid_print
                    print("imageFile::::$imageFile");
                  }
                },
              ),
            ],
          ),
          body: Center(
            // Sticker Editor View
            child: StickerView(
              // List of Stickers
              // 可以从网络加载图片作为贴纸
              backgroundImage: 'assets/images/bg.png',
              stickerList: stickers,
            ),
          ),
        ),
      );
    }
  }