How to create a dialog that is able to accept text input and show result in flutter?

Question

I wanted a dialog that is able to allow user to input their information and show it in a list view inside the dialog.

This is the code i used for listview.

new ListView.builder(
            itemBuilder: (context, index) {
              return _infos.isNotEmpty
                  ? new ListTile(
                      title: new Text(_infos[index].toMap().toString()),
                    )
                  : null;
            },
            shrinkWrap: true,
          )

and this is the code i use in onchange in textfield

setState(() {_infos= _result;});

Answer 1

Here is the customized function to create a default AlertDialog with a textField.

TextEditingController _textFieldController = TextEditingController();

Future<void> _displayTextInputDialog(BuildContext context) async {
    return showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: Text('TextField in Dialog'),
          content: TextField(
            controller: _textFieldController,
            decoration: InputDecoration(hintText: "Text Field in Dialog"),
          ),
          actions: <Widget>[
            FlatButton(
              child: Text('CANCEL'),
              onPressed: () {
                Navigator.pop(context);
              },
            ),
            FlatButton(
              child: Text('OK'),
              onPressed: () {
                print(_textFieldController.text);
                Navigator.pop(context);
              },
            ),
          ],
        );
      },
    );
  }

Use:

_displayTextInputDialog(context);