Implementing icon-text mapping without a lot of "if-then" logic

Question

UPDATE: The feature list mentioned in this question varies in length of composition based on a given restaurant. Not every restaurant will have the same features or the same number of features.

I'm creating a list of restaurant of features in my flutter app with a distinct icon for each. These aren't necessarily unique, as there is some repetition based on the feature (e.g. anything with "menu" returns a food icon).

I currently have this set up as a long series of if-then lookups based on the feature (see below). The current system has a fallback icon for the case in which a given feature doesn't have a feature mapped to it. We add features in the backend before updated the app in the app store, so need a way to handle new features that don't have an icon yet.

I am sure there has to be a better way using a map or new class. Thanks for the help!

loadedRestaurant.restFeatureList![index].toString().toLowerCase().contains('family')
        ? Icons.family_restroom_rounded

: loadedRestaurant.restFeatureList![index].toString().toLowerCase().contains('game day') 
        ? Icons.sports
...

The resulting widget looks like this: Screenshot of restFeatureList

Solution

something like this:

//mapping in some utils for example
final featureIcons = <String, IconData>{
      "family": Icons.family_restroom_rounded,
    }.entries;

    IconData getFeatureIcon(String feature) {
      return featureIcons
          .firstWhereOrNull((key) => key.key.toLowerCase().contains(feature))
          ?.value;
    }

// in your UI
    getFeatureIcon(loadedRestaurant.restFeatureList![index].toString());

Comments

[flutteRguy]

Thanks for this! I'm not sure this will work, given that we need a way of handling features without icons mapped to them (see update above). The current lookups just check for whether a feature contains a word or phrase, it doesn't look for the full feature string.

[Fabio Campos]

You can still use an map on features without icons, just pass an NULL and let the code handle it. I though on and approach with builder to make the code more flexible for future changes and case the features came from an API for instance. Hope you find and proper solution :-)

[Fabio Campos]

I reade the update. You can create an json structure to store the features and create an class to handle it to the app, In the app you can check with feature exists or not an return the appropriate response, or even return the corresponding widget for the feature: (return Icon(feature['icon'] ) to your widget tree. Hidding the feature handling from the view you can add or remove features more easily.

[flutteRguy]

Thank you for your help! This was incredibly useful. I ended up just using firstWhere with an orElse clause to set a default - we can't take any nulls in the app for this.

[flutteRguy]

Thanks, @fabio! I used part of this solution as well, just with a different map and getter. Also, using a gridview.builder was really smart. I implemented this and it cut my code in half (was previously using two listview.builders like an idiot). Thanks again for your guidance!

[Eugene Kuzmenko]

Sure, that was just an example. I agree the default icon is a good idea :)

[Fabio Campos]

Don't call yourself idiot. We are all learning (never stops) here. I learned something trying to solve your question that may use on future projects :-)

[flutteRguy]

I really appreciate the kind words! I meant it more as a joke, really. I like to laugh at myself and my mistakes to keep things positive as I learn and develop.