How manage state of different widgets in ListView flutter?

Issue

I am building a Flutter App where a List is shown using ListView. Which returns a ListTile with User Information. The ListTile contains a leading, title and subtitle with trailing set as a ElevatedButton.

Here’s how it looks like:

I want to tap on the ‘Invite Button’ and change its color, text, and subtitle of the ListTile

After tapping, it should look like this.

How can I do this? Here’s the code that I wrote. But it’s changing the state of every List Item.

class InviteFriends extends StatefulWidget {
  const InviteFriends({Key? key}) : super(key: key);

  @override
  State<InviteFriends> createState() => _InviteFriendsState();
}

class _InviteFriendsState extends State<InviteFriends> {

  bool isSelected = false;

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }
}

UI Under ListView.builder:

                       ListTile(
                            title: const Text('Haris'),
                            subtitle: const Text(
                              isSelected ? 'Invitation Sent' : 'Not Invited Yet',
                            ),
                            leading: CircleAvatar(
                              backgroundImage: NetworkImage(
                                _userProfile!.profilePhoto.toString(),
                              ),
                            ),
                            trailing: ElevatedButton(
                              style: ElevatedButton.styleFrom(
                                elevation: 0.0,
                                primary: isSelected ? Colors.orange : Colors.green,
                                side: BorderSide.none,
                                shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(10.0),
                                ),
                              ),
                              child: const Text(
                                isSelected ? 'Invited': 'Invite',
                              ),
                              onPressed: () {
                                setState(() {
                               isSelected = !isSelected;
                                });
                              },
                            ),
                          );

I also tried Keys here in ListTile by using ValueKey(index) but it didn’t work either. What should I do? Thanks

Solution

Bring out Tile as a separate StatefulWidget so that each has its own state.
Do not modify State List.builder.
And you use one isSelected field for all Tile, and you will all refer to this condition.

Please provide more code and I can help. So that I understand the full picture

Answered By – greengo

Answer Checked By – Marilyn (FlutterFixes Volunteer)