Flutter: CustomIcon with two latter - flutter

Question

I need to create icon with two character such as 'Ac' for account, 'Co' for contact, something like as follow:
There is no suitable Icon builder to do that. IconData accept only one char, it make sense, but useful to my case.
I also do not know these two char in advance, so that I could make ImageIcon. How ImageIcon use SVG as source?

Answer 1

I would just use a decorated Container with a Text inside it. You'll probably want to tweak the sizes but here's an example.
import 'package:flutter/material.dart';
import 'package:meta/meta.dart';
class TwoLetterIcon extends StatelessWidget {
TwoLetterIcon(this.name, { #required this.color });
/// The background color of the custom icon.
final Color color;
/// The text that will be used for the icon. It is truncated to 2 characters.
final String name;
#override
Widget build(BuildContext context) {
return new Container(
decoration: new BoxDecoration(
color: color,
borderRadius: new BorderRadius.circular(4.0),
),
padding: new EdgeInsets.all(4.0),
height: 30.0,
width: 30.0,
child: new Text(
name.substring(0, 2),
style: Theme.of(context).primaryTextTheme.caption,
),
);
}
}
final Map<String, Color> colors = {
'Accounts': Colors.lightGreen.shade700,
'Contacts': Colors.green.shade700,
};
void main() {
runApp(new MaterialApp(
home: new Scaffold(
body: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: colors.keys.map((String name) {
return new ListTile(
leading: new TwoLetterIcon(name, color: colors[name]),
title: new Text(name),
);
}).toList(),
)
),
));
}

Answer 2

You just need to add two_letter_icon as a dependency in your pubspec.yaml file:
two_letter_icon: ^0.0.1