3

I have an AlertDialog popped up just for several seconds and then automatically popped out without do any action buttons. After it popped out, it will be shows another AlertDialog.

How i can do that?

This is my example code:

Initialize Timer For Show Up The First Dialog:

_timerToShowFirstDialog() async {
  var duration = const Duration(seconds: 1);
  return Timer(duration, () {
    _showFirstDialog();
 });
}

First Dialog:

_showFirstDialog(){
 return showDialog<String>(
 context: context,
 barrierDismissible: false,
 builder: (BuildContext context) {
   return AlertDialog(
     title: Text('Show Dialog 1'),
     content: Text('Wait a sec'),
   );
  });
}

Second Dialog:

_showSecondDialog(){
 return showDialog<String>(
 context: context,
 barrierDismissible: false,
 builder: (BuildContext context) {
   return AlertDialog(
     title: Text('Show Dialog 2'),
     content: Text('After the first dialog popped up for several seconds, shows this dialog without any action buttons'),
   );
  });
}

I was thinking to using setState in the First Dialog to call/return the second one. But, i don't have any idea where to put the code is.

I appreciate for any answers

Muhammad Rizky Nur Fajrie
  • 35
  • 4

1 Answers1

3

Try below code hope its help to you. just tapped on button first then alert is open first alert closes to 5 sec then open 2nd alert

refer Future.delayed() here

 TextButton(
  onPressed: () => showDialog(
      context: context,
      builder: (BuildContext context) {
        Future.delayed(Duration(seconds: 5), () {
          Navigator.of(context).pop(true);
        });
        return AlertDialog(
          title: const Text('AlertDialog Title'),
          content: const Text('AlertDialog description'),
        );
      }).then((value) {
    showDialog(
      // Second dialog open
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          content: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Center(child: Text('Welcome')),
              Text('Second Dialog')
            ],
          ),
          actions: <Widget>[
            TextButton(
              onPressed: () => Navigator.pop(context, 'Cancel'),
              child: const Text('Cancel'),
            ),
            TextButton(
              onPressed: () => Navigator.pop(context, 'OK'),
              child: const Text('OK'),
            ),
          ],
        );
      },
    );
  }),
  child: const Text('Show Dialog'),
)
Ravindra S. Patil
  • 11,757
  • 3
  • 13
  • 40
  • using future.delayed inside a build method is a bad idea, if the widget for whatever reason got built again it would be recalled again and cause an error a better option would be to create a stateless widget that represents the dialog and using the constructor to make the future or a stateful widget and using the init method to create the future – Nael Al Abassy Nov 26 '21 at 14:11
  • @Nael Al Abassy I agree you can also declare future.delayed outside of the the widget. Just create a one function and call this function onPressed of that Button – Ravindra S. Patil Nov 26 '21 at 14:54
  • I've tried your suggestion. Your code works good. But, when i try your code structure of Future.delayed into my code, the second alert doesn't show up. This things a little bit confusing me haha.. – Muhammad Rizky Nur Fajrie Nov 26 '21 at 14:55
  • Just create one method and return the alert dialogue in that and call this function onPressed of the button and above code is work on my correct – Ravindra S. Patil Nov 26 '21 at 14:57
  • @Ravindra S Patil I still put this line "showDialog()" in my code. When i replace with only "showDialog()" it's going well. Anyway, my first and second AlertDialog is already converted into a function and then i called that function to show up the second AlertDialog. Is it still bad idea? or i just have to create a method to represents the dialog? just like Nael Al Abassy and your suggestions. – Muhammad Rizky Nur Fajrie Nov 26 '21 at 15:17
  • Ok so your problem is solved or not? – Ravindra S. Patil Nov 26 '21 at 15:57