Add & Remove TextFormFields dynamically in Flutter

Hey, do your flutter form require you to add and remove TextFormFields dynamically? How many text editing controllers will you initialize at starting? How will you dispose of these controllers properly when the field(s) get removed?

This article will help you with these problems.

Find the updated article here.

Here, I’m revealing the secret for saving your time :-). All the dynamically added text fields will be a stateful widget in itself.

Now you can skip this article if you want.

Still Here? Want to see how I did this? Thanks!

Ok, first set up a project.

Our form will have a text field to input our name and there is/are text field(s) to enter our friend’s name which can be added and removed dynamically.

1. Create a stateful widget class for our form.

class MyForm extends StatefulWidget {
  @override
  MyFormState createState() => MyFormState();
}

class MyFormState extends State<MyForm> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[200],
      appBar: AppBar(title: Text('Dynamic TextFormFields'),),
      body: Container(),
    );
  }
}