CustomScrollView class

A ScrollView that creates custom scroll effects using slivers.

A CustomScrollView lets you supply slivers directly to create various scrolling effects, such as lists, grids, and expanding headers. For example, to create a scroll view that contains an expanding app bar followed by a list and a grid, use a list of three slivers: SliverAppBar, SliverList, and SliverGrid.

Widgets in these slivers must produce RenderSliver objects.

To control the initial scroll offset of the scroll view, provide a controller with its ScrollController.initialScrollOffset property set.

This sample code shows a scroll view that contains a flexible pinned app bar, a grid, and an infinite list.

CustomScrollView(
  slivers: <Widget>[
    const SliverAppBar(
      pinned: true,
      expandedHeight: 250.0,
      flexibleSpace: FlexibleSpaceBar(
        title: Text('Demo'),
      ),
    ),
    SliverGrid(
      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
        maxCrossAxisExtent: 200.0,
        mainAxisSpacing: 10.0,
        crossAxisSpacing: 10.0,
        childAspectRatio: 4.0,
      ),
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return Container(
            alignment: Alignment.center,
            color: Colors.teal[100 * (index % 9)],
            child: Text('grid item $index'),
          );
        },
        childCount: 20,
      ),
    ),
    SliverFixedExtentList(
      itemExtent: 50.0,
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return Container(
            alignment: Alignment.center,
            color: Colors.lightBlue[100 * (index % 9)],
            child: Text('list item $index'),
          );
        },
      ),
    ),
  ],
)

Accessibility

A CustomScrollView can allow Talkback/VoiceOver to make announcements to the user when the scroll state changes. For example, on Android an announcement might be read as "showing items 1 to 10 of 23". To produce this announcment, the scroll view needs three pieces of information:

The first visible child index.
The total number of children.
The total number of visible children.

The last value can be computed exactly by the framework, however the first two must be provided. Most of the higher-level scrollable widgets provide this information automatically. For example, ListView provides each child widget with a semantic index automatically and sets the semantic child count to the length of the list.

To determine visible indexes, the scroll view needs a way to associate the generated semantics of each scrollable item with a semantic index. This can be done by wrapping the child widgets in an IndexedSemantics.

This semantic index is not necesarily the same as the index of the widget in the scrollable, because some widgets may not contribute semantic information. Consider a new ListView.separated(): every other widget is a divider with no semantic information. In this case, only odd numbered widgets have a semantic index (equal to the index ~/ 2). Furthermore, the total number of children in this example would be half the number of widgets. (The new ListView.separated() constructor handles this automatically; this is only used here as an example.)

The total number of visible children can be provided by the constructor parameter semanticChildCount. This should always be the same as the number of widgets wrapped in IndexedSemantics.

Constructors

CustomScrollView({Key key, Axis scrollDirection: Axis.vertical, bool reverse: false, ScrollController controller, bool primary, ScrollPhysics physics, bool shrinkWrap: false, double cacheExtent, List<Widget> slivers: const [], int semanticChildCount }): Creates a ScrollView that creates custom scroll effects using slivers. [...]
const

Properties

slivers → List<Widget>: The slivers to place inside the viewport.
final
cacheExtent → double: The viewport has an area before and after the visible area to cache items that are about to become visible when the user scrolls. [...]
final, inherited
controller → ScrollController: An object that can be used to control the position to which this scroll view is scrolled. [...]
final, inherited
hashCode → int: The hash code for this object. [...]
read-only, inherited
key → Key: Controls how one widget replaces another widget in the tree. [...]
final, inherited
physics → ScrollPhysics: How the scroll view should respond to user input. [...]
final, inherited
primary → bool: Whether this is the primary scroll view associated with the parent PrimaryScrollController. [...]
final, inherited
reverse → bool: Whether the scroll view scrolls in the reading direction. [...]
final, inherited
runtimeType → Type: A representation of the runtime type of the object.
read-only, inherited
scrollDirection → Axis: The axis along which the scroll view scrolls. [...]
final, inherited
semanticChildCount → int: The number of children that will contribute semantic information. [...]
final, inherited
shrinkWrap → bool: Whether the extent of the scroll view in the scrollDirection should be determined by the contents being viewed. [...]
final, inherited

Methods

buildSlivers(BuildContext context) → List<Widget>: Build the list of widgets to place inside the viewport. [...]
override
build(BuildContext context) → Widget: Describes the part of the user interface represented by this widget. [...]
inherited
buildViewport(BuildContext context, ViewportOffset offset, AxisDirection axisDirection, List<Widget> slivers) → Widget: Build the viewport. [...]
@protected, inherited
createElement() → StatelessElement: Creates a StatelessElement to manage this widget's location in the tree. [...]
inherited
debugDescribeChildren() → List<DiagnosticsNode>: Returns a list of DiagnosticsNode objects describing this node's children. [...]
@protected, inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void: Add additional properties associated with the node. [...]
inherited
getDirection(BuildContext context) → AxisDirection: Returns the AxisDirection in which the scroll view scrolls. [...]
@protected, inherited
noSuchMethod(Invocation invocation) → dynamic: Invoked when a non-existent method or property is accessed. [...]
inherited
toDiagnosticsNode({String name, DiagnosticsTreeStyle style }) → DiagnosticsNode: Returns a debug representation of the object that is used by debugging tools and by toStringDeep. [...]
inherited
toString({DiagnosticLevel minLevel: DiagnosticLevel.debug }) → String: Returns a string representation of this object.
inherited
toStringDeep({String prefixLineOne: '', String prefixOtherLines, DiagnosticLevel minLevel: DiagnosticLevel.debug }) → String: Returns a string representation of this node and its descendants. [...]
inherited
toStringShallow({String joiner: ', ', DiagnosticLevel minLevel: DiagnosticLevel.debug }) → String: Returns a one-line detailed description of the object. [...]
inherited
toStringShort() → String: A short, textual description of this widget.
inherited

Operators

operator ==(dynamic other) → bool: The equality operator. [...]
inherited