Show dialog on widget

Question

In flutter, we want to overlay a dialog above the widget.

We were able to display the dialog after pushing the button.

However, we want to display that dialo

Answer 1

We have to display the dialog once done with building the widget. You can use Future.delayed function like below(I tested, it is working).

class XxxxxWidget extends StatelessWidget {

@override
Widget build(BuildContext context) {
// [NG]We want to show dialog on Container widget.

 Future.delayed(Duration.zero, () => showMyDialog(context)); // import 'dart:async';
 return Container(
  child: FlatButton(.... //same as question

Explaination:

As Dart is based on single-threaded event loop, when we create an async tasks, it will put those events in the end of the event queue and continue it's current execution. Please refer below example for more details,

void main() {
  print("first");
  Future(() => print("second"));
  print("third");
  Future(() => print("forth"));

}

Output will be

first
third
second
forth

It is very similar to

DispatchQueue.main.async {
 print("Async1") //printJob
}

Once done with building the widget display the dialog. Check out my answer for similar problem.

Answer 2

some of this is ambiguous, but you can show an alert dialog in a widgets init method like this

Future showDialog() async {

 WidgetsBinding.instance.addPostFrameCallback((_) async {
  await showDialog<String>(
    context: context,
    builder: (BuildContext context) => AlertDialog(
          title: const Text('Title'),
          content: const Text('Content')
          actions: <Widget>[
            FlatButton(
              child: const Text('OK'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ],
        ),
  );
});
}

this will wait for the first frame to be drawn before showing the dialog so you can call it from init

@override
  void initState() {
   super.initState();

   showDialog();
}

Answer 3

The issue you have its normal on Flutter so let's see the code.

I guess the problem is in the constructor for the Widget, need to be like this :

showMyDialog(BuildContext context) {
 showDialog(
  context: context,
  builder: (BuildContext context){
  return new AlertDialog(
    content: Text(
        'Message Here',
      ),
      actions: <Widget>[
        FlatButton(
          child: const Text('OK'),
          onPressed: () {
            Navigator.of(context).pop(true);
          },
        ),
      ],
   );
  }
 );
}

Try this

Answer 4

'The Flutter Way' of doing this would look like this (assume you need to do this when rendering your main screen):

class MyWidgetWithDialogOnStartup extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: FutureBuilder(
        future: Future.delayed(Duration.zero, () => showMyDialog(context)),
        builder: (context, snapshot) {
          return WhateverMyWidgetReallyIs();
        },
      )
    );
  }
}

showMyDialog(context) wraps the native showDialog call.