Home > other >  Flutter showDialog
Flutter showDialog

Time:11-11

Can i showDialog inside a function without passing context?

void test(){
   showDialog(context: context, builder: (_) => AlertDialog(
      content: Column(
        children: [
          Row(
            children: const [
              Icon(Icons.check_circle, color: Colors.green,),
              Text("Hi"),
            ],
          )
        ],
      ),
    ));    
}

Sorry i didn't explain very well, without passing context to function, not to showDialog

CodePudding user response:

According to the doc (https://api.flutter.dev/flutter/material/showDialog.html) you can't, it's required.

CodePudding user response:

the short answer is no, you can't.

the long answer: first, the BuildContext is a object type, so in order to remove conflictions between the context property and the context value we're going to rename it to contextGotFromUI.

Note: contextGotFromUI here is just a BuildContext object sp we can rename it with whatever we want.

just to not get confused by the same names

  void test(){
   showDialog(context: contextGotFromUI, builder: (_) => AlertDialog(
      content: Column(
        children: [
          Row(
            children: const [
              Icon(Icons.check_circle, color: Colors.green,),
              Text("Hi"),
            ],
          )
        ],
      ),
    ));}

the context property in the showDialog is required to set from it's implementation:

    Future<T?> showDialog<T>({
     required BuildContext context,
     required WidgetBuilder builder,
     bool barrierDismissible = true,
     // more code

the BuildContext is an important topic to understand in flutter, to show a dialog widget on top of the screen the user is actually navigating in and seeing at any time, the BuildContext is what tells to show it on top of the widget with that specific context, and not other screens.

As from the showDialog official documentation:

The context argument is used to look up the Navigator and Theme for the dialog. It is only used when the method is called. Its corresponding widget can be safely removed from the tree before the dialog is closed.

so in order to show a dialog from an external method, you need to pass a context that belongs to a specific widget, then use it in the showDialog:

 void test(BuildContext contextGotFromUI){
   showDialog(context: contextGotFromUI, builder: (_) => AlertDialog(
      content: Column(
        children: [
          Row(
            children: const [
              Icon(Icons.check_circle, color: Colors.green,),
              Text("Hi"),
            ],
          )
        ],
      ),
    ));}

then from your UI where you're calling that method, pass it:

Widget build(BuildContext) {
// widgets
//...
 onPressed: () {
  test(context); // will show an expected dialog on the screen
 }
}

CodePudding user response:

Yes, you can but you have to create the function inside a stateful widget not in the normal classes. in case you create the function in a normal class the context will be required!

void test(BuildContext context){
   showDialog(context: context, builder: (_) => AlertDialog(
      content: Column(
        children: [
          Row(
            children: const [
              Icon(Icons.check_circle, color: Colors.green,),
              Text("Hi"),
            ],
          )
        ],
      ),
    ));    
}
  • Related