Modal Bottom Sheets are an essential UI component in Flutter, offering users additional options, forms, or information without leaving the current screen. Whether you need a simple bottom sheet, a scrollable modal, or a floating navigation bar, this guide will walk you through all aspects of implementing them in Flutter.
What is a Modal Bottom Sheet in Flutter?
A Modal Bottom Sheet is a sliding panel that appears at the bottom of the screen, overlaying the content behind it. It is commonly used for actions, menus, or extra details related to the current view.
How to Make a Modal Bottom Sheet in Flutter?
Flutter provides the showModalBottomSheet function, which allows you to create a modal bottom sheet easily. Here’s a basic implementation:
showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return Container(
padding: EdgeInsets.all(16.0),
height: 200,
child: Column(
children: [
Text("This is a modal bottom sheet"),
ElevatedButton(
onPressed: () => Navigator.pop(context),
child: Text("Close"),
)
],
),
);
},
);
How to Show BottomSheet in Flutter?
If you need a persistent bottom sheet (one that doesn’t close when tapped outside), use showBottomSheet instead:
showBottomSheet(
context: context,
builder: (BuildContext context) {
return Container(
color: Colors.white,
height: 200,
child: Center(
child: Text("This is a persistent bottom sheet"),
),
);
},
);
How to Make Modal Bottom Sheet Scrollable in Flutter?
For scrollable content inside a modal, wrap the body with SingleChildScrollView:
showModalBottomSheet(
context: context,
isScrollControlled: true,
builder: (BuildContext context) {
return DraggableScrollableSheet(
expand: false,
builder: (context, scrollController) {
return SingleChildScrollView(
controller: scrollController,
child: Column(
children: List.generate(
20,
(index) => ListTile(title: Text("Item \$index")),
),
),
);
},
);
},
);
How to Add a Bottom Sheet in FlutterFlow?
In FlutterFlow, adding a bottom sheet is done through the UI settings. Simply navigate to Widgets > Bottom Sheet, then configure its content, size, and behavior in the properties panel.
How to Use a Modal in Flutter?
A modal is any pop-up UI element. showModalBottomSheet provides a built-in modal experience in Flutter. You can customize it further by adjusting colors, padding, and animations.
How to Set Pagination in Flutter?
For large data sets in bottom sheets, implement pagination using ListView.builder and lazy loading. Check out our guide on Best Flutter Charts for Visualizing Income and Expenditure to see how pagination enhances UI performance.
What is the Size of showModalBottomSheet in Flutter?
By default, showModalBottomSheet takes up only the space required by its child widget. To make it cover more area, use isScrollControlled: true and wrap it inside a Container with a specified height.
showModalBottomSheet(
context: context,
isScrollControlled: true,
builder: (context) => Container(
height: MediaQuery.of(context).size.height * 0.8,
child: Center(child: Text("Expanded Modal Bottom Sheet")),
),
);
How Do I Make the Bottom Navigation Bar Float in Flutter?
To make a bottom navigation bar float, wrap it in a Container with padding and a shadow effect:
Container(
margin: EdgeInsets.all(16.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20.0),
boxShadow: [BoxShadow(blurRadius: 10, color: Colors.black26)],
),
child: BottomNavigationBar(
items: const [
BottomNavigationBarItem(icon: Icon(Icons.home), label: "Home"),
BottomNavigationBarItem(icon: Icon(Icons.settings), label: "Settings"),
],
),
);
Customizing Bottom Sheet Colors
Want to match your bottom sheet’s colors with your theme? Check out our guide on Using Hexadecimal Color Strings in Flutter for detailed styling tips.
Final Thoughts
Modal Bottom Sheets are an essential part of modern Flutter app UI design. Whether you’re implementing a basic modal, making it scrollable, or floating a navigation bar, these techniques will help you master bottom sheet customization.
For more Flutter tips and tutorials, stay tuned to FlutterDragon!
