Flutter: CustomIcon mit zwei letzteren

Question

I-Symbol mit zwei Zeichen wie ‚Ac‘ für Konto erstellen müssen, ‚Co‘ für den Kontakt, so etwas wie wie folgt:

Es gibt keine geeigneten Icon builder das zu tun. IconData akzeptieren nur ein char, es ist sinnvoll, aber nützlich für meinen Fall.

Ich kenne diese zwei Zeichen auch nicht im Voraus, damit ich ImageIcon machen konnte. Wie ImageIcon SVG als Quelle verwenden?

Answer 1

Ich würde einfach ein dekoriertes Container mit einem darin verwenden. Sie werden wahrscheinlich die Größen verändern wollen, aber hier ist ein Beispiel.

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