Reputation: 217
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
Thank you for your help and time
Upvotes: 2
Views: 9022
Reputation: 530
Try this, it work for me
showGeneralDialog(
context: context,
barrierDismissible: true,
barrierLabel: MaterialLocalizations.of(context)
.modalBarrierDismissLabel,
barrierColor: Colors.black45,
transitionDuration: const Duration(milliseconds: 200),
pageBuilder: (BuildContext buildContext,
Animation animation,
Animation secondaryAnimation) {
return Center(
child: Container(
width: MediaQuery.of(context).size.width - 10,
height: MediaQuery.of(context).size.height - 80,
padding: EdgeInsets.all(20),
color: Colors.white,
child: Column(
children: [
RaisedButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text(
"Save",
style: TextStyle(color: Colors.white),
),
color: const Color(0xFF1BC0C5),
)
],
),
),
);
});
Upvotes: 1
Reputation: 2591
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();
}),
],
),
],
),
),
));
},
);
},
);
}
Upvotes: 7