Flutter - Using DraggableScrollableSheet Widget Examples

Published July 09, 2020

In this post we are going to learn how to use 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,



  • 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



import 'package:flutter/material.dart';

void main() {

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(

        primarySwatch: Colors.blue,
        // This makes the visual density adapt to the platform that you run
        // the app on. For desktop platforms, the controls will be smaller and
        // closer together (more dense) than on mobile platforms.
        visualDensity: VisualDensity.adaptivePlatformDensity,
        child: Stack(
          children: <Widget>[
              top: 0,
              bottom: 150,
              left: 0,
              right: 0,
              child: Container(
                color: Color.fromARGB(100, 100, 100, 100),
                child: Image.network(
                  fit: BoxFit.fill,
              builder: (BuildContext context, ScrollController scrollController){
                return Container(
                  color: Colors.white,
                  child: ListView.builder(
                      controller: scrollController,
                      itemCount: 20,
                      itemBuilder: (BuildContext context, int index){
                        return Container(

                          padding: EdgeInsets.all(5),
                          child: Card(child: ListTile(title : Text('Item $index'),)),



Bottomsheet dragable


Article Contributed By :


Subscribe For Daily Updates

Flutter Questions
Android Questions