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

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

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?

Tags:

2

Answers


  1. 0

    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);
                        },
                      ),
                    ],
                  ),
                ],
              )
            ],
          );
        },
      );
    },
  );
}
    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search