如何在 Flutter 中使用 auto_route 和 modal_bottom_sheet 进行深度链接？

Question

我收到一个错误，导航器的覆盖层为空。我不明白我能做些什么。 我的深层链接如下所示：

~/Library/Android/sdk/platform-tools/adb shell am start -a android.intent.action.VIEW \
    -c android.intent.category.BROWSABLE \
    -d "https://my.app.com/news/xx-xx-xx" \
    com.app.my

我的路由器代码深受https://github.com/Milad-Akarie/auto_route_library/issues/675:

的启发

...
AutoRoute(
        path: 'news',
        page: EmptyRouterPage,
        name: 'NewsTab',
        children: [
          AutoRoute(
            page: NewsCategoryScreen,
            name: 'NewsCategoryRoute',
            path: 'category/:id',
          ),
          CustomRoute(
            path: ':newsSlug',
            page: NewsDetailScreen,
            name: 'NewsDetailOverlay',
            fullscreenDialog: false,
            barrierDismissible: true,
            customRouteBuilder: modalSheetBuilder,
            maintainState: true,
            usesPathAsKey: true,
          ),
          AutoRoute(
            page: NewsListScreen,
            path: '',
            name: 'NewsList',
          ),
          RedirectRoute(path: '', redirectTo: '/')
        ],
      ),
...
Route<T> modalSheetBuilder<T>(
    BuildContext context, Widget child, CustomPage<T> page) {

  return ModalBottomSheetRoute(
    settings: page,
    builder: (context) => child,
    expanded: false,
  );
}

我的错误是：

#1      TransitionRoute.install
package:flutter/…/widgets/routes.dart:224
#2      ModalRoute.install
package:flutter/…/widgets/routes.dart:1180
#3      _RouteEntry.handleAdd
package:flutter/…/widgets/navigator.dart:2822
#4      NavigatorState._flushHistoryUpdates
package:flutter/…/widgets/navigator.dart:3843
#5      NavigatorState.restoreState
package:flutter/…/widgets/navigator.dart:3324
#6      RestorationMixin._doRestore
package:flutter/…/widgets/restoration.dart:872
#7      RestorationMixin.didChangeDependencies
package:flutter/…/widgets/restoration.dart:858
#8      NavigatorState.didChangeDependencies
package:flutter/…/widgets/navigator.dart:3342
#9      StatefulElement._firstBuild
package:flutter/…/widgets/framework.dart:5036
#10     ComponentElement.mount
package:flutter/…/widgets/framework.dart:4853
#11     Element.inflateWidget
package:flutter/…/widgets/framework.dart:3863
#12     Element.updateChild
package:flutter/…/widgets/framework.dart:3586
#13     ComponentElement.performRebuild
package:flutter/…/widgets/framework.dart:4904
#14     StatefulElement.performRebuild
package:flutter/…/widgets/framework.dart:5050
#15     Element.rebuild
package:flutter/…/widgets/framework.dart:4604
#16     StatefulElement.update
package:flutter/…/widgets/framework.dart:5082
#17     Element.updateChild
package:flutter/…/widgets/framework.dart:3570
#18     ComponentElement.performRebuild
package:flutter/…/widgets/framework.dart:4904
#19     StatefulElement.performRebuild
package:flutter/…/widgets/framework.dart:5050
#20     Element.rebuild
package:flutter/…/widgets/framework.dart:4604
#21     StatefulElement.update
package:flutter/…/widgets/framework.dart:5082
#22     Element.updateChild
package:flutter/…/widgets/framework.dart:3570
#23     ComponentElement.performRebuild
package:flutter/…/widgets/framework.dart:4904
#24     Element.rebuild
package:flutter/…/widgets/framework.dart:4604
#25     ProxyElement.update
package:flutter/…/widgets/framework.dart:5228
#26     Element.updateChild
package:flutter/…/widgets/framework.dart:3570
#27     ComponentElement.performRebuild
package:flutter/…/widgets/framework.dart:4904
#28     Element.rebuild
package:flutter/…/widgets/framework.dart:4604
#29     ProxyElement.update
package:flutter/…/widgets/framework.dart:5228
#30     Element.updateChild
package:flutter/…/widgets/framework.dart:3570
#31     ComponentElement.performRebuild
package:flutter/…/widgets/framework.dart:4904
#32     StatefulElement.performRebuild
package:flutter/…/widgets/framework.dart:5050
#33     Element.rebuild
package:flutter/…/widgets/framework.dart:4604
#34     BuildOwner.buildScope
package:flutter/…/widgets/framework.dart:2667
#35     WidgetsBinding.drawFrame
package:flutter/…/widgets/binding.dart:882
#36     RendererBinding._handlePersistentFrameCallback
package:flutter/…/rendering/binding.dart:378
#37     SchedulerBinding._invokeFrameCallback
package:flutter/…/scheduler/binding.dart:1175
#38     SchedulerBinding.handleDrawFrame
package:flutter/…/scheduler/binding.dart:1104
#39     SchedulerBinding._handleDrawFrame
package:flutter/…/scheduler/binding.dart:1015

调试器登陆：

@override
  AnimationController createAnimationController() {
    assert(_animationController == null);
    _animationController = ModalBottomSheet.createAnimationController(
      navigator!.overlay!,
      duration: transitionDuration,
    );
    return _animationController!;
  }

在

/Users/$USER/development/flutter/.pub-cache/hosted/pub.dartlang.org/modal_bottom_sheet-2.1.2/lib/src/bottom_sheet_route.dart

中，覆盖层为空。

当我导航到

NewsListScreen

时，深层链接工作正常。 其他链接线

https://my.app.com/news

也工作正常。

如何准备有故障的导航器以覆盖动画？

我正在使用：

• 自动路由：^5.0.2
• modal_bottom_sheet：^2.1.2

我尝试使用导航观察器进行调试，如 auto_route 文档中所示，但没有明显的解决方案。

Answer 1

我通过添加重定向路由遇到了同样的问题，它已修复

这是我的路线课程

AutoRoute(
          page: HomeTabRoute.page,
          path: '/home',
          children: [
            AutoRoute(
              page: HomeRoute.page,
              path: HomeScreen.routeName,
            ),
            RedirectRoute(
              path: 'art',
              redirectTo: 'art/:id',
            ),
            AutoRoute(
              page: ArtDetailsRoute.page,
              path: 'art/:id',
              maintainState: false,
            ),
          ],
        ),

在 main.dart 上必须配置整个路线

routerConfig:
      ref.read(appRouterProvider).config(deepLinkBuilder: (deepLink) {
    if (deepLink.path.startsWith('/home')) {
      return DeepLink(
        [
          HomeTabRoute(
            children: [
              ArtDetailsRoute(id: 1),
            ],
          ),
        ],
      );
    } else {
      return DeepLink.defaultPath;
    }
  })

这是我的深层链接网址：

http://com.myapp/home/art/1”

还在艺术细节屏幕的构造函数上添加@PathParam('id')