How to Refresh AlertDialog with setState in Flutter

When you show AlertDialog with showDialog() in Flutter, it appears with a different state, so whenever you call setState(), the content inside AlertDialog will not refresh. To refresh AlertDialog with setState, see the example below:

showDialog(
    context:context,
    builder:(context){
      return AlertDialog(
          content: StatefulBuilder(
          builder:(BuildContext context, StateSetter setState){
              return Container(
               
              );
          }),  
      );
    }
);

Now, when you call setState() inside StatefulBuilder, the content inside it will refresh. Remember, the UI of the whole app will not refresh, only within this StatefulBuilder() widget will be refreshed.

Run the code below, and try to understand how StatefulBuilder works.

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
   int num = 0;
  @override
  Widget build(BuildContext context) {
    
    return  Scaffold(
        appBar: AppBar( 
            title: Text("Refresh State in showDialog"),
            backgroundColor: Colors.deepPurpleAccent,
        ),
        body: Container(
            padding: EdgeInsets.all(30),
            child: Column(
                children: [

                  Text("Current Number in Main Screen: $num"),

                    ElevatedButton(
                      onPressed: () async {
                          await showDialog(
                             context:context,
                             builder:(context){
                               return AlertDialog(
                                   content: StatefulBuilder(
                                    builder:(BuildContext context, StateSetter setState){
                                       return Container(
                                         height: 200,
                                         child: Column(
                                            children:[
                                               Text("Current Number in Dailog: $num"),

                                               ElevatedButton(
                                                  onPressed: (){
                                                      setState(() {
                                                         num++;
                                                      });
                                                      //this setState will refresh Dialog only
                                                  },
                                                  child: Text("Increase Number")
                                               )
                                            ]
                                         ),
                                       );
                                   }),  
                               );
                             }
                          ); 

                          //this setState will refresh the main screen
                          //this setState will execute after dismissing Dailog
                          setState(() {
                            
                          });
                      }, 
                      child:Text("Show Dailog")
                   )
                ],
            ),
        ),
    );
  }
}

Here, we have an incrementing number, one is shown on the Main screen, and one is shown inside the Dialog using StatefulBuilder() widget. When the increment button is clicked, the number will increase in Dialog, but on at main screen. Because, setState is called inside StatefulBuilder, which only refreshes its inside content.