在 Flutter bloc 中实现 BottomNavigationBar

Question

我是 Flutter 的新手，所以这可能是一个非常简单的解决方法。我正在尝试按照两个不同的教程实现一个 BottomNavigationBar。我收到以下错误：

2021-02-17 17:35:49.264849-0500 Runner[63966:16085302] flutter: ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
2021-02-17 17:35:49.265632-0500 Runner[63966:16085302] flutter: The following StackOverflowError was thrown building _FocusMarker:
2021-02-17 17:35:49.267493-0500 Runner[63966:16085302] flutter: Stack Overflow
2021-02-17 17:35:49.271329-0500 Runner[63966:16085302] flutter:
2021-02-17 17:35:49.271605-0500 Runner[63966:16085302] flutter: The relevant error-causing widget was:
2021-02-17 17:35:49.272835-0500 Runner[63966:16085302] flutter:   MaterialApp file:///Users/devdsk/Desktop/event_flutter/lib/app.dart:57:12
2021-02-17 17:35:49.273567-0500 Runner[63966:16085302] flutter:
2021-02-17 17:35:49.274329-0500 Runner[63966:16085302] flutter: When the exception was thrown, this was the stack:
2021-02-17 17:35:49.275107-0500 Runner[63966:16085302] flutter: #0      RangeError.checkValidRange

在我的 main.dart 中，我像这样导入我的存储库：

void main() {
  runApp(App(
    authenticationRepository: AuthenticationRepository(),
    userRepository: UserRepository(),
    dashboardRepository: DashboardRepository(),
    eventRepository: EventRepository(),
  ));
}

然后我在 app.dart 中构建我的小部件。该应用程序以身份验证提示（登录/注册）开始，一旦成功登录，它应该导航到显示底部导航栏的主屏幕。 app.dart 的相关代码如下。

class App extends StatelessWidget {
  const App({
    Key key,
    @required this.authenticationRepository,
    @required this.userRepository,
    @required this.dashboardRepository,
    @required this.eventRepository,
  })  : assert(authenticationRepository != null),
        assert(userRepository != null),
        super(key: key);

  final AuthenticationRepository authenticationRepository;
  final UserRepository userRepository;
  final DashboardRepository dashboardRepository;
  final EventRepository eventRepository;

  @override
  Widget build(BuildContext context) {
    return RepositoryProvider.value(
      value: authenticationRepository,
      child: BlocProvider(
        create: (_) => AuthenticationBloc(
          authenticationRepository: authenticationRepository,
          userRepository: userRepository,
        ),
        child: AppView(),
      ),
    );
  }
}

class AppView extends StatefulWidget {
  @override
  _AppViewState createState() => _AppViewState();
}

class _AppViewState extends State<AppView> {
  final _navigatorKey = GlobalKey<NavigatorState>();

  NavigatorState get _navigator => _navigatorKey.currentState;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BlocProvider<BottomNavigationBloc>(
        create: (context) => BottomNavigationBloc(
          dashboardRepository: DashboardRepository(),
          eventRepository: EventRepository(),
        )..add(AppStarted()),
        child: AppView(),
      ),
      navigatorKey: _navigatorKey,
      builder: (context, child) {
        return BlocListener<AuthenticationBloc, AuthenticationState>(
          listener: (context, state) {
            switch (state.status) {
              case AuthenticationStatus.authenticated:
                _navigator.pushAndRemoveUntil<void>(
                  HomePage.route(),
                  (route) => false,
                );
                break;
              case AuthenticationStatus.unauthenticated:
                _navigator.pushAndRemoveUntil<void>(
                  LoginPage.route(),
                  (route) => false,
                );
                break;
              default:
                break;
            }
          },
          child: child,
        );
      },
      onGenerateRoute: (_) => SplashPage.route(),
    );
  }
}

我很确定这很简单。然而，我修复逻辑错误的尝试只是用新错误替换旧错误。

谢谢，

Answer 1

您的 AppView 小部件中有循环依赖项：

class AppView extends StatefulWidget {
  @override
  _AppViewState createState() => _AppViewState();
}

class _AppViewState extends State<AppView> {
  final _navigatorKey = GlobalKey<NavigatorState>();

  NavigatorState get _navigator => _navigatorKey.currentState;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BlocProvider<BottomNavigationBloc>(
        ...,
        child: AppView(),
      ),
      ...
    );
  }
}

AppView⇨_AppViewState⇨AppView