Flutter图标生成插件jdenticon_dart的使用

Jdenticon Dart

Jdenticon Dart是Jdenticon项目的Dart/Flutter实现。Jdenticon是一个快速且易于使用的库，用于通过SVG生成高度可识别的标识（identicons）。

开始使用

Jdenticon接受一个字符串作为输入（例如：名称、标签或客户ID），并对其哈希处理以生成“个性化”的图标，即identicon。Identicons可以用于许多用途，但通常作为自动分配给账户或客户的头像增强版本。如果你想了解更多关于Jdenticon的信息，请点击这里。

这个库可以在任何Dart项目中使用，但本指南假设使用Flutter创建和显示identicons。Jdenticon暴露了toSvg函数，这是生成identicon所需的唯一函数。toSvg的结果是一个原始的SVG字符串。Flutter不能直接将原始SVG字符串作为图像显示。因此，Jdenticon需要flutter_svg库来轻松集成SVG渲染，所以在你的项目中也需要导入flutter_svg。

在Flutter中显示identicon只需两步：

1. 将字符串input（例如，名称、标签或ID）传递给函数Jdenticon.toSvg(input)以获得原始SVG字符串：

   // 请注意，Jdenticon区分大小写，因此'jim'与'Jim'或'JIM'生成不同的identicon
   String rawSvg = Jdenticon.toSvg('Your input string');
   

2. 现在可以通过flutter_svg在任何地方渲染identicon，通过调用SvgPicture.string(rawSvg, fit: BoxFit.fill, height: 128, width: 128,)。这返回一个Widget，在Widget树中的任何位置放置时都会渲染identicon。使用SvgPicture提供的设置（fit、height、width、alignment等）来改变大小和行为：

   // 可以将SVG存储为Widget以供以后使用
   Widget identicon = SvgPicture.string(rawSvg, fit: BoxFit.contain, height: 128, width: 128);
   // 或者直接像使用其他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为用户提供了一些自定义选项来改变identicon的外观。你可以覆盖任何配置设置。更多详情请参阅图标设计器页面。例如：

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

上述代码将使你的identicons看起来如下图所示：

示例

Jdenticon附带了一个完整的example.dart文件在示例文件夹中。在Flutter中运行此文件以查看Jdenticon的实际效果。 以下是示例代码： 下面是完整的示例代码：

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'),
            ],
          ),
        ),
      ),
    );
  }
}

许可证

Jdenticon Dart遵循MIT许可证。 2019年Vergill Lemmert版权所有。