Flutter: Show different icons based on value

Question

I have a list of objects each with an icon property as shown here:

List<Map<String, String>> _categories = [
    {
      'name': 'Sports',
      'icon': 'directions_run',
    },
    {
      'name': 'Politics',
      'icon': 'gavel',
    },
    {
      'name': 'Science',
      'icon': 'wb_sunny',
    },
];

I then have a widget that I am using inside of a ListView.builder() widget. Currently I am displaying a statically chosen icon to show with the text in my list. My question is how can I use the icon property in my objects to dynamically pick the icon that gets shown for each individual list item?

  Widget _buildCategoryCards(BuildContext context, int index) {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 5.0),
      child: Card(
        child: Container(
          padding: EdgeInsets.all(15.0),
          child: Row(
            children: <Widget>[
              Icon(Icons.directions_run),
              SizedBox(width: 20.0),
              Text(_categories[index]['name']),
            ],
          ),
        ),
      ),
    );
  }

Answer 1

Change your List to store an IconData instead of a String:

List<Map<String, IconData>> _categories = [
    {
      'name': 'Sports',
      'icon': Icons.directions_run,
    },
    {
      'name': 'Politics',
      'icon': Icons.gavel,
    },
    {
      'name': 'Science',
      'icon': Icons.wb_sunny,
    },
];

Then, call the IconData from your build method:

  Widget _buildCategoryCards(BuildContext context, int index) {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 5.0),
      child: Card(
        child: Container(
          padding: EdgeInsets.all(15.0),
          child: Row(
            children: <Widget>[
              Icon(_categories[index]['icon']),
              SizedBox(width: 20.0),
              Text(_categories[index]['name']),
            ],
          ),
        ),
      ),
    );
  }

---

Note that this is not useful (even not effecient) to use a Map to do what you want. You should use a custom class:

Class Category {
  String name;
  IconData icon;

  Category(this.name, this.icon);
}

And then replace your List with this:

List<Category> _categories = [
    Category('Sports', Icons.directions_run),
    Category('Politics', Icons.gavel),
    Category('Science', Icons.wb_sunny),
];

finally in your Widget:

        children: <Widget>[
          Icon(_categories[index].icon),
          SizedBox(width: 20.0),
          Text(_categories[index].name),
        ],