psk907 / fluttermoji

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.

Hi there 👋

💻🔭 I'm a technology and space enthusiast who likes to build stuff with code and see products come to life !

My best work yet :

• GDSC RIT - Mobile App

  Official community app for Google Developer Student Clubs - Ramaiah Institute of Technology. Get access to the latest events and happenings at MSRIT, discover new jobs and internships, share your blogs and projects with the audience and much more ! Gained 500+ downloads and currently upto 300 active users.

• Fluttermoji | pub.dev

  A light-weight and highly customizable SVG avatar set for Flutter, which provides a Customizer Widget, CircleAvatar and other utility functions, all with sound Null Safety. Gained 100+ likes and is shortlisted by the Google DevLibrary.

• Tug Of War - A Witty Multiplayer Game

  An online multiplayer game designed to be played with friends, family or with a partner. Engage yourself in a enticing session of fun and relatable questions that teases your squad to the limits ! Earned more than 1200 installs on the Google Play Store.

fluttermoji's Issues

Error in mobil's browser

The widget does not work fine in mobile browsers like iOS Safari and Chrome and Android Chrome, I a desktop browser works fine

Migrate and upgrade this package

Migrate to android embedding v2,
upgrade flutter version and packages.

This is a great package and needs to be able to utilized by the masses.

Perhaps, It's easier to start a new project, that will get most of the work done.

How to update the saved avatar?

I have save the avatar using
FluttermojiFunctions().encodeMySVGtoString()
and I want to give option to user to edit this avatar. I am not able to find any constructor where I can give this value in this format
SvgPicture.string(FluttermojiFunctions().decodeFluttermojifromString(avatarSvgStrings[_currentMoodIndex]))

Problem is user have to create the new avatar from scratch rather than editing this one.
If I would be able to listen the changes from FluttermojiCustomizer, I would update the above avatar.

Support to WASM in flutter web

This library has errors for WASM;

package:fluttermoji => package:get => dart:HTML

maybe the problem is from by the library get

Context: The unavailable library 'dart:html'

Customizer doesn't show current selection on first load

When I first load a page with the customizer on it first shows the default values rather than the ones the user last chose and saved. However as soon as you interact with it and go to a different page it loads the current selection. How can I force it show the current avatar options from the start?

The emoji saves when I go back

If I make a change to the emoji, even if I just go back without pressing the save icon, i see the changes.

i want to add some more attribute and close look as facebook avtar

How to get the raw string given to SvgPicture

I want to obtain the finalized SVG to save to my server. The SVG that can be used within the Fluttermoji library. I believe this is the same raw string that must be given to SvgPicture.string() for it to display. How do I obtain this?

how to save

how can i save the image to database like firebase their no documentation on that?

Svg issue with FluttermojiCircleAvatar( )

I suddenly have a problem with FluttermojiCircleAvatar( )

══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
The following StateError was thrown building SvgPicture("Instance of 'SvgStringLoader'", height:
64.0, clipBehavior: hardEdge, colorFilter: "null", placeholderBuilder: Closure: (BuildContext) =>
Center, semanticsLabel: "Your Fluttermoji"):
Bad state: Invalid SVG data

The relevant error-causing widget was:
SvgPicture
SvgPicture:file:///C:/Users/ghenr/AppData/Local/Pub/Cache/hosted/pub.dev/fluttermoji-1.0.2/lib/fluttermojiCircleAvatar.dart:35:29

