I Want to make a ListView where it shows all icons from a Map Literal with its name...But I don't know how to get key and value inside ListView.builder
is there any index facility of map keys and value...
here is my code
class _HomeScreenState extends State<HomeScreen> {
Map<String, IconData> icons = {
'ac_unit': Icons.ac_unit,
'ac_unit_sharp': Icons.ac_unit_sharp,
'ac_unit_rounded': Icons.ac_unit_rounded,
'ac_unit_outlined': Icons.ac_unit_outlined,
'access_alarm': Icons.access_alarm
};
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: [
Expanded(
child: ListView.builder(
itemCount: icons.length,
itemBuilder: (context,index)
{
return Padding(
padding: EdgeInsets.symmetric(vertical: 10.0),
child: ListTile(
onTap: (){},
leading: CircleAvatar(
backgroundColor: Colors.blue,
child: Icon(//how to fetch Icon from map),
title: Text('How to fetch icon name from map',style: TextStyle(fontSize: 30.0,color: Colors.blue),),
),
);
}),
),
],
),
),
);
}
}
CodePudding user response:
Map in dart have two iterator properties, named keys and values
keys contains every key inside a map
and same for values, it contains all values inside a map
You can get the icons like this:
//Store the icons in a list like this
var list = icons.values.toList();
//And access it individually like this
Icon(list[index]);
In your case, you want to get both icon name and icon value from your map. So, you do something like this:
var data = icons.entries.toList();
//Access key like this
data[index].key
//Access value like this
data[index].value