Sticker Editor

A flutter plugin for iOS, Android and Mac for Rotate, Scaling, Moving and Editing Text, Photo, Stickers.

Sticker Editor

Only Text	Only Photo

A flutter package Sticker Editor which will help you to create editable and scalable text or sticker widget that can be dragged around the area you given in screen.

Features 💚

• Manually Control the position of the widget along with drags.
• You can bound the dragarea of your widget using boundHeight and boundWidth parameters
• onTap and onCancel function where user's can use there own function
• You can resizes widget using scaling function
• Highly customizable
• You can use whole sticker view or particular widgets
• Serialize the Texts and Pictures in JSON format

Installation

First, add stickereditor as a dependency in your pubspec.yaml file.

MacOs

Fore NetworkImage, macOS needs you to request a specific entitlement in order to access the network. To do that open macos/Runner/DebugProfile.entitlements and add the following key-value pair.

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

How to use

• Sticker View

StickerEditingView(
  height: 300,
  width: 300,
  child: targetWidget,
  fonts: fonts,
  palletColor: colorPallet,
  assetList: stickerList,
  texts: texts, // Texts to be shown in the Sticker Editor
  pictures: pictures, // Pictures to be shown in the Sticker Editor
  viewOnly: false, // If true, the Sticker Editor will be in view only mode
),

• Text Editing Box

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),
      ),
    ],
  ),
),

• Picture Editing Box

Container(
  height: 300,
  width: 300,
  color: Colors.blue,
  child: Stack(
    children: [
      StickerEditingBox(
          boundHeight: 200,
          boundWidth: 200,
          pictureModel: PictureModel(
            isSelected: false,
            left: 50,
            top: 50,
            scale: 1,
            stringUrl: 'https://github.com/tinyjin/sticker_editor_plus/blob/main/example/assets/t-shirt.jpeg?raw=true',
          )),
    ],
  ),
)

Run the example app in the exmaple folder to find out more about how to use it.