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:

enter image description here

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);
            },
          )
        ],
      ),
    ],
  ),
);

Tags:

Dart

Flutter