I am adding and removing items to a list that is used to render a data table. But state Is only changing when the first element is added. but it won't rerender for the next clicks. but if i emit a state with [] and then emit the list it render properly.
Following is my Cubit
import 'package:bloc/bloc.dart';
import 'package:equatable/equatable.dart';
import 'package:my_app/data/models/activities.dart';
import 'package:my_app/data/repositories/activities_repo.dart';
part 'assign_activity_state.dart';
class AssignedActivitiesState extends Equatable{
final List<Activities> activities;
AssignedActivitiesState({required this.activities});
AssignedActivitiesState copyWith({
List<Activities>? items,
}) {
return AssignedActivitiesState(
activities: items?? this.activities,
);
}
@override
// TODO: implement props
List<Object?> get props => [activities];
}
class AssignActivityCubit extends Cubit<AssignedActivitiesState> {
AssignActivityCubit() : super(AssignedActivitiesState(activities: []));
List<Activities> assigned_activities = [];
loadInitialActivity(String uuid) async{
try{ assigned_activities = await ActivitiesRepo().getAssignedActivities(childId: uuid);
print(assigned_activities);
emit(state.copyWith(items: assigned_activities));
}
catch(_){
}
}
addAssignedActivity(Activities activity) async{
assigned_activities.add(activity);
emit(state.copyWith(items: assigned_activities));
}
removeAssignedActivity(Activities activity) async{
assigned_activities.removeWhere((item) => item.id == activity.id);
emit(state.copyWith(items: assigned_activities));
}
}
I have Created a UI Layer With
BlocBuilder<AssignActivityCubit, AssignedActivitiesState>(
builder: (context, state) {
return ListView(
padding: const EdgeInsets.symmetric(vertical: 10.0),
shrinkWrap: true,
children: [
Heading(
text: "Currently Assigned Activities",
),
Row(
children: [
ElevatedActionButtonWeb(
onTap: () {
print("ss");
},
label: "Remove from Assigned Activities",
)
],
mainAxisAlignment: MainAxisAlignment.end,
mainAxisSize: MainAxisSize.max,
),
ActivityTable(
activities: state.activities,positionedAbove: true,
)
],
);
},
)
And Activity Table Renders Like following
Widget build(BuildContext context) {
List<DataRow> activityRows = [];
print(widget.activities.length);
widget.activities.forEach((element) {
activityRows.add(DataRow(cells: [
DataCell(widget.positionedAbove
? IconButton(icon: Icon(Icons.arrow_downward), onPressed: () {
context.read<AssignActivityCubit>().removeAssignedActivity(element);
})
: IconButton(icon: Icon(Icons.arrow_upward), onPressed: () {
context.read<AssignActivityCubit>().addAssignedActivity(element);
})),
DataCell(Text(element.title!)),
DataCell(Text(element.ageGroupStart!)),
DataCell(Text(element.primarySkill!.skill!)),
DataCell(Text(element.additionalSkills!
.map((element) => element.skill)
.toList()
.join(","))),
]));
});
print(activityRows.length);
return DataTable(columns: [
DataColumn(
label: Text("Select",
style: TextStyle(
fontStyle: FontStyle.italic, fontWeight: FontWeight.bold))),
DataColumn(
label: Text("Activity Name",
style: TextStyle(
fontStyle: FontStyle.italic, fontWeight: FontWeight.bold))),
DataColumn(
label: Text("Age Group",
style: TextStyle(
fontStyle: FontStyle.italic, fontWeight: FontWeight.bold))),
DataColumn(
label: Text("Primary Skill",
style: TextStyle(
fontStyle: FontStyle.italic, fontWeight: FontWeight.bold))),
DataColumn(
label: Text("Sec Skill",
style: TextStyle(
fontStyle: FontStyle.italic, fontWeight: FontWeight.bold))),
], rows: activityRows);
}