How to create a dialog that is able to accept text input and show result in flutter?
This is a quick ugly example for what you are asking for, to just pass the concept around:
class DialogExample extends StatefulWidget {
@override
_DialogExampleState createState() => new _DialogExampleState();
}
class _DialogExampleState extends State<DialogExample> {
String _text = "initial";
TextEditingController _c;
@override
initState(){
_c = new TextEditingController();
super.initState();
}
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(_text),
new RaisedButton(onPressed: () {
showDialog(child: new Dialog(
child: new Column(
children: <Widget>[
new TextField(
decoration: new InputDecoration(hintText: "Update Info"),
controller: _c,
),
new FlatButton(
child: new Text("Save"),
onPressed: (){
setState((){
this._text = _c.text;
});
Navigator.pop(context);
},
)
],
),
), context: context);
},child: new Text("Show Dialog"),)
],
)
),
);
}
}
I think you wanted something like this.
import 'package:flutter/material.dart';
class DialogWithTextField extends StatefulWidget {
@override
_DialogWithTextFieldState createState() => _DialogWithTextFieldState();
}
class _DialogWithTextFieldState extends State<DialogWithTextField> {
_displayDialog() {
return showDialog(
context: context,
builder: (BuildContext context) {
return Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50),
),
elevation: 6,
backgroundColor: Colors.transparent,
child: _DialogWithTextField(context),
);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: RaisedButton(
color: Colors.red,
child: Text("Click Here to Open Dialog",
style: TextStyle(
color: Colors.white
),),
onPressed: _displayDialog,
),
),
);
}
}
Widget _DialogWithTextField(BuildContext context) => Container(
height: 280,
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.rectangle,
borderRadius: BorderRadius.all(Radius.circular(12)),
),
child: Column(
children: <Widget>[
SizedBox(height: 24),
Text(
"ADD DIALOG TITLE HERE".toUpperCase(),
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 17,
),
),
SizedBox(height: 10),
Padding(
padding: EdgeInsets.only(top: 10, bottom: 10, right: 15, left: 15),
child: TextFormField(
maxLines: 1,
autofocus: false,
keyboardType: TextInputType.text,
decoration: InputDecoration(
labelText: 'Text Form Field 1',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
),
),
)
),
Container(
width: 150.0,
height: 1.0,
color: Colors.grey[400],
),
Padding(
padding: EdgeInsets.only(top: 10, right: 15, left: 15),
child: TextFormField(
maxLines: 1,
autofocus: false,
keyboardType: TextInputType.text,
decoration: InputDecoration(
labelText: 'Text Form Field 2',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
),
),
)
),
SizedBox(height: 10),
Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
FlatButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text(
"Cancel",
style: TextStyle(
color: Colors.black,
),
),
),
SizedBox(width: 8),
RaisedButton(
color: Colors.white,
child: Text(
"Save".toUpperCase(),
style: TextStyle(
color: Colors.redAccent,
),
),
onPressed: () {
print('Update the user info');
// return Navigator.of(context).pop(true);
},
)
],
),
],
),
);