An Awesome Flutter Widget to render Bottts svg avatars on android/ios

Flutter Avatars – Bottts

There is absolutely no denying it: having your own avatar is freakin’ great! Any app or user experience that includes a fun digital avatar maker is almost always 10x more enjoyable.

That’s why we’re stoked to implement a Flutter Widget to render Bottts svg avatars on android/ios. Certainly, this is a high-performance Flutter Widget for users. 

It is faster than other traditional approaches because it does not use any API and instead renders SVG strings on the fly!


Bottts :

Characters Originally Designed by PabloStanley, the Sketch library can be found on

Getting Started

  1. Create Bottt object:
// Create Bottt with default constructor
var _bottt = Bottt(
    eye: EyeType.Glow,
    face: FaceType.Square03,
    mouth: MouthType.Bite,
    side: SideType.Round,
    texture: TextureType.Dirty01,
    top: TopType.Horns,

// Randomize all properties
var _bottt = Bottt.random();

// Or keep some properties specific & remaining as random
var _bottt = Bottt.random(
  top: TopType.Horns,
  mouth: MouthType.Bite,

  1. Create BotttAvatar widget and pass it the bottt object:
    padding: EdgeInsets.all(20),
    child: BotttAvatar(_bottt),

// Alternatively you can also combine the widget with a CircleAvatar
    radius: 90,
    child: CircleAvatar(
    radius: 85,
    backgroundColor: Color.fromARGB(255, 100, 100, 100),
    child: Padding(
        padding: EdgeInsets.all(20),
        child: BotttAvatar(_bottt),

For Maps: Use botttObject.toJson() and Bottt.fromJson(serializedBotttString) methods to serialize/deserialize bottts.

For Strings: Use botttObject.serialize() and Bottt.deserialize()(serializedBotttString) methods to serialize/deserialize bottts.


Written by James

A Wonderful Flutter Package providing Avatar Glow Widget

Flutter plugin that allows users to create Text Avatar easily