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

Flutter Popup That Closes After 3 Seconds

I am completely new to flutter and am trying to create an alert popup that
appears when the user clicks on a button.

This is different than the post already on stack overflow which asks for an alert dialog, so please do not vote down this question.

I want the popup to appear for 3 seconds and then close by itself.

The problem I am facing is that the popup does not appear at all when the button is clicked.

The following is what I have thus far:

class ExitGameRoute extends StatelessWidget {
  const ExitGameRoute({super.key});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
        onPressed: () => (
              context: context,
              builder: (context) => const AlertDialog(
                    title: Text('Exiting Game Alert'),
                    content: Text('Exiting Build Up Domino...'),
                    // return const AlertDialog(
                    //   title: Text('Exiting Build Up Domino...')
                    // );
                  ),
              Future.delayed(const Duration(seconds: 3), () {
                Navigator.of(context).pop(true);
              })
            ),
        child: const Text('Exit Game',
            style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold)));
  }
}

Please help me understand where I am going wrong. Thanks!

Tags:

2

Answers


  1. 0 
    class ExitGameRoute extends StatelessWidget {
  
const ExitGameRoute({super.key});

@override
  Widget build(BuildContext context) {

    return ElevatedButton(
        onPressed: (){
          showDialog(
              context: context,
              builder: (context) => const AlertDialog(
                    title: Text('Exiting Game Alert'),
                    content: Text('Exiting Build Up Domino...'),
                    // return const AlertDialog(
                    //   title: Text('Exiting Build Up Domino...')
                    // );
                  ));
              Future.delayed(const Duration(seconds: 3), () {
                Navigator.of(context).pop(true);
              });
        },
        child: const Text('Exit Game',
            style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold)));
  }
}

    You are not using showDialog function inside your onPressed call back.

    The code above works properly use this.

    Login or Signup to reply.
  2. 0

    Button

    ElevatedButton(
          onPressed: () => showDialog(
            context: context,
            builder: (context) {
              return AlertWidget();
            },
          ),
          child: Text(
            "Show alert box and close after 3 seconds",
          ),
        )

    Alert Dialog

    class AlertWidget extends StatefulWidget {
  const AlertWidget({Key key}) : super(key: key);

  @override
  State<AlertWidget> createState() => _AlertWidgetState();
}

class _AlertWidgetState extends State<AlertWidget> {
  //
  @override
  void initState() {
    super.initState();

    // CALL THE CLOSE FUNCTION WHEN AlertWidget OPEN
    close();
  }

  //
  void close() {
    // It will start the countdown when AlertWidget opens and close after 3 seconds
    Future.delayed(
      Duration(seconds: 3),
      () {
        if (mounted) {
          Navigator.pop(context);
        }
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: Text("Exiting Game Alert"),
      content: Text("Exiting Build Up Domino..."),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search