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 -
The appearance of the widgets can be tweaked with DiversimojiThemeData
. 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 Diversimoji data from your server/DB efficiently.
Function Prototype | Description |
---|---|
String decodeDiversimojifromString(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 diversimoji to a Map denoting the selected attributes |
Future<String> encodeMySVGtoString() | Encodes the local user's diversimoji to a Map denoting the selected attributes , and stringifies the result before returning the value. |
Future<List> clearDiversimoji() | Erases local user's diversimoji SVG String and selection from local storage |
SVG Assets used are derived from getavataaars.com .
Use them in your games or social media apps
- Depend on it by importing your package in the
pubspec.yaml
file.dependencies: diversimoji: latest_version
- Add the following import to your .dart file
import 'package:diversimoji/diversimoji.dart';
- Add the DiversimojiCircleAvatar widget to display your Diversimoji where needed.
DiversimojiCircleAvatar();
- To allow your users to personalize their Diversimoji, add the following widget and pair it with the above one in your page.
DiversimojiCustomizer();
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.
DiversimojiCircleAvatar
only renders the local user's avatar. To display the avatar of other users', you'll have to use theSvgPicture.string()
method fromflutter_svg
.DiversimojiCircleAvatar
would render a default avatar until customized and saved by the local user for the first time.- Use the
canvaskit
renderer when building for web, the defaulthtml
renderer will not work with SVGs. - The diversimoji's attributes are saved to local app/browser storage. Clearing app/browser data would mean clearing these attributes as well.
- You can create a
DiversimojiThemeData
instance to configure the look and feel of the widgets to your liking.
- SVG assets from Fang-Pen Lin's GitHub repository
- Icons made by Freepik from www.flaticon.com
- Animated GIF designed by Reesha Shenoy
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 ; )