Data is not being updated in the data list widget after edit is done from the edit widget

Question

This is my data view widget and my edit data widget.

class DataListPage extends StatefulWidget {
  const DataListPage({super.key});

  @override
  State<DataListPage> createState() => _DataListPageState();
}

class _DataListPageState extends State<DataListPage> {
  @override
  void initState() {
    super.initState();
    context.read<DataCubit>().fetchData(NoParams());
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Parent(
        child: Center(
          child: SingleChildScrollView(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                BlocBuilder<DataCubit, DataState>(
                  builder: (_, state) {
                    return state.when(
                      loading: () => Column(
                        children: [
                          Skeleton(
                            height: context.height * .18,
                            width: context.width,
                          ),
                          const SpacerV(),
                        ],
                      ),
                      success: (data) => Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Column(
                          children: [
                            DataCard(
                              value: data.fetchedValue
                              onPressed: () {
                                context.read<MainCubit>().updateIndex(8);
                                context.pushNamed(
                                  Routes.ediData.name,
                                );
                              }
                            )
                          ],
                        ),
                      ),
                      failure: (message) => const ErrorOccured(),
                      empty: () => Skeleton(
                        height: 15,
                        width: context.width,
                      ),
                    );
                  },
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class EditDataPage extends StatefulWidget {
  const EditDataPage({super.key, required this.dataValues});

  @override
  State<EditDataPage> createState() => _EditDataPageState();
}

class _EditDataPageState extends State<EditDataPage> {
  int _editData = 0;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 20),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                DecimalNumberPicker(
                  minValue: 80,
                  maxValue: 120,
                  value: _editData,
                  decimalPlaces: 2,
                  onChanged: (value) {
                    setState(() {
                      _editData = value;
                    });
                  },
                ),
              ],
            ),
          Button(
           title:"Update"
            onPressed: () {
                  context.read<EditDataCubit>().addRecords(
                        Params(
                          data: _editData.toString(),
                        ),
                      );
              }
              context.pushReplacementNamed(Routes.dataList.name)
          ),
        ],
      ),
    );
  }
}

The fetchData method in the DataCubit fetches the data from the API, but after edit operation , the widget displays only the previous data.

But data gets updated when we navigate from another screen to this data screen.

My implementation idea is to fetch data every time the screen is displayed. So how can i implement this or is there any other method that works?

Answer 1

I Think the problem here is that you are calling pushReplacementNamed and GoRouter thinks the previous screen is already in the stack then it does not push another instance, then the DataList page does not load again therefore data fetching does not happen in the init state. There are 2 approaches you could take here:

1. Re-fetch the data after adding it, which is changing the code in addRecords function of your cubit, to fetch the data again when it is added. Like so:

void addRecords(newRecords) {
  \\ await api.addData(newRecords);
  \\ ... calling the add data API

  fetchData();
}

2. Add the data to the list in your state manually after the fetch, so you don't make the server busy with another additional request. Here, you could do something like this:

void addRecords(newRecords) {
  \\ await api.addData(newRecords);
  \\ ... calling the add data API

  final temp = [...state.data];
  temp.addAll(newRecords);
  emit(state.copyWith(data: temp));
}