Search code examples
flutterflutter-alertdialog

How to make fullscreen alertDialog in flutter


I need help to make my alert dialog fullscreen, this is the code i have so far, how can i achieve this? I dont know if its possible to define width as the screen size and height aswell.

    createNewMessage() {
    return showDialog(
        barrierDismissible: false,
        context: context,
        builder: (BuildContext context) {
          return StatefulBuilder(builder: (context, setState) {
            return WillPopScope(
                onWillPop: () {},
                child: Container(
                    child: new AlertDialog(
                  title: Column(
                    children: <Widget>[
                      new Text(Translations.of(context).trans('finishmessage') +
                          '?'),
                      Container(
                        height: 20,
                      ),
                      DropdownButton(
                        hint: new Text('Para'),
                        isExpanded: true,
                        onChanged: (value) {
                          setState(() => selected = value);
                        },
                        value: selected,
                        items: workers.map((worker) {
                          return DropdownMenuItem(
                            child: new Text(worker.vNome),
                            value: worker.vCodigo,
                          );
                        }).toList(),
                      ),
                      Container(
                        height: 10,
                      ),
                      TextField(decoration: InputDecoration(labelText: "Data")),
                      Container(
                        height: 10,
                      ),
                      TextField(decoration: InputDecoration(labelText: "Hora")),
                      Container(
                        height: 10,
                      ),
                      TextField(
                          decoration: InputDecoration(labelText: 'Mensagem'))
                    ],
                  ),
                  actions: <Widget>[
                    FlatButton(
                        child:
                            Text(Translations.of(context).trans('sendMessage')),
                        onPressed: () {}),
                    FlatButton(
                        child:
                            Text(Translations.of(context).trans('closealert')),
                        onPressed: () {
                          setState(() => selected = null);
                          Navigator.of(context).pop();
                        }),
                  ],
                )));
          });
        });
  }

This is the result so far:
Alert dialog current
Alert dialog current

Thank you for your help and time


Solution

  • How about instead of using AlertDialog, use your own widgets and customize as you like. Try below code

    createNewMessage() {
      return showDialog(
        barrierDismissible: false,
        context: context,
        builder: (BuildContext context) {
          return StatefulBuilder(
            builder: (context, setState) {
              return WillPopScope(
                  onWillPop: () {
                    return Future.value(true);
                  },
                  child: Material(
                    child: Container(
                      padding: const EdgeInsets.all(16.0),
                      width: double.infinity,
                      height: double.infinity,
                      child: Column(
                        children: <Widget>[
                          new Text(Translations.of(context).trans('finishmessage') +
                              '?'),
                          Container(
                            height: 20,
                          ),
                          DropdownButton(
                            hint: new Text('Para'),
                            isExpanded: true,
                            onChanged: (value) {
                              setState(() => selected = value);
                            },
                            value: selected,
                            items: workers.map((worker) {
                              return DropdownMenuItem(
                                child: new Text(worker.vNome),
                                value: worker.vCodigo,
                              );
                            }).toList(),
                          ),
                          Container(
                            height: 10,
                          ),
                          TextField(decoration: InputDecoration(labelText: "Data")),
                          Container(
                            height: 10,
                          ),
                          TextField(decoration: InputDecoration(labelText: "Hora")),
                          Container(
                            height: 10,
                          ),
                          TextField(
                              decoration: InputDecoration(labelText: 'Mensagem')),
                          Spacer(),
                          Row(
                            children: <Widget>[
                              Spacer(),
                              FlatButton(
                                  child: Text(Translations.of(context)
                                      .trans('sendMessage')),
                                  onPressed: () {}),
                              FlatButton(
                                  child: Text(
                                      Translations.of(context).trans('closealert')),
                                  onPressed: () {
                                    setState(() => selected = null);
                                    Navigator.of(context).pop();
                                  }),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ));
            },
          );
        },
      );
    }