Sticker Widget

Draggable, rotatable, resizable and customizable sticker widgets for Flutter.

Features

• Draggable, rotatable, and resizable sticker box UI.
• Customizable selection handles (rotate / resize / delete).
• Simple models for image and text stickers.
• Sticker data serialization (import/export) via toJson / fromJson.
• Built-in text edit handle for changing the string.

Usage

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

  @override
  State<StickerDemo> createState() => _StickerDemoState();
}

class _StickerDemoState extends State<StickerDemo> {
  final PictureModel imageSticker =
      PictureModel.fromUrl('https://picsum.photos/200');

  final TextModel textSticker = TextModel.fromText('Hello Sticker');

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        return Stack(
          children: [
            StickerWidget(
              boundWidth: constraints.maxWidth,
              boundHeight: constraints.maxHeight,
              data: imageSticker,
            ),
            StickerWidget(
              boundWidth: constraints.maxWidth,
              boundHeight: constraints.maxHeight,
              data: textSticker,
            ),
          ],
        );
      },
    );
  }
}

Import / Export (JSON)

You can serialize the current sticker state to JSON and restore it later. Both PictureModel and TextModel provide toJson() and fromJson(...).

Save (export):

// Image sticker
final imageStickerJson = imageSticker.toJson();

// Text sticker
final textStickerJson = textSticker.toJson();

Load (import):

// Image sticker
final restoredImageSticker =
    PictureModel.fromJson(imageStickerJson as Map<String, dynamic>);

// Text sticker
final restoredTextSticker =
    TextModel.fromJson(textStickerJson as Map<String, dynamic>);

Stack(
  children: [
    StickerWidget(
      boundWidth: constraints.maxWidth,
      boundHeight: constraints.maxHeight,
      data: restoredImageSticker,
    ),
    StickerWidget(
      boundWidth: constraints.maxWidth,
      boundHeight: constraints.maxHeight,
      data: restoredTextSticker,
    ),
  ],
);