Should you add autoDispose on the supposedly overriden provider?

[hendy3617]

Hello there, I'm a little bit confused on how ScopedProvider work... can someone help me

Let's say I have an app that could add and view counter, and there are two screens, HomeScreen and ViewCounterScreen, in HomeScreen I can create and remove and view the list of the counter, while in the ViewCounterScreen I can modify the count of the counter.

home.dart

final counterListProvider =
    StateNotifierProvider<CounterListNotifier, List<Counter>>((ref) {
  return CounterListNotifier();
});

class Home extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        floatingActionButton: _fabThatCanAddCounter,
        body: _HomeBody(),
      ),
    );
  }
}

class _HomeBody extends ConsumerWidget{
  @override
  Widget build(BuildContext context, WidgetRef ref){
    final counters = ref.watch(counterListProvider);

    final children = List.generate(counters.length, (idx) => ListTile...);
    return ListView(children: children);
  }
}

This is how the model looks like:

counter.dart

@immutable
class Counter {
  const Counter({
    required this.count,
    required this.id,
  });

  final int id;
  final int count;
  }

class CounterListNotifier extends StateNotifier<List<Counter>> {
  CounterListNotifier() : super([]);

  void add() {
    ...
  }

  void remove(Counter counter) {
    ...
  }
}

And when I press one of the counter tiles it will push to a new page and override some provider value in there

Navigator.of(context).push(
  MaterialPageRoute(builder: (_) => ProviderScope(
    overrides: [
        viewIdProvider.overrideWithValue(counter.id),
      ],
    child: const ViewCounterScreen())
  ),
);

And this is how ViewCounterScreen looks like:

view_counter.dart

final viewIdProvider = Provider<int>((ref) => throw UnimplementedError());

final _viewCounterProvider = Provider.autoDispose.family((ref, id) {
  return ref
      .watch(counterListProvider)
      .firstWhere((element) => element.id == id);
});

class ViewCounterScreen extends ConsumerWidget{
 @override
  Widget build(BuildContext context, WidgetRef ref){
    final id = ref.watch(viewIdProvider);
    final counter = ref.watch(_viewCounterProvider(id));

    return ...
  } 
}

I think I made the correct choice there about this line:

final _viewCounterProvider = Provider.autoDispose.family((ref, id) {
  return ref
      .watch(counterListProvider)
      .firstWhere((element) => element.id == id);
});

as to my understanding, the .family modifier will create a unique provider each time we pass a new value to it, therefore if I have 1000 counters and view each of them meaning I will have 1000 providers in the memory if I don't use the .autoDispose modifier right? (correct me if I wrong please).

So what about this line:

final viewIdProvider = Provider<int>((ref) => throw UnimplementedError());

Will this cause it to make another provider with the overriden value? or will it uses the same provider only provide different value?

thank you.

[rrousselGit]

as to my understanding, the .family modifier will create a unique provider each time we pass a new value to it, therefore if I have 1000 counters and view each of them meaning I will have 1000 providers in the memory if I don't use the .autoDispose modifier right? (correct me if I wrong please).

This is correct. Hence why the family documentation recommends combining it with autoDispose

So what about this line:

final viewIdProvider = Provider<int>((ref) => throw UnimplementedError());

You'll get one provider state per override

[hendy3617]

So what about this line:
final viewIdProvider = Provider<int>((ref) => throw UnimplementedError());

You'll get one provider state per override

Ah I see, meaning that its state will be disposed once the page popped off right? since it's scooped within another ProviderScope