Update only the New Selected and the Previous Selected widget on a list view

[b4ltz]

Basically I have a ListView with data and I have a selectedDataProvider:

final selectedFormDataProvider = StateProvider.autoDispose<SelectedFormData?>((ref) => null);

When I clicked a widget on the ListView i want to change the color of the selected widget. but when I watch the selectedFormDataProvider, all the widget in the listview is being rebuilt.

Is there a way to rebuild only the new selected widget and the previous selected (if has previous selected)

This is my widget:

class MyWidget extends ConsumerWidget {
  const MyWidget ({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // Formatter for srp
    final formatter = ref.watch(formatterProvider);
    // Current index of the FormData
    final index = ref.watch(currentFormDataIndex);
    // Current FormData in the listView
    final data = ref.watch(currentFormData);
    // Search query
    final query = ref.watch(queryFormDataProvider);
    // The current selected FormData
    final selected = ref.watch(selectedFormDataProvider);

    return ListTile(
      selectedTileColor: Colors.blue,
      selected: selected?.data == data,
      title: Text(data.description),
    );
  }
}

[TimWhiting]

Use .select

class MyWidget extends ConsumerWidget {
  const MyWidget ({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // Formatter for srp
    final formatter = ref.watch(formatterProvider);
    // Current index of the FormData
    final index = ref.watch(currentFormDataIndex);
    // Current FormData in the listView
    final data = ref.watch(currentFormData);
    // Search query
    final query = ref.watch(queryFormDataProvider);
    // Whether this is the currently selected formdata
    final isSelected = ref.watch(selectedFormDataProvider.select((value) => value?.data == data));

    return ListTile(
      selectedTileColor: Colors.blue,
      selected: isSelected,
      title: Text(data.description),
    );
  }
}

[b4ltz]

Hi @TimWhiting thanks for suggestion but when i tried adding a print the all widget is still rebuilt:

  final isSelected = ref
      .watch(selectedFormDataProvider.select((value) => value?.data == data));
  print('rebuilt: ${data.description}');

[TimWhiting]

Then likely one of your other providers are rebuilding. It doesn't look like you are using the value of those other providers, can you just remove them? Alternatively if you are just trying to keep them alive (and have the autodispose modifier on them), then use ref.listen rather than watching them to indicate that you don't want the widget to rebuild when they notify listeners.

Also have you checked to see if one of the parent widget reorders or moves the widget around causing the rebuilding?

[b4ltz]

Hi @TimWhiting thanks for taking time helping me. I'm sorry i forgot to say that I am using this package group_list_view instead of the normal ListView.

When I tried to replace the GroupedListView to the normal ListView it works as expected. I think there is something that causing the itembuilder to rebuild in GroupedListView.

Maybe i'll just switch to the normal listview for now.