nested_scroll_controller 0.2.1

  • Readme
  • Changelog
  • Example
  • Installing
  • 66

nested_scroll_controller #

Pub Version

A widget used to allow for controlling a NestedScrollView like it was a regular scroll view.
This is a small library which empowers you to control the offset of a NestedScrollView just like you would a regular scroll view:

  • animate to an offset or an index
  • jump to an offset or an index
  • add listeners to the total offset

Usage #

See example.
To utilize [NestedScrollController] there are five main steps:

    /// 1. Create the [NestedScrollController].
    final NestedScrollController nestedScrollController = NestedScrollController();
    NestedScrollView(
        /// 2. Set the controller of the [NestedScrollView] to the nestedScrollController.
        controller: nestedScrollController,
        /// 3. Wrap the body of the [NestedScrollView] in a [LayoutBuilder].
        ///
        /// NOTE: if [nestedScrollController.centerScroll] is false (defaults to true),
        ///       then [constraints] is not needed and a [Builder] can be used instead of
        ///       the [LayoutBuilder].
        body: LayoutBuilder(
            builder: (context, constraints) {
                /// 4. Enable scrolling and center scrolling.
                ///
                /// NOTE: Only call [enableCenterScroll] if 
                ///       [nestedScrollController.centerScroll] is true (defaults to true).
                nestedScrollController.enableScroll(context);
                nestedScrollController.enableCenterScroll(constraints);
                ListTile(
                    title: Text('Item $index'),
                    onTap: () {
                    /// 5. Use the [NestedScrollController] anywhere (after step 4).
                        nestedScrollController.nestedAnimateToIndex(
                            index,
                            itemExtent: itemExtent,
                        );
                    }
                );
                                      

Ofcourse, you can add/remove listeners just like a regular scroll controller:

    nestedScrollController.addListener(() {
      print("Outer: ${nestedScrollController.offset}");
      print("Inner: ${nestedScrollController.innerOffset}");
      print("Total: ${nestedScrollController.totalOffset}");
    });

Result #

See the example result here.

[0.0.1] - 15/05/2020 #

  • Initial release!
  • Defined [NestedScrollController] with some basic methods
  • These methods include animateTo, animateToIndex and jumpTo

[0.0.2] - 16/05/2020 #

  • Added example
  • Updated readme, license, pubspec.

[0.1.0] - 16/05/2020 #

  • Built out many basic ScrollController overrides in NestedScrollController.
  • These include listener handling, equality operator (uses Cantor pairing function) and more.
  • Happy to move out of the pre-release stage.

[0.2.0] - 26/05/2020 #

  • BREAKING CHANGES: see updated example or readme to learn how the nested scroll controller is used with this version.
  • Added gif demonstration.
  • Fixed minor bugs.

[0.2.1] - 26/05/2020 #

  • Fixed README - the .gif was not working on pub.dev.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:nested_scroll_controller/nested_scroll_controller.dart';

/// A simple example app demonstrating basic usage of [NestedScrollController].
///
/// The code below is copied-and-modified from [https://api.flutter.dev/flutter/widgets/NestedScrollView-class.html].
/// The only modifications made are for the [NestedScrollController] to be clearly used.

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

final double itemExtent = 48.0;

class TestApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "NestedScrollController Example",
      home: ExamplePage(),
    );
  }
}

class ExamplePage extends StatelessWidget {
  List<String> get _tabs => ["One", "Two"];

  /// 1. Create the [NestedScrollController].
  final NestedScrollController nestedScrollController = NestedScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: DefaultTabController(
        length: _tabs.length,
        child: NestedScrollView(
          /// 2. Give the controller to the [NestedScrollView].
          controller: nestedScrollController,
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              SliverOverlapAbsorber(
                handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                sliver: SliverAppBar(
                  title: const Text('Books'),
                  pinned: true,
                  expandedHeight: 200.0,
                  forceElevated: innerBoxIsScrolled,
                  bottom: TabBar(
                    tabs: _tabs.map((String name) => Tab(text: name)).toList(),
                  ),
                ),
              ),
            ];
          },

          /// 3. Wrap the body in a [Builder] to provide the [NestedScrollView.body] [BuildContext].
          body: LayoutBuilder(
            builder: (BuildContext context, BoxConstraints constraints) {
              /// 4. Provide the [NestedScrollController] with the [NestedScrollView] body context
              ///    and, since [NestedScrollController.centerScroll] is true, also provide the controller
              ///    with the [NestedScrollView] body constraints.
              nestedScrollController.enableScroll(context);
              nestedScrollController.enableCenterScroll(constraints);

              return TabBarView(
                children: _tabs.map((String name) {
                  return SafeArea(
                    top: false,
                    bottom: false,
                    child: CustomScrollView(
                      key: PageStorageKey<String>(name),
                      slivers: <Widget>[
                        SliverOverlapInjector(
                          handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                        ),
                        SliverPadding(
                          padding: const EdgeInsets.all(8.0),
                          sliver: SliverFixedExtentList(
                            itemExtent: itemExtent,
                            delegate: SliverChildBuilderDelegate(
                              (BuildContext context, int index) {
                                return ListTile(
                                  title: Text('Item $index'),
                                  onTap: () {
                                    /// 5. Use the [NestedScrollController]!
                                    nestedScrollController.nestedAnimateTo(index * itemExtent);
                                  },
                                );
                              },
                              childCount: 30,
                            ),
                          ),
                        ),
                      ],
                    ),
                  );
                }).toList(),
              );
            },
          ),
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  nested_scroll_controller: ^0.2.1

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:nested_scroll_controller/nested_scroll_controller.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
32
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
66
Learn more about scoring.

We analyzed this package on Jul 11, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.14
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

Because:

  • nested_scroll_controller that is a package requiring null.

Health suggestions

Format lib/nested_scroll_controller.dart.

Run flutter format to format lib/nested_scroll_controller.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.7.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.2
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
flutter_test