A light-weight and highly customizable SVG graphic set for Flutter which generates avatars and provides a Customizer Widget, personalized CircleAvatar and other utility functions.
A light-weight and highly customizable SVG graphic set for Flutter, which provides a Customizer Widget, CircleAvatar and other utility functions.
This package provides you three easy-to-use widgets -
Name | Description | Screenshot |
---|---|---|
FluttermojiCircleAvatar | Use your fluttermoji anywhere in your Flutter app with a simple customizable widget. Supports material dark theme too. | |
FluttermojiCustomizer | A comprehensize UI to customize the user's fluttermoji. Offers previews of each individual component and whose looks can be tweaked with a FluttermojiThemeData |
|
FluttermojiSaveWidget | Renders a save button by default OR can be used as an [InkWell] wrapper for the [child] widget. |
The appearance of the widgets can be tweaked with FluttermojiThemeData
. It let's you change things like the customizer's background colours, the box decoration etc.
Use the given utility functions to send and receive Fluttermoji data from your server/DB efficiently.
Function Prototype | Description |
---|---|
String decodeFluttermojifromString(String encodedData) | Decode your string containing the attributes to a SVG and render it by enclosing this string with a SvgPicture.string() |
Future<Map> encodeMySVGtoMap() | Encodes the local user's fluttermoji to a Map denoting the selected attributes |
Future<String> encodeMySVGtoString() | Encodes the local user's fluttermoji to a Map denoting the selected attributes , and stringifies the result before returning the value. |
Future<List |
Erases local user's fluttermoji SVG String and selection from local storage |
SVG Assets used are derived from getavataaars.com .
Try out the demo on your browser now
Use them in your games or social media apps
pubspec.yaml
file.
dependencies:
fluttermoji: latest_version
import 'package:fluttermoji/fluttermoji.dart';
FluttermojiCircleAvatar();
FluttermojiCustomizer();
That's all it takes, simple right ? The two widgets communicate with each other and update in real-time throughout your widget tree.
The package offers a ton of features in the simplest way possible, however there are some points worth noting.
FluttermojiCircleAvatar
only renders the local user's avatar. To display the avatar of other users', you'll have to use the SvgPicture.string()
method from flutter_svg
.FluttermojiCircleAvatar
would render a default avatar until customized and saved by the local user for the first time.canvaskit
renderer when building for web, the default html
renderer will not work with SVGs.FluttermojiThemeData
instance to configure the look and feel of the widgets to your liking.If you find any issues or have some feedback, please raise the same on the GitHub repo or contact me directly.
Do leave a thumbs up if you liked it.
Happy Fluttering ; )