title: How to add multiple textfields and get the values from it in flutter
body: <p>I'm trying to add multiple <code>textformfileds</code> on <strong>click</strong> of add more <strong><code>Button</code></strong> and trying to access the values of all fields on form submit.</p>
  <p>I'm not getting the values of <code>dynamic</code> added fields.</p>
  <p>I follow <a href="https://medium.com/dev-genius/add-remove-textformfields-dynamically-in-flutter-5bef6948e778" rel="nofollow noreferrer">this</a> url to <code>dynamically</code> added <code>textformfields</code>.</p>
  <p>And here is my <strong><code>code</code></strong>.</p>
  <pre><code>import 'package:flutter/material.dart';
  
  void main() {
    runApp(MyApp());
  }
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Dynamic TextFormFields',
        theme: ThemeData(
          primarySwatch: Colors.blue,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        home: MyForm(),
        debugShowCheckedModeBanner: false,
      );
    }
  }
  
  class MyForm extends StatefulWidget {
    @override
    _MyFormState createState() =&gt; _MyFormState();
  }
  
  class _MyFormState extends State&lt;MyForm&gt; {
    final _formKey = GlobalKey&lt;FormState&gt;();
    TextEditingController _nameController;
    TextEditingController _name1Controller;
    static List&lt;String&gt; friendsList = [null];
    static List&lt;String&gt; friendsList1 = [null];
  
    @override
    void initState() {
      super.initState();
      _nameController = TextEditingController();
      _name1Controller = TextEditingController();
    }
  
    @override
    void dispose() {
      _nameController.dispose();
      _name1Controller.dispose();
      super.dispose();
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        backgroundColor: Colors.grey[200],
        appBar: AppBar(
          title: Text('Dynamic TextFormFields'),
        ),
        body: Form(
          key: _formKey,
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // name textfield
                Padding(
                  padding: const EdgeInsets.only(right: 32.0),
                  child: TextFormField(
                    controller: _nameController,
                    decoration: InputDecoration(hintText: 'Enter your name'),
                    validator: (v) {
                      if (v.trim().isEmpty) return 'Please enter something';
                      return null;
                    },
                  ),
                ),
                SizedBox(
                  height: 20,
                ),
                Text(
                  'Add Friends',
                  style: TextStyle(fontWeight: FontWeight.w700, fontSize: 16),
                ),
                ..._getFriends(),
                SizedBox(
                  height: 40,
                ),
                FlatButton(
                  onPressed: () {
                    if (_formKey.currentState.validate()) {
                      _formKey.currentState.save();
                      print(_MyFormState.friendsList);
                      print(_MyFormState.friendsList1);
                    }
                  },
                  child: Text('Submit'),
                  color: Colors.green,
                ),
              ],
            ),
          ),
        ),
      );
    }
  
    /// get firends text-fields
    List&lt;Widget&gt; _getFriends() {
      List&lt;Widget&gt; friendsTextFields = [];
      for (int i = 0; i &lt; friendsList.length; i++) {
        friendsTextFields.addAll(
          [
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 16.0),
              child: Row(
                children: [
                  Expanded(child: FriendTextFields(i)),
                  Expanded(child: FriendTextFields1(i)),
                  SizedBox(
                    width: 16,
                  ),
                  // we need add button at last friends row
                  _addRemoveButton(i == friendsList.length - 1, i),
                ],
              ),
            )
          ],
        );
      }
      return friendsTextFields;
    }
  
    /// add / remove button
    Widget _addRemoveButton(bool add, int index) {
      return InkWell(
        onTap: () {
          if (add) {
            // add new text-fields at the top of all friends textfields
            friendsList.insert(0, null);
          } else
            friendsList.removeAt(index);
          setState(() {});
        },
        child: Container(
          width: 30,
          height: 30,
          decoration: BoxDecoration(
            color: (add) ? Colors.green : Colors.red,
            borderRadius: BorderRadius.circular(20),
          ),
          child: Icon(
            (add) ? Icons.add : Icons.remove,
            color: Colors.white,
          ),
        ),
      );
    }
  }
  
  class FriendTextFields extends StatefulWidget {
    final int index;
    FriendTextFields(this.index);
    @override
    _FriendTextFieldsState createState() =&gt; _FriendTextFieldsState();
  }
  
  class _FriendTextFieldsState extends State&lt;FriendTextFields&gt; {
    TextEditingController _nameController;
  
    @override
    void initState() {
      super.initState();
      _nameController = TextEditingController();
    }
  
    @override
    void dispose() {
      _nameController.dispose();
      super.dispose();
    }
  
    @override
    Widget build(BuildContext context) {
      WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
        _nameController.text = _MyFormState.friendsList[widget.index] ?? '';
      });
  
      return TextFormField(
        controller: _nameController,
        onChanged: (v) =&gt; _MyFormState.friendsList[widget.index] = v,
        decoration: InputDecoration(hintText: 'textbox 1'),
        validator: (v) {
          if (v.trim().isEmpty) return 'Please enter something';
          return null;
        },
      );
    }
  }
  
  //////////////////////////////////////////////////////////////////
  class FriendTextFields1 extends StatefulWidget {
    final int index;
    FriendTextFields1(this.index);
  
    @override
    _FriendTextFields1State createState() =&gt; _FriendTextFields1State();
  }
  
  class _FriendTextFields1State extends State&lt;FriendTextFields1&gt; {
    TextEditingController _name1Controller;
  
    @override
    void initState() {
      super.initState();
      _name1Controller = TextEditingController();
    }
  
    @override
    void dispose() {
      _name1Controller.dispose();
      super.dispose();
    }
  
    @override
    Widget build(BuildContext context) {
      WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
        _name1Controller.text = _MyFormState.friendsList1[widget.index] ?? '';
      });
  
      return TextFormField(
        controller: _name1Controller,
        onChanged: (v) =&gt; {
          _MyFormState.friendsList1[widget.index] = v,
        },
        decoration: InputDecoration(hintText: 'textbox 2'),
        validator: (v) {
          if (v.trim().isEmpty) return 'Please enter something';
          return null;
        },
      );
    }
  }
  </code></pre>