0

I'm trying to display a dialog popup whenever the user clicks on a button. However, whenever I test this the dialog not displayed and an exception has been thrown in Chrome console.

Exception message:

Uncaught TypeError: Cannot read properties of null (reading 'toString')
    at Object.a9 (main.dart.js:16645)
    at Object.DV (main.dart.js:4402)
    at main.dart.js:65305
    at b7F.a (main.dart.js:20524)
    at b7F.$2 (main.dart.js:49122)
    at Object.l (main.dart.js:20510)
    at aUl.$0 (main.dart.js:65307)
    at NQ.YO (main.dart.js:80893)
    at Object.eval (eval at bio (main.dart.js:13895), <anonymous>:3:55)
    at je.a5X (main.dart.js:76162)

and here's my dart code:

ElevatedButton(
     onPressed: () async {
          showDialog(context: context, builder: (_){
               return const AlertDialog(title: Text("Test"),);
          });
     },
     child: const Text("Test")
)

I tried to put await before showDialog but still the problem persists.

Ahmad Raza
  • 758
  • 7
  • 26
Max
  • 101
  • 2
  • 10

3 Answers3

0

There are two ways to declare Alert

1.By create separate method/function

showMyDialog() async {
  return showDialog(
    context: context,
    barrierDismissible: false, 
    builder: (BuildContext context) {
      return AlertDialog(
        title: const Text('AlertDialog Title'),
        content: SingleChildScrollView(
          child: ListBody(
            children: const <Widget>[
              Text('This is a demo alert dialog.'),
              Text('Would you like to approve of this message?'),
            ],
          ),
        ),
        actions: <Widget>[
          TextButton(
            child: const Text('Approve'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    },
  );
}

Your Widget:

ElevatedButton(
  onPressed: () async {
    showMyDialog();
  },
  child: const Text(
    "Pressed Me",
  ),
),

Your result Screen-> enter image description here

  1. By declare OnPressed function

      ElevatedButton(
   onPressed: () => showDialog<String>(
     context: context,
     builder: (BuildContext context) => AlertDialog(
       title: const Text(
         'AlertDialog Title',
       ),
       content: const Text(
         'AlertDialog description',
       ),
       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(
     'Pressed Me',
   ),
 ),

Your result screen-> enter image description here

Refer Documentation here

You Can refer my answers here and here also for AlertDialog

If you dismiss your alert automatically refer my answer here

Test Both solution here

Ravindra S. Patil
  • 11,757
  • 3
  • 13
  • 40
  • 1
    Unfortunately, none of the solutions you mentioned worked. The dialog just doesn't show up in the web version of flutter for some reason. – Max Dec 31 '21 at 03:13
  • Both code are run on my machine, are you get any error or warning? – Ravindra S. Patil Dec 31 '21 at 03:18
  • The error I get is the one that I see in the chrome console which you can read above in my question. – Max Dec 31 '21 at 03:32
0

So I found out what was the issue, on my main MaterialApp definition, I used the builder instead of home or route. And that caused the issue. However, when I switched to using home instead, it worked like a charm. Thank you

Max
  • 101
  • 2
  • 10
0

I was facing the same issue. Even the solution mentioned on this github thread didn't work for me. The only solution was resorting to this package that works well on all platforms.

Rafhaela Marques
  • 13
  • 4