Flutter - Using DraggableScrollableSheet Widget Examples

This is a tutorial of how to use Flutter's DraggableScrollableSheet widget.

Flutter has a widget called DraggableScrollableSheet. It's described as a container for a Scrollable that responds to drag gestures by resizing the scrollable until a limit is reached, and then scrolling. In this tutorial, you'll see some examples of how to use the widget.

Using DraggableScrollableSheet

Here's the constructor to use along with the default values for non-required arguments.

  const DraggableScrollableSheet({
    Key key,
    this.initialChildSize = 0.5,
    this.minChildSize = 0.25,
    this.maxChildSize = 1.0,
    this.expand = true,
    @required this.builder,
  })

Below is the description of the arguments you can pass on the constructor.

• Key key: The widget key, used to control if it should be replaced.
• double initialChildSize: The initial fractional value of the parent container's height.
• double minChildSize: The minimum fractional value of the parent container's height.
• double maxChildSize: The maximum fractional value of the parent container's height.
• double expand: Whether the widget should expand to fill the available space in its parent or not.
• ScrollableWidgetBuilder builder *: The builder for creating the child.

*: required

To build the widget to be displayed as the content of the draggable scrollable sheet, you need to pass a builder. The builder has two parameters: context (BuildContext) and scrollController (ScrollController). The return value must be a Widget.

Below is an example of how to use DraggableScrollableSheet. We are going to use Stack widget with an image placed behind the draggable scrollable sheet. The child of the sheet is a ListView.

  Stack(
    children: <Widget>[
      Positioned(
        top: 0,
        bottom: 150,
        left: 0,
        right: 0,
        child: Container(
          color: Color.fromARGB(100, 100, 100, 100),
          child: Image.network(
            'https://images.unsplash.com/photo-1531306728370-e2ebd9d7bb99?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80',
            fit: BoxFit.fill,
          ),
        ),
      ),
      DraggableScrollableSheet(
        builder: (BuildContext context, ScrollController scrollController){
          return Container(
            color: Colors.white,
            child: ListView.builder(
              controller: scrollController,
              itemCount: 20,
              itemBuilder: (BuildContext context, int index){
                return ListTile(title : Text('Item $index'),);
              }),
          );
        },
      )
    ],
  )

Output:

In the second example, we are going to set the initialChildSize, minChildSize, and maxChildSize. In the previous example, the sheet covers 50% of the height at the beginning. That's because the default value of initialChildSize is 0.5. We can change the initial size by overriding the value of initialChildSize property.

minChildSize whose default value is 0.25 is used to set the minium height. You can also change the value of the property. The fractional size of the sheet can't be smaller than the defined value.

maxChildSize whose default value is 1.0 is used to set the maximum height. If you don't want the sheet to cover the entire area of its parent after being scrolled down, you can set the value of maxChildSize to be lower than 1.0.

  Stack(
    children: <Widget>[
      Positioned(
        top: 0,
        bottom: 150,
        left: 0,
        right: 0,
        child: Container(
          color: Color.fromARGB(100, 100, 100, 100),
          child: Image.network(
            'https://images.unsplash.com/photo-1531306728370-e2ebd9d7bb99?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80',
            fit: BoxFit.fill,
          ),
        ),
      ),
      DraggableScrollableSheet(
        initialChildSize: 0.3,
        minChildSize: 0.1,
        maxChildSize: 0.8,
        builder: (BuildContext context, ScrollController scrollController){
          return Container(
            color: Colors.white,
            child: ListView.builder(
              controller: scrollController,
              itemCount: 20,
              itemBuilder: (BuildContext context, int index){
                return ListTile(title : Text('Item $index'),);
              }),
          );
        },
      )
    ],
  )

Output:

That's how to use DraggableScrollableSheet. If you need to make the scrollable pushes the upper area like the below screenshot, Flutter already has a widget called SliverAppBar that allows you to easily create such animation.