Flutter show iconButton based on Map - flutter

Question

i have a map like this:
static const Map<String, Map<String, String>> social = {
'personA': {
'twitch': 'https://www.twitch.tv/...',
'instagram': 'https://www.instagram.com/.../'
},
'personB': {
'twitch': 'https://www.twitch.tv/...',
'instagram': 'https://www.instagram.com/.../'
},
'personC': {
'facebook': 'https://www.facebook.com/...',
},
};
It's possible to show iconButton, with the font_awesome icon, for each
social related to each person, and on click redirect to the link?, how ?
i tried like this:
Row(
children: <Widget>[
ListView.builder(
itemBuilder: (_) {
return Constants.social[person].keys.map((e) =>
IconButton(icon: FaIcon(FontAwesomeIcons.e), onPressed: {
print("example");
});
);
}
)
],
),
but i receive the error:
The argument type 'Widget Function(BuildContext)' can't be assigned to the parameter type 'Widget Function(BuildContext, int)'
the variable person can contain personA, personB or personC.
For example for personA i want to to show 2 iconButton one for twitch and one for instagram but for personC i want to show only facebook icon.

Answer 1

ListView is a widget that represents a list of widgets arranged linearly.
You have multiple constructors for this widget. The one you used, ListView.builder() is the one suggested when there is a large number of children to be displayed. (In your example, if the Map contains many players.)
The default constructor only requires a List<Widget> and is considerably more simple. If you don't have a large map, I strongly suggest you to use this one instead. But since you tried using the builder one, you should do as follow:
First, have your data arranged in a List. This way you can access the elements through an integer index easily: List[0]. Ideally you should have the data already in a list form, but if you need you can convert it like this:
static const Map<String, Map<String, String>> social = {
'personA': {
'twitch': 'https://www.twitch.tv/...',
'instagram': 'https://www.instagram.com/.../'
},
'personB': {
'twitch': 'https://www.twitch.tv/...',
'instagram': 'https://www.instagram.com/.../'
},
'personC': {
'facebook': 'https://www.facebook.com/...',
},
};
List<Map<String,String>> listUsers = List().from(social.values);
For more information on these methods, check this and this.
Supply the number of itens your listview will have through the itemCount parameter:
[...]
ListView.builder(
itemCount: listUsers.length,
itemBuilder: (context, index) {
[...]
Your error says the builder function needs to receive another integer parameter:
'Widget Function(BuildContext)' can't be assigned to the parameter type
'Widget Function(BuildContext, int)```.
This integer parameter represents what widget in the list it will be. Your builder function needs to return only one widget, and it receives the index parameter so you can know which one it is:
Row(
children: <Widget>[
ListView.builder(
itemCount: listUsers.length,
itemBuilder: (context, index) {
return Column(children:[
if (listUsers[index].containsKey('twitch'))
IconButton(icon: FaIcon(FontAwesomeIcons.twitch), onPressed: (){//Access listUsers[index]['twitch'] here
}),
if (listUsers[index].containsKey('instagram'))
IconButton(icon: FaIcon(FontAwesomeIcons.instagram), onPressed: (){//Access listUsers[index]['instagram'] here
})
])
}
)
],
),
This should be enough to have your desired result. As a suggestion, you can read the official documentation which has many good examples and explanations. The Dart Language tour is also a great place for examples about the language. They are both well written and in this case would get you in the right track.