Flutter, show AlertDialog from function

Question

I have the follwing code with a _checkCreds function. I want to show an alert when that button is pressed.

When I replace the print() statement with an AlertDialog(), I get a "No MaterialLocalizations found".

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState(); 
}

class _MyAppState extends State<MyApp> {
  void _checkCreds(bool val) {
    if(!val){
      print("Warning, show alert here instead of print!");
      return;
    }
    ...
    // Continue executing
  }

  Widget build(BuildContext context) {
    return MaterialApp(
      home: RaisedButton(
        child: "Press me to trigger an alert!" ),
        onPressed: () => _checkCreds(false),
    );   
  } 

}

https://api.flutter.dev/flutter/material/AlertDialog-class.html — anmol.majhail, Jul 24 '20 at 14:50
Does this answer your question? [How to make an AlertDialog in Flutter?](https://stackoverflow.com/questions/53844052/how-to-make-an-alertdialog-in-flutter) — Alok, Jul 24 '20 at 15:49
@Alok Too much for what I wanted, but I've figured it out thanks! — usersina, Jul 24 '20 at 19:35

score 2 · Answer 1 · answered Jul 24 '20 at 15:26

I've figured it out, coming for a React environment I didn't know where "BuildContext" fits in all of this. After further investigation I passed the current context as an argument to the function that calls the Alert.

Above main():

Future<void> _ackAlert(BuildContext context) {
  return showDialog<void>(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        title: Text('Error'),
        content: const Text('Please enter a valid text'),
        actions: <Widget>[
          FlatButton(
            child: Text('Okay'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    },   
  ); 
}

Inside the main widget:

Widget build(BuildContext context) {
    return MaterialApp(
      home: RaisedButton(
        child: "Press me to trigger an alert!" ),
        // I've added a parameter that takes the current context
        onPressed: () => _checkCreds(false, context),
    );   
  }

Great @Anis Benna, +1 for the efforts and learning! – Alok Jul 25 '20 at 03:44 — Alok, Jul 25 '20 at 03:44
I'm sure it works but i think is an antipattern – Tiru Nov 10 '22 at 14:53 — Tiru, Nov 10 '22 at 14:53

littleironical · Accepted Answer · 2020-07-24T15:57:47.337

1

I think this is what you want:

void _checkCreds(bool val){//put it inside 'MyAppState' class
  if(!val){
    showDialog(
      barrierDismissible: true,//tapping outside dialog will close the dialog if set 'true'
      context: context, 
      builder: (context){
        return Dialog(
          //Add code here
        );
      }
    );
  }
  ...
  // Continue executing
}

AlertDialog and Dialog has same properties except AlertDialog has content property whereas Dialog has child property. Both does same work.

edited Jul 24 '20 at 15:57

answered Jul 24 '20 at 15:50

littleironical

1,593
1
11
25

The problem wasn't the Alert in itself, however the fact that it needs a "context" which should be passed to the function: _checkCreds(bool val, BuildContext context). If I pass the context in the button OnPressed, the issue is solved. – usersina Jul 24 '20 at 19:16

Flutter, show AlertDialog from function

2 Answers2