How manage state of different widgets in ListView flutter?


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:
enter image description here

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.
enter image description here

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);

  State<InviteFriends> createState() => _InviteFriendsState();

class _InviteFriendsState extends State<InviteFriends> {

  bool isSelected = false;

  void initState() {

  void dispose() {

UI Under ListView.builder:

                            title: const Text('Haris'),
                            subtitle: const Text(
                              isSelected ? 'Invitation Sent' : 'Not Invited Yet',
                            leading: CircleAvatar(
                              backgroundImage: NetworkImage(
                            trailing: ElevatedButton(
                              style: ElevatedButton.styleFrom(
                                elevation: 0.0,
                                primary: isSelected ? :,
                                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


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)

Leave a Reply

Your email address will not be published. Required fields are marked *