How to add icons to the List View Builder list in flutter?

Issue

This is a very basic app which highlights the selected colour on tap.But i want leading icons to the list view. How can i achieve this? If i am adding an icon inside a widget, the same icon is being rendered everywhere. I want unique icons for each list. Please help. Here’s my code:

I want to render the icons for each list.

 void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: MyHomePage(title: 'Flutter Demo Home Page'),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      MyHomePage({Key key, this.title}) : super(key: key);
      final String title;
    
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
      List<String> texts = ['ME', 'MYSELF', 'I'];
      List<bool> isHighlighted = [true, false, false];
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('Demo App'),
          ),
          drawer: Drawer(
            child: Center(
              child: Column(children: <Widget>[
                Expanded(
                  child: ListView.builder(
                      itemCount: texts.length,
                      itemBuilder: (_, index) {
                        return GestureDetector(
                          onTap: () {
                            for (int i = 0; i < isHighlighted.length; i++) {
                              setState(() {
                                if (index == i) {
                                  isHighlighted[index] = true;
                                } else {
                                  //the condition to change the highlighted item
                                  isHighlighted[i] = false;
                                }
                              });
                            }
                          },
                          child: Container(
                            color: isHighlighted[index]
                                ? Colors.blueAccent
                                : Colors.white,
                            child: ListTile(
                              //i want to display different items for each list in the leading property.
    
                              title: Text(texts[index]),
                            ),
                          ),
                        );
                      }),
                ),
                Container(
                  child: Text(
                    'this is footer',
                    style: TextStyle(fontSize: 20),
                  ),
                )
              ]),
            ),
          ),
        );
      }
    }

Solution

try this

class _MyHomePageState extends State<MyHomePage> {
  List<ListItem> _items = [
    ListItem(title: 'Me', isSelected: true, icon: Icons.home),
    ListItem(title: 'MYSELF', isSelected: false, icon: Icons.cake),
    ListItem(title: 'I', isSelected: false, icon: Icons.camera),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Demo App'),
      ),
      drawer: Drawer(
        child: Center(
          child: Column(children: <Widget>[
            Expanded(
              child: ListView.builder(
                  itemCount: _items.length,
                  itemBuilder: (_, index) {
                    return GestureDetector(
                      onTap: () {
                        for (int i = 0; i < _items.length; i++) {
                          setState(() {
                            if (index == i) {
                              _items[index].isSelected = true;
                            } else {
                              //the condition to change the highlighted item
                              _items[i].isSelected = false;
                            }
                          });
                        }
                      },
                      child: Container(
                        color: _items[index].isSelected
                            ? Colors.blueAccent
                            : Colors.white,
                        child: ListTile(
                          //i want to display different items for each list in the leading property.
                          leading: Icon(_items[index].icon),
                          title: Text(_items[index].title),
                        ),
                      ),
                    );
                  }),
            ),
            Container(
              child: Text(
                'this is footer',
                style: TextStyle(fontSize: 20),
              ),
            )
          ]),
        ),
      ),
    );
  }
}

class ListItem {
  String title;
  bool isSelected;
  IconData icon;
  ListItem({
    this.title,
    this.isSelected,
    this.icon,
  });
}

I made a separate class for each item instead of or having multiple lists.

Answered By – Mr Random

Answer Checked By – Gilberto Lyons (FlutterFixes Admin)