Flutter Динамически вставлять и удалять `TextFormField` из пользовательского интерфейса

Question

Я пытаюсь вставить TextFormField по щелчку, чтобы взять имя студента. Эта вещь работает нормально. Но проблема в том, что когда я интегрирую функцию удаления, она не работает должным образом. Я взял List<Student>, чтобы вставить и удалить элементы, и преобразовал этот List в Map, чтобы отобразить элементы в пользовательском интерфейсе и обновить значение входного имени пользователя до указанного c индексированного Student значения объекта.

Если мы попытаемся добавить элементы и удалить их последовательно, то это будет нормально работать, но единственная проблема заключается в том, что когда я удаляю один элемент из промежуточного, он только обновит мои List и Map, но пользовательский интерфейс не будет обновлен. Это мой код

import 'package:dynamic_input_add_flutter/student.dart';
import 'package:flutter/material.dart';

class SingleListUse extends StatefulWidget {
  static final String tag = 'single-list-use';
  @override
  _SingleListUseState createState() => _SingleListUseState();
}

class Student1 {
  String _name;
  int _sessionId;

  Student1(this._name, this._sessionId);

  String get name => _name;

  set name(String value) {
    _name = value;
  }

  int get sessionId => _sessionId;

  set sessionId(int value) {
    _sessionId = value;
  }

  @override
  String toString() {
    return 'Student $_name from session $_sessionId';
  }
}

class _SingleListUseState extends State<SingleListUse> {
  List<Student1> _studentList = [];
  Map<int, Student1> _studentMap = {};

  void _addNewStudent() {
    setState(() {
      _studentList.add(Student1('', 1));
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: Icon(
          Icons.done,
          color: Colors.white,
        ),
        onPressed: () {
          if (_studentList.length != 0) {
            _studentList.forEach((student) => print(student.toString()));
          } else {
            print('map list empty');
          }
        },
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
      floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling,
      appBar: AppBar(
        title: Text('Single Map Use'),
        actions: <Widget>[
          FlatButton(
            onPressed: () {
              _addNewStudent();
            },
            child: Icon(
              Icons.add,
              color: Colors.white,
            ),
          )
        ],
      ),
      body: Container(
        padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 20.0),
        child: Builder(
          builder: (context) {
            print("List : ${_studentList.toString()}");
            _studentMap = _studentList.asMap();
            print("MAP : ${_studentMap.toString()}");
            return ListView.builder(
              itemCount: _studentMap.length,
              itemBuilder: (context, position) {
                print('Item Position $position');
                return Padding(
                  padding: EdgeInsets.only(top: 5.0),
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      Expanded(
                        child: TextFormField(
                          initialValue: _studentMap[position].name.length != 0
                              ? _studentMap[position].name
                              : '',
                          onFieldSubmitted: (name) {
                            setState(() {
                              _studentList[position].name = name;
                            });
                          },
                          decoration: InputDecoration(
                            hintText: 'enter student name',
                            hintStyle: TextStyle(
                              fontSize: 16.0,
                              color: Colors.black26,
                            ),
                            border: OutlineInputBorder(
                              borderSide: BorderSide(
                                color: Colors.black12,
                              ),
                              borderRadius: BorderRadius.all(
                                Radius.circular(15.0),
                              ),
                            ),
                          ),
                        ),
                      ),
                      IconButton(
                        icon: Icon(
                          Icons.delete,
                          color: Colors.red,
                        ),
                        onPressed: () {
                          setState(() {
                            _studentList.removeAt(position);
                          });
                        },
                      )
                    ],
                  ),
                );
              },
            );
          },
        ),
      ),
    );
  }
}

Первое изображение, когда мы добавляем имя студента в плюсе щелкните. (каждый элемент в List - это TextFormField. Когда я удаляю второй элемент из пользовательского интерфейса, он удаляет третий, а технически из используемой структуры данных (List & Map) он удаляет второй (и это нормально). У меня проблема с отображаемым пользовательским интерфейсом после того, как мы выполнили любое удаление между ними.

Answer 1

Поскольку это виджет с полным состоянием, создайте переменную bool showTextFormField = false в классе состояний

, теперь в виджете используйте if(showTextFormField) <Widget>

, теперь при нажатии кнопки

setState(){
  showTextFormField = true;
}