CODEWITHSUNDEEP
flutter
QOU
QOU

Reputation: 5

How to Loop through a ListTile from ListView.builder in flutter

I am trying to display a list tile in flutter based on list of data from cloud firestore. I want the leading icon to change for each tile when the tile is tapped. My problem is whenever I tap any tile, the whole list changes. I want only the tapped tile to change. Here is my code:

 StreamBuilder(
                        stream: Firestore.instance
                            .collection('Recharge_Card')
                            .snapshots(),
                        //print an integer every 2secs, 10 times
                        builder: (context, snapshot) {
                          if (!snapshot.hasData) {
                            return Text("Loading..");
                          }
                          return SizedBox(
                            height: _height / 1.9,
                            child: ListView.builder(
                              // itemExtent: 80.0,
                              itemCount: snapshot.data.documents.length,
                              itemBuilder: (context, index) {
                                DocumentSnapshot myCards =
                                    snapshot.data.documents[index];

                                return Card(
                                  elevation: 20.0,
                                  child: ListTile(
                                    onTap: () {
                                      setState(() {
                                        x = Text('Tapped');
                                      });
                                    },
                                    leading: x,
                                    title: Text(myCards['CardPin']),
                                    trailing: Text(myCards['Value']),
                                  ),
                                );
                              },
                            ),
                          );`
                        },
                      ),

Upvotes: 0

Views: 800

Answers (2)

Rocigno Medeiros
Rocigno Medeiros

Reputation: 171

Thats happens because the x is the same for all cards, you need separate this guy, my suggestion is put the x inside DocumentSnapshot, so u can change only tapped card, something like this:

StreamBuilder(
    stream: Firestore.instance
        .collection('Recharge_Card')
        .snapshots(),
    //print an integer every 2secs, 10 times
    builder: (context, snapshot) {
        if (!snapshot.hasData) {
        return Text("Loading..");
        }
        return SizedBox(
        height: _height / 1.9,
        child: ListView.builder(
            // itemExtent: 80.0,
            itemCount: snapshot.data.documents.length,
            itemBuilder: (context, index) {
            DocumentSnapshot myCards =
                snapshot.data.documents[index];

            return Card(
                elevation: 20.0,
                child: ListTile(
                onTap: () {
                    setState(() {
                        myCards['x'] = Text('Tapped');
                    });
                },
                leading: myCards['x'],
                title: Text(myCards['CardPin']),
                trailing: Text(myCards['Value']),
                ),
            );
            },
        ),
        );`
    },
),

Upvotes: 1

Jitesh Mohite
Jitesh Mohite

Reputation: 34180

Add key to your card and provide the unique value, in your case it is your index

         Card(
            key: ValueKey(index),
              //....
            )

Upvotes: 1

Related Questions