In one of my previous articles, I outlined how to create a bottom sheet in React Native. In this short tutorial, we’ll see how to create a bottom sheet in Flutter.
This is by far the easiest framework I’ve encountered on creating a bottom sheet. It literally just involves calling a simple method. So this’ll be short and quick.
Getting Started
First step of this tutorial is to create a new flutter project. If you haven’t already installed flutter, check out this article on how to install flutter on your machine.
This tutorial will guide you with a step by step tutorial. Next, after you’ve installed flutter, create a new flutter project.
➜ ~ flutter create bottomsheet_tutorial
Creating the bottom sheet
First, get rid of the initial code that you’re provided by default. We’ll write our own.
We’ll create a floating action button, and on clicking it, we’ll display a bottom sheet. To create a floating action button in flutter, you’ll need a Scaffold. Scaffold in flutter allows us to use Material Design elements such as AppBar, floating action button, navigation drawer and so on.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'BottomSheet demo'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Click the floating action button to show bottom sheet.',
),
],
),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
),
);
}
}
Next up, we'll pass a function reference to onPressed of the floating action button. This is the function where we’ll create our bottom sheet in flutter.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'BottomSheet demo'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Click the floating action button to show bottom sheet.',
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed:() => displayBottomSheet(context),
child: Icon(Icons.add),
),
);
}
}
Now call showModalBottomSheet, this is a method provided by flutter. It takes a context and a builder function. We’ll use an anonymous function as our builder function.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'BottomSheet demo'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
void displayBottomSheet(BuildContext context) {
showModalBottomSheet(
context: context,
builder: (ctx) {
return Container(
height: MediaQuery.of(context).size.height * 0.4,
child: Center(
child: Text("Welcome to AndroidVille!"),
),
);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Click the floating action button to show bottom sheet.',
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed:() => displayBottomSheet(context),
child: Icon(Icons.add),
),
);
}
}
Note: I've used MediaQuery to limit the size of bottom sheet to 40% of screen height.
Conclusion
And it’s done! This is all you need to do to create a bottom sheet in flutter. As I said, this is by far the easiest framework I’ve encountered to create a bottom sheet.
In the upcoming tutorial, I’ll show you how to create a bottom sheet using Native Android.
Welcome to AndroidVille :)
AndroidVille is a community of Mobile Developers where we share knowledge related to Android Development, Flutter Development, React Native Tutorials, Java, Kotlin and much more.
We have a SLACK workspace where we share updates related to new job opportunities, articles on Mobile Development/updates from the industry. We also have channels to help you with any questions, dev-help that you require. Just post a question and people would be ready to help you out :)
Click on this link to join the AndroidVille SLACK workspace. It’s absolutely free!
If you like any article, do give it a share on Facebook, Linkedin. You can follow me on LinkedIn, Twitter, Quora, and Medium where I answer questions related to Mobile Development, especially Android and Flutter.
Top comments (0)