setState does not update state immediately when using it in a showDialog method

Question

I have the following method that contains a Flutter dialog. This dialog serves the purpose of a filter menu.

Here is the code:

Future<void> _showFilterDialog() async {
    await showDialog<void>(
        context: context,
        builder: (BuildContext context) {
          return SimpleDialog( // <-- SEE HERE
              title: const Text('Sort  and filter the History'),
              children: [
                Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children:  [
                        const Text("Sort By : ",style: TextStyle(fontSize: 20,fontFamily: 'EastMan',fontWeight: FontWeight.bold),),
                        InkWell(
                          onTap: (){
                              if(sortOptionOneColor==Colors.white54){
                                sortOptionOneSelected = true;
                                setState(() {
                                  sortOptionOneColor = Colors.greenAccent;
                                });

                              }
                              else{
                                sortOptionOneSelected = false;
                                setState(() {
                                  sortOptionOneColor = Colors.white54;
                                });
                              }
                          },
                          child: FilterOptionMaterial(color: sortOptionOneColor, txt: 'By Date',),
                        ),
                        const SizedBox(
                          width: 10,
                        ),
                        InkWell(
                          onTap: (){
                              if(sortOptionTwoColor==Colors.white54){
                                sortOptionTwoSelected = true;
                                setState(() {
                                  sortOptionTwoColor = Colors.greenAccent;
                                });

                              }
                              else{
                                sortOptionTwoSelected = false;
                                setState(() {
                                  sortOptionTwoColor = Colors.white54;
                                });
                              }
                          },
                          child: FilterOptionMaterial(color: sortOptionTwoColor, txt: 'By Alphabet',),
                        ),
                      ],
                    ),
                    const SizedBox(
                      width: 50,
                      height: 20,
                      child: Divider(
                        thickness: 3,
                        color: Colors.black54,
                      ),
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: [
                        SimpleDialogOption(
                          child: const Text('Apply'),
                          onPressed: () async {
                          },
                        ),
                        SimpleDialogOption(
                          child: const Text('No'),
                          onPressed: (){
                            Navigator.pop(context);
                          },
                        ),
                      ],
                    ),
                  ],
                )
              ]
          );
        });
  }

Now the problem is that the colors don't change immediately on the screen. Instead, I need to close the dialog and reopen it in order to see the result. Can someone help fix this or offer an alternative solution?

Does this answer your question? [How to refresh an AlertDialog in Flutter?](https://stackoverflow.com/questions/51962272/how-to-refresh-an-alertdialog-in-flutter) — Christopher Moore, May 12 '23 at 18:34

score 0 · Answer 1 · answered May 12 '23 at 20:16

0

SimpleDialog is StatelessWidget and StatelessWidget can not change its state.

So create StatefulWidget and return it from builder. After that change in state would work.

answered May 12 '23 at 20:16

Kamlesh

105
1
2

score -2 · Accepted Answer · answered May 12 '23 at 18:51

Based on your case the dialog has already built, so the setState will never could rebuilt it again,

so, here is the alternative to use StatefulBuilder, this widget allow you to force rebuild the dialog. Please check this code below:

Future<void> _showFilterDialog() async {
  await showDialog<void>(
    context: context,
    builder: (BuildContext context) {
      bool sortOptionOneSelected = false;
      bool sortOptionTwoSelected = false;
      Color sortOptionOneColor = Colors.white54;
      Color sortOptionTwoColor = Colors.white54;
      return StatefulBuilder( ///**StatefulBuilder**
        builder: (context, setState) {
          return SimpleDialog(
            title: const Text('Sort and filter the History'),
            children: [
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      const Text(
                        "Sort By : ",
                        style: TextStyle(
                          fontSize: 20,
                          fontFamily: 'EastMan',
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      InkWell(
                        onTap: () {
                          if (sortOptionOneColor == Colors.white54) {
                            sortOptionOneSelected = true;
                            setState(() {
                              sortOptionOneColor = Colors.greenAccent;
                            });
                          } else {
                            sortOptionOneSelected = false;
                            setState(() {
                              sortOptionOneColor = Colors.white54;
                            });
                          }
                        },
                        child: FilterOptionMaterial(
                          color: sortOptionOneColor,
                          txt: 'By Date',
                        ),
                      ),
                      const SizedBox(
                        width: 10,
                      ),
                      InkWell(
                        onTap: () {
                          if (sortOptionTwoColor == Colors.white54) {
                            sortOptionTwoSelected = true;
                            setState(() {
                              sortOptionTwoColor = Colors.greenAccent;
                            });
                          } else {
                            sortOptionTwoSelected = false;
                            setState(() {
                              sortOptionTwoColor = Colors.white54;
                            });
                          }
                        },
                        child: FilterOptionMaterial(
                          color: sortOptionTwoColor,
                          txt: 'By Alphabet',
                        ),
                      ),
                    ],
                  ),
                  const SizedBox(
                    width: 50,
                    height: 20,
                    child: Divider(
                      thickness: 3,
                      color: Colors.black54,
                    ),
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      SimpleDialogOption(
                        child: const Text('Apply'),
                        onPressed: () async {},
                      ),
                      SimpleDialogOption(
                        child: const Text('No'),
                        onPressed: () {
                          Navigator.pop(context);
                        },
                      ),
                    ],
                  ),
                ],
              )
            ],
          );
        },
      );
    },
  );
}

setState does not update state immediately when using it in a showDialog method

2 Answers2