flutter_avatar_kit 1.0.1

SVG avatar UI kit with eight categories, grid picker, animated ring, theme-aware card, and path helpers for bundled assets.

Flutter Avatar Kit

133 SVG avatars across 8 styles — scroll each row sideways to preview every face, then use the snippets below in your app.

Full avatar gallery

_{Tip: scroll each row horizontally to browse every SVG. Hover a face for its filename and list index.}

Vibrant | AvatarType.vibrant | 27 avatars

3D | AvatarType.d3 | 5 avatars

Bluey | AvatarType.bluey | 10 avatars

Memo | AvatarType.memo | 35 avatars

Notion | AvatarType.notion | 15 avatars

Teams | AvatarType.teams | 9 avatars

Toon | AvatarType.toon | 10 avatars

Upstream | AvatarType.upstream | 22 avatars

---

A Flutter UI kit for category-based SVG avatars: pick a style, address art by index, optionally show an animated ring, and build pickers with AvatarGrid. Assets ship with the package under assets/<category>/.

This repo sets homepage / repository in pubspec.yaml for pub.dev and GitHub navigation.

---

Features

• Eight visual categories with many SVGs each (see gallery above).
• AvatarWidget — size, shape (circle / rounded / square), selection border, optional gradient ring, random mode.
• AvatarGrid — configurable columns, padding, scroll physics; onSelect and optional onLongPress callbacks (no forced SnackBar in the library).
• AvatarCard — theme-aware surface with optional tap target.
• AvatarAssets — path helpers, counts, and random selection without mutating shared lists.

---

Installation

From Pub (after you publish), or from a path while developing:

dependencies:
  flutter_avatar_kit: ^1.0.1

Path dependency:

dependencies:
  flutter_avatar_kit:
    path: ../flutter_avatar_kit

Run flutter pub get. You do not need to duplicate assets/ entries in your pubspec.yaml; they ship with this package.

---

Quick usage

import 'package:flutter_avatar_kit/flutter_avatar_kit.dart';

AvatarWidget(
  type: AvatarType.teams,
  index: 0,
  size: 48,
  shape: AvatarShape.circle,
  onTap: () {},
)

AvatarWidget(
  type: AvatarType.vibrant,
  isRandom: true,
  showRing: true,
)

AvatarGrid(
  type: AvatarType.memo,
  crossAxisCount: 5,
  padding: const EdgeInsets.all(12),
  onSelect: (index, asset) {},
  onLongPress: (index, asset) {},
)

AvatarCard(
  onTap: () {},
  child: AvatarWidget(type: AvatarType.toon, index: 2),
)

Paths resolve as assets/<enumName>/<id>.svg, e.g. assets/teams/t1.svg.

---

Categories (counts)

AvatarType	Folder	Avatars
vibrant	assets/vibrant/	27
d3	assets/d3/	5
bluey	assets/bluey/	10
memo	assets/memo/	35
notion	assets/notion/	15
teams	assets/teams/	9
toon	assets/toon/	10
upstream	assets/upstream/	22

Indices are 0 … count - 1 in the same order as the gallery rows.

---

Interactive example

From the package root:

cd example
flutter pub get
flutter run

Try category chips, hero preview (tap card to cycle index), ring and random toggles, and the scrollable grid with tap / long-press feedback.

---

API overview

Symbol	Role
AvatarType	Enum of bundled categories.
AvatarAssets.getAsset / getRandomAsset / count	Paths and inventory.
AvatarWidget	Single SVG avatar.
AvatarGrid	Picker grid with selection state.
AvatarCard	Framed child with optional onTap.
AvatarShape	Clip shape for AvatarWidget.
AnimatedGradientRing	Rotating sweep gradient (used when showRing: true).

---

Regenerating the gallery HTML

After adding or renaming SVGs, update counts in lib/src/avatar_assets.dart, then run:

python tool/generate_readme_gallery.py
python tool/assemble_readme.py

---

License

See LICENSE.