DraggableScrollableSheet class

A container for a Scrollable that responds to drag gestures by resizing the scrollable until a limit is reached, and then scrolling.

This widget can be dragged along the vertical axis between its minChildSize, which defaults to 0.25 and maxChildSize, which defaults to 1.0. These sizes are percentages of the height of the parent container.

The widget coordinates resizing and scrolling of the widget returned by builder as the user drags along the horizontal axis.

The widget will initially be displayed at its initialChildSize which defaults to 0.5, meaning half the height of its parent. Dragging will work between the range of minChildSize and maxChildSize (as percentages of the parent container's height) as long as the builder creates a widget which uses the provided ScrollController. If the widget created by the ScrollableWidgetBuilder does not use provided ScrollController, the sheet will remain at the initialChildSize.

This is a sample widget which shows a ListView that has 25 ListTiles. It starts out as taking up half the body of the Scaffold, and can be dragged up to the full height of the scaffold or down to 25% of the height of the scaffold. Upon reaching full height, the list contents will be scrolled up or down, until they reach the top of the list again and the user drags the sheet back down.
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('DraggableScrollableSheet'),
      ),
      body: SizedBox.expand(
        child: DraggableScrollableSheet(
          builder: (BuildContext context, ScrollController scrollController) {
            return Container(
              color: Colors.blue[100],
              child: ListView.builder(
                controller: scrollController,
                itemCount: 25,
                itemBuilder: (BuildContext context, int index) {
                  return ListTile(title: Text('Item $index'));
                },
              ),
            );
          },
        ),
      ),
    );
  }
}

Inheritance

Constructors

DraggableScrollableSheet({Key key, double initialChildSize: 0.5, double minChildSize: 0.25, double maxChildSize: 1.0, @required ScrollableWidgetBuilder builder })
Creates a widget that can be dragged and scrolled in a single gesture. [...]
const

Properties

builder ScrollableWidgetBuilder
The builder that creates a child to display in this widget, which will use the provided ScrollController to enable dragging and scrolling of the contents.
final
initialChildSize double
The initial fractional value of the parent container's height to use when displaying the widget. [...]
final
maxChildSize double
The maximum fractional value of the parent container's height to use when displaying the widget. [...]
final
minChildSize double
The minimum fractional value of the parent container's height to use when displaying the widget. [...]
final
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
runtimeType Type
A representation of the runtime type of the object.
read-only, inherited

Methods

createState() → _DraggableScrollableSheetState
Creates the mutable state for this widget at a given location in the tree. [...]
override
createElement() StatefulElement
Creates a StatefulElement 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
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 DiagnosticsNode.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