Agfdhyk

I want to show a dialog from root widget (the one that created MaterialApp) I have a NavigatorState instance, but showDialog requires context that would return Navigator.of(context).

It looks like I need to provide context from a route, but I can't do this, because the root widget does not have it.

EDIT: I have found a workaround: I can push fake route that is only there to showDialog and then pop that route when dialog finishes. Not pretty but works.

I fixed the problem by using navigator.overlay.context. Here is example:

import 'package:flutter/material.dart';



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



class MyApp extends StatelessWidget {

  final navigatorKey = GlobalKey<NavigatorState>();



  void show() {

    final context = navigatorKey.currentState.overlay.context;

    final dialog = AlertDialog(

      content: Text('Test'),

    );

    showDialog(context: context, builder: (x) => dialog);

  }



  @override

  Widget build(BuildContext context) {

    return new MaterialApp(

      navigatorKey: navigatorKey,

      theme: new ThemeData(

        primarySwatch: Colors.blue,

      ),

      home: Scaffold(

        appBar: AppBar(),

        body: FlatButton(

          child: Text('Show alert'),

          onPressed: show,

        ),

      ),

    );

  }

}

tl;dr: If you want to call showDialog from your root widget, extrude your code into another widget (e.g. a StatelessWidget), and call showDialog there.

Anyway, in the following I'm going to assume you are running into this issue:

flutter: No MaterialLocalizations found. 

flutter: MyApp widgets require MaterialLocalizations to be provided by a Localizations widget ancestor. 

flutter: Localizations are used to generate many different messages, labels,and abbreviations which are used by the material library.

As said before, showDialog can only be called in a BuildContext whose ancestor has a MaterialApp. Therefore you can't directly call showDialogif you have a structure like this:

- MaterialApp

  - Scaffold

    - Button // call show Dialog here

In a code example this would result in code like this, throwing the error given above:

import 'package:flutter/material.dart';



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



class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      theme: ThemeData(),

      home: Scaffold(

        body: Center(

          child: RaisedButton(

              child: Text('Show dialog!'),

              onPressed: () {

                showDialog(

                    context: context,

                    builder: (BuildContext context) {

                      return Dialog(

                        child: Text('Dialog.'),

                      );

                    });

              }),

        ),

      ),

    );

  }

}

To solve this error from occuring you can create a new Widget, which has its own BuildContext. The modified structure would look like this:

- MaterialApp

  - Home



- Home     // your own (Stateless)Widget

  - Button // call show Dialog here

Modifying the code example to the structure given above, results in the code snippet below. showDialogcan be called without throwing the error.

import 'package:flutter/material.dart';



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



class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      theme: ThemeData(),

      home: Home()

    );

  }

}



class Home extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      body: Center(

        child: RaisedButton(

            child: Text('Show dialog!'),

            onPressed: () {

              showDialog(

                  context: context,

                  builder: (BuildContext context) {

                    return Dialog(

                      child: Text('Dialog.'),

                    );

                  });

            }),

      ),

    );

  }

}

Since showDialog is used for showing a material dialog It can be used for showing dialogs inside a MaterialApp widget only. It can not be used to show dialog outside it.