How I won Telegram's $50,000 Sticker App Contest using Flutter

Telegram Contests

Telegram runs its own platform contest.com with developer challenges aimed at adding or improving features of Telegram ecosystem.

The contests are paid and prize pools are split between participants based on their results.

Sticker App Contest

On June 25 2021 Sticker App Contest was announced.

The task was to create a mobile app that let users create and export Telegram stickers.

The contest had a prize pool of $50,000, and participants had less than 10 days to develop their app.

I decided to take on this challenge using Flutter.

TStick app

The app I created, TStick, is an image manipulation app designed for telegram static stickers.

My goal was to provide good UI/UX and make the features I implemented polished.

Using Telegram native iOS and Android libraries in Flutter

The core feature of a sticker app is exporting stickers. 

Telegram team provided iOS and Android libraries for loading images in Telegram app and creating a sticker set from them. However, accessing native iOS and Android libraries in Flutter requires creating a Flutter plugin. Fortunately, Iurii Dorofeev created such a plugin and with a few small changes in my fork, it was suitable to be used in TStick app.

Translating, resizing and rotating

In TStick translation, resizing and rotation is used for the whole sticker, text, and added images. 

Flutter provides high-level GestureDetector callbacks to handle these transformations.

Transformer is used to apply manipulation data.

Drawing

Users can draw with a specific brush size and color.

Drawing data is taken from Listener widget.

The drawing itself is done with CustomPainter.

Text

Users can add text with a specific color and font.
The text can be transformed before being saved.

Manual background cut

To manually cut the background, users must draw the cutting area. Cutting area data points are captured with Listener widget.

To make a background cut, CustomClipper is used.

The cutting path is just a line through the points.

Auto background removal

Auto background removal is another method for cutting the background.

This feature is server-side and uses rembg running on the server. Rembg provides API access that takes an image as input and returns the same image with the background removed.

The only thing that I had to keep in mind is to compress the image before sending it to the server as full-size images take a lot of time to upload and process.

Outline

This feature creates a white border around non-transparent parts of the sticker. This is useful when a background manual or automatic cut was used and the shape of the sticker needs to be highlighted.

It is also helpful when our sticker is dark and we want to make it visible when posted in a chat with a dark background.

The outline is created by drawing a line through outline pixels.

To calculate outline pixels, an image of the current scene is captured and compressed for ease of pixel-by-pixel analysis. Outline pixels are transparent pixels with non-transparent pixels around them.

Exporting sticker packs

Stickers packs are exported from the sticker pack page.

Sticker App Contest results

On November 11 2021, the results were posted and TStick placed 1st out of 79 submissions.

The app was highlighted as the one that came close to achieving all of the evaluation criteria and won the largest share of the $50,000 prize pool.

How to install the app

If you want to create a Telegram stickerpack using TStick by yourself, the app is available on Apple App Store and Google Play:
https://apps.apple.com/app/tstick/id1575132889
https://play.google.com/store/apps/details?id=xyz.freelanceinfluence.tstick