Subtree override and Navigator.push

[zhxst]

🎉🎉🎉Happy new year everyone 🎉🎉🎉

I have some use case with subtree override.
For example I have a layerProvider.
Override it for LayerPage.
Navigator.push AnotherLayerPage, and of course the provider been override not accessible.
And I found ProviderScope(parent:) is deprecated and seems not work.
So is there any way to workaround it? (Sample code below)

The real use case, is like I have a todoListProvider, which read/watch a repositroyProvider.
So I can sometimes access remote Todo list, sometimes with local storage, not at the same.
The RemoteRepository and LocalRepository share the same BaseRepository interface.
The subtree override is my best try for now, because in that case I only have one single TodoListNotifier for both use case.

Another option seems use family, but ref.watch(todoListProvider(someRepositroy)) doesn't feel right, does it need another layer of provider to cover the injection? I don't know🤔.

Sample Code:

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

final layerProvider = StateProvider<int>((ref) => 0);

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return ProviderScope(
      child: MaterialApp(
        title: 'Flutter Demo',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          colorSchemeSeed: Colors.blue,
        ),
        home: ProviderScope(
          overrides:[
            layerProvider.overrideWith((ref) => 1),
          ],
          child: const LayerPage(),
        ),
      ),
    );
  }
}

class LayerPage extends ConsumerStatefulWidget {
  const LayerPage({
    super.key,
  });

  @override
  ConsumerState<LayerPage> createState() => _LayerPageState();
}

class _LayerPageState extends ConsumerState<LayerPage> {
  @override
  Widget build(BuildContext context) {
    final layer = ref.watch(layerProvider);
    return Scaffold(
      appBar: AppBar(
        title: Text('Layer: $layer'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Layer: $layer'),
            const SizedBox(),
            ElevatedButton(
              onPressed: () {
                Navigator.of(context).push(MaterialPageRoute(
                    builder: (context) => AnotherLayerPage()));
              },
              child: Text('Push'),
            ),
          ],
        ),
      ),
    );
  }
}

class AnotherLayerPage extends ConsumerStatefulWidget {
  const AnotherLayerPage({
    super.key,
  });

  @override
  ConsumerState<AnotherLayerPage> createState() => _AnotherLayerPageState();
}

class _AnotherLayerPageState extends ConsumerState<AnotherLayerPage> {
  @override
  Widget build(BuildContext context) {
    final layer = ref.watch(layerProvider);
    return Scaffold(
      appBar: AppBar(
        title: Text('Layer: $layer'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [Text('Layer: $layer'), const SizedBox()],
        ),
      ),
    );
  }
}