如何創建一個能夠接受文本輸入並在顫動中顯示結果的對話框？

Question

我想要一個能夠允許用戶輸入他們的信息並將其顯示在對話框內的列表視圖中的對話框。

這是我用於列表視圖的代碼。

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

這是我在文本字段的 onchange 中使用的代碼

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

Answer 1

這是您所要求的一個快速丑陋的例子，只是傳遞這個概念：

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

Answer 2

我想你想要這樣的東西。

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

Answer 3

這是創建帶有textField的默認AlertDialog的自定義函數。

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

使用：

_displayTextInputDialog(context);

Answer 4

使用此函數從 flutter 中的對話框中獲取文本： 注意：我使用函數get來翻譯文本，但如果您只使用英語，則不必翻譯：另外不要介意textfield它是一個普通的 TextFormField，而eibtn是一個提升的圖標按鈕。 歡呼。

  Future<String> gettext(BuildContext context, String message) async {
String tex = '';
bool ok = false;
await showDialog(
  context: context,
  builder: (context) {
    return AlertDialog(
      content: Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          textfield(
              hint: message,
              onchanged: (value) {
                tex = value;
              }),
        ],
      ),
      actions: [
        eibtn(
            icondata: Icons.check,
            label: get('ok'),
            disableif: false,
            onpressed: () {
              ok = true;
              Navigator.pop(context);
            }),
        eibtn(
            icondata: Icons.check,
            label: get('cancel'),
            disableif: false,
            onpressed: () {
              Navigator.pop(context);
            })
      ],
    );
  },
);
if (!ok) return null;
return tex;

}