How to show a Bottom Sheet to create a ToDo item - Part 4

In the previous post, we added a floating action button and a component to create a ToDO item. In this post, we will see how to open that component by clicking the floating action button.

Here are the steps:

  1. Go to Logic and add an onPressed event of Floating Action Button.

Now there are two ways to show the component. One way is to show it as a dialog. Another way is to show it as a Bottom Sheet. Adding it as BottomSheet will place it at the bottom of the screen. That’s what we want! So, add a Bottom Sheet to the screen.

  1. Go to Actions and add a Block to Show component as a BottomSheet.

2

Place above two blocks one after the other.

That’s it! When you click on the floating action button, the component to create todo item will be shown as Bottomsheet.

Check the video tutorial for this guide.