I have a ListView in my first screen that displays a list of addresses. When the user navigates to the second screen to add or edit an address and then comes back to the first screen, I want the ListView to refresh and display the updated data.

I am using Bloc for state management, and after navigating back from the second screen, I am calling an event to fetch the updated data. However, the ListView is not refreshing, even though the state is being updated correctly.

Here's my navigate() function in the first screen:

Future<void> navigate() async {
  final result = await Navigator.pushNamed(
          context,
          AppRoutes.newaddress,
          arguments: {},
);
    
      if (result == 'success') {
        // Triggering a refresh
        context.read<DashboardBloc>().add(FetchDashboard());
        Utils.showToast(context, "Address list refreshed.");
      }
    }

And here's the BlocBuilder implementation for the ListView:

BlocBuilder<DashboardBloc, DashboardState>(
      builder: (context, state) {
        if (state is DashboardLoading) {
          return Center(child: CircularProgressIndicator());
        } else if (state is DashboardLoaded) {
      final addressList = state.dashboardResponse.data.user.billingAddress.data;
    
          return ListView.builder(
            key: ValueKey(state.dashboardResponse),
            padding: EdgeInsets.zero,
            shrinkWrap: true,
            physics: NeverScrollableScrollPhysics(),
            itemCount: addressList.length,
            itemBuilder: (context, index) {
              final address = addressList[index];
              return ListTile(
                title: Text(address.firstName),
                subtitle: Text(address.city.name),
              );
            },
          );
        } else if (state is AddressError) {
          return Center(child: Text("No data available"));
        } else {
          return Container();
        }
      },
    )

My Second screen Code

if (response['status'] == 'SUCCESS') {
      Utils.hideLoadingIndicator(context);
      Utils.showToast(context, response["message"]); // Show success message
      //Future.delayed(Duration(seconds: 1));
      Navigator.pop(context, 'success');
    } else {
      Utils.hideLoadingIndicator(context);
      Utils.showToast(context, response["message"]); // Show error message
    }

The FetchDashboard event is correctly called, and the state is updated as expected, but the ListView does not refresh to reflect the new data.

What could be causing this issue, and how can I ensure that the ListView refreshes with the updated data after returning from the second screen?

I have a ListView in my first screen that displays a list of addresses. When the user navigates to the second screen to add or edit an address and then comes back to the first screen, I want the ListView to refresh and display the updated data.

I am using Bloc for state management, and after navigating back from the second screen, I am calling an event to fetch the updated data. However, the ListView is not refreshing, even though the state is being updated correctly.

Here's my navigate() function in the first screen:

Future<void> navigate() async {
  final result = await Navigator.pushNamed(
          context,
          AppRoutes.newaddress,
          arguments: {},
);
    
      if (result == 'success') {
        // Triggering a refresh
        context.read<DashboardBloc>().add(FetchDashboard());
        Utils.showToast(context, "Address list refreshed.");
      }
    }

And here's the BlocBuilder implementation for the ListView:

BlocBuilder<DashboardBloc, DashboardState>(
      builder: (context, state) {
        if (state is DashboardLoading) {
          return Center(child: CircularProgressIndicator());
        } else if (state is DashboardLoaded) {
      final addressList = state.dashboardResponse.data.user.billingAddress.data;
    
          return ListView.builder(
            key: ValueKey(state.dashboardResponse),
            padding: EdgeInsets.zero,
            shrinkWrap: true,
            physics: NeverScrollableScrollPhysics(),
            itemCount: addressList.length,
            itemBuilder: (context, index) {
              final address = addressList[index];
              return ListTile(
                title: Text(address.firstName),
                subtitle: Text(address.city.name),
              );
            },
          );
        } else if (state is AddressError) {
          return Center(child: Text("No data available"));
        } else {
          return Container();
        }
      },
    )

My Second screen Code

if (response['status'] == 'SUCCESS') {
      Utils.hideLoadingIndicator(context);
      Utils.showToast(context, response["message"]); // Show success message
      //Future.delayed(Duration(seconds: 1));
      Navigator.pop(context, 'success');
    } else {
      Utils.hideLoadingIndicator(context);
      Utils.showToast(context, response["message"]); // Show error message
    }

The FetchDashboard event is correctly called, and the state is updated as expected, but the ListView does not refresh to reflect the new data.

What could be causing this issue, and how can I ensure that the ListView refreshes with the updated data after returning from the second screen?

• flutter
• flutter-bloc

1 Answer 1

you could rebuild the the DashboradBloc after you return success on your second screen like this:

     if (response['status'] == 'SUCCESS') {
        Utils.hideLoadingIndicator(context);
        Utils.showToast(context, response["message"]); // Show success message
        //rebuild here
        BlocProvider.of<DashboardBloc>(context).add(FetchDashboard()); //<--this code
        Navigator.pop(context, 'success');
      } else {
        Utils.hideLoadingIndicator(context);
        Utils.showToast(context, response["message"]); // Show error message
      }