How to dynamically add a TextFormField with initialization data in the middle of a list of UI TextFormFields? – Flutter

The widget AnimatedList solves this problem, it keep track of the widgets as a list would do and uses a build function so it is really easy to sync elements with another list. If you end up having a wide range of forms you can make use of the InheritedWidget to simplify the code.

In this sample i’m making use of the TextEditingController to abstract from the form code part and to initialize with value (the widget inherits from the ChangeNotifier so changing the value will update the text in the form widget), for simplicity it only adds (with the generic text) and removes at an index.

To make every CustomLineForm react the others (as in: disable remove if it only remains one) use a StreamBuilder or a ListModel to notify changes and make each entry evaluate if needs to update instead of rebuilding everything.

class App extends StatelessWidget {
  final print_all = ChangeNotifier();

  App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: FormList(print_notifier: print_all),
        floatingActionButton: IconButton(
          onPressed: print_all.notifyListeners,
          icon: Icon(Icons.checklist),
        ),
      ),
    );
  }
}

class FormList extends StatefulWidget {
  final ChangeNotifier print_notifier;
  FormList({required this.print_notifier, super.key});

  @override
  _FormList createState() => _FormList();
}

class _FormList extends State<FormList> {
  final _controllers = <TextEditingController>[];
  final _list_key = GlobalKey<AnimatedListState>();

  void print_all() {
    for (var controller in _controllers) print(controller.text);
  }

  @override
  void initState() {
    super.initState();
    widget.print_notifier.addListener(print_all);
    _controllers.add(TextEditingController(text: 'Inital entrie'));
  }

  @override
  void dispose() {
    widget.print_notifier.removeListener(print_all);
    for (var controller in _controllers) controller.dispose();
    super.dispose();
  }

  void _insert(int index) {
    final int at = index.clamp(0, _controllers.length - 1);
    _controllers.insert(at, TextEditingController(text: 'Insert at $at'));
    // AnimatedList will take what is placed in [at] so the controller
    // needs to exist before adding the widget
    _list_key.currentState!.insertItem(at);
  }

  void _remove(int index) {
    final int at = index.clamp(0, _controllers.length - 1);
    // The widget is replacing the original, it is used to animate the
    // disposal of the widget, ex: size.y -= delta * amount
    _list_key.currentState!.removeItem(at, (_, __) => Container());
    _controllers[at].dispose();
    _controllers.removeAt(at);
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedList(
      key: _list_key,
      initialItemCount: _controllers.length,
      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
      itemBuilder: (ctx, index, _) {
        return CustomLineForm(
          index: index,
          controler: _controllers[index],
          on_insert: _insert,
          on_remove: _remove,
        );
      },
    );
  }
}

class CustomLineForm extends StatelessWidget {
  final int index;
  final void Function(int) on_insert;
  final void Function(int) on_remove;
  final TextEditingController controler;

  const CustomLineForm({
    super.key,
    required this.index,
    required this.controler,
    required this.on_insert,
    required this.on_remove,
  });

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Flexible(
          child: TextFormField(
            controller: controler,
          ),
        ),
        IconButton(
          icon: Icon(Icons.add_circle),
          onPressed: () => on_insert(index),
        ),
        IconButton(
          icon: Icon(Icons.remove_circle),
          onPressed: () => on_remove(index),
        )
      ],
    );
  }
}