Jdenticon Dart

MIT License

This is the Dart/Flutter implementation of the Jdenticon project which was created with JavaScript. Jdenticon is a quick and easy to use library for generating highly recognizable identicons using SVG.

Sample identicons

Getting Started

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 flutter_svg by calling 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,),
    ],
  ),
);

Advanced use

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: [207]);

The code above will make your identicons look like this: Custom icons

Example

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: Example

License

Jdenticon Dart is available under the MIT license. 2019 Vergill Lemmert.

Libraries

jdenticon_dart

Dart

dart:ui
Built-in types and core primitives for a Flutter application. [...]

Core

dart:async
Support for asynchronous programming, with classes such as Future and Stream. [...]
dart:collection
Classes and utilities that supplement the collection support in dart:core. [...]
dart:convert
Encoders and decoders for converting between different data representations, including JSON and UTF-8. [...]
dart:core
Built-in types, collections, and other core functionality for every Dart program. [...]
dart:developer
Interact with developer tools such as the debugger and inspector. [...]
dart:math
Mathematical constants and functions, plus a random number generator. [...]
dart:typed_data
Lists that efficiently handle fixed sized data (for example, unsigned 8 byte integers) and SIMD numeric types. [...]

VM

dart:io
File, socket, HTTP, and other I/O support for non-web applications. [...]
dart:isolate
Concurrent programming using isolates: independent workers that are similar to threads but don't share memory, communicating only via messages. [...]