Stick It

Stick It is a fork of flutter_simple_sticker_view.

Attach stickers on another image. Stickers can be moved, scaled and now also rotated. Export your created composition as image. This package supports null safety and comes with better documentation.

Simplest Example Advanced Example

Getting Started

Add stick_it as a dependency in your pubspec.yaml file. You can also check the installing page. Check out the example page for an advanced example with background image picker, image export, image save and custom settings.

Usage

Import the library via

import 'package:stick_it/stick_it.dart';

Simplest Example

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

class SimplestExample extends StatelessWidget {
  const SimplestExample({Key? key}) : super(key: key);
  static String routeName = 'simplest-example';
  static String routeTitle = 'Simplest Example';
  final String _background =
      'https://images.unsplash.com/photo-1545147986-a9d6f2ab03b5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(routeTitle),
      ),
      body: StickIt(
        /// The [StickIt] Class only requires two named parameters.
        ///
        /// [Widget] child - the child that the stickers should be placed upon.
        /// [List<Image>] stickerList - the list of stickers available to the user.
        ///
        /// StickIt supports a lot of styling related optional named parameters,
        /// that you can change and check out in the AdvancedExample. (tbd)
        child: Image.network(_background),
        stickerList: [
          Image.asset('assets/icons8-anubis-48.png'),
          Image.asset('assets/icons8-bt21-shooky-48.png'),
          Image.asset('assets/icons8-fire-48.png'),
          Image.asset('assets/icons8-jake-48.png'),
          Image.asset('assets/icons8-keiji-akaashi-48.png'),
          Image.asset('assets/icons8-mate-48.png'),
          Image.asset('assets/icons8-pagoda-48.png'),
          Image.asset('assets/icons8-spring-48.png'),
          Image.asset('assets/icons8-totoro-48.png'),
          Image.asset('assets/icons8-year-of-dragon-48.png'),
        ],
      ),
    );
  }
}

Supported Parameters

named parametertyperequireddefaultdescription
childWidgetyesContent you wish to place stickers upon
stickerListList < Image >yesList of sticker images that should be shown within the bottom panel. Those can be placed on top of your child Widget.
devicePixelRatiodoubleno3.0The devices pixel ratio. See also: stackoverflow.com/questions/8785643/what-exactly-is-device-pixel-ratio
panelBackgroundColorColornoColors.blackBackground color of the bottom panel.
panelHeightdoubleno200.0Height of the bottom panel.
panelStickerBackgroundColorColornoColors.white10Background color of the container stickers are placed within.
panelStickerCrossAxisCountintno4Defines how many stickers are placed within one row of the grid.
panelStickerAspectRatiodoubleno1.0Ratio of the cross-axis to the main-axis extent of each child.
stickerMaxScaledoubleno2.0Maximal scaling ratio for your stickers. E.g 2 will allow the sticker to be twice as big!
stickerMinScaledoubleno0.5Minimal scaling ratio for your stickers.E.g 0.5 will allow the sticker to be half as big at minimum!
stickerRotatableboolnotrueControls whether your stickers should be rotatable, while the scaling event is active.Set to false, if you don't want rotation.
stickerSizedoubleno100.0Size of the Rect the stickers are on when placed within the Stack. Setting this value up will only increase the Rect size. So, to display them bigger when placing on the child you will have to set something like fit: Boxfit.cover on the image you are providing in the stickerList.
viewPortSizenoSize(constraints.maxWidth, constraints.maxHeight)Size of the viewport that is provided.You don't have to set this manually, it will take the available space per default.

Supported Methods

function namereturnsdescription
exportImage()FutureCreates an Uint8List out of your composition, that you can use to save as Image.Before that it will clear all selections, so they don't appear on the new creation.

Libraries

stick_it