fluttercandies / extended_nested_scroll_view Goto Github PK

return CustomScrollView(
  physics: const ClampingScrollPhysics(),
  slivers: <Widget>[
    SliverPadding(
      padding: const EdgeInsets.all(0),
      sliver: SliverList(
        delegate: SliverChildListDelegate([
          NestedScrollViewRefreshIndicator(
            onRefresh: onRefresh,
            child: NestedScrollView(
                headerSliverBuilder: (BuildContext c, bool f) {
                  return buildSliverHeader();
                },
                //1.[pinned sliver header issue](https://github.com/flutter/flutter/issues/22393)
                pinnedHeaderSliverHeightBuilder: () {
                  return pinnedHeaderHeight;
                },
                //2.[inner scrollables in tabview sync issue](https://github.com/flutter/flutter/issues/21868)
                innerScrollPositionKeyBuilder: () {
                  String index = 'Tab';
                  if (primaryTC.index == 0) {
                    index +=
                        primaryTC.index.toString() + secondaryTC.index.toString();
                  } else {
                    index += primaryTC.index.toString();
                  }
                  return Key(index);
                },
                body: Column(
                  children: <Widget>[
                    TabBar(
                      controller: primaryTC,
                      labelColor: Colors.blue,
                      indicatorColor: Colors.blue,
                      indicatorSize: TabBarIndicatorSize.label,
                      indicatorWeight: 2.0,
                      isScrollable: false,
                      unselectedLabelColor: Colors.grey,
                      tabs: const <Tab>[
                        Tab(text: 'Tabqq0'),
                        Tab(text: 'Tab1'),
                      ],
                    ),
                    Expanded(
                      child: TabBarView(
                        controller: primaryTC,
                        children: <Widget>[
                          SecondaryTabView('Tab0', secondaryTC, true),
                          NestedScrollViewInnerScrollPositionKeyWidget(
                            const Key('Tab1'),
                            GlowNotificationWidget(
                              ListView.builder(
                                //store Page state
                                key: const PageStorageKey<String>('Tab1'),
                                physics: const ClampingScrollPhysics(),
                                itemBuilder: (BuildContext c, int i) {
                                  return Container(
                                    alignment: Alignment.center,
                                    height: 60.0,
                                    child: Text(const Key('Tab1').toString() +
                                        ': ListView$i'),
                                  );
                                },
                                itemCount: 50,
                              ),
                              showGlowLeading: false,
                            ),
                          )
                        ],
                      ),
                    )
                  ],
                )),
          )
        ]),
      ),
    )
  ],
);

import 'dart:async';
import 'dart:math';
import 'package:flutter/material.dart'
    hide NestedScrollView, NestedScrollViewState;
import 'package:extended_nested_scroll_view/extended_nested_scroll_view.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
import 'package:loading_more_list/loading_more_list.dart';

class TabList3Demo extends StatefulWidget {
  @override
  _TabList3DemoState createState() => _TabList3DemoState();
}

