CODEWITHSUNDEEP
fluttersetstateflutter-futurebuilderflutter-dialog
Ahmed Elsayed
Ahmed Elsayed

Reputation: 240

Text widget doesn't appear in dialog after user Future.delayed in Flutter

I have a dialog that appears after user click on send button . When dialog appears , I want to show a text after 5 seconds . I use Future.delayed but the text doesn't appear at all . It appears only when I close the dialog and open it again . I want to show the text after 5 seconds from opening the dialog .

Here is my function

  void _initialize() {
    Future<void>.delayed(const Duration(seconds: 3), () {
      if (mounted) {
        setState(() {
          visibility = true;
        });
      }
    });
  }
}

And here is my dialog code in the onTab of the button

_initialize()
 showDialog(context: context,
        barrierDismissible: false,

        builder: (BuildContext contextd){

          return  WillPopScope(

            onWillPop: () {return Future.value(false);},
            child: Dialog(
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10)
              ),
              child: Padding(
                padding: EdgeInsets.fromLTRB(20.w, 20.h, 20.w, 20.h),
                child: Column(
                        children: [
                       //here are some widgets
                      Visibility(
                        visible:visibility?true:false,
                        child: Text("Resend?",style: TextStyle(decoration: 
                              TextDecoration.underline,),)),
               ],),
              ),
            ),
          );

        });

Upvotes: 2

Views: 526

Answers (3)

Maikzen
Maikzen

Reputation: 1624

This happens because your setState that update visibility has a different context than builder dialog. Visibility is actually update but only appear in dialog when close and open again because this is how build dialog is updated. If you want to work with the context dialog need to use that widget:

StatefulBuilder(
      builder: (context, setState) {

Into your dialog and then call that setState.

Upvotes: 2

Alb
Alb

Reputation: 1125

Try using a StatefulBuilder. Using the bool visible and the setDialogState argument, you can update the state of the contents of the dialog.

showDialog(
  context: context,
  barrierDismissible: false,
  builder: (BuildContext context) {
    return StatefulBuilder(
      builder(context, setDialogState) {
        // this variable is used for the conditional display
        bool visible = false;
        // this future will update the visible variable in 3 seconds, after the dialog is displayed already
        Future.delayed(Duration(seconds: 3)).then(() => setDialogState(() { visible = true;}));
        return WillPopScope(
          onWillPop: () { return Future.value(false); },
          child: Dialog(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10)
              ),
            child: Padding(
              padding: EdgeInsets.fromLTRB(20.w, 20.h, 20.w, 20.h),
              child: Column(
                children: [
                  //here are some widgets
                  Visibility(
                    visible:visible,
                    child: Text(
                      "Resend?",
                      style: TextStyle(
                        decoration: TextDecoration.underline,
                        ),
                      ),
                    ),
                  ],
                  ),
              ),
            ),
          );
      },
      );
};

Upvotes: 1

Siddharth Mehra
Siddharth Mehra

Reputation: 1899

Try using StatefulBuilder like this:

showDialog(
        context: context,
        builder: (BuildContext context) => StatefulBuilder(
          builder: (context, setState) {
            return //somthing to return;
          },
        ));

Upvotes: 2

Related Questions