fluttermoji 1.0.0 icon indicating copy to clipboard operation
fluttermoji: ^1.0.0 copied to clipboard

A light-weight and highly customizable SVG avatar library for Flutter apps. Provides a Customizer Widget, CircleAvatar and other utility functions that are ready-to-use.

fluttermoji #

Pub Version Generic badge GitHub stars GitHub stars

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 -

NameDescriptionScreenshot
FluttermojiCircleAvatarUse your fluttermoji anywhere in your Flutter app with a simple customizable widget. Supports material dark theme too.1608830483994
FluttermojiCustomizerA comprehensize UI to customize the user's fluttermoji. Offers previews of each individual component and whose looks can be tweaked with a FluttermojiThemeData1608827561239
FluttermojiSaveWidgetRenders a save button by default OR can be used as an [InkWell] wrapper for the [child] widget.1608827561239

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 PrototypeDescription
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<ListErases local user's fluttermoji SVG String and selection from local storage

SVG Assets used are derived from getavataaars.com .

Screenshots #

Example app #

Try out the demo on your browser now

Use them in your games or social media apps

Usage Instructions #

  1. Depend on it by importing your package in the pubspec.yaml file.
     dependencies:
           fluttermoji: latest_version
    
  2. Add the following import to your .dart file
     import 'package:fluttermoji/fluttermoji.dart';
    
  3. Add the FluttermojiCircleAvatar widget to display your Fluttermoji where needed.
     FluttermojiCircleAvatar();
    
  4. To allow your users to personalize their Fluttermoji, add the following widget and pair it with the above one in your page.
     FluttermojiCustomizer();
    

That's all it takes, simple right ? The two widgets communicate with each other and update in real-time throughout your widget tree.

Usage Guidelines #

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.
  • Use the canvaskit renderer when building for web, the default html renderer will not work with SVGs.
  • The fluttermoji's attributes are saved to local app/browser storage. Clearing app/browser data would mean clearing these attributes as well.
  • You can create a FluttermojiThemeData instance to configure the look and feel of the widgets to your liking.

Attributions #

Community #

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 ; )

154
likes
140
pub points
87%
popularity

Publisher

unverified uploader

A light-weight and highly customizable SVG avatar library for Flutter apps. Provides a Customizer Widget, CircleAvatar and other utility functions that are ready-to-use.

Homepage

Documentation

API reference

License

Icon for licenses.MIT (LICENSE)

Dependencies

flutter, flutter_svg, get, shared_preferences

More

Packages that depend on fluttermoji