DraggableScrollableSheet widget and Attributes

DraggableScrollableSheet widget and Attributes

ยท

2 min read

The DraggableScrollableSheet widget in Flutter provides a draggable bottom sheet that can contain scrollable content. It is commonly used to create interactive and dynamic user interfaces where users can interact with the sheet by dragging and view scrollable content within it.

Key Attributes of the DraggableScrollableSheet Widget:

  1. initialChildSize (double):

    • Specifies the initial fractional size of the sheet concerning the screen height. Defaults to 0.5.
  2. minChildSize (double):

    • Sets the minimum fractional size of the sheet concerning the screen height. Defaults to 0.25.
  3. maxChildSize (double):

    • Defines the maximum fractional size of the sheet concerning the screen height. Defaults to 1.0.
  4. expand (bool):

    • Determines whether the sheet should expand to its maximum size when dragged to the top. Defaults to true.

Example Usage:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DraggableScrollableSheet Example'),
      ),
      body: DraggableScrollableSheet(
        initialChildSize: 0.5,
        minChildSize: 0.25,
        maxChildSize: 0.9,
        expand: true,
        builder: (BuildContext context, ScrollController scrollController) {
          return Container(
            color: Colors.blueGrey,
            child: ListView.builder(
              controller: scrollController,
              itemCount: 50,
              itemBuilder: (BuildContext context, int index) {
                return ListTile(
                  title: Text('Item $index'),
                );
              },
            ),
          );
        },
      ),
    );
  }
}

In this example, we use the DraggableScrollableSheet widget to create a bottom sheet that contains a scrollable list of items. The initialChildSize, minChildSize, and maxChildSize attributes define the initial, minimum, and maximum sizes of the sheet. The expand attribute is set to true, allowing the sheet to expand to its maximum size when dragged to the top. The content of the sheet is a ListView.builder with some sample items. Users can interact with the sheet by dragging it, and the sheet will dynamically adjust its size based on the drag gestures.

Did you find this article valuable?

Support Vinit Mepani (Flutter Developer) by becoming a sponsor. Any amount is appreciated!

ย