When the exception was thrown, this was the stack:
#0 SvgParser._parseTree (package:vector_graphics_compiler/src/svg/parser.dart:792:7)
#1 SvgParser.parse (package:vector_graphics_compiler/src/svg/parser.dart:799:5)
#2 parse (package:vector_graphics_compiler/vector_graphics_compiler.dart:76:17)
#3 encodeSvg (package:vector_graphics_compiler/vector_graphics_compiler.dart:143:5)
#4 SvgLoader._load.. (package:flutter_svg/src/loaders.dart:156:14)
#5 _testCompute (package:flutter_svg/src/utilities/compute.dart:12:38)
#6 SvgLoader._load. (package:flutter_svg/src/loaders.dart:154:21)
#7 SynchronousFuture.then (package:flutter/src/foundation/synchronous_future.dart:43:39)
#8 SvgLoader._load (package:flutter_svg/src/loaders.dart:153:36)
#9 SvgLoader.loadBytes. (package:flutter_svg/src/loaders.dart:177:59)
#10 Cache.putIfAbsent (package:flutter_svg/src/cache.dart:82:29)
#11 SvgLoader.loadBytes (package:flutter_svg/src/loaders.dart:177:22)
#12 _VectorGraphicWidgetState._loadPicture (package:vector_graphics/src/vector_graphics.dart:355:16)
#13 _VectorGraphicWidgetState._loadAssetBytes (package:vector_graphics/src/vector_graphics.dart:402:5)
#14 _VectorGraphicWidgetState.didChangeDependencies (package:vector_graphics/src/vector_graphics.dart:319:5)
#15 StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:5620:11)
#16 ComponentElement.mount (package:flutter/src/widgets/framework.dart:5447:5)
... Normal element mounting (7 frames)
#23 Element.inflateWidget (package:flutter/src/widgets/framework.dart:4326:16)
#24 Element.updateChild (package:flutter/src/widgets/framework.dart:3831:20)
#25 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:5496:16)
#26 StatefulElement.performRebuild (package:flutter/src/widgets/framework.dart:5634:11)
#27 Element.rebuild (package:flutter/src/widgets/framework.dart:5187:7)
#28 BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2895:19)
#29 WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:984:21)
#30 RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:457:5)
#31 SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1325:15)
#32 SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1255:9)
#33 SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:1113:5)
#34 _invoke (dart:ui/hooks.dart:312:13)
#35 PlatformDispatcher._drawFrame (dart:ui/platform_dispatcher.dart:383:5)
#36 _drawFrame (dart:ui/hooks.dart:283:31)

════════════════════════════════════════════════════════════════════════════════════════════════════

Another exception was thrown: Bad state: Invalid SVG data

The asset does not exist or has empty data. : Unhandled Exception: Unable to load asset:

E/flutter (21753): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: Unable to load asset: "packages/fluttermoji/attributeicons/beardcolor.svg".
E/flutter (21753): The asset does not exist or has empty data.
E/flutter (21753): #0 PlatformAssetBundle.load. (package:flutter/src/services/asset_bundle.dart:324:9)
E/flutter (21753):
E/flutter (21753): #1 SvgLoader._load. (package:flutter_svg/src/loaders.dart:152:41)
E/flutter (21753):
E/flutter (21753): #2 _VectorGraphicWidgetState._loadPicture. (package:vector_graphics/src/vector_graphics.dart:355:40)
E/flutter (21753):
E/flutter (21753): #3 _VectorGraphicWidgetState._loadPicture. (package:vector_graphics/src/vector_graphics.dart:369:13)
E/flutter (21753):
E/flutter (21753): #4 _VectorGraphicWidgetState._loadAssetBytes. (package:vector_graphics/src/vector_graphics.dart:402:45)
E/flutter (21753):
can not load svg images for the attributeIcons

How to make fluttermoji set to default after changes??

Customize the svg assets

Dear creator psk907, thanks a lot for your package, looks really interesting, my question is, is it allowed to exchange my own svg assets instead, and how? thanks a lot for clarification! Have a nice day!

Random avatar

How do we randomize avatars? I need to display several of them on the screen.

Migrate example to Null Safety

Description

The deployment at psk907.github.io/fluttermoji/ is the example project for this package.
It is currently built on unsound null safety. Since Null Safety is the standard these days, I'd like the example/ project to be migrated as well.

The fluttermoji package already supports Null Safety.

Steps to migrate to Null Safety

Step 1 : Switch to the example/ directory.

$ cd example/

Step 2 : Ensure you're on the latest version of Flutter and Dart

$ flutter upgrade

# To check if everything is setup
$ flutter doctor -v

Step 3 : Start the Dart Migration Tool

$ dart migrate

• The tool produces a line with a http link, open the same in your browser to find the interactive migration UI.
• Further instructions for this step are available here: dart.dev/null-safety/migration-guide#step2-migrate
• Once you're confident, apply changes to complete migration.

Step 4 : Make sure everything works

• Run the project on Web and Android/iOS and make sure everything works.
• Run flutter analyze to make sure there are no new issues.

And that's it !!

Go ahead and push your changes and I'll be waiting on the other side for your PR. 😋

Resources:

• Migrating to Null Safety
• Overview of Sound Null Safety
• Contributing Guidelines

i want to save svg image to database or to show in another place

Removal of get and shared_preferences

This seems like a really useful package to use for a lot of people imo 👍 .
Unfortunately it seems to be created for people who opt in into the getX state management.
For me this makes it harder to understand how to use this library ☹️ .

You might want to consider removing the dependency to share_preferences and get and exposing parameters in FluttermojiCircleAvatar and FluttermojiCustomizer, so the widget can be used like flutter default widgets and leave how to save and distribute the data to the user.

(Another option might be to create a seperate package for the CircleAvatar & Customizer and then let this package depend on it, while keeping the getX and share_preferences intact.)

For reference, flutter_avatars_bottts seems to do a great job at archiving this.

Need to change default emoji

I need to change default emoji which is of female gender. Can you please guide, as i imported files in my code but i did not find where to change.

Default Svg image get display while using SvgPicture.string(encoded)

Default Svg image get display while using SvgPicture.String(decoded), First I encode the current FluttermojiCircleAvatar using the
FluttermojiFunctions and then decode it to display with the help of SvgPicture.String(decoded).

How to add additional svg in emoji customiser? is it possible to add on ourself

How to get the result?

First of all, great package.

I was looking for a way to get the avatar details when changed or saved. So that the data can be stored in my db and used for other users as well.

Show / hide save icon

Is there a way to show or hide the save icon?

getting old code for the SVG when saving the avatar

Hello you have made awesome library and thanks for that .

we are using FlutterMoji functions to get SVG code and then converting it into .svg file
String encodeMySVGtoString = await FluttermojiFunctions().encodeMySVGtoString();
String decodeFluttermojifromString = await FluttermojiFunctions().decodeFluttermojifromString(encodeMySVGtoString);

problem is that here decodeFluttermojifromString gives the code for previous avatar , not the one i have customize right now .

calling , FlutterMoji functions from onTap callback of FluttermojiSaveWidget . call back supposed to be trigger after after saving the svg changes in SharedPreference according to document .
Additonal callbacks to be triggered on tapping the widget after the save operation is executed.

but looking at flutterMojiSaveWidget.dart found that onTap callback being called without waiting for fluttermojiController.setFluttermoji(); , which can be done by await and async .

can you please check at issue

Graphic bug on IOS

Hi, I noticed that on IOS the avatar has graphic bugs as I attach in the photo. In addition, the picker is also not as optimized as Android:

Background Color

Can export the background color with the rest of SVG items?

Thanks

Upgrade Request

The current cloths, body, accessories, mouth features are very less. Please add some more.

Update to flutter_svg 2.0.0+1

Is there any provision for updating the library to comply with flutter_svg 2.0.1?

feature request: internalization of the fluttermojiCustomizer

Hello.
i love this package, but i am working on an international app that will support 6 languages.
it would be nice if we can translate the words in the fluttermojiCustomizer or if we can omit them, as the icons are self explanatory.
i couldn't find it in the docs if its already done.

thank you

telegram link not working

Telegram link is not working on my jio network

possible fix - change t.me to telegram.me

I got error with FluttermojiController with getx

Code:

  FluttermojiController fluttermojiController =
      Get.find<FluttermojiController>();

Error:

════════ Exception caught by widgets library ═══════════════════════════════════
The following message was thrown building Builder:
"FluttermojiController" not found. You need to call "Get.put(FluttermojiController())" or "Get.lazyPut(()=>FluttermojiController())"

The relevant error-causing widget was
MaterialApp
lib\my_app.dart:114
When the exception was thrown, this was the stack

Avatar not being updated | Unhandled Exception: type 'Null' is not a subtype of type 'int' in type cast

The "_getFluttermojiProperty()" method in FluttermojiController is throwing a CastError, this happens when getting the emoji options, the first click to add a property to the avatar, so the FluttermojiCircleAvatar keeps showing the indicator, I tried to see whether it could my issue, but closely followed your example on the pub. dev.

I have both the FluttermojiCircleAvatar, The customizer and the save widget on one page, and added the controller to dependency injection, I think this is something to look into. I like the simplicity of this plugin. Thanks for the work!

Attached is an image of the stack, Thanks.

v1.0.0 coming soon !!

I am currently working on the 1.0.0 version of fluttermoji, which is set to bring major improvements and features to the library.

Here's what you can expect from the update -

1. FluttermojiThemeData : A comprehensive way to adjust properties like text style, background color, padding and much more in the customizer widget! This will let you adapt the FluttermojiCustomizer 's look to your app's theme and style.
2. Refined layout : Fixes minor visual glitches and inconsistencies across the board
3. More documentation: This will help you understand how to work with the library and even send/receive fluttermoji data to/from your backend/storage.

I shall push this update in the first half of Feb 2022.

If you have any features you'd like me to add/ bugs you'd like me to fix, please add it to this thread. Thank you !

More customization

Hi, thank you for your work!

I would like to add the following customizations things:

1. Callback on 'save'
2. Set a custom save button out of the module, in other words, ability to use Controller method: setFluttermoji from outside
3. Ability to set custom fonts for text components inside the widget
4. Ability to programmable pre set image

Thanks in advance,
Best, Alex

flutter_svg upgrade

Please consider upgrading pubspec.yaml to the most recent version.
flutter_svg: ^0.23.0+1