Flutter provides developers with a variety of widgets to create dynamic, responsive, and interactive user interfaces. One such widget is the DraggableScrollableSheet, which is particularly useful for implementing draggable bottom sheets or panels that allow users to interact with content by dragging and resizing the sheet. This widget is highly flexible, offering a range of properties that can be customized to fit different use cases.
What is the DraggableScrollableSheet Widget ?
The DraggableScrollableSheet widget is part of Flutter's layout widgets, designed to create a scrollable area that can be dragged and resized by the user. It's commonly used in scenarios where you want to display additional content without navigating away from the current screen, such as in bottom sheets, side panels, or even custom dialog interfaces.
This widget integrates seamlessly with Flutter’s scrolling mechanisms, making it easy to embed lists, grids, or any other scrollable content within the sheet. It’s a versatile tool that enhances the user experience by allowing content to be revealed or hidden based on the user’s actions.
Related Concepts of this Widget
Before diving into the specifics of DraggableScrollableSheet, it's important to understand a few related concepts:
Bottom Sheets: These are UI elements that slide up from the bottom of the screen, typically used to display secondary content or actions.
ScrollController: A controller that manages the scrolling behavior of scrollable widgets, providing the ability to programmatically scroll or track scroll positions.
Scrollable Widgets: Widgets in Flutter that support scrolling, such as ListView, GridView, SingleChildScrollView, etc.
Properties of DraggableScrollableSheet Widget
The DraggableScrollableSheet widget comes with several properties that allow for extensive customization:
initialChildSize:
Description: Sets the initial size of the sheet as a fraction of the parent container’s height.
Example: initialChildSize: 0.5 makes the sheet occupy 50% of the screen height initially.
maxChildSize:
Description: Defines the maximum size the sheet can expand to, as a fraction of the parent container’s height.
Example: maxChildSize: 0.8 allows the sheet to expand to 80% of the screen height.
minChildSize:
Description: Sets the minimum size the sheet can collapse to, as a fraction of the parent container’s height.
Example: minChildSize: 0.09 lets the sheet collapse to 9% of the screen height.
builder:
Description: A function that returns the content inside the sheet, typically a scrollable widget. The function takes in a BuildContext and a ScrollController.
Example: builder: (context, scrollController) { return ... }.
expand:
Description: When set to true, this property ensures that the sheet expands to fill its parent’s height. This is useful when the sheet needs to fully cover the screen or a specific area.
Example: expand: true.
snap:
Description: When set to true, the sheet will automatically snap to the nearest valid size when the user stops dragging it. This makes the sheet's behavior feel more natural and controlled.
Example: snap: true.
snapSizes:
Description: Defines specific sizes that the sheet will snap to when the snap property is enabled. These are provided as a list of fractions of the parent container’s height.
Example: snapSizes: [0.3, 0.5, 0.8].
controller:
Description: A Draggable Scrollable Controller that allows programmatic control of the sheet’s position. This is useful for dynamically expanding or collapsing the sheet based on application logic.
Example: controller: myDraggableController.
isDismissable:
Description: Specifies whether the sheet can be dismissed by dragging it down past its minimum size.
Example: isDismissable: true.
Sample Code Implementation
here, this is a sample code for this widget...
import 'package:flutter/material.dart';
class homePage extends StatefulWidget {
const homePage({super.key});
@override
State<homePage> createState() => _homePageState();
}
class _homePageState extends State<homePage> {
final ScrollController scrollController = ScrollController();
@override
Widget build(BuildContext context) {
return DraggableScrollableSheet(
initialChildSize: 0.5,
maxChildSize: 0.8,
minChildSize: 0.09,
builder: (context, scrollController){
return SingleChildScrollView(
child: Column(
children: [
Icon(Icons.arrow_upward,size: 50,),
Container(
color: Colors.deepOrangeAccent,
height: 200,
),
Container(
color: Colors.blueAccent,
height: 200,
),
Container(
color: Colors.amber,
height: 200,
),
Container(
color: Colors.pink,
height: 200,
),
],
),
controller: scrollController,
);
});
}
}
Visual Output
This is the output of this sample code....
video link - https://youtu.be/eeHxJoGreHg
In the provided video demonstration, you can observe how the Draggable Scrollable Sheet behaves when interacted with. The user can drag the sheet upwards to reveal more content or downwards to collapse it. The different colored containers represent various content sections that can be scrolled through within the sheet.
Practical Use Cases
Bottom Sheets: Implement a bottom sheet that users can drag up to reveal more content or options.
Maps: Use the sheet with maps to display additional information about locations, allowing users to pull up for more details.
Dialogs: Create custom dialog interfaces that users can expand or collapse based on their needs.
Official Flutter Documentation
For a more in-depth understanding of the DraggableScrollableSheet widget and its properties, you can refer to the official Flutter documentation here. The documentation offers detailed descriptions of the widget’s properties, constructors, and various use cases, making it an essential resource for Flutter developers.