jdenticon_dart 1.2.1+1

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.

[1.2.1+1] - 2019-05-04.

  • Removed dependencies on flutter and flutter_svg (they were only required for the test and example code); example code is now shown as a comment block and the test code has been removed

[1.2.0] - 2019-03-07.

  • Path and opacity are rounded now to the same decimals as Jdenticon's code

[1.1.1] - 2019-02-21.

  • Resolved an issue when adding padding

[1.1.0] - 2019-02-19.

  • Added the ability to create custom icons with the same icon builder options from Jdenticon
  • Icons now also have a grayscale saturation (in addition to the default color saturation)

[1.0.5] - 2019-02-19.

  • Run dartfmt

[1.0.4] - 2019-02-19.

  • Reverted one function to the old code

[1.0.3] - 2019-02-19.

  • Cleaned up code against Jdenticon's code base and tested all

[1.0.2] - 2019-02-13.

  • Final change with dartfmt and README

[1.0.1] - 2019-02-13.

  • Changed format style to conform with analysis

[1.0.0] - 2019-02-13.

  • First release

example/example.dart

// Jdenticon only has 1 function you will need: toSvg(). This function requires a message (as a String).
// The output is a SVG string which needs to be passed to the widget SvgPicture so that it can be rendered.
// You can set the sizing, scaling, padding and margins when the SVG is actually rendered with SvgPicture, as seen below.
// Uncomment all comments below and run the code to see Jdenticon in action.

// import 'package:flutter/material.dart';
// import 'package:jdenticon_dart/jdenticon_dart.dart';
// import 'package:flutter_svg/flutter_svg.dart';

// void main() => runApp(Example());

// Widget _getCardWithIcon(String name) {
//   final String rawSvg = Jdenticon.toSvg(name);

//   return Card(
//     child: Column(
//       children: <Widget>[
//         Row(
//           mainAxisAlignment: MainAxisAlignment.center,
//           children: <Widget>[
//             Padding(
//               padding: EdgeInsets.all(8.0),
//               child: SvgPicture.string(
//                 rawSvg,
//                 fit: BoxFit.fill,
//                 height: 32,
//                 width: 32,
//               ),
//             ),
//             Padding(
//               padding: EdgeInsets.all(8.0),
//               child: SvgPicture.string(
//                 rawSvg,
//                 fit: BoxFit.fill,
//                 height: 32,
//                 width: 32,
//               ),
//             ),
//             Padding(
//               padding: EdgeInsets.all(8.0),
//               child: SvgPicture.string(
//                 rawSvg,
//                 fit: BoxFit.fill,
//                 height: 32,
//                 width: 32,
//               ),
//             ),
//           ],
//         ),
//         SizedBox(
//           height: 12.0,
//         ),
//         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,
//         ),
//         Text(
//           name,
//           textScaleFactor: 1.5,
//           style: TextStyle(
//               color: Colors.blue,
//               fontWeight: FontWeight.bold,
//               letterSpacing: 1.6),
//         ),
//       ],
//     ),
//   );
// }

// class Example extends StatelessWidget {
//   @override
//   Widget build(BuildContext context) {
//     return MaterialApp(
//       title: 'Jdenticon Example',
//       home: Scaffold(
//         appBar: AppBar(
//           title: Text('Jdenticon Example'),
//         ),
//         body: Center(
//           child: ListView(
//             children: <Widget>[
//               _getCardWithIcon('Naomi'),
//               _getCardWithIcon('Ridge'),
//               _getCardWithIcon('Callie'),
//             ],
//           ),
//         ),
//       ),
//     );
//   }
// }

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  jdenticon_dart: ^1.2.1+1

2. Install it

You can install packages from the command line:

with pub:


$ pub get

with Flutter:


$ flutter pub get

Alternatively, your editor might support pub get or flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:jdenticon_dart/jdenticon_dart.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
67
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
84
Learn more about scoring.

We analyzed this package on Aug 22, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.4.0
  • pana: 0.12.19

Platforms

Detected platforms: Flutter, web, other

No platform restriction found in primary library package:jdenticon_dart/jdenticon_dart.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev.9.4 <3.0.0
crypto ^2.0.6 2.1.2
Transitive dependencies
charcode 1.1.2
collection 1.14.12
convert 2.1.1
typed_data 1.1.6