Show alert dialog on app main screen load automatically in flutter

Question

I want to show alert dialog based on a condition. Not based on user interaction such as button press event.

If a flag is set in app state data alert dialog is shown otherwise its not.

Below is the sample alert dialog which I want to show

  void _showDialog() {     // flutter defined function     showDialog(       context: context,       builder: (BuildContext context) {         // return object of type Dialog         return AlertDialog(           title: new Text("Alert Dialog title"),           content: new Text("Alert Dialog body"),           actions: <Widget>[             // usually buttons at the bottom of the dialog             new FlatButton(               child: new Text("Close"),               onPressed: () {                 Navigator.of(context).pop();               },             ),           ],         );       },     );   } 

I tried to call that method inside main screen widget's build method but it gives me error -

 The context used to push or pop routes from the Navigator must be that of a widget that is a descendant of a Navigator widget. E/flutter ( 3667): #0      Navigator.of.<anonymous closure> (package:flutter/src/widgets/navigator.dart:1179:9) E/flutter ( 3667): #1      Navigator.of (package:flutter/src/widgets/navigator.dart:1186:6) E/flutter ( 3667): #2      showDialog (package:flutter/src/material/dialog.dart:642:20) 

Problem is I don't know from where I should call that _showDialog method?

Answer 1

You have to wrap the content inside another Widget (preferably Stateless).

Example:

Change From:

  import 'package:flutter/material.dart';    void main() {     runApp(new MyApp());   }    class MyApp extends StatelessWidget {     @override     Widget build(BuildContext context) {       return MaterialApp(           title: 'Trial',           home: Scaffold(               appBar: AppBar(title: Text('List scroll')),               body: Container(                 child: Text("Hello world"),               )));     }   } 

to this:

  import 'dart:async';   import 'package:flutter/material.dart';    void main() {     runApp(new MyApp());   }    class MyApp extends StatelessWidget {     @override     Widget build(BuildContext context) {       return MaterialApp(           title: 'Trial',           home: Scaffold(               appBar: AppBar(title: Text('List scroll')), body: new MyHome()));     }   }    class MyHome extends StatelessWidget { // Wrapper Widget     @override     Widget build(BuildContext context) {       Future.delayed(Duration.zero, () => showAlert(context));       return Container(         child: Text("Hello world"),       );     }      void showAlert(BuildContext context) {       showDialog(           context: context,           builder: (context) => AlertDialog(                 content: Text("hi"),               ));     }   } 

Note: Refer here for wrapping show alert inside Future.delayed(Duration.zero,..)

Answer 2

Simply override initState and call your _showDialog method inside Future or Timer:

@override void initState() {   super.initState();    // Use either of them.    Future(_showDialog);   Timer.run(_showDialog); // Requires import: 'dart:async' }