FLUTTER: How to show dialog before beginning of the app?

Question

I want to show a confirmation alert dialog right before opening the app, can someone please tell me how can I achieve that in flutter?

The showDialog() method needs a context, hence I should put it somewhere with buildContext, I assume in app's build method, but how can I trigger the dialog before the actual layout will be built on screen?

score 9 · Answer 1 · answered Feb 09 '19 at 20:13

9

In your initState you can add your callback which will show your dialog with WidgetsBinding.instance.addPostFrameCallback which will be displayed immediately after layout. You can update your layout state according to your dialog result.

class HomePageState extends State<HomePage> {

      @override
      void initState() {
        super.initState();
        WidgetsBinding.instance
            .addPostFrameCallback((_) => showDialog(...));
      }


      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('HomePage'),
          ),
          body: Container(),
        );
      }

answered Feb 09 '19 at 20:13

Figen Güngör

12,169
14
66
108

WidgetsBinding.instance .addPostFrameCallback((_) doesn't work anymore. https://stackoverflow.com/a/54553143/10269042 – anmol.majhail Feb 09 '19 at 20:14
Yup, I also tried, not working, tried another approach, will post in answers in case anyone else needs that.. – Ara Mkrtchyan Feb 09 '19 at 20:23
1

Upss. It works on my version=) Which version are you on? – Figen Güngör Feb 09 '19 at 20:33
On latest stable flutter version. – anmol.majhail Feb 10 '19 at 05:55

score 5 · Accepted Answer · answered Feb 09 '19 at 20:25

5

Code below works, I guess this is the answer

  @override
  Widget build(BuildContext context) {
    Future.delayed(Duration.zero, () => showAlert(context));
    return new WhateverLayoutYouWantToBeDisplayed();
  }

  void showAlert(BuildContext context) {
    showDialog(
      child: new WhateverCustomDialogYouHave(),
        context: context);   
  }

answered Feb 09 '19 at 20:25

Ara Mkrtchyan

497
6
12

8

It's not a good idea to invoke `showDialog` from `build` method because `build` can be called multiple times throughout screen lifetime. – flomaster Feb 26 '20 at 09:27

score 3 · Answer 3 · edited Mar 21 '23 at 06:16

Best ways of doing this,

1. WidgetsBinding

WidgetsBinding.instance.addPostFrameCallback((_) {
 showDialog();
});

2. SchedulerBinding

SchedulerBinding.instance.addPostFrameCallback((_) {
   showDialog();
 });

WidgetsBinding & SchedulerBinding will be called only once as we called it in initState(), but remember it will be called when the build method finished its rendering.

void initState() {
  // TODO: implement initState
  super.initState();
  print("initState");
  WidgetsBinding.instance.addPostFrameCallback((_) {
    print("WidgetsBinding");
  });
  SchedulerBinding.instance.addPostFrameCallback((_) {
    print("SchedulerBinding");
  });
}

FLUTTER: How to show dialog before beginning of the app?

3 Answers3