AlertDialog is not updating when StreamBuilder returns data

Question

I am using an AlertDialog to show some data which I retrieve from firestore database. For that, I use the following code.

   AlertDialog(
  content: StreamBuilder<QuerySnapshot>(
    stream: yourDataStream,
    builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
      if (snapshot.connectionState == ConnectionState.waiting) {
        // Return your loading widget here
        return CircularProgressIndicator();
      } else if (snapshot.hasError) {
        // Handle any errors from the stream here if needed
        return Text('Error: ${snapshot.error}');
      } else if (snapshot.hasData) {
        // Display your data when it's available
        return Text(snapshot.data!);
      } else {
        return Text('Unexpected state');
      }
    },
  ),
)

My problem is when snapshot.hasData == true, UI is not updating to show the available data. How can I fix this?

Answer 1

Add your Alert Dialog content in a Stateful Builder and try using it like below. And let me know if it worked for you.

showCustomDialog() =>
showDialog(context: context, builder: (context) => const ShowDialog());

class ShowDialog extends StatefulWidget {
 const ShowDialog({super.key});

 @override
 State<ShowDialog> createState() => _ShowDialogState();
}

class _ShowDialogState extends State<ShowDialog> {

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
    content: StreamBuilder<int>(
      stream: generateNumbers,
      builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
      if (snapshot.connectionState == ConnectionState.waiting) {
        return const CircularProgressIndicator();
      } else if (snapshot.hasError) {
        return Text('Error: ${snapshot.error}');
      } else if (snapshot.hasData) {
        return Text(snapshot.data.toString());
      } else {
        return const Text('Unexpected state');
      }
    },
  ),
 );
}
}