处理来自TextField

时间:2018-12-18 07:44:24

标签: dart flutter

1-i多次尝试以一种很好的方式(如卡或容器)从文本文件中检索数据,但是我无法访问控制器列表以在内部查看数据 而且我现在不想使用json 我只想检索用户在字段中写的内容
有帮助吗?

           import 'package:flutter/material.dart';

                class GUI extends StatefulWidget {
        @override
      _GUIState createState() => _GUIState();
 }



   class _GUIState extends State<GUI> {

//this is the TextControllers
  final fnController=TextEditingController();
  final lnController=TextEditingController();
  final cnController=TextEditingController();
  final mbController=TextEditingController();
  final agController=TextEditingController();
  final dnController=TextEditingController();
  final qidController=TextEditingController();

      List userInfo = 

 ['_fnController''_lnController''_cnController''_mbController''_agController''_dnController''_qidController'];

我试图从此处制作

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MedForm'),
        backgroundColor: Colors.deepPurpleAccent,
      ),
      body: Container(
        child: ListView(
          padding: EdgeInsets.all(12.0),
          children: <Widget>[
            Center(
                child: Text(
              'Medical Registration Form ',
              style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold),
            )),
            Container(
              padding: EdgeInsets.only(top: 22.0),
              child: Column(
                children: <Widget>[
                  TextField(
                    controller: fnController,
                    keyboardType: TextInputType.text,
                    decoration: InputDecoration(
                      labelText: 'First Name',
                      hintText: 'your First Name Please',
                    ),
                  ),
                  TextField(
                    controller: lnController,
                    keyboardType: TextInputType.text,
                    decoration: InputDecoration(
                      labelText: 'Last Name',
                      hintText: 'your Last Name Please',
                    ),
                  ),
                  TextField(
                    controller: cnController,
                    keyboardType: TextInputType.text,
                    decoration: InputDecoration(
                      labelText: 'Company Name',
                      hintText: 'your company Name Please',
                    ),
                  ),
                  TextField(
                    controller: mbController,
                    keyboardType: TextInputType.phone,
                    decoration: InputDecoration(
                      labelText: 'Mobile Number',
                      hintText: 'your mobile Number Please',
                    ),
                  ),
                  TextField(
                    controller: agController,
                    keyboardType: TextInputType.datetime,
                    decoration: InputDecoration(
                      labelText: 'Age',
                      hintText: 'month \ day\ year',
                    ),
                  ),
                  TextField(
                    controller: dnController,
                    keyboardType: TextInputType.text,
                    decoration: InputDecoration(
                      labelText: 'DR',
                      hintText: 'Specify Your Dr Please',
                    ),
                  ),
                  TextField(
                    controller: qidController,
                    keyboardType: TextInputType.number,
                    maxLength: 11,
                    decoration: InputDecoration(
                      labelText: 'QID',
                      hintText: 'your Qatari ID please',
                    ),
                  ),

我试图通过卡片制作视图                       FlatButton(                         子级:Text('Submit'),                         onPressed:(){                            卡(                              子级:Text(fnController.text)                            );

                    },
                  )
                ],
              ),
            )
          ],
        ),
        alignment: Alignment.center,
      ),
    );


  }
}

有什么帮助吗??

2 个答案:

答案 0 :(得分:0)

为了显示TextField具有的值-而不是使用fnController.text,您需要使用-fnController.value.text ,依此类推。

供您调试-我已经在代码中修改了一个TextField-在TextField中输入文本时,您可以在控制台中看到值打印

  final fnController = TextEditingController();
  String _name = '';
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        Center(
          child: TextField(
            controller: fnController,
            onChanged: (val) {
              setState(() {
                _name = fnController.value.text;
              });
              debugPrint(fnController.value.text);
            },
            keyboardType: TextInputType.text,
            decoration: InputDecoration(
              labelText: 'First Name',
              hintText: 'your First Name Please',
            ),
          ),
        ),
        Card(
          child: Text(_name),
        )
      ],
    );
  }

按一下按钮即可显示文本:

final fnController = TextEditingController();
  String _name = '';
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        Center(
          child: TextField(
            controller: fnController,
            keyboardType: TextInputType.text,
            decoration: InputDecoration(
              labelText: 'First Name',
              hintText: 'your First Name Please',
            ),
          ),
        ),
        RaisedButton(
          onPressed: () {
            setState(() {
              _name = fnController.value.text;
            });
          },
          child: Text('Show Text'),
        ),
        Card(
          child: Text(_name),
        )
      ],
    );
  }

不使用-TextEditingController()

String _name = '';
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        Center(
          child: TextField(
            onChanged: (val) {
              setState(() {
                _name = val;
              });
            },
            keyboardType: TextInputType.text,
            decoration: InputDecoration(
              labelText: 'First Name',
              hintText: 'your First Name Please',
            ),
          ),
        ),
        Card(
          child: Text(_name),
        )
      ],
    );
  }

答案 1 :(得分:0)

通过TextEditingController将所有List<String>的文本值作为MaterialPageRoute传递。

       FlatButton( child: Text('Submit'), onPressed: ()=> Navigator.push(context,
                    MaterialPageRoute(
                        builder: (BuildContext context) => NewPage([
                              fnController.text,
                              lnController.text,
                              cnController.text,
                              mbController.text,
                              agController.text,
                              dnController.text,
                              qidController.text
                            ])))),
                ]))

创建新页面并创建初始构造函数以接收数据。 映射ListView中的数据列表。

class NewPage extends StatelessWidget {
  NewPage(this.list);
  List<String> list;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children:
          list.map((val) => Card(
            child: new ListTile(
              title: new Text(val),
            ),
          )).toList()
      ),
    );
  }
}

这将在下一页上创建所有值的列表。希望有帮助!