3

I cannot scroll the SliverAppbar together with the AutoRouter widget both in a NestedScrollview with nested routes.

Tab1 and Tab2 are working as expected. If you scroll the content you expand/collapse the SliverAppbar. Tab3 only scrolls on its own without affecting the AppBar.

My home_page.dart is:


...
  @override
  Widget build(BuildContext context) {
    return AutoTabsRouter(
      lazyLoad: true,
      routes: const [
        Tab1(),
        Tab2(),
        Tab3(),
      ],
      builder: (context, child, animation) {
        final tabsRouter = AutoTabsRouter.of(context);
        return Scaffold(
            body: NestedScrollView(
                floatHeaderSlivers: true,
                headerSliverBuilder: (context, innerBoxIsScrolled) => [
   SliverAppBar(
      floating: false,
      snap: false,
      pinned: true,
      title: MyLogo(),
      centerTitle: false,
      flexibleSpace: FlexibleSpaceBar(
        centerTitle: true,
        title: innerBoxIsScrolled
            ? Text('${context.topRoute.name}')
            : null,
        expandedTitleScale: 1,
      ),
    ),
    SliverToBoxAdapter(
       child: Text('header'),
    ),
],
                body: child ,
),
            bottomNavigationBar: BottomNavigationBar(
              currentIndex: tabsRouter.activeIndex,
              onTap: (index) => tabsRouter.setActiveIndex(index),
              items: const [
                BottomNavigationBarItem(
                  icon: Icon(Icons.abc),
                  label: 'Tab1',
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.abc),
                  label: 'Tab2',
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.abc),
                  label: 'Tab3',
                ),
              ],
            ));
      },
    );
  }

My router.dart is the following:

@MaterialAutoRouter(
  replaceInRouteName: 'Page|Screen,Route',
  routes: [
    AutoRoute(
      page: HomePage,
      path: '/',
      name: 'Home',
      children: [
        AutoRoute(
          path: 'tab1',
          page: Tab1,
          name: 'Tab1',
          initial: true,
        ),
        AutoRoute(
          path: 'tab2',
          page: Tab2,
          name: 'Tab2',
        ),
        AutoRoute(
          page: EmptyRouterPage,
          name: 'Tab3',
          path: 'tab3',
          children: [
            AutoRoute(
              page: ListScreen1,
              name: 'List1',
              path: '',
            ),
            AutoRoute(
              page: ListScreen2,
              name: 'List2',
              path: 'list2/:id',
            ),
          ],
        ),
      ],
    ),
  ],
)

I tried different combinations of Sliver widgets like CustomScrollView or SliverList with no success. I also tried to give them a shared ScrollController instance.

How would I connect the scroll state from the Listview inside the Autorouter to the SliverAppBar? Or am I trying something impossible?

0 Answers0