Home > Software engineering >  I want to make ListView that contains data of Map Literal of icon and connate
I want to make ListView that contains data of Map Literal of icon and connate

Time:06-06

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
  • Related