Odtnhj

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.