I’m starting a new app with auto_route as router. The main screen has a nested navigation with a bottom navigation bar. My MainScreen has 2 nested routes FooPage and BarPage. There is an AppBar on the top of the screen. I don’t want it to flicker when I change between the pages, so the appbar is included in MainScreen. I want the Bounce physics and the bodies of my pages are Slivers. That’s why I went for a NestedScrollView.

This is my code:

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

  @override
  Widget build(BuildContext context) {
    return AutoTabsRouter(
      routes: const [
        FooRoute(),
        FooRoute(), // using FooRoute twice in order to keep things simple in this example
      ],
      builder: (context, child) {
        final tabsRouter = AutoTabsRouter.of(context);

        return Scaffold(
          body: SafeArea(
            child: NestedScrollView(
              headerSliverBuilder: (context, innerBoxIsScrolled) {
                return [
                  SliverAppBar(
                    title: Text(tabsRouter.activeIndex == 0 ? 'Foo' : 'Bar'),
                    backgroundColor: Colors.amber,
                  ),
                ];
              },
              body: child,
            ),
          ),
          bottomNavigationBar: BottomNavigationBar(
            currentIndex: tabsRouter.activeIndex,
            onTap: (index) {
              tabsRouter.setActiveIndex(index);
            },
            items: const [
              BottomNavigationBarItem(
                icon: Icon(Icons.star),
                label: 'Foo',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.search),
                label: 'Bar',
              ),
            ],
          ),
        );
      },
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        SliverList.builder(
          itemBuilder: (context, index) => Text('Item ${index.toString()}'),
        ),
      ],
    );
  }
}

This works great, but when I scroll down repeatitively an error occurs on _StretchController.

I looked into this, and I find this issue is already well documented here. It seems that the error occurs with the BouncingScrollPhysics of material3, and disabling either the bounce physics or material3 seems to fix the issue. But I’d like to avoid going in any of these directions.

Since it’s already 2 years old, I guess the issue is not about to be fixed anytime soon.

So I was wondering if anyone has found any workaround to this issue?