List not populating in Flutter - flutter

Question

I am trying to have a form when I fill it out will populate a ListView, but can't seem to get the list to popluate with any values.
I am using the following to have a bottom navigation:
class _AppState extends State<App> {
int _currentIndex = 0;
final List<Widget> body = [
AddNewStudent(),
StudentList(),
];
In a file that has the form looks like this:
class StudentClass {
String kidFirstName;
String kidLastName;
DateTime dateOfBirth;
int totalAttedance = 0;
int attedanceAtRank = 0;
StudentClass(
{required this.kidFirstName,
required this.kidLastName,
required this.dateOfBirth});
}
class AddNewStudent extends StatefulWidget {
#override
AddStudentScreen createState() => AddStudentScreen();
}
class AddStudentScreen extends State<AddNewStudent> {
List<StudentClass> studentList = [];
void addStudent(StudentClass newStudent) {
setState(() {
studentList.add(newStudent);
});
}
final formKey = GlobalKey<FormState>();
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.all(20.0),
child: SingleChildScrollView(
child: Column(
children: [
Form(
key: formKey,
child: Column(
children: [
kidsFirstNameFormField(),
kidLastNameFormField(),
kidDateofBirth(),
submitButton(),
],
),
),
],
)));
}
Widget submitButton() {
return ElevatedButton(
child: Text('Create New Student Profile'),
onPressed: () {
if (formKey.currentState?.validate() ?? false) {
formKey.currentState?.save();
StudentClass newStudent = StudentClass(
kidFirstName: kidFirstName,
kidLastName: kidLastName,
dateOfBirth: dateOfBirth,
);
addStudent(newStudent);
formKey.currentState?.reset();
}
},
);
}
The listview builder is in its own file:
class StudentList extends StatelessWidget {
#override
Widget build(BuildContext context) {
List<StudentClass> studentList = [];
return Scaffold(
appBar: AppBar(
title: Text('Student List'),
),
body: StudentListState(
studentList: studentList,
),
);
}
}
class StudentListState extends StatefulWidget {
final List<StudentClass> studentList;
StudentListState({required this.studentList});
#override
_StudentListState createState() => _StudentListState();
}
class _StudentListState extends State<StudentListState> {
void addStudent(StudentClass student) {
setState(() {
widget.studentList.add(student);
});
}
#override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.all(20.0),
child: ListView.builder(
itemCount: widget.studentList.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(widget.studentList[index].kidFirstName),
subtitle: Text(widget.studentList[index].kidLastName),
trailing: Text(widget.studentList[index].dateOfBirth.toString()),
);
},
));
}
}
I am pretty stuck on figuring out how to pass the information over to the list to populate. I have gotten it to build with no errors but somehow I know I am not passing it correctly. I know I might have an extra list in here.

Answer 1

You are updating the studentList of the AddStudentScreen widget. And in the ListView you are rendering the studentList from StudentList widget which is a different variable and is always empty.
Also, you are initialising studentList inside the build function which means that on every setState() studentList will be initialised to an empty list.
Seems like you want to use the same data in multiple widgets. In such cases consider using a state manager.
For you scenario, I'd recommend you use stream_mixin.
Example:
Create student service using StoreService from stream_mixin package.
class StudentModel extends BaseModel { // NOTICE THIS
String kidFirstName;
String kidLastName;
DateTime dateOfBirth;
int totalAttedance = 0;
int attedanceAtRank = 0;
StudentModel({
required this.kidFirstName,
required this.kidLastName,
required this.dateOfBirth,
required String id,
}) : super(id: id);
}
class StudentService extends StoreService<StudentModel> { // NOTICE THIS
StudentService._();
static StudentService store = StudentService._(); // Just creating a singleton for StudentService.
}
To add student data in the store (note, this can be done anywhere in the app):
const student = new StudentModel(
// add student data here
)
StudentService.store.add(student);
Render this list of students
StreamBuilder<StudentModel>(
stream: StudentService.store.onChange,
builder: (context, snapshot) {
if (snapshot.data == null) {
return Text("No student added yet.");
}
return ListView.builder(
itemCount: StudentService.store.values.length,
itemBuilder: (context, index) {
const student = StudentService.store.values[index];
return ListTile(
title: Text(student.kidFirstName),
subtitle: Text(student.kidLastName),
trailing: Text(student.dateOfBirth.toString()),
);
},
)
},
)
Now, every time you add student data using StudentService.store.add(), it will emit an event which your SteamBuilder with stream: StudentService.store.onChange is listening and will update the UI to show the updated list.
This will also eliminate the necessity of StatefulWidget. Which means you can use only StatelessWidget unless otherwise you require StatefulWidget for something else.