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,
})

Properties

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

Example

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  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,
      ),
      home:Material(
        child: 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://i.pinimg.com/originals/ca/76/0b/ca760b70976b52578da88e06973af542.jpg',
                  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 Container(

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

output

Bottomsheet dragable

Article Contributed By :

2432 Views

Projects By category