Hi developer in this flutter bottom sheet open from the top of the screen we are making a new flutter tutorial that joins the top and bottom sheets crossword. So in this example, I create a bottom sheet in a flutter with a list view and add multiple items to a list. But this bottom sheet we are open on the top of the screen. when the user clicks on the drop-down button bottom sheet comes to form the top of the screen.
So let’s start to make an example flutter bottom sheet open from the top of the screen start your android studio and make a flutter app and open your lab folder dart file. And follow the below code.
Flutter bottom sheet open from the top of the screen Full source code
bottomShet(){
return showGeneralDialog(
context: context,
barrierDismissible: true,
transitionDuration: Duration(milliseconds: 500),
barrierLabel: MaterialLocalizations.of(context).dialogLabel,
barrierColor: Colors.black.withOpacity(0.5),
pageBuilder: (context, _, __) {
return Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
color: Colors.transparent,
child: Card(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
ListView(
shrinkWrap: true,
children: <Widget>[
ListTile(
title: Text('Item 1'),
onTap: () => Navigator.of(context).pop('item1'),
),
ListTile(
title: Text('Item 2'),
onTap: () => Navigator.of(context).pop('item2'),
),
ListTile(
title: Text('Item 3'),
onTap: () => Navigator.of(context).pop('item3'),
),
],
),
SizedBox(
height: 16,
),
Container(
height: 8,
width: 100,
decoration: ShapeDecoration(
color: Colors.grey[300],
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(4))),
),
),
SizedBox(
height: 16,
),
],
)
),
),
],
);
},
transitionBuilder: (context, animation, secondaryAnimation, child) {
return SlideTransition(
position: CurvedAnimation(
parent: animation,
curve: Curves.easeOut,
).drive(Tween<Offset>(
begin: Offset(0, -1.0),
end: Offset.zero,
)),
child: child,
);
},
);
}
In this above method, you can call on the button tab and any other thing where your want to open the bottom sheet.
child: TextField(
onTap: () {
bottomShet();
},
On the OnTap method, you can call the bottom sheet method and see the output on click on the button.
Read More:-
- Codeplayon Jetpack Compose Tutorial
- Codeplayon Android Tutorial
- Codeplayon Flutter Tutorial
- Codeplayon on Github