stick_it

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.

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 parameter	type	required	default	description
child	Widget	yes		Content you wish to place stickers upon
stickerList	List < Image >	yes		List of sticker images that should be shown within the bottom panel. Those can be placed on top of your child Widget.
devicePixelRatio	double	no	3.0	The devices pixel ratio. See also: https://stackoverflow.com/questions/8785643/what-exactly-is-device-pixel-ratio
panelBackgroundColor	Color	no	Colors.black	Background color of the bottom panel.
panelHeight	double	no	200.0	Height of the bottom panel.
panelStickerBackgroundColor	Color	no	Colors.white10	Background color of the container stickers are placed within.
panelStickerCrossAxisCount	int	no	4	Defines how many stickers are placed within one row of the grid.
panelStickerAspectRatio	double	no	1.0	Ratio of the cross-axis to the main-axis extent of each child.
stickerMaxScale	double	no	2.0	Maximal scaling ratio for your stickers. E.g 2 will allow the sticker to be twice as big!
stickerMinScale	double	no	0.5	Minimal scaling ratio for your stickers.E.g 0.5 will allow the sticker to be half as big at minimum!
stickerRotatable	bool	no	true	Controls whether your stickers should be rotatable, while the scaling event is active.Set to false, if you don't want rotation.
stickerSize	double	no	100.0	Size 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].
viewPort	Size	no	Size(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 name	returns	description
exportImage()	Future	Creates 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.