Screen not redrawing - flutter

Question

In the application, when you click on the "Add Group" button, a page with a text field opens, the user enters the name of the group and it is added to the database and drawn on the screen.
The problem is that only the name of the first group is displayed on the screen, and when you enter the name of the group a second time, it does not appear on the screen. But when you click on Hot Reload, all added groups are displayed. How to make the screen refresh every time a group is added and they are displayed as a list?
In my code, I access the bloc and pass the entered group name to the event:
void _saveGroup() {
final isValid = _formKey.currentState!.validate();
if (isValid) {
BlocProvider.of<NewGroupBloc>(context)
.add(AddGroupEvent(_groupController.text.trim()));
Navigator.pop(context);
}
}
Further, this name is converted into a database module and saved. I then add the model from the database to the list and output it:
lass GroupRepository extends BaseRepository<GroupDao, GroupDBData, Group> {
#override
GroupDao dao = injector<AppDb>().groupDao;
#override
BaseConverter<GroupDBData, Group> converter = GroupDbConverter();
final List<Group> groups = [];
Future<Group> convertGroup(Group group) async {
final convert = converter.outToIn(group);
final groupId = await dao.insert(convert);
Group groupWithID = Group(
id: groupId,
groupName: group.groupName,
);
return groupWithID;
}
Future<List<Group>> getList(Group group) async {
final groupWithID = await convertGroup(group);
groups.add(groupWithID);
return groups;
}
}
class GroupsPage extends StatefulWidget {
const GroupsPage({Key? key}) : super(key: key);
#override
State<GroupsPage> createState() => _GroupsPageState();
}
class _GroupsPageState extends State<GroupsPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Groups'),
),
body: BlocBuilder<NewGroupBloc, NewGroupState>(
builder: (context, state) {
if (state is AddGroupState) {
return ListView.builder(
itemCount: state.groups.length,
itemBuilder: (context, index) {
final group = state.groups[index];
return ListTile(
title: Text(group.groupName),
);
},
);
}
return Container();
},
),
floatingActionButton: Padding(
child: FloatingActionButton.extended(
onPressed: () => _onAddGroup(context),
icon: const Icon(Icons.add),
label: const Text('Add Group'),
),
),
);
}
My bloc:
//bloc
class NewGroupBloc extends Bloc<NewGroupEvent, NewGroupState> {
NewGroupBloc() : super(const NewGroupInitial()) {
on<AddGroupEvent>(
(event, emit) async => emit(
await _addGroup(event),
),
);
}
final _provider = ProviderInjector.instance.addGroup;
Future<NewGroupState> _addGroup(AddGroupEvent event) async => _provider
.addGroup(
Group(groupName: event.groupName),
)
.then(AddGroupState.new);
}
//state
#immutable
abstract class NewGroupState extends Equatable {
const NewGroupState();
#override
List<Object?> get props => [];
}
class NewGroupInitial extends NewGroupState {
const NewGroupInitial();
}
class AddGroupState extends NewGroupState {
const AddGroupState(this.groups);
final List<Group> groups;
#override
List<Object?> get props => [groups];
}
//event
#immutable
abstract class NewGroupEvent extends Equatable {
#override
List<Object?> get props => [];
}
class AddGroupEvent extends NewGroupEvent {
AddGroupEvent(this.groupName);
final String groupName;
#override
List<Object?> get props => [groupName];
}
_onAddGroup:
void _onAddGroup(BuildContext context) {
Navigator.of(context, rootNavigator: true).push(
CupertinoPageRoute(
builder: (context) => const AddGroupPage(),
),
);
}

Answer 1

class AddGroupState extends NewGroupState {
const AddGroupState(this.groups);
final List<Group> groups;
#override
List<Object?> get props => [this.groups];
}
Try this