Bottom up Slide Sheet Flutter

Jagadeesh Marali
2 min readMay 29, 2020

After we click any button in the screen we need to get a sheet from the bottom.

We can use Slide Transition which is provided by flutter but we need to add animations and controllers for that (Refer : https://api.flutter.dev/flutter/widgets/SlideTransition-class.html). We can also use showModalBottomSheet() function which is provided by material dart.In the bellow Example i will be placing a raised button and when that button is pressed the bottom sheet gets triggered.

flutter create <ProjectName> will create a project and in the main.dart file…

Example :

The function slideSheet contains showModalBottomSheet has context as BuildContext and builder and in the “line 40” we had given BoxDecoration for the curved edges but this cannot be seen if we return only

then we will not be able to see the borders cause that is mixed with the background color. So we wrap that container with another container and color it with “Color(0xFF737373) ”

After we click on “Show/Hide”

and we had given Row1 and Row2 as the children we can pass Icons or lists in it.

You can get total code here :

If you enjoyed reading this blog, please consider buying me a coffee to show your support. It would mean a lot to me and help me continue creating content that you love. https://www.buymeacoffee.com/jagadeeshmarali

--

--