ModalBottomSheet in Flutter – Flutter pre-built widgets and tools let developers create modals, dialogs, and bottom sheets. This article will examine Flutter’s ModalBottomSheet for immersive and interactive user interfaces.
What is ModalBottomSheet in Flutter?
It is possible for Flutter app developers to make a bottom-sliding modal sheet using the ModalBottomSheet widget. The ModalBottomSheet widget offers a versatile and adaptable API that can be used to build a wide range of bottom sheets for applications, from static content displays to dynamic ones with inputfields, radiobutton, and checkbox.
Simple ModalBottomSheet in Flutter
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'ModalBottomSheet in Flutter',
debugShowCheckedModeBanner: false,
home: HomeScreen(),
);
}
}
class HomeScreen extends StatelessWidget {
void _showModal(BuildContext context) {
showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return Container(
height: 200,
child: Center(
child: Text("This is a simple ModalBottomSheet"),
),
);
},
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Row(children: [
Image.asset(
'assets/logo.png',
height: 30,
),
Text('flutterflux.com')
]),
),
body: Center(
child: ElevatedButton(
child: Text('Show me'),
onPressed: () {
_showModal(context);
},
),
));
}
}
We create a ModalBottomSheet that centers a simple text message in this code snippet. 300 is the container height, which determines the bottom sheet height. The widget’s current context is accessed by the showModalBottomSheet() function BuildContext parameter.
Customizing ModalBottomSheet in Flutter
Flutter offers many ModalBottomSheet customizations. Properties and widgets let developers change the bottom sheet’s appearance, behavior, and content. Flutter ModalBottomSheet customization examples:
Changing the Background Color
ModalBottomSheet backgroundColor property lets developers change it. This code snippet changes ModalBottomSheet background color:
showModalBottomSheet(
context: context,
backgroundColor: Colors.amber,
builder: (BuildContext context) {
return Container(
height: 200,
child: Center(
child: Text("This is a ModalBottomSheet with a blue background"),
),
);
},
);
This code snippet sets ModalBottomSheet backgroundColor property to amber.
Adding Buttons and TextField
ModalBottomSheet can have interactive elements like buttons and text fields using widgets like ElevatedButton, TextButton, and TextField. ModalBottomSheet button and text field can be added with this code:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'ModalBottomSheet in Flutter',
debugShowCheckedModeBanner: false,
home: HomeScreen(),
);
}
}
class HomeScreen extends StatelessWidget {
void _showModal(BuildContext context) {
showModalBottomSheet(
backgroundColor: Colors.amber,
context: context,
builder: (BuildContext context) {
return Container(
height: 200,
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 20),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextField(
decoration: InputDecoration(
labelText: "Enter your name",
),
),
SizedBox(height: 16),
ElevatedButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text("Close"),
),
],
),
));
},
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Row(children: [
Image.asset(
'assets/logo.png',
height: 30,
),
Text('flutterflux.com')
]),
),
body: Center(
child: ElevatedButton(
child: Text('Show me'),
onPressed: () {
_showModal(context);
},
),
));
}
}
This code creates a ModalBottomSheet in Flutter with a text field and Elevatedbutton. TextField and RaisedButton widgets create the text field and button. Navigator.of(context).pop() closes the bottom sheet in the button onPressed() callback.
Customizing the Shape and Size
Developers can use shape, elevation, and ClipRRect to change ModalBottomSheet’s shape and size. This code snippet shows how to customize ModalBottomSheet shape and size:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'ModalBottomSheet in Flutter',
debugShowCheckedModeBanner: false,
home: HomeScreen(),
);
}
}
class HomeScreen extends StatelessWidget {
void _showModal(BuildContext context) {
showModalBottomSheet(
context: context,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
),
),
elevation: 10,
builder: (BuildContext context) {
return ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
),
child: Container(
height: 200,
child: Center(
child: Text(
"This is a ModalBottomSheet with a custom shape and elevation",
textAlign: TextAlign.center,
),
),
),
);
},
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Row(children: [
Image.asset(
'assets/logo.png',
height: 30,
),
Text('flutterflux.com')
]),
),
body: Center(
child: ElevatedButton(
child: Text('Show me'),
onPressed: () {
_showModal(context);
},
),
));
}
}
This code snippet customizes ModalBottomSheet shape and size by setting the shape property to a rounded rectangle with a border radius of 20 pixels and the elevation property to 10. We clip the container corners by wrapping the Container widget in a ClipRRect widget.
Making the Height Dynamic ModalBottomSheet in Flutter
LayoutBuilder widgets get parent-imposed constraints on their children. The constraints can calculate the ModalBottomSheet content height and set the container height.
Dynamic ModalBottomSheet code:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'ModalBottomSheet in Flutter',
debugShowCheckedModeBanner: false,
home: HomeScreen(),
);
}
}
class HomeScreen extends StatelessWidget {
void _showModal(BuildContext context) {
showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return Container(
height: constraints.maxHeight,
child: Center(
child: Text("This is a dynamic height ModalBottomSheet"),
),
);
},
);
},
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Row(children: [
Image.asset(
'assets/logo.png',
height: 30,
),
Text('flutterflux.com')
]),
),
body: Center(
child: ElevatedButton(
child: Text('Show me'),
onPressed: () {
_showModal(context);
},
),
));
}
}
This code snippet uses the LayoutBuilder widget to get the parent constraints on the ModalBottomSheet. We then set the container height to the constraint-based maximum. ModalBottomSheet changes were also reflected in the Text widget.
Handling Overflow
SingleChildScrollView handles overflow. When space is limited, the SingleChildScrollView widget scrolls its child. Updated code with a SingleChildScrollView widget:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'ModalBottomSheet in Flutter',
debugShowCheckedModeBanner: false,
home: HomeScreen(),
);
}
}
class HomeScreen extends StatelessWidget {
void _showModal(BuildContext context) {
showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return SingleChildScrollView(
child: Container(
height: constraints.maxHeight,
child: Center(
child: Text(
"This is a dynamic height ModalBottomSheet that can scroll",
textAlign: TextAlign.center,
),
),
),
);
},
);
},
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Row(children: [
Image.asset(
'assets/logo.png',
height: 30,
),
Text('flutterflux.com')
]),
),
body: Center(
child: ElevatedButton(
child: Text('Show me'),
onPressed: () {
_showModal(context);
},
),
));
}
}
This code snippet wraps the Container widget with a SingleChildScrollView. When space is limited, the SingleChildScrollView widget scrolls ModalBottomSheet content.
Updating the Height on Content Change
Flutter StatefulWidget and State classes can dynamically update ModalBottomSheet height. A StatefulWidget can hold the ModalBottomSheet content and update its state when it changes. The State class can then update ModalBottomSheet height based on new content.
StatefulWidget code to hold ModalBottomSheet content:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'ModalBottomSheet in Flutter',
debugShowCheckedModeBanner: false,
home: HomeScreen(),
);
}
}
class HomeScreen extends StatelessWidget {
void _showModal(BuildContext context) {
showModalBottomSheet(
context: context,
isScrollControlled: true,
builder: (BuildContext context) {
return StatefulBuilder(
builder: (BuildContext context, StateSetter setState) {
return LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return SingleChildScrollView(
child: Container(
height: constraints.maxHeight,
child: DynamicHeightModalBottomSheet(),
),
);
},
);
},
);
},
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Row(children: [
Image.asset(
'assets/logo.png',
height: 30,
),
Text('flutterflux.com')
]),
),
body: DynamicHeightModalBottomSheet());
}
}
class DynamicHeightModalBottomSheet extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: () {
showModalBottomSheet(
context: context,
isScrollControlled: true,
builder: (BuildContext context) {
return StatefulBuilder(
builder: (BuildContext context, StateSetter setState) {
return LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return SingleChildScrollView(
child: Padding(
padding: EdgeInsets.all(15),
child: Container(
height: constraints.maxHeight,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
"This is a dynamic height ModalBottomSheet that adjusts its height based on the content inside it."),
SizedBox(height: 16),
Text(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec mauris vel turpis elementum blandit. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec mollis quis leo nec hendrerit. Donec venenatis, augue ac elementum euismod, elit urna mollis turpis, quis mollis nisi odio vel nisi. Sed vel semper ante. Donec malesuada nisl nec enim malesuada, vel sodales nulla pellentesque. Nullam vestibulum purus velit, quis laoreet odio luctus vel. Donec eget ligula eu velit fringilla viverra a non lectus."),
SizedBox(height: 16),
ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text("Close"),
),
],
),
)),
);
},
);
},
);
},
);
},
child: Text("Show ModalBottomSheet"),
);
}
}
This code snippet creates a StatefulWidget with a Text and ElevatedButton widget. ElevatedButton presses update the Text widget text. We also set the Column widget mainAxisSize to MainAxisSize.min to minimize its space.
This code creates a StatefulWidget with an ElevatedButton. The button shows the ModalBottomSheet by calling showModalBottomSheet(). When content exceeds space, we set isScrollControlled to true.
Benefits of ModalBottomSheet in Flutter
Using ModalBottomSheet in Flutter has several advantages, including:
- Improved User Experience: ModalBottomSheet lets developers present important information and interactive elements in an attractive and easy-to-use format for a smooth and immersive user experience.
- Increased Flexibility: ModalBottomSheet’s flexible API lets developers create a variety of bottom sheets for their needs.
- Easy to Implement:ModalBottomSheet is simple to implement in Flutter.
Conclusion
ModalBottomSheet provides a flexible and customizable API for immersive and interactive user interfaces. Developers can improve mobile app user experience and create a visually appealing and easy-to-use interface with ModalBottomSheet. ModalBottomSheet can create simple content displays to complex interactive bottom sheets with its wide range of customization options. read too How to Add Swipe Actions Flutter
