Uiflow
ChangelogPartners | Freshworks
Search
⌃K
Links

Create a layout

To start designing your todo list, create the application layout. This page walks you through every step of the design process, from adding components to arranging them in the Design view's Preview panel.
To create a layout for your todo list application:

Create a container

Before you start adding visual components to your application, add and configure a Container to keep your application organized:
  1. 1.
    Open the Design view.
  2. 2.
    Open the Libraries panel and drag-and-drop a Container component into your app home page.
  3. 3.
    In the Inspector panel, open the Styles tab and adjust the following properties:
    • Size: Set the Width to 550 px.
    • Layout: Set the Alignment to the top center.
    • Layout: Set the Spacing to 10.
    • Padding: Set Padding to 100.

Create the application skeleton

Your application skeleton is the basic outline of your project. This section describes how to block out major spaces and components for your todo list application:
  1. 1.
    In the Design view, open the Libraries panel.
  2. 2.
    Drag-and-drop a Text component into the container and name it Title. This acts as the todo list app header.
  3. 3.
    Drag-and-drop two Container components into your application.
  4. 4.
    Select the first Container and name it Task Input. This is where you keep the components that enable you to add tasks to your todo list.
  5. 5.
    Select the second Container and open Styles > Layout.
  6. 6.
    Set the Alignment to center left and the Spacing to 10. This left-aligns each task in your list and adds 10 pixels of space between each item.
  7. 7.
    Drag-and-drop a Constructor component into the second Container.
  8. 8.
    Name the new Constructor Task List. This is where you keep the components that enable you to display tasks in your todo list.
The application skeleton is complete.

Style the todo list header

Now that you created the application skeleton, you can configure the font style and text for the todo list header:
  1. 1.
    Double-click Title.
  2. 2.
    Open the State tab in the quick selection menu.
  3. 3.
    Set the label property to To Do List.
  4. 4.
    Return to the Inspector panel and open the Styles tab.
  5. 5.
    Navigate to Font Styles and configure the font Size and Font Variant as needed.
    Note: This tutorial only changes the font Size and Font Variant, but feel free to adjust additional font settings.

Create the task input space

After you finish styling your application header, configure the task input space of your application. When the app is complete, this space enables you to input new tasks and add them to the todo list.
To create the task input space:
  1. 1.
    Select Task Input.
  2. 2.
    Open the Inspector panel and access the Styles tab.
  3. 3.
    Change the layout from Column to Row.
  4. 4.
    Change Spacing to 10.
  5. 5.
    Set Alignment to center.
  6. 6.
    Open the Libraries panel and drag-and-drop the following components into Input Wrapper:
    • Text Input
    • Material UI Button
  7. 7.
    Select the Text Input component and open the Styles tab.
  8. 8.
    Set the Width to Fill container.
  9. 9.
    Select the Button component and open the Styles tab.
  10. 10.
    Set the Height to Fill container.
  11. 11.
    (Optional) Open the States tab and change the placeholder to Enter Task.
  12. 12.
    Select the Button and open the States tab. Change the label to Add Task.
  13. 13.
    (Optional) Select the Button and open the Styles tab. In the Border section, change the Corner Radius to 50 to round the button edges.
Your application should now look similar to this:

Create the task list

This section helps you configure the task list space in your application. These steps determine how each task appears in your todo list.
To create the task list space:
  1. 1.
    Drag-and-drop a Container into Task List. Name this component Task.
  2. 2.
    In the Inspector panel, open the Style tab and configure the following Layout settings:
    • Mode: Row
    • Alignment: center left
    • Spacing: 10
  3. 3.
    Open the Libraries panel and drag-and-drop the following components into Task:
    • Checkbox
    • Text
    • Button
  4. 4.
    Select the Button and double-click the text to change the label to Delete.
  5. 5.
    (Optional) In the Styles tab's Font Styles section, set Color to white.
  6. 6.
    (Optional) In the Styles tab's Background section, set Background to red.
  7. 7.
    (Optional) In the Styles tab's Border section, set the Corner Radius to 50.
  8. 8.
    Select the Text component and open the Styles menu.
  9. 9.
    In the Font Styles section, set Size to 24.
Your app should now look similar to this:
Congratulations! You just designed the layout of your todo list application. To start building your application logic, continue to the Enable task creation page.
Sample application tutorials - Previous
Build a simple todo list application
Next
Enable task creation
Last modified 13d ago