Flutter Dynamically insert and remove `TextFormField` from UI - flutter

Question

I'm trying to insert TextFormField on a click to take the name of the student. This thing is working fine. But the problem is when I integrate remove functionality than it's not working as expected.
I did take List<Student> to insert and remove items and converted this List into Map to plot items to UI and update user input name value to a specific indexed Student object value.
If we try adding items and removing them serially than it'll work fine but the only issue is when I remove a single item from in-between it will only update my List and Map but UI will not get updated. This is my code
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);
});
},
)
],
),
);
},
);
},
),
),
);
}
}
The first image is when we add a Student name in plus icon click.(every item in List is a TextFormField. When I remove the second item from UI it will remove 3rd one while technically from data structure that I've used (List & Map) it's removing 2nd (and that's ok). I have an issue of displayed UI after we perform any delete from between.

Answer 1

Since this is state-full widget make a variable bool showTextFormField = false in state class
now in widget use if(showTextFormField) <Widget>
now on button click
setState(){
showTextFormField = true;
}