我是 flutter 的新手，我正在尝试创建此布局

Question

How can i create this layout in flutter. when i click raised button the name and number is saved and you get two new textformfield to enter another business owner data

initially there will be two textformfield to enter owner details as shown in first image if there are many co-founders then he can press the raised button and two new blank form field will be shown

image1

end result can look like this second image

i tried multiple times but wasn't able to implement it correctly. Any help is appreciated.

Answer 1

One ideal way to do this would be to use a ListView to hold your TextFields . It'll first hold your initial TextFields , then a Column placeholder that can add additional TextFields when you tap your button AddOwner. A simplified example:

  ListView(
    children: <Widget>[
      TextFormField(
        decoration: InputDecoration(labelText: 'name'),
      ),
      TextFormField(
        decoration: InputDecoration(labelText: 'phone'),
      ),
      Column(children: additionalTextFields,),
    ],
  ),

And in your AddOwner button, you'll call the method to add more entries as you wish:

  var additionalTextFields = List<Widget>();

  void _addNewTextFields() {
    setState(() {
      additionalTextFields.add(
        TextFormField(
          decoration: InputDecoration(labelText: 'name'),
        ),
      );
      additionalTextFields.add(
        TextFormField(
          decoration: InputDecoration(labelText: 'phone'),
        ),
      );
    });
  }