AlertDialog should show another AlertDialog but it's not happening till i close it and open it again

Question

I want to show another AlertDialog when I click on one of its children

But when I click on it doesn't Show it until I close the Alert and open it again

I want to navigate to Second AlertDialog without closing it

Any help will be appreciated

any way to make it open another dialog or a way to close it and open it again

Here is the code

          padding: const EdgeInsets.only(top: 12.0),
          child: ListView(children: [
            FutureBuilder<DropDown>(
                future: getDropData(),
                builder: (context, snapshot) {
                  if (snapshot.hasData) {
                    DropDown dropdown = snapshot.data;
                    return RaisedButton(
                      color: maincolor,
                      splashColor: accentcolor,
                      onPressed: () {
                        showDialog(
                            context: context,
                            useSafeArea: true,
                            child: Center(
                              child: Padding(
                                padding: const EdgeInsets.only(top: 20),
                                child: ListView.builder(
                                    itemCount: dropdown.categories.length,
                                    itemBuilder: (context, index) {
                                      return Padding(
                                        padding: const EdgeInsets.only(
                                            top: 8.0, right: 8, left: 8),
                                        child: Container(
                                         
                                          ),
                                          child: FlatButton(
                                              onPressed: () {
                                                setState(() {
                                                  categoryID = dropdown
                                                      .categories[index]
                                                      .categoryId;
                                                });
                                                getDropData();
                                              },
                                              child: Text(
                                                dropdown.categories[index].name,
                                               
                                              )),
                                        ),
                                      );
                                    }),
                              ),
                            ));```

Answer 1

Thanks to Dung Ngo and Kennith for your answers it really helped me and I learnt from your answers a lot your answers were right by the way

here what I have done

a method that opens the second dialog

    showGeneralDialog(
      barrierLabel: "Barrier",
      barrierDismissible: true,
      barrierColor: maincolor,
      transitionDuration: Duration(milliseconds: 200),
      context: context,
      pageBuilder: (_, __, ___) {
        return FutureBuilder<Manufacturer>(
            future: getManufucturer(categoryID, parentID),
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                Manufacturer dropdown = snapshot.data;

                return Container(
                  height: 400,
                  width: 200,
                  child: ListView.builder(
                    itemCount: dropdown.manufacturers.length,
                    itemBuilder: (context, index) {
                      return Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 60),
                        child: RaisedButton(
                            child: Text(
                              dropdown.manufacturers[index].name,
                              style: GoogleFonts.cairo(
                                  color: maincolor,
                                  fontSize: 14,
                                  fontWeight: FontWeight.bold),
                            ),
                            onPressed: () async {

                              parentID =
                                  dropdown.manufacturers[index].manufacturerId;
                              manufacturerID = parentID;
                              print(parentID);

                              Manufacturer newDropDown =
                                  await getManufucturer(categoryID, parentID);

                              Navigator.pop(context);
                              Navigator.pop(context);
                            }),
                      );
                    },
                  ),
                );
              } else {
                return Center(
                  child: CircularProgressIndicator(
                    strokeWidth: 12,
                    backgroundColor: maincolor,
                  ),
                );
              }
            });
      },
      transitionBuilder: (_, anim, __, child) {
        return ScaleTransition(
          scale: Tween(begin: 0.0, end: 1.0).animate(anim),
          child: child,
        );
      },
    );
  }

then I created the button that opens the first dialog and it that dialog I

called that method that I defined earlier

again thanks for your efforts Dung and kennith you really helped me

Answer 2

I think you just need to use setState() to wrap the showDialog() but I can't test it because I don't have a DropDown class.

EDIT

I tried with a simple structure and it works fine. As Dung Ngo mentioned, just use a StatefulBuilder to build the content of the first AlertDialog widget. Triggering another showDialog() inside to bring up the second AlertDialog widget.

class _YourWidgetState extends State<YourWidget> {

  AlertDialog alert = AlertDialog(content: Center(child:Text("Second Alert Dialog")));

  @override
  Widget build(BuildContext context) {
    return RaisedButton(onPressed: (){
      showDialog(
        context: context,
        builder: (_) => AlertDialog(
          content: StatefulBuilder(
            builder: (BuildContext context, StateSetter setState){
              return Column(
                children: <Widget>[
                  RaisedButton( onPressed: (){
                    showDialog(context: context, builder: (_) => alert);
                  }),
                  RaisedButton(onPressed: (){
                    showDialog(context: context, builder: (_) => alert);
                  }),
                ],
              );
            }
          ),
        )
      );
    });
  }
}

Results

Answer 3

The setState doesn't work until you close the first one because it belongs to the context of mainpage, not the context of your 1st dialog.

You can use a StatefulBuilder to create a a StateSetter that invoke a rebuild base on the context of the 1st dialog: https://api.flutter.dev/flutter/widgets/StatefulBuilder-class.html