Question 360522 in Flutter Question posted in
The official Flutter documentation can be found here.

Can't update AlertDialog on state Change in flutter/Riverpod

My goal is to create an alert dialogue in which a friend can be selected from a list of friends and then something is sent to them.
I would like to implement this in riverpod, I have written a provider for this, which contains which friend is currently selected:

final sendRecipeProvider = ChangeNotifierProvider((ref) => SendRecipe());

class SendRecipe extends ChangeNotifier {
  int selectedFriend = -1;

  void selectFriend(int index) {
    if (selectedFriend == index) {
      selectedFriend = -1;
      notifyListeners();
      return;
    }
    selectedFriend = index;
    notifyListeners();
  }
}

The provider works reliably. The alert dialogue should display the list of all friends and when one of these objects is selected, it should get a blue border. I have written the following code for the alert dialogue:

Widget shareDialog(BuildContext context, Recipe recipe) {
    return AlertDialog(
      title: Row(
        children: [
          Text("Text"),
          const Spacer(), 
          IconButton(onPressed: () {}, icon: const Icon(Icons.send)), //Button to send the content to the selected friend
        ],
      ),
      content: alertContent(context),
    );
  }

alertContent(BuildContext context) {
    return Container(
      constraints:
      BoxConstraints(maxHeight: MediaQuery.of(context).size.height * 0.8),
      width: MediaQuery.of(context).size.width * 0.8,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          const Divider(),
          Consumer(builder: (context, ref, child) {
            return ListView.builder(
              shrinkWrap: true,
              itemCount: ref.watch(currentUserProvider).value!.friends.length,
              itemBuilder: (context, index) {
                return friendSelectionCard(index);
              },
            );
          }),
        ],
      ),
    );
  }

Widget friendSelectionCard(int index) {
    return Padding(
        padding: const EdgeInsets.all(8.0),
        child: Consumer(builder: (context, ref, child) {
          return GestureDetector(
            child: Card(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(15.0),
                side: selectedSide(index, ref.read(sendRecipeProvider).selectedFriend),
              ),
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Row(children: [
                  const Padding(
                      padding: EdgeInsets.symmetric(horizontal: 8),
                      child: Icon(Icons.person)),
                  Text(ref
                      .watch(currentUserProvider)
                      .value!
                      .friends[index]
                      .name),
                ]),
              ),
            ),
            onTap: () {
              ref.read(sendRecipeProvider).selectFriend(index);
            },
          );
        }));
  }

  BorderSide selectedSide(int index, int selectedFriend) {
    if (selectedFriend == index) {
      return const BorderSide(color: Colors.blue, width: 2);
    } else {
      return const BorderSide(color: Colors.transparent, width: 2);
    }
  }

if a friend is selected, the index of this friend is updated in the Riverpod Provider. however, the AlertDialogue does not update the ui and does not show which friend is selected. After a hot reload, however, this is displayed correctly, so I can rule out an error in the display.

What can I do to update the alert dialogue?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks to @jarinox I came to a Solution: I created a new StatefulWidget. There I created the AlertDialog with usage of the setState method. This I can now call by showDialog().


  2. 0

    You need to call the setState function inside of the onTap function like this:

    onTap: () {
  setState(() {
    ref.read(sendRecipeProvider).selectFriend(index);
  });
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search