NestedScrollView with Slivers Doesn't show AppBar on Scroll Up

user_13411438 0
Viewed 67

I'm using NestedScrollView in order to achieve scroll show appbar gesture on myApp. Not sure what could be the issue, once scrolled down, doesnt show up again til you restart .

  body:  
        NestedScrollView(
          controller: _scrollController,
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              SliverOverlapAbsorber(
                handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                sliver: SliverAppBar(
                  backgroundColor: Colors.red,
                  floating: true,
                  pinned: true,
                  toolbarHeight: 80,
                  automaticallyImplyLeading: false,
                  bottom: 
                  PreferredSize(
                    preferredSize: Size.fromHeight(0),
                    child: new Offstage(),
                  ),
                 
                  elevation: 0,
                  actions: <Widget>[
                    // Icons
                   
                  ],
                ),
              ),
            ];
          },
          body: 
          SafeArea(
            child: PageView(
              controller: _pageController,
              physics: NeverScrollableScrollPhysics(),
              children: <Widget>[
                UserListPage(),
                MerchantListPage(),

              ],

            ),
          ),
        ),
flutter
1 Answers

Try below code hope its helpful to you. set pinned: true, inside SliverAppBar() widget refer NestedScrollView here

return Scaffold(
  body: NestedScrollView(
    floatHeaderSlivers: true,
    headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
      return <Widget>[
        SliverAppBar(
          title: const Text('NestedScrollView'),
          pinned: true,
          expandedHeight: 200.0,
          forceElevated: innerBoxIsScrolled,
        ),
      ];
    },
    body: ListView.builder(
      padding: const EdgeInsets.all(8),
      itemCount: 30,
      itemBuilder: (BuildContext context, int index) {
        return SizedBox(
          height: 50,
          child: Center(child: Text('Item $index')),
        );
      },
    ),
  ),
);

Your result screen-> Image

user_139972100
Related