How to rebuild a specific widget in a list?

[Dabbit-Chan]

After I tap one widget, all 10 widgets rebuild. I hope only the widget I tap will rebuild, but I don't know how to do that, any suggestions?

/// rebuild_test_page.dart

import '../rebuild_item_provider.dart';
import '../rebuild_provider.dart';

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

  @override
  State<RebuildTestPage> createState() => _RebuildTestPageState();
}

class _RebuildTestPageState extends State<RebuildTestPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Consumer(
        builder: (context, ref, child) {
          var dataList = ref.watch(rebuildProvider);
          return GridView.builder(
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              mainAxisSpacing: 20,
              crossAxisSpacing: 20,
              childAspectRatio: 1,
              crossAxisCount: 2,
            ),
            itemBuilder: (context, index) {
              return Consumer(
                builder: (context, ref, child) {
                  final entity = ref.watch(rebuildItemProvider(index));
                  print('rebuild -- $index -- ${entity.selected}');
                  return InkWell(
                    onTap: () {
                      ref.read(rebuildItemProvider(index).notifier).changeState(
                        index,
                        !entity.selected,
                      );
                    },
                    child: Container(
                      color: entity.selected ? Colors.red : Colors.blue,
                      alignment: Alignment.center,
                      child: Text(
                        '${entity.index}',
                        style: const TextStyle(
                          color: Colors.white,
                        ),
                      ),
                    ),
                  );
                },
              );
            },
            itemCount: dataList.length,
          );
        },
      ),
    );
  }
}

/// rebuild_provider.dart

import 'package:riverpod_annotation/riverpod_annotation.dart';

import 'rebuild_item_provider.dart';

part 'rebuild_provider.g.dart';

@riverpod
List<RebuildEntity> rebuild(RebuildRef ref) {
  return List.generate(
    10,
    (index) => ref.watch(rebuildItemProvider(index)),
  );
}

/// rebuild_item_provider

import 'package:riverpod_annotation/riverpod_annotation.dart';

part 'rebuild_item_provider.g.dart';

@riverpod
class RebuildItem extends _$RebuildItem {
  @override
  RebuildEntity build(int index) => RebuildEntity(
        index: index,
        selected: false,
      );

  void changeState(int index, bool value) {
    final entity = RebuildEntity(
      index: index,
      selected: value,
    );
    state = entity;
  }
}

class RebuildEntity {
  int index;
  bool selected;

  RebuildEntity({
    required this.index,
    required this.selected,
  });
}

[gdurandrexel]

The rebuild provider watches all the rebuild item providers, so whenever one of these changes, the rebuild provider rebuilds and the whole GridView rebuilds because it watches the rebuild provider.

If the number of items is fixed, you don't need to watch them, just create them :

return List.generate(
    10,
    (index) => RebuildEntity(
        index: index,
        selected: false,
      ),
  );

Or just return the number of items, since you do not use the content of dataList but only its length.

You may also just read the items, but then the rebuild provider will not rebuild when an item is updated, which may be OK if your real use case is actually the code you posted and the only consumer of the rebuild provider is the page.

[Dabbit-Chan]

Have you noticed that I need to change the state of the widget? And that's why I need to create a ref.watch list. Also, I don't want to rebuild the whole list because the list will be more complex in the real use case, I just want it to rebuild a single widget.

[gdurandrexel]

If you watch rebuildItemProvider in rebuild provider then the whole list will rebuild. That's a fact. So you must reorganize your logic and not watch them in here. Actually the rebuild provider as it is shown here is pretty useless: it just provides the list length.

You obviously must watch rebuildItemProvider in the Consumer to rebuild the widget when the state changes. But you do not need to "create" the rebuildItemProviders in rebuild provider before using them: they will be "instanciated" on demand when you watch them in Consumer.

[Dabbit-Chan]

The rebuildProvider is a simple case. In real life it would be a network request.

@riverpod
Future<List<RebuildEntity>> rebuild(RebuildRef ref) async {
  await Future.delayed(const Duration(seconds: 1)); // network request
  return List.generate(
    10,
    (index) => ref.watch(rebuildItemProvider(index)),
  );
}

What is "instanciated" on demand? Any example of it?

[gdurandrexel]

What you probably should do is reverse the dependency:

@riverpod
Future<List<RebuildEntity>> rebuild(RebuildRef ref) async {
  final serverEntities = await Future.delayed(const Duration(seconds: 1)); // network request

  return serverEntities;
}

@riverpod
class RebuildItem extends _$RebuildItem {
  @override
  FutureOr<RebuildEntity> build(int index) async {
    final serverEntities = await ref.watch(rebuildProvider.future);

    return RebuildEntity(serverEntities[index]);
  };

  void changeState(int index, bool value) {
    final entity = RebuildEntity(
      index: index,
      selected: value,
    ); 
    // or more likely: final currentEntity = state.requireValue;
    // and then build the new entity based on the current one

    state = AsyncData(entity);
  }
}

What is "instanciated" on demand?

You don't need to watch the rebuildItemProvider in the rebuild provider to be able to use them in your widget. Watching in the Consumer is enough. But since the code you posted seems to be a very simplified version of what you really want, this point is probably moot.

[Trung15010802]

Check it:

https://itnext.io/flutter-riverpod-simple-example-and-guide-f183de192445