CLOSED: NestedScrollView briefly stutters before properly scrolling

user_13704230 0
Viewed 124

So basically I am using a NestedScrollView which has a TabBarView as its body. My setup works pretty much as desired however there is a stutter while scrolling. When the TabBar reaches the top of the page/touches the bottom of the SliverAppBar while scrolling, there is a brief pause in scrolling before scrolling is resumed as normal. This pause also happens when we scroll back down.

Here is the error:

enter image description here

I cannot seem to figure out how to fix this pause. It is brief yet annoyingly noticeable. How could I fix this?

Thank you!

flutter-layout dart flutter
1 Answers

You can use only one CustomScrollView in this case. and For inner scrollable physics: NeverScrollableScrollPhysics(),

Widget build(BuildContext context) {

return Scaffold(
        body: CustomScrollView(
      slivers: [
        const SliverAppBar(
          pinned: true,
          title: Text('AppBar'),
          collapsedHeight: 100,
          backgroundColor: Colors.blue,
        ),
        SliverToBoxAdapter(
          child: Container(
            alignment: Alignment.center,
            height: 100,
            color: Colors.redAccent,
            child: const Text('Container'),
          ),
        ),
        SliverPinnedHeader(
          child: Container(
            color: Colors.white,
            child: TabBar(
              controller: _tabController,
              tabs: const [
                Tab(icon: Icon(Icons.shopping_cart, color: Colors.black)),
                Tab(icon: Icon(Icons.bookmark, color: Colors.black)),
              ],
            ),
          ),
        ),
        SliverFillRemaining(
            child: TabBarView(
          // physics: NeverScrollableScrollPhysics(),
          controller: _tabController,
          children: [
            ListView.builder(
              itemCount: 44,
              physics: NeverScrollableScrollPhysics(),
              itemBuilder: (context, index) {
                return ListTile(
                  tileColor: Colors.pinkAccent,
                  title: Text('index $index'),
                );
              },
            ),
            ListView.builder(
              itemCount: 44,
              physics: NeverScrollableScrollPhysics(),
              itemBuilder: (context, index) {
                return ListTile(
                  tileColor: Colors.pinkAccent,
                  title: Text('index $index'),
                );
              },
            ),
          ],
        )),
      ],
    ));
  }
user_101571270
Related