Scribd
Upload
14 views6 pages

Bottom Sheet

The document provides an overview of Bottom Sheets in Flutter, detailing three types: Persistent, Modal, and Draggable Bottom Sheets, along with their use cases and implementation examples. It also includes customization options and best practices for performance. The final thoughts emphasize the importance of choosing the right type of Bottom Sheet based on the specific use case to enhance user experience.

Uploaded by

ismailovich1904
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
14 views6 pages

Bottom Sheet

The document provides an overview of Bottom Sheets in Flutter, detailing three types: Persistent, Modal, and Draggable Bottom Sheets, along with their use cases and implementation examples. It also includes customization options and best practices for performance. The final thoughts emphasize the importance of choosing the right type of Bottom Sheet based on the specific use case to enhance user experience.

Uploaded by

ismailovich1904
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼

▲▼▲▼▲▼
tags : #coding #flutter
references : Widget
▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼
▲▼▲▼▲▼

Flutter Bottom Sheet: Everything You Need to Know


A Bottom Sheet in Flutter is a UI component that slides up from the bottom of the screen and
provides additional functionality or information without navigating to a new screen. It can be
used for actions, menus, forms, or any interactive content.

Types of Bottom Sheets in Flutter


1. Persistent Bottom Sheet
2. Modal Bottom Sheet
3. Draggable Bottom Sheet (Custom Implementation)

1. Persistent Bottom Sheet


A Persistent Bottom Sheet stays on the screen even when the user interacts with other UI
elements. It's commonly used for navigation or to keep relevant information accessible.

How to Use Persistent Bottom Sheet


To create a persistent bottom sheet, use the showBottomSheet() method inside a Scaffold .

Example Code

Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: () {
showBottomSheet(
context: context,
builder: (context) {
return Container(
height: 200,
color: Colors.white,
child: Center(child: Text("Persistent Bottom Sheet")),
);
},
);
},
child: Icon(Icons.add),
),
);

Key Points:

Stays visible even when tapping outside.


Can be dismissed by calling Navigator.pop(context) .
Use cases: Showing quick actions, navigation, or persistent options.

2. Modal Bottom Sheet


A Modal Bottom Sheet is a temporary UI that appears on top of the current screen. It blocks
interaction with the background until dismissed.

How to Use Modal Bottom Sheet


To create a modal bottom sheet, use showModalBottomSheet() .

Example Code

Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: () {
showModalBottomSheet(
context: context,
builder: (context) {
return Container(
height: 300,
padding: EdgeInsets.all(16),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text("Modal Bottom Sheet", style: TextStyle(fontSize: 18,
fontWeight: FontWeight.bold)),
SizedBox(height: 10),
Text("This bottom sheet will close when you tap outside."),
ElevatedButton(
onPressed: () => Navigator.pop(context),
child: Text("Close"),
),
],
),
);
},
);
},
child: Icon(Icons.menu),
),
);

Key Points:

Closes when tapping outside or calling Navigator.pop(context) .


Covers only a portion of the screen.
Use cases: Temporary menus, actions, form inputs.

3. Draggable (Custom) Bottom Sheet


A Draggable Bottom Sheet allows users to drag it up and down, adjusting its height
dynamically. You can implement this using DraggableScrollableSheet .

Example Code

Scaffold(
body: Stack(
children: [
Center(child: Text("Main Content")),
DraggableScrollableSheet(
initialChildSize: 0.3, // 30% of screen height
minChildSize: 0.1, // Minimum height (10%)
maxChildSize: 0.9, // Maximum height (90%)
builder: (context, scrollController) {
return Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
),
child: ListView.builder(
controller: scrollController,
itemCount: 20,
itemBuilder: (context, index) {
return ListTile(title: Text("Item $index"));
},
),
);
},
),
],
),
);

Key Points:

Allows users to resize by dragging.


Remains on screen but can be minimized or expanded.
Use cases: Search results, dynamic filters, media players.

Customizing Bottom Sheets


1. Making the Bottom Sheet Rounded
Use BoxDecoration with borderRadius :

return Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
),
child: ...
);

2. Full-Screen Bottom Sheet

showModalBottomSheet(
context: context,
isScrollControlled: true, // Makes it full screen
builder: (context) => Container(
height: MediaQuery.of(context).size.height, // Full height
child: Center(child: Text("Full Screen Bottom Sheet")),
),
);

3. Bottom Sheet with TextField (Avoid Keyboard


Overflow)
Use isScrollControlled: true and wrap content in Padding :

showModalBottomSheet(
context: context,
isScrollControlled: true,
builder: (context) => Padding(
padding: EdgeInsets.only(bottom:
MediaQuery.of(context).viewInsets.bottom),
child: TextField(decoration: InputDecoration(hintText: "Type here...")),
),
);

Best Practices & Performance Tips


✅ Use isScrollControlled: true for dynamic height.
✅ Use DraggableScrollableSheet for flexible, resizable sheets.
✅ Use showModalBottomSheet instead of AlertDialog when actions are needed.
✅ Use GestureDetector inside the sheet to prevent unwanted dismissals.
✅ Keep UI minimal and focused—don’t overload bottom sheets with content.

When to Use Each Type?

Type Use Case Blocks Dismiss on Tap


Background? Outside?
Persistent Bottom Quick actions, navigation No No
Sheet
Modal Bottom Menus, forms, Yes Yes
Sheet confirmation dialogs
Type Use Case Blocks Dismiss on Tap
Background? Outside?
Draggable Bottom Search results, filters, No No (but user can
Sheet media players minimize)

Final Thoughts
Bottom Sheets in Flutter are powerful UI components for displaying quick actions, options, or
additional information without interrupting user flow. Choosing the right type—persistent, modal,
or draggable—depends on your use case. With proper customization, you can create sleek and
intuitive bottom sheets for a great user experience! 🚀

Would you like an advanced example or a specific implementation for your projects?

You might also like