如何添加“添加更多”按钮以在Flutter中添加更多TextField?

时间:2019-07-14 19:01:33

标签: android validation flutter dart

我有一个表单,用户需要从下拉列表中选择一个项目,然后在文本字段中输入该项目的权重。现在,我想添加一个按钮,单击该按钮将添加另一组下拉列表和“输入”字段,以便用户可以选择更多项目并输入相应项目的权重。如何在Flutter应用程序中实现这一点?

这就是我的代码现在的样子。

class _CheckOutPageState extends State<CheckOutPage> {
  String uid;
  String key;
  _CheckOutPageState(this.key);
  String _currentItemSelected = "Paper";
  var _items = ['paper', 'Books', 'Pens', 'Markers'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:  ListView(
        padding: EdgeInsets.all(20.0),
        children: <Widget>[
          Divider(height: 50,),
          Center(
            child:Text(
              "Check Out", 
              style: TextStyle(
                fontSize: 40,
                color: new Color(0xfffff8f43),
                fontWeight: FontWeight.bold
              ),
            )
          ),
          Divider(height: 50,),
          Center(child: Text("Select the List of Items")),
          Divider(height: 50,),
          Card(
            elevation: 10,
            child: Padding(
              padding: EdgeInsets.all(20.0),
              child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[ 
            DropdownButton<String>(
              items: _items.map((String dropDownStringItem){
                return DropdownMenuItem<String>(
                  value: dropDownStringItem,
                  child: Text(dropDownStringItem),
                );
              }).toList(),
              onChanged: (String newValueSelected){
                setState(() {
                 this._currentItemSelected = newValueSelected; 
                });
              },
              value: _currentItemSelected,
            ),
            TextField(

              decoration: InputDecoration(
                labelText: "Enter Weight"

              ),

            ),
            ],
          ),
          )
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              RaisedButton(
                child: Text("Done", style: TextStyle(color: Colors.white),),
                color: new Color(0xfffff8f43),
                onPressed: (){
                },
              ),
              RaisedButton(
                child: Text("Back", style: TextStyle(color: Colors.white),),
                color: new Color(0xfffff8f43),
                onPressed: (){
                  Navigator.of(context).pop();
                },
              ),
            ],
          ),


        ],

      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        elevation: 10.0,
        backgroundColor: new Color(0xfffff8f43),
        onPressed: (){

        },
      ),
    );
  }  
}

每当用户按下floatingActionButton时,我都想添加Card中的任何内容。

0 个答案:

没有答案