Skip to content

Instantly share code, notes, and snippets.

@collinjackson

collinjackson/nested_scroll_view.dart

Last active September 25, 2022 05:29
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save collinjackson/2bc6697d31e6b94ada330ef5e818a36f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save collinjackson/2bc6697d31e6b94ada330ef5e818a36f to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. collinjackson revised this gist Dec 12, 2017. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion nested_scroll_view.dart
    View file
    Original file line number Diff line number Diff line change
    @@ -62,7 +62,7 @@ class TestTabBarDelegate extends SliverPersistentHeaderDelegate {
    @override
    bool shouldRebuild(covariant TestTabBarDelegate oldDelegate) {
    return oldDelegate.controller != controller;
    };
    }
    }

    class TestAppHomePage extends StatefulWidget {
  2. collinjackson revised this gist Dec 12, 2017. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion nested_scroll_view.dart
    View file
    Original file line number Diff line number Diff line change
    @@ -128,7 +128,9 @@ class TestHomePageBodyState extends State<TestHomePageBody> {

    void _updateScrollPosition() {
    if (!_innerListIsScrolled && widget.scrollController.position.extentAfter == 0.0) {
    _innerListIsScrolled = true;
    setState(() {
    _innerListIsScrolled = true;
    });
    } else if (_innerListIsScrolled && widget.scrollController.position.extentAfter > 0.0) {
    setState(() {
    _innerListIsScrolled = false;
  3. collinjackson revised this gist Dec 12, 2017. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion nested_scroll_view.dart
    View file
    Original file line number Diff line number Diff line change
    @@ -60,7 +60,9 @@ class TestTabBarDelegate extends SliverPersistentHeaderDelegate {
    }

    @override
    bool shouldRebuild(covariant TestTabBarDelegate oldDelegate) => false;
    bool shouldRebuild(covariant TestTabBarDelegate oldDelegate) {
    return oldDelegate.controller != controller;
    };
    }

    class TestAppHomePage extends StatefulWidget {
  4. collinjackson revised this gist Dec 11, 2017. 1 changed file with 0 additions and 3 deletions.
    3 changes: 0 additions & 3 deletions nested_scroll_view.dart
    View file
    Original file line number Diff line number Diff line change
    @@ -133,9 +133,6 @@ class TestHomePageBodyState extends State<TestHomePageBody> {
    // Reset scroll positions of the TabBarView pages
    _key = new PageStorageKey({});
    });
    } else if (!_innerListIsScrolled && widget.scrollController.offset >= target + kToolbarHeight) {
    setState(() {
    });
    }
    }

  5. collinjackson revised this gist Dec 11, 2017. 1 changed file with 114 additions and 38 deletions.
    152 changes: 114 additions & 38 deletions nested_scroll_view.dart
    View file
    Original file line number Diff line number Diff line change
    @@ -8,6 +8,14 @@ void main() {
    runApp(new TestApp());
    }

    Widget _buildTile(BuildContext context, int index) {
    return new ListTile(
    title: new Text("Item $index"),
    );
    }

    const tabCount = 2;

    class TestApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
    @@ -19,20 +27,31 @@ class TestApp extends StatelessWidget {
    }

    class TestTabBarDelegate extends SliverPersistentHeaderDelegate {
    TestTabBarDelegate({ this.controller });

    final TabController controller;

    @override
    double get minExtent => kToolbarHeight;

    @override
    double get maxExtent => kToolbarHeight;

    @override
    Widget build(
    BuildContext context, double shrinkOffset, bool overlapsContent) {
    Widget build(BuildContext context, double shrinkOffset,
    bool overlapsContent) {
    return new Container(
    color: Theme.of(context).cardColor,
    color: Theme
    .of(context)
    .cardColor,
    height: kToolbarHeight,
    child: new TabBar(
    tabs: <Tab>[
    controller: controller,
    key: new PageStorageKey<Type>(TabBar),
    indicatorColor: Theme
    .of(context)
    .primaryColor,
    tabs: <Widget>[
    new Tab(text: 'one'),
    new Tab(text: 'two'),
    ],
    @@ -44,48 +63,105 @@ class TestTabBarDelegate extends SliverPersistentHeaderDelegate {
    bool shouldRebuild(covariant TestTabBarDelegate oldDelegate) => false;
    }

    class TestAppHomePage extends StatelessWidget {
    Widget _buildTile(BuildContext context, int index) {
    return new ListTile(
    title: new Text("Item $index"),
    );
    class TestAppHomePage extends StatefulWidget {
    @override
    TestAppHomePageState createState() => new TestAppHomePageState();
    }

    class TestAppHomePageState extends State<TestAppHomePage>
    with TickerProviderStateMixin {
    ScrollController _scrollController = new ScrollController();

    TabController _tabController;

    @override
    void initState() {
    _tabController = new TabController(length: tabCount, vsync: this);
    }

    @override
    Widget build(BuildContext context) {
    return new Scaffold(
    body: new DefaultTabController(
    length: 2,
    child: new NestedScrollView(
    headerSliverBuilder: (_, __) => <Widget>[
    new SliverAppBar(
    title: new Text('Test Title'),
    pinned: true,
    elevation: 0.0,
    ),
    new SliverList(
    delegate: new SliverChildBuilderDelegate(
    _buildTile,
    childCount: 12,
    ),
    ),
    new SliverPersistentHeader(
    pinned: true,
    delegate: new TestTabBarDelegate(),
    ),
    ],
    body: new TabBarView(
    children: <Widget>[
    new ListView.builder(
    itemBuilder: _buildTile,
    ),
    new ListView.builder(
    itemBuilder: _buildTile,
    appBar: new AppBar(
    title: new Text('Test Title'),
    elevation: 0.0,
    ),
    body: new NestedScrollView(
    controller: _scrollController,
    headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
    return <Widget>[
    new SliverList(
    delegate: new SliverChildBuilderDelegate(
    _buildTile,
    childCount: 12,
    ),
    ],
    ),
    ),
    new SliverPersistentHeader(
    pinned: true,
    delegate: new TestTabBarDelegate(controller: _tabController),
    ),
    ];
    },
    body: new TestHomePageBody(
    tabController: _tabController,
    scrollController: _scrollController,
    ),
    ),
    );
    }
    }

    class TestHomePageBody extends StatefulWidget {
    TestHomePageBody({ this.scrollController, this.tabController });

    final ScrollController scrollController;
    final TabController tabController;

    TestHomePageBodyState createState() => new TestHomePageBodyState();
    }

    class TestHomePageBodyState extends State<TestHomePageBody> {
    Key _key = new PageStorageKey({});
    bool _innerListIsScrolled = false;

    void _updateScrollPosition() {
    if (!_innerListIsScrolled && widget.scrollController.position.extentAfter == 0.0) {
    _innerListIsScrolled = true;
    } else if (_innerListIsScrolled && widget.scrollController.position.extentAfter > 0.0) {
    setState(() {
    _innerListIsScrolled = false;
    // Reset scroll positions of the TabBarView pages
    _key = new PageStorageKey({});
    });
    } else if (!_innerListIsScrolled && widget.scrollController.offset >= target + kToolbarHeight) {
    setState(() {
    });
    }
    }

    @override
    void initState() {
    widget.scrollController.addListener(_updateScrollPosition);
    super.initState();
    }

    @override
    void dispose() {
    widget.scrollController.removeListener(_updateScrollPosition);
    super.dispose();
    }

    @override
    Widget build(BuildContext context) {
    return new TabBarView(
    controller: widget.tabController,
    key: _key,
    children: new List<Widget>.generate(tabCount, (int index) {
    return new ListView.builder(
    key: new PageStorageKey<int>(index),
    itemBuilder: _buildTile,
    );
    }),
    );
    }
    }
  6. collinjackson revised this gist Dec 8, 2017. 1 changed file with 4 additions and 0 deletions.
    4 changes: 4 additions & 0 deletions nested_scroll_view.dart
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,7 @@
    // Copyright 2017, the Flutter project authors. Please see the AUTHORS file
    // for details. All rights reserved. Use of this source code is governed by a
    // BSD-style license that can be found in the LICENSE file.

    import 'package:flutter/material.dart';

    void main() {
  7. collinjackson created this gist Dec 8, 2017.
    87 changes: 87 additions & 0 deletions nested_scroll_view.dart
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,87 @@
    import 'package:flutter/material.dart';

    void main() {
    runApp(new TestApp());
    }

    class TestApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
    return new MaterialApp(
    theme: new ThemeData(primarySwatch: Colors.yellow),
    home: new TestAppHomePage(),
    );
    }
    }

    class TestTabBarDelegate extends SliverPersistentHeaderDelegate {
    @override
    double get minExtent => kToolbarHeight;

    @override
    double get maxExtent => kToolbarHeight;

    @override
    Widget build(
    BuildContext context, double shrinkOffset, bool overlapsContent) {
    return new Container(
    color: Theme.of(context).cardColor,
    height: kToolbarHeight,
    child: new TabBar(
    tabs: <Tab>[
    new Tab(text: 'one'),
    new Tab(text: 'two'),
    ],
    ),
    );
    }

    @override
    bool shouldRebuild(covariant TestTabBarDelegate oldDelegate) => false;
    }

    class TestAppHomePage extends StatelessWidget {
    Widget _buildTile(BuildContext context, int index) {
    return new ListTile(
    title: new Text("Item $index"),
    );
    }

    @override
    Widget build(BuildContext context) {
    return new Scaffold(
    body: new DefaultTabController(
    length: 2,
    child: new NestedScrollView(
    headerSliverBuilder: (_, __) => <Widget>[
    new SliverAppBar(
    title: new Text('Test Title'),
    pinned: true,
    elevation: 0.0,
    ),
    new SliverList(
    delegate: new SliverChildBuilderDelegate(
    _buildTile,
    childCount: 12,
    ),
    ),
    new SliverPersistentHeader(
    pinned: true,
    delegate: new TestTabBarDelegate(),
    ),
    ],
    body: new TabBarView(
    children: <Widget>[
    new ListView.builder(
    itemBuilder: _buildTile,
    ),
    new ListView.builder(
    itemBuilder: _buildTile,
    ),
    ],
    ),
    ),
    ),
    );
    }
    }