CODEWITHSUNDEEP
flutter
Kyaw Tun
Kyaw Tun

Reputation: 13161

Flutter: CustomIcon with two latter

I need to create icon with two character such as 'Ac' for account, 'Co' for contact, something like as follow:

sample icon

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?

Upvotes: 2

Views: 1181

Answers (2)

mohit sah
mohit sah

Reputation: 1

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

two_letter_icon: ^0.0.1

Upvotes: 0

Collin Jackson
Collin Jackson

Reputation: 116848

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.

screenshot

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

Upvotes: 4

Related Questions