Bloc: The Listview inside modal is not rebuild.

Created on 9 Aug 2020  路  4Comments  路  Source: felangel/bloc

Hi,
I would like to show some data as ListView inside of a modal.
And I would like to delete items from ListView by clicking on each item.

Data is load and update from HomeBloc and by userRepository successfully ,
And HomeScreen widget receives updated items on every click of items,
But ListView itemCount and ListView itemBuilder still have the same original data.

(Modal is sliding_up package.)

Here is sample app for reproduce my problem:

https://github.com/omidraha/sample_modal

And here is console printing of outputs :

I/flutter ( 6088): HomeScreen.BlocBuilder: HomeDataIsLoading
I/flutter ( 6088): HomeBloc.mapEventToState: LoadHomeData
I/flutter ( 6088): HomeBloc.items: [1, 2, 3, 4, 5]
I/flutter ( 6088): HomeScreen.BlocBuilder: HomeDataLoaded
I/flutter ( 6088): HomeScreen.BlocBuilder: [1, 2, 3, 4, 5]
I/flutter ( 6088): ListView.itemBuilder.InkWell.onTap
I/flutter ( 6088): HomeBloc.mapEventToState: ItemClicked
I/flutter ( 6088): HomeBloc.items: [1, 2, 3, 4]
I/flutter ( 6088): HomeScreen.BlocBuilder: HomeDataLoaded
I/flutter ( 6088): HomeScreen.BlocBuilder: [1, 2, 3, 4]
I/flutter ( 6088): ListView.itemBuilder.InkWell.onTap
I/flutter ( 6088): HomeBloc.mapEventToState: ItemClicked
I/flutter ( 6088): HomeBloc.items: [1, 2, 3]
I/flutter ( 6088): HomeScreen.BlocBuilder: HomeDataLoaded
I/flutter ( 6088): HomeScreen.BlocBuilder: [1, 2, 3]
I/flutter ( 6088): ListView.itemBuilder.InkWell.onTap
I/flutter ( 6088): HomeBloc.mapEventToState: ItemClicked
I/flutter ( 6088): HomeBloc.items: [1, 2]
I/flutter ( 6088): HomeScreen.BlocBuilder: HomeDataLoaded
I/flutter ( 6088): HomeScreen.BlocBuilder: [1, 2]
I/flutter ( 6088): ListView.itemBuilder.InkWell.onTap
I/flutter ( 6088): HomeBloc.mapEventToState: ItemClicked
I/flutter ( 6088): HomeBloc.items: [1]
I/flutter ( 6088): HomeScreen.BlocBuilder: HomeDataLoaded
I/flutter ( 6088): HomeScreen.BlocBuilder: [1]
I/flutter ( 6088): ListView.itemBuilder.InkWell.onTap
I/flutter ( 6088): HomeBloc.mapEventToState: ItemClicked
I/flutter ( 6088): HomeBloc.items: []
I/flutter ( 6088): HomeScreen.BlocBuilder: HomeDataLoaded
I/flutter ( 6088): HomeScreen.BlocBuilder: []
question

Most helpful comment

Hi @omidraha 馃憢

Your list is not rebuilt because is part of your modal which is shown in a different route, so your existing BlocBuilder can't rebuild something on a different route.

You need to pass your existing bloc instance to your modal so it can rebuild your list:

showModalSlidingPanel(
    context: context,
    panel: (_) => BlocProvider<HomeBloc>.value(
      value: context.bloc<HomeBloc>(),
      child: SlidingPanel(
        // ... use another `BlocBuilder` to build your list
      ),
    ),
  );

Hope that helps 馃憤

All 4 comments

Hi @omidraha 馃憢

Your list is not rebuilt because is part of your modal which is shown in a different route, so your existing BlocBuilder can't rebuild something on a different route.

You need to pass your existing bloc instance to your modal so it can rebuild your list:

showModalSlidingPanel(
    context: context,
    panel: (_) => BlocProvider<HomeBloc>.value(
      value: context.bloc<HomeBloc>(),
      child: SlidingPanel(
        // ... use another `BlocBuilder` to build your list
      ),
    ),
  );

Hope that helps 馃憤

It's not possible to do that:

The return type 'BlocProvider<HomeBloc>' isn't a 'SlidingPanel', as required by the closure's context.

Just move the BlocProvider.value down in the widget tree right above your list.

Thanks,
Fixed by @RaviKavaiya

Was this page helpful?
0 / 5 - 0 ratings