How to use a Component as a ToDO Item – Part 3

In the previous post, we created a ListTile component to display a ToDo item. In this post, we will see how to use that component. We will also place other widgets and design a screen.

Here are the steps:

  1. Rename the component as ListTile by clicking the automatically created Component name.
  2. Drag a Column over the screen.
  3. Now drag the component inside a Column. This way, the component will be placed on the screen.

Now let’s place a floating action button at the bottom of the screen.

  1. From the widgets panel, drag a floating action button.
  2. Add an Icon as a Child widget by dragging an Icon inside Floating Action Button.
  3. Choose + sign as an Icon.
  4. Under the screen Properties, we can choose Floating Action Button Location. Choose the location as Center Docked.

This completes our initial screen.
To add a ToDO item, we will design the following screen.


This is a component that will open after clicking Floating Action Button with a + sign.
Here are the steps to design this component.

  1. Add the component by clicking the + sign under components.
  2. Make its width 100% and Reset the color.
  3. Add a Column
  4. Add two Text Fields. Label them as Title and Description.
  5. Add Elevated Button. Label it as a Save button.

In the next post, we will see how to open the above component by clicking the floating action button.
Watch below video tutorial for this guide!