class _TabList3DemoState extends State<TabList3Demo>
    with TickerProviderStateMixin {
  TabController primaryTC;
  final GlobalKey<NestedScrollViewState> _key =
      GlobalKey<NestedScrollViewState>();
  @override
  void initState() {
    primaryTC = TabController(length: 2, vsync: this);
    super.initState();
  }

  @override
  void dispose() {
    primaryTC.dispose();
    super.dispose();
  }

  Future _onRefresh() async {
    await Future.delayed(Duration(seconds: 1), () {
      print('refresh');
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _buildScaffoldBody(),
    );
  }

  Widget _buildScaffoldBody() {
    final double statusBarHeight = MediaQuery.of(context).padding.top;
    final double pinnedHeaderHeight =
        //statusBar height
        statusBarHeight +
            //pinned SliverAppBar height in header
            kToolbarHeight;
    return NestedScrollViewRefreshIndicator(
      onRefresh: _onRefresh,
      child: NestedScrollView(
        key: _key,
        headerSliverBuilder: (BuildContext c, bool f) {
          return <Widget>[
            SliverAppBar(
              pinned: true,
              expandedHeight: 200.0,
              title: const Text('load more list'),
              flexibleSpace: FlexibleSpaceBar(
                collapseMode: CollapseMode.pin,
                background: Image.asset(
                  'images/[email protected]',
                  fit: BoxFit.fill,
                ),
              ),
            ),
            SliverToBoxAdapter(child: Container(height: 200,child: Text('王老吉'),),),
            SliverToBoxAdapter(child: Container(height: 200,child: Text('加多宝'),),),
            SliverToBoxAdapter(child: Container(height: 200,child: Text('和其正'),),),
          ];
        },
        //1.[pinned sliver header issue](https://github.com/flutter/flutter/issues/22393)
        pinnedHeaderSliverHeightBuilder: () {
          return pinnedHeaderHeight;
        },
        //2.[inner scrollables in tabview sync issue](https://github.com/flutter/flutter/issues/21868)
        innerScrollPositionKeyBuilder: () {
          String index = 'Tab';

          index += primaryTC.index.toString();

          return Key(index);
        },
        body: Column(
          children: <Widget>[
            TabBar(
              controller: primaryTC,
              labelColor: Theme.of(context).primaryColor,
              indicatorSize: TabBarIndicatorSize.label,
              indicatorWeight: 2.0,
              labelStyle: TextStyle(fontSize: 22, fontWeight: FontWeight.w500),
              isScrollable: false,
              unselectedLabelColor: Colors.grey,
              tabs: const <Tab>[
                Tab(text: 'Tab0'),
                Tab(text: 'Tab1'),
              ],
            ),
            Expanded(
              child: TabBarView(
                controller: primaryTC,
                children: const <Widget>[
                  TabViewItem(Key('Tab0')),
                  TabViewItem(Key('Tab1')),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

class LoadMoreListSource extends LoadingMoreBase<int> {
  bool _hasMore = true;
  @override
  bool get hasMore => _hasMore;
  @override
  Future<bool> loadData([bool isloadMoreAction = false]) {
    return Future<bool>.delayed(const Duration(seconds: 1), () {
      for (int i = 0; i < 10; i++) {
        this.add(Random().nextInt(400));
      }
      return true;
    });
  }
}

class TabViewItem extends StatefulWidget {
  const TabViewItem(this.tabKey);
  final Key tabKey;
  @override
  _TabViewItemState createState() => _TabViewItemState();
}

class _TabViewItemState extends State<TabViewItem>
    with AutomaticKeepAliveClientMixin {
  LoadMoreListSource source;
  @override
  void initState() {
    source = LoadMoreListSource();
    super.initState();
  }

  @override
  void dispose() {
    source.dispose();
    super.dispose();
  }

  Widget _buildIndicator(BuildContext context, IndicatorStatus status) {
    Widget widget;
    switch (status) {
      case IndicatorStatus.fullScreenBusying:
        widget = SpinKitFadingCube(
          color: Theme.of(context).primaryColor,
          size: 40.0,
        );
        break;
      case IndicatorStatus.loadingMoreBusying:
        widget = SpinKitThreeBounce(
          color: Theme.of(context).primaryColor,
          size: 40.0,
        );
        break;
      default:
    }
    return widget;
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    final LoadingMoreList<int> child = LoadingMoreList<int>(
      ListConfig<int>(
        physics: const ClampingScrollPhysics(),
        indicatorBuilder: _buildIndicator,
        itemBuilder: (BuildContext c, int item, int index) {
          return GestureDetector(
            onTap: () {
              source.remove(item);
              source.setState();
            },
            child: Container(
              alignment: Alignment.center,
              height: 60.0,
              child: Text(
                  widget.tabKey.toString() + ': ListView${item.toString()}'),
            ),
          );
        },
        sourceList: source,
      ),
    );

    return NestedScrollViewInnerScrollPositionKeyWidget(widget.tabKey, child);
  }

  @override
  bool get wantKeepAlive => true;
}

class A extends StatelessWidget {
  final GlobalKey<extended.NestedScrollViewState> globalKey =
      GlobalKey<extended.NestedScrollViewState>();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          globalKey.currentState.currentInnerPosition.jumpTo(0.0);
        },
      ),
      body: extended.NestedScrollView(
        key: globalKey,
        innerScrollPositionKeyBuilder: () {
          return Key('Nest-1-0');
        },
        headerSliverBuilder: (
          BuildContext context,
          bool innerBoxIsScrolled,
        ) {
          final List<Widget> widgets = <Widget>[];
          return widgets;
        },
        body: extended.NestedScrollViewInnerScrollPositionKeyWidget(
          Key('Nest-1-0'),
          CustomScrollView(
            slivers: [
              SliverList(
                delegate: SliverChildBuilderDelegate(
                  (context, index) {
                    print(index);
                    return Image.network(
                      'https://picsum.photos/seed/${Random().nextInt(99999)}/500/500',
                      height: 500,
                    );
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart' hide NestedScrollView;
import 'package:extended_nested_scroll_view/extended_nested_scroll_view.dart' as extended;


class NestedWithTabs extends StatefulWidget {
  @override
  _NestedWithTabsState createState() => _NestedWithTabsState();
}

class _NestedWithTabsState extends State<NestedWithTabs> with TickerProviderStateMixin {
  TabController tabController;
  static List<String> _tabButtonTextList = ["Dogs", "Cats", "Birds"];
  List<Key> _keyList = [];
  static double _tabButtonHeight = 48;
  static double _headerWidgetHeight = 250;

  @override
  void initState() {
    super.initState();

    tabController = TabController(
      length: _tabButtonTextList.length,
      initialIndex: 0,
      vsync: this,
    );

    for (var i = 0; i < _tabButtonTextList.length; i++) {
      _keyList.add(Key(_tabButtonTextList[i] + i.toString()));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: extended.NestedScrollView(
        physics: AlwaysScrollableScrollPhysics(), // THIS DOES NOT WORK?
        pinnedHeaderSliverHeightBuilder: () => _tabButtonHeight,
        headerSliverBuilder: (BuildContext c, bool f) {
          final List<Widget> widgets = <Widget>[];
          widgets.add(
            SliverList(
              delegate: SliverChildListDelegate(
                [
                  Container(
                    color: Colors.red,
                    height: _headerWidgetHeight,
                    child: Center(
                      child: Text("Header Widget"),
                    ),
                  ),
                ],
              ),
            ),
          );
          widgets.add(
            SliverPersistentHeader(
              pinned: true,
              floating: false,
              delegate: CommonSliverPersistentHeaderDelegate(
                Container(
                  height: _tabButtonHeight,
                  child: TabBar(
                    controller: tabController,
                    labelColor: Colors.blue,
                    indicatorColor: Colors.black,
                    indicatorSize: TabBarIndicatorSize.label,
                    indicatorWeight: 2.0,
                    isScrollable: false,
                    unselectedLabelColor: Colors.grey,
                    tabs: _tabButtonTextList.asMap().entries.map((entry) {
                      return Tab(text: entry.value);
                    }).toList(),
                  ),
                ),
                _tabButtonHeight,
              ),
            ),
          );

          return widgets;
        },
        innerScrollPositionKeyBuilder: () => _keyList[tabController.index],
        body: TabBarView(
          controller: tabController,
          children: _tabButtonTextList.asMap().entries.map((entry) {
            int _thisIndex = entry.key;
            return InnerScroller(
              tabKey: _keyList[_thisIndex],
              tabIndex: _thisIndex,
              tabName: _tabButtonTextList[_thisIndex],
            );
          }).toList(),
        ),
      ),
    );
  }
}

/* -------------------------------------------------------------------------- */
/*                    CommonSliverPersistentHeaderDelegate                    */
/* -------------------------------------------------------------------------- */

class CommonSliverPersistentHeaderDelegate extends SliverPersistentHeaderDelegate {
  CommonSliverPersistentHeaderDelegate(this.child, this.height);
  final Widget child;
  final double height;

  @override
  double get minExtent => height;

  @override
  double get maxExtent => height;

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return child;
  }

  @override
  bool shouldRebuild(CommonSliverPersistentHeaderDelegate oldDelegate) {
    //print('shouldRebuild---------------');
    return oldDelegate != this;
  }
}

/* -------------------------------------------------------------------------- */
/*                                InnerScroller                               */
/* -------------------------------------------------------------------------- */

class InnerScroller extends StatefulWidget {
  final Key tabKey;
  final int tabIndex;
  final String tabName;
  InnerScroller({
    @required this.tabKey,
    @required this.tabIndex,
    @required this.tabName,
  });

  @override
  _InnerScrollerState createState() => _InnerScrollerState();
}

class _InnerScrollerState extends State<InnerScroller> with AutomaticKeepAliveClientMixin {
  static List<Color> _colorList = [Colors.indigoAccent, Colors.lime, Colors.orangeAccent];

  @override
  Widget build(BuildContext context) {
    return extended.NestedScrollViewInnerScrollPositionKeyWidget(
      widget.tabKey,
      CustomScrollView(
        key: PageStorageKey(widget.tabKey),
        physics: ClampingScrollPhysics(),
        slivers: <Widget>[
          SliverGrid(
            delegate: SliverChildBuilderDelegate(
              (_, i) {
                return Container(
                  margin: EdgeInsets.all(4),
                  height: 200,
                  color: _colorList[widget.tabIndex],
                  child: Center(
                    child: Text(widget.tabName + " " + i.toString()),
                  ),
                );
              },
              childCount: 3 * 32,
            ),
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,
            ),
          ),
        ],
      ),
    );
  }

  @override
  bool get wantKeepAlive => true;
}

import 'dart:io';
import 'package:flutter/material.dart' hide NestedScrollView;
import 'package:extended_nested_scroll_view/extended_nested_scroll_view.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primaryColor: Colors.white,
      ),
      home: NewsScreen(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class NewsScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _NewsScreenState();
}

class _NewsScreenState extends State<NewsScreen> with TickerProviderStateMixin {
  final List<String> _tabs = <String>[
    "Featured",
    "Popular",
    "Latest",
  ];
  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: _tabs.length, vsync: this);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      child: Scaffold(
        body: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              SliverOverlapAbsorber(
                handle:
                    NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                sliver: SliverSafeArea(
                  top: false,
                  bottom: Platform.isIOS ? false : true,
                  sliver: SliverAppBar(
                    title: Text('Tab Demo'),
                    floating: true,
                    pinned: true,
                    snap: true,
                    forceElevated: innerBoxIsScrolled,
                    bottom: TabBar(
                      controller: _tabController,
                      tabs:
                          _tabs.map((String name) => Tab(text: name)).toList(),
                    ),
                  ),
                ),
              ),
            ];
          },
          innerScrollPositionKeyBuilder: () {
            return Key('Tab${_tabController.index}');
          },
          body: TabBarView(
            controller: _tabController,
            children: _tabs.asMap().entries.map((entry) {
              return TabViewItem(
                tabKey: Key('Tab${entry.key}'),
                tabName: entry.value,
              );
            }).toList(),
          ),
        ),
      ),
    );
  }
}

class TabViewItem extends StatefulWidget {
  final Key tabKey;
  final String tabName;

  const TabViewItem({Key key, this.tabKey, this.tabName}) : super(key: key);

  @override
  _TabViewItemState createState() => _TabViewItemState();
}

class _TabViewItemState extends State<TabViewItem>
    with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return SafeArea(
      top: false,
      bottom: false,
      child: Builder(
        builder: (BuildContext context) {
          return NotificationListener<ScrollNotification>(
            onNotification: (scrollNotification) {
              return true;
            },
            child: NestedScrollViewInnerScrollPositionKeyWidget(
              widget.tabKey,
              CustomScrollView(
                slivers: <Widget>[
                  SliverOverlapInjector(
                    handle: NestedScrollView.sliverOverlapAbsorberHandleFor(
                        context),
                  ),
                  SliverPadding(
                    padding: const EdgeInsets.all(8.0),
                    sliver: SliverList(
                      delegate: SliverChildBuilderDelegate(
                        (BuildContext context, int index) {
                          return Column(
                            children: <Widget>[
                              Container(
                                height: 150,
                                width: double.infinity,
                                color: Colors.blueGrey,
                                child: Column(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: <Widget>[
                                    Text('${widget.tabName} $index')
                                  ],
                                ),
                              ),
                              SizedBox(
                                height: 8,
                              )
                            ],
                          );
                        },
                        childCount: 30,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          );
        },
      ),
    );
  }

  @override
  bool get wantKeepAlive => true;
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  final List<String> _tabs = [
    "AAA",
    "BBB",
    "CCC",
    "DDD",
    "EEE",
    "FFF",
  ];

  TabController tcl;

  @override
  void initState() {
    super.initState();
    tcl = TabController(length: _tabs.length, vsync: this);
  }

  @override
  void dispose() {
    tcl.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final double statusBarHeight = MediaQuery.of(context).padding.top;
    final double pinnedHeaderHeight = statusBarHeight + kToolbarHeight;

    return extended.NestedScrollView(
      pinnedHeaderSliverHeightBuilder: () {
        return pinnedHeaderHeight;
      },
      innerScrollPositionKeyBuilder: () => Key('${_tabs[tcl.index]}'),
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          // These are the slivers that show up in the "outer" scroll view.
          return <Widget>[
//            SliverOverlapAbsorber(
              // This widget takes the overlapping behavior of the SliverAppBar,
              // and redirects it to the SliverOverlapInjector below. If it is
              // missing, then it is possible for the nested "inner" scroll view
              // below to end up under the SliverAppBar even when the inner
              // scroll view thinks it has not been scrolled.
              // This is not necessary if the "headerSliverBuilder" only builds
              // widgets that do not overlap the next sliver.
//              handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
//              sliver:
          SliverAppBar(
                title: const Text('Books'), // This is the title in the app bar.
                pinned: true,
                floating: true,
                snap: true,
                // The "forceElevated" property causes the SliverAppBar to show
                // a shadow. The "innerBoxIsScrolled" parameter is true when the
                // inner scroll view is scrolled beyond its "zero" point, i.e.
                // when it appears to be scrolled below the SliverAppBar.
                // Without this, there are cases where the shadow would appear
                // or not appear inappropriately, because the SliverAppBar is
                // not actually aware of the precise position of the inner
                // scroll views.
                forceElevated: innerBoxIsScrolled,
                bottom: TabBar(
                  controller: tcl,
                  isScrollable: true,
                  // These are the widgets to put in each tab in the tab bar.
                  tabs: _tabs.map((String name) => Tab(text: name)).toList(),
                ),
              ),
//            ),
          ];
        },
        body: TabBarView(
          controller: tcl,
          // These are the contents of the tab views, below the tabs.
          children: _tabs.map((String name) {
            return SafeArea(
              top: false,
              bottom: false,
              child: Builder(
                // This Builder is needed to provide a BuildContext that is
                // "inside" the NestedScrollView, so that
                // sliverOverlapAbsorberHandleFor() can find the
                // NestedScrollView.
                builder: (BuildContext context) {
                  return RefreshIndicator(child: CustomScrollView(
                    // The "controller" and "primary" members should be left
                    // unset, so that the NestedScrollView can control this
                    // inner scroll view.
                    // If the "controller" property is set, then this scroll
                    // view will not be associated with the NestedScrollView.
                    // The PageStorageKey should be unique to this ScrollView;
                    // it allows the list to remember its scroll position when
                    // the tab view is not on the screen.
                    key: PageStorageKey<String>(name),
                    slivers: <Widget>[
//                      SliverOverlapInjector(
//                        // This is the flip side of the SliverOverlapAbsorber
//                        // above.
//                        handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
//                      ),
                      SliverPadding(
                        padding: const EdgeInsets.all(0),
                        // In this example, the inner scroll view has
                        // fixed-height list items, hence the use of
                        // SliverFixedExtentList. However, one could use any
                        // sliver widget here, e.g. SliverList or SliverGrid.
                        sliver: TabPage(key: Key(name)),
                      ),
                    ],
                  ), onRefresh: () => Future.delayed(Duration(seconds: 5)));
                },
              ),
            );
          }).toList(),
        ),
      );
  }
}

class TabPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _TabPageState();
  }

  TabPage({Key key}) : super(key: key);
}

class _TabPageState extends State<TabPage> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return extended.NestedScrollViewInnerScrollPositionKeyWidget(
        widget.key,
        SliverFixedExtentList(
          // The items in this example are fixed to 48 pixels
          // high. This matches the Material Design spec for
          // ListTile widgets.
          itemExtent: 48.0,
          delegate: SliverChildBuilderDelegate(
            (BuildContext context, int index) {
              // This builder is called for each child.
              // In this example, we just number each list item.
              return Material(
                  child: ListTile(
                title: Text('Item $index'),
              ));
            },
            // The childCount of the SliverChildBuilderDelegate
            // specifies how many children this inner list
            // has. In this example, each tab has a list of
            // exactly 30 items, but this is arbitrary.
            childCount: 30,
          ),
        ));
  }
}