When use AutoTabsRouter.tabBar, maintainState: false and TabBar together, fails to load routes in some cases

[canbi-softtech]

Scenario

When using AutoTabsRouter.tabBar with a TabBar widget, and routes are configured with maintainState: false, unexpected behavior occurs. Switching between tabs with an index difference greater than 1 fails to load the corresponding route.

Example Cases:

Case 1:

Switching from Page 1 to Page 2 by clicking the TabBar widget tab:

• Expected Result: Page 2 loads successfully.
• Observed Result: Page 2 loads as expected.

Case 2:

Switching from Page 1 to Page 3 by clicking the TabBar widget tab (index difference > 1):

• Expected Result: Page 3 should load successfully.
• Observed Result: Page 3 does not load. Shows empty page

Case 3:

Switching from Page 1 to Page 4 by clicking the TabBar widget tab (index difference > 1):

• Expected Result: Page 4 should load successfully.
• Observed Result: Page 4 does not load. Shows empty page

Expected Behavior

When clicking a tab in the TabBar widget, the application should navigate to the corresponding route, regardless of the index difference between the current and target tab. This behavior should not depend on the maintainState: false property or any other configuration.

Observed Behavior

When clicking a tab in the TabBar widget and the route has maintainState: false, switching between tabs with an index difference greater than 1 fails to load the corresponding route.

Workaround

As shown in the code sample the code below make it work as expected when given in TabBar widget:

TabBar(
  //...
  // * SOLUTION: setActiveIndex seperately solves the problem
  onTap: (value) => contextTab.tabsRouter.setActiveIndex(value),
  // ...
),

Code Sample

pubspec.yaml

name: autoroutetest
description: "A new Flutter project."
publish_to: 'none'

version: 1.0.0+1

environment:
  sdk: ^3.5.4

dependencies:
  auto_route: ^9.2.2
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.8

dev_dependencies:
  auto_route_generator: ^9.0.0
  build_runner: any
  flutter_test:
    sdk: flutter
  flutter_lints: ^4.0.0

flutter:
  uses-material-design: true

main.dart

import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
part 'main.gr.dart';

@AutoRouterConfig(replaceInRouteName: 'View,Route')
class AppRouter extends RootStackRouter {
  @override
  List<AutoRoute> get routes => [
    AutoRoute(page: HomeRoute.page, initial: true, maintainState: false, children: [
      AutoRoute(page: Page1Route.page, initial: true, maintainState: false),
      AutoRoute(page: Page2Route.page, maintainState: false),
      AutoRoute(page: Page3Route.page, maintainState: false),
      AutoRoute(page: Page4Route.page, maintainState: false),
    ],
    ),
  ];
}


void main() {
  runApp( MyApp());
}

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

  final _appRouter = AppRouter();

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: _appRouter.config(),
    );
  }
}

@RoutePage()
class HomeView extends StatelessWidget {
  const HomeView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: AutoTabsRouter.tabBar(
        routes: const [
          Page1Route(),
          Page2Route(),
          Page3Route(),
          Page4Route(),
        ],
        builder: (contextTab, child, pageController) {
          return Column(
            children: [
              TabBar(
                controller: pageController,
                // * SOLUTION: setActiveIndex seperately solves the problem
                //onTap: (value) => contextTab.tabsRouter.setActiveIndex(value),
                isScrollable: true,
                indicatorSize: TabBarIndicatorSize.tab,
                tabAlignment: TabAlignment.start,
                tabs: const [
                  Tab(text: 'Page 1'),
                  Tab(text: 'Page 2'),
                  Tab(text: 'Page 3'),
                  Tab(text: 'Page 4'),
                ],
              ),
              Expanded(child: child),
            ],
          );
        },
            ),
      ),
    );
  }
}

@RoutePage()
class Page1View extends StatelessWidget {
  const Page1View({super.key});

  @override
  Widget build(BuildContext context) {
    return const Center(child: Text('Page 1'));
  }
}


@RoutePage()
class Page2View extends StatelessWidget {
  const Page2View({super.key});

  @override
  Widget build(BuildContext context) {
    return const Center(child: Text('Page 2'));
  }
}


@RoutePage()
class Page3View extends StatelessWidget {
  const Page3View({super.key});

  @override
  Widget build(BuildContext context) {
    return const Center(child: Text('Page 3'));
  }
}

@RoutePage()
class Page4View extends StatelessWidget {
  const Page4View({super.key});

  @override
  Widget build(BuildContext context) {
    return const Center(child: Text('Page 4'));
  }
}

run build_runner to generate main.gr.dart

Test Scenarios

1 - maintainState: false in every route, and without TabBar onTap => Observed Scenario
2 - maintainState: false in every route, and with TabBar onTap => Expected Scenario
3 - remove every maintainState: false in every route, and without TabBar onTap => Expected Scenario
4 - remove every maintainState: false in every route, and with TabBar onTap => Expected Scenario