Problem using RefreshIndicator with a NestedScrollView

user_12187592 0
Viewed 123

I have 3 tab pages and I want to have a "pull to refresh" type of functionality when I pull to refresh the area inside of the respective tabs. I tried to use RefreshIndicator in the body area but it's hasn't been working properly. It made the header and the scrolling just not function properly anymore.

New to flutter and I'm really stumped, does anyone have any ideas of what I'm doing wrong here? Any help would be appreciated, TYIA!

@override
  Widget build(BuildContext context) => Scaffold(
        body: DefaultTabController(
          length: 3,
          child: NestedScrollView(
            floatHeaderSlivers: true,
            headerSliverBuilder: (context, value) {
              return <Widget>[
                SliverAppBar(
                  backgroundColor: kMainBG,
                  expandedHeight: 100,
                  toolbarHeight: 40,
                  floating: true,
                  pinned: true,
                  leading: IconButton(//icon stuff),
                  actions: <Widget>[IconButton(// icon stuff)],
                  title: Padding( // Padding & text),
                  titleSpacing: 0,
                  centerTitle: true,
                  bottom: TabBar(
                    isScrollable: true,
                    padding: EdgeInsets.only(
                        left: 10, right: 10),
                    unselectedLabelColor: tabUnselected,
                    labelColor: tabSelected,
                    labelStyle: TextStyle(// Styling Stuff),
                    tabs: [
                      Tab(text: 'STORES'),
                      Tab(text: 'OFFERS'),
                      Tab(text: 'EVENTS'),
                    ],
                    indicator: MaterialIndicator(
                      color: tabIndicator,
                      bottomLeftRadius: 50,
                      bottomRightRadius: 50,
                      topLeftRadius: 50,
                      topRightRadius: 50,
                    ),
                  ),
                ),
              ];
            },
            body: TabBarView(
              children: [
                Container(
                  color: kMainBG,
                  child: StoresTab(),
                ),
                Container(
                  color: kMainBG,
                  child: OffersTab(),
                ),
                Container(
                  color: kMainBG,
                  child: EventsTab(),
                ),
              ],
            ),
          ),
        ),
      );
flutter-layout flutter
1 Answers

This code is working for me, it's mostly built on top of @Nuts answer, but it needed some tweaking and my edit was rejected see here

Example:-

DefaultTabController(
      length: tabs.length,
      child: RefreshIndicator(
        notificationPredicate: (notification) {
          // with NestedScrollView local(depth == 2) OverscrollNotification are not sent
          return notification.depth == 2;
        },
        onRefresh: () => Future.value(null),
        child: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return [
              SliverAppBar(...)
            ];
          },
          body: TabBarView(
            children: tabs,
          ),
        ),
      ),
    )
user_118303390
Related