颤振:如何倾听GoRouter在Riverpod提供商中的路由/位置变化？

Question

我正在用go_router和riverpod开发一个颤振应用程序，分别用于导航和状态管理。这个应用程序有一个小部件，可以显示一个实时的摄像头馈送，当其他页面堆放在上面时，我想“关闭它”并释放相机。

这里有一个GoRouter代码的示例，没有这样的逻辑。

GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => CameraWidget(),
      routes: [
        GoRoute(
          path: 'page1',
          builder: (context, state) => Page1Screen(),
        ),
      ],
    ),
  ],
)

我的第一次尝试是在GoRoute构建器中添加一些逻辑：

GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) {
        if (state.location == "/") {
          return CameraWidget();
        }
        return Center(child: Text("Camera not visible");
      },
      routes: [
        GoRoute(
          path: 'page1',
          builder: (context, state) => Page1Screen(),
        ),
      ],
    ),
  ],
)

但是这个显然不工作，因为当从"/“转到"/page1”时，构建器不会再次被调用。

然后，我想到了使用一个河边吊舱StateProvider来持有相机的“开/关”状态，由GoRouter操纵。这就是我试过的：

GoRouter(
  routes: [
    GoRoute(
      path: '/',
      redirect: (context, state) {
        final cameraStateNotifier = ref.read(cameraStateNotifierProvider.notifier);
        if (state.location == "/") {
          cameraStateNotifier.state = true;
        } else {
          cameraStateNotifier.state = false;
        }
        return null;
      },
      builder: (context, state) => CameraWidget(),
      routes: [
        GoRoute(
          path: 'page1',
          builder: (context, state) => Page1Screen(),
        ),
      ],
    ),
  ],
)

但是，也不工作，因为显然redirect在重新构建小部件树时被调用，并且在此过程中禁止更改提供程序状态。

以前有没有人遇到过同样的问题？我怎样才能让提供者监听GoRouter的位置更改？

Answer 1

在对我的先前的回答进行了进一步的测试之后，我发现我使用go_router的方法并不适用于Navigator.pop()调用或按后退按钮。在深入研究go_路由器的代码之后，我认为切换到罗德马斯特包会更容易，它似乎与Riverpod集成得更好。到目前为止，我对这一变化感到非常满意。

编辑：改进了现在使用Routemaster的可观察API的方法。

下面是代码：

import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:routemaster/routemaster.dart';

class RouteObserver extends RoutemasterObserver {
  final ProviderRef _ref;
  MyObserver(this._ref);

  @override
  void didChangeRoute(RouteData routeData, Page page) {
    _ref.invalidate(locationProvider);
  }
}

final routerProvider = Provider((ref) => RoutemasterDelegate(
  routesBuilder: (context) => RouteMap(routes: {
    '/': (_) => MaterialPage(child: CameraWidget()),
    '/page1': (_) => MaterialPage(child: Page1Screen()),
  }),
  observers: [RouteObserver(ref)],
));

final locationProvider = Provider((ref) => ref.read(routerProvider).currentConfiguration?.fullPath);

Answer 2

编辑：这种方法似乎不适用于Navigator.pop()调用和按下后退按钮。查看当前接受的答案，以获得更好的解决方案。

我想我找到了一个很好的方法。我首先为GoRouter定义了一个提供程序，然后定义了另一个用于侦听router.routeInformationProvider的提供者。这是一个ChangeNotifier，每次路由信息更改时都会通知它。最后，我们可以通过特定位置的第三个提供者来收听这一点。

我认为这是一个很好的解决办法，尽管需要从src/information_provider.dart包中导入GoRouter，而这并不意味着。

import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import 'package:go_router/src/information_provider.dart';

final routerProvider = Provider<GoRouter>((ref) => GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => CameraWidget(),
      routes: [
        GoRoute(
          path: 'page1',
          builder: (context, state) => Page1Screen(),
        ),
      ],
    ),
  ],
));

final routeInformationProvider = ChangeNotifierProvider<GoRouteInformationProvider>((ref) {
  final router = ref.watch(routerProvider);
  return router.routeInformationProvider;
});

final currentRouteProvider = Provider((ref) {
  return ref.watch(routeInformationProvider).value.location;
});