sticker_widget 0.0.1

Draggable, rotatable, and resizable sticker widgets for Flutter.

example/lib/main.dart

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sticker Widget Example',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.teal),
        useMaterial3: true,
      ),
      home: const StickerWidgetDemo(),
    );
  }
}

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

  @override
  State<StickerWidgetDemo> createState() => _StickerWidgetDemoState();
}

class _StickerWidgetDemoState extends State<StickerWidgetDemo> {
  final PictureModel _imageSticker = PictureModel.fromUrl(
    'https://picsum.photos/200',
    top: 120,
    left: 120,
    scale: 2,
  );

  final TextModel _textSticker = TextModel.fromText(
    'Hello Sticker',
    top: 240,
    left: 40,
    textStyle: const TextStyle(
      fontSize: 28,
      color: Colors.black,
      fontWeight: FontWeight.w600,
    ),
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Sticker Widgets')),
      body: LayoutBuilder(
        builder: (context, constraints) {
          final boundWidth = constraints.maxWidth;
          final boundHeight = constraints.maxHeight;

          return Stack(
            children: [
              Positioned.fill(
                child: Container(
                  color: Colors.grey.shade100,
                  alignment: Alignment.topCenter,
                  child: Padding(
                    padding: const EdgeInsets.all(16),
                    child: Text(
                      'Drag, rotate, and resize stickers.\nTap to toggle the handles.\nUse the edit handle to change the text.',
                      textAlign: TextAlign.center,
                      style: Theme.of(context).textTheme.bodyMedium,
                    ),
                  ),
                ),
              ),
              StickerWidget(
                boundWidth: boundWidth,
                boundHeight: boundHeight,
                data: _imageSticker,
              ),
              StickerWidget(
                boundWidth: boundWidth,
                boundHeight: boundHeight,
                data: _textSticker,
              ),
            ],
          );
        },
      ),
    );
  }
}