Jdenticon uses a string as input (for example: a name, label, or customer id) and hashes this string which then is used to generate a "personalized" icon, which is called an identicon. Identicons can be used for many things, but generally are deployed as an enhanced version of an avatar automatically assigned to an account or client. If you want to learn more about Jdenticon, click here.
This library can be used in any Dart project, but this guide assumes Flutter is used to create and display the identicons. Jdenticon exposes the function
toSvg which is the only function needed to generate an identicon. The result of
toSvg is a raw SVG string. Flutter cannot natively display raw SVG strings as images. Therefore, Jdenticon needs the library flutter_svg to easily integrate the rendering of SVG, so import
flutter_svg also in your project.
It only takes 2 steps to show the identicon in Flutter:
- Give a string
input(for example, a name, label or id) to the function
Jdenticon.toSvg(input)to obtain a raw SVG string:
// please note that Jdenticon is case-sensitive, so 'jim' gives another identicon than 'Jim' or 'JIM' String rawSvg = Jdenticon.toSvg('Your input string');
- You can now render the identicon wherever you want with
SvgPicture.string(rawSvg, fit: BoxFit.fill, height: 128, width: 128,). This returns a Widget that renders the identicon wherever it is placed in the Widget tree. Use the settings provided by SvgPicture (fit, height, width, alignment, etc.) to change the sizing and behavior:
// you can store the SVG as a Widget for later use Widget identicon = SvgPicture.string(rawSvg, fit: BoxFit.contain, height: 128, width: 128,); // or simply use it directly like any other Widget Widget card = Card( child: Column( children: <Widget>[ SvgPicture.string(rawSvg, fit: BoxFit.contain, height: 64, width: 64,), SizedBox(height: 12.0,), SvgPicture.string(rawSvg, fit: BoxFit.scaleDown, height: 128, width: 128,), SizedBox(height: 12.0,), SvgPicture.string(rawSvg, fit: BoxFit.fitWidth, width: 256,), ], ), );
Jdenticon offers customization options to its users to change the appearance of the identicons. You can override any of the configuration settings. See the icon designer page for more details. For example:
final String rawSvg = Jdenticon.toSvg('Your input string', colorSaturation: 0.48, grayscaleSaturation: 0.48, colorLightnessMinValue: 0.84, colorLightnessMaxValue: 0.84, grayscaleLightnessMinValue: 0.84, grayscaleLightnessMaxValue: 0.84, backColor: '#2a4766ff', hues: );
The code above will make your identicons look like this:
Jdenticon comes with a complete
example.dart file in the example folder. Run this file in Flutter to see Jdenticon in action.
Here is a sample:
Jdenticon Dart is available under the MIT license. 2019 Vergill Lemmert.
- Built-in types and core primitives for a Flutter application. [...]
- Support for asynchronous programming, with classes such as Future and Stream. [...]
- Classes and utilities that supplement the collection support in dart:core. [...]
- Encoders and decoders for converting between different data representations, including JSON and UTF-8. [...]
- Built-in types, collections, and other core functionality for every Dart program. [...]
- Interact with developer tools such as the debugger and inspector. [...]
- Mathematical constants and functions, plus a random number generator. [...]
- Lists that efficiently handle fixed sized data (for example, unsigned 8 byte integers) and SIMD numeric types. [...]
- File, socket, HTTP, and other I/O support for non-web applications. [...]
- Concurrent programming using isolates: independent workers that are similar to threads but don't share memory, communicating only via messages. [...]