Bottom navigation bar navigation using AutoTabsRouter

Question

I have used AutoTabsRouter() and want to switch to another tab (downloads) on connection loss and disable all remaining tabs. How can I do it? Here, when the connection is lost, the tab changed to downloads (index), but the content remained the same, didn't change to downloads tab content.

return AutoTabsRouter(
      duration: const Duration(microseconds: 0),
      navigatorObservers: () => [HeroController()],
      routes: const [
        NewsRouter(),
        VideosRouter(),
        EventsRouter(),
        DownloadsRouter(),
      ],
      builder: (context, child, animation) {
        final tabsRouter = AutoTabsRouter.of(context);

        return BlocBuilder<ConnectivityBloc, ConnectivityState>(
          builder: (context, state) {
            return Scaffold(
              extendBody: true,
              appBar: state.isMessageVisible
                  ? const PreferredSize(
                      preferredSize: Size.fromHeight(kLargeSize),
                      child: ConnectivityAppBar(),
                    )
                  : null,
              body: FadeTransition(
                opacity: animation,
                child: child,
              ),
              bottomNavigationBar: MyBottomNavigationBar(
                currentIndex: state.isMessageVisible ? 3 : tabsRouter.activeIndex,
                onTap: state.isMessageVisible
                    ? (index) {
                        if (index == 3) {
                          tabsRouter.setActiveIndex(index);
                        }
                      }
                    : tabsRouter.setActiveIndex,
                items: [...]

Answer 1

you can wrap your BlocBuilder with BlocListener.

BLocListener can listen all the state changes and you can navigate or run your function inside the listener.

Thanks me later 😁😆