Como atualizar AlertDialog com setState no Flutter

Quando você mostra AlertDialog com showDialog() no Flutter, ele aparece com um estado diferente, então sempre que você chamar setState(), o conteúdo dentro de AlertDialog não será atualizado. Para atualizar AlertDialog com setState, veja o exemplo abaixo:

Coloque o conteúdo do AlertDialog dentro do StatefulBuilder():

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

Agora, quando você chamar setState() dentro do StatefulBuilder, o conteúdo dentro dele será atualizado. Lembre-se de que a interface do usuário de todo o aplicativo não será atualizada, apenas dentro deste widget StatefulBuilder() será atualizado.

Aplicativo de exemplo completo:

Execute o código abaixo e tente entender como o StatefulBuilder funciona.

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")
                   )
                ],
            ),
        ),
    );
  }
}

Aqui, temos um número incrementado, um é mostrado na tela principal e outro é mostrado dentro do diálogo usando o widget StatefulBuilder(). Quando o botão de incremento é clicado, o número aumentará na caixa de diálogo, mas na tela principal. Porque setState é chamado dentro do StatefulBuilder, que apenas atualiza seu conteúdo interno.

Dessa forma, você pode atualizar o conteúdo dentro do AlertDialog ou showDialog no Flutter. 

1.00 GEEK