Flutter Bottom Sheet :
Flutter Bottom Sheet is a type of menu which is raised from bottom to top and has a options available for user to select.We can also add different widgets like input fields, buttons and more.
Bottom Sheet is a part of material design it provides a better user interface with a dialog view, can be designed according to the user requirement.
Bottom Sheet provides a separate view which is populated over the current screen so we can have more items populated in the available screen space.
These Bottom Sheets are easy to use for users and easily understandable for better app functionality in terms of user interface.
In this tutorial we will be seeing a simple flutter bottom sheet implementation in which we have provided a text and icon to identify it also we can specify sections as you can see in this tutorial.
Flutter Bottom Sheet Video Tutorial :
Go through the below tutorial for more detailed information on bottomsheet implementation in flutter.
Project Structure :
This image provides the flutter bottomsheet project structure implementation.
main.dart :
Initialize with void main() we can specify the default class MyApp()
void main() {
runApp(MyApp());
}
Return MaterialApp()
MaterialApp(
title: 'Bottom Sheet',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Bottom Sheet'),
);
Create a state so that we can draw bottomsheet
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
Add a button to open BottomSheet in screen
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new RaisedButton(
child: Text("Bottom Sheet"),
)
],
),
Adding onPressed() and sometimes this can be made according to your requirements like for example in food delivery apps when you add a item to your cart there will be a bottomsheet opened up to add add-ons.
onPressed: () {
_bottomSheetMore(context);
},
Design a Tile here we are providing the title and icon.
ListTile(
leading: new Container(
width: 4.0,
child: Icon(
Icons.favorite,
color: Colors.pink,
size: 24.0,
),
),
title: const Text(
'Favourites',
style: TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.w700,
),
),
),
Add box decorations to the container
decoration: new BoxDecoration(
color: Colors.white,
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(10.0),
topRight: const Radius.circular(10.0)))
Full Code :
Providing the full code for flutter bottomsheet integration you can also alter the code according to your requirement in terms of design and functionality..
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Bottom Sheet',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Bottom Sheet'),
);
}
}
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>[
new RaisedButton(
child: Text("Bottom Sheet"),
onPressed: () {
_bottomSheetMore(context);
},
)
],
),
),
);
}
}
void _bottomSheetMore(context) {
showModalBottomSheet(
context: context,
builder: (builder) {
return new Container(
padding: EdgeInsets.only(
left: 5.0,
right: 5.0,
top: 5.0,
bottom: 5.0,
),
decoration: new BoxDecoration(
color: Colors.white,
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(10.0),
topRight: const Radius.circular(10.0))),
child: new Wrap(
children: <Widget>[
new ListTile(
title: const Text(
'More',
style: TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.w700,
),
),
),
new ListTile(
leading: new Container(
width: 4.0,
child: Icon(
Icons.favorite,
color: Colors.pink,
size: 24.0,
),
),
title: const Text(
'Favourites',
style: TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.w700,
),
),
),
new ListTile(
leading: new Container(
width: 4.0,
child: Icon(
Icons.settings,
color: Colors.black,
size: 24.0,
),
),
title: const Text(
'Settings',
style: TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.w700,
),
),
),
new ListTile(
leading: new Container(
width: 4.0,
child: Icon(
Icons.account_box,
color: Colors.blue,
size: 24.0,
),
),
title: const Text(
'Profile',
style: TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.w700,
),
),
),
new Divider(
height: 10.0,
),
new ListTile(
title: const Text(
'Logout',
style: TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.w700,
),
),
onTap: () async {
// Add Here
},
),
],
),
);
},
);
}
Output :
This screen depicts the usage of bottom sheet in flutter
If you have any query in this tutorial on flutter bottomsheet do let us know in comment section below.And do like, share this tutorial for more interesting tutorials.
