FlutterFlow + Xano - Building a To-do List App

In this tutorial, we'll learn how to connect Xano, a powerful no-code backend platform, to FlutterFlow, a popular app development tool. By the end, you'll have a fully functional to-do list application that allows users to sign up, log in, and perform CRUD (Create, Read, Update, Delete) operations on tasks. Let's get started!

Step 1: Set Up APIs in Xano

First, let's set up the necessary APIs in Xano. We'll be using the "To-Do List" template from the Xano Marketplace with a few modifications, along with the "BasicAuth" starter template for authentication.

1. In Xano, navigate to the "To-Do APIs" section. Here, we'll only need the POST, GET, and DELETE APIs.

2. Open the POST API and take note of the following:

• Authentication is turned off.
• It has references from the "To-Do" table.
• There's some logic in the function stack to handle image uploads (which we'll skip in this tutorial).

3. Open the GET API and note the custom query to-do.userId = auth.id, which fetches tasks for the authenticated user.

4. The DELETE API should be straightforward, allowing the user to delete a task.

Step 2: Create a Project in FlutterFlow

1. In FlutterFlow, create a new project called "XanoToDo" based on the blank app template.

2. Delete the default "Home" page and create two new pages: "Login" and "Home."

3. On the "Login" page, add the "Authenticate Solo Alt" widget and remove any unnecessary components like "Forget Password."

4. On the "Home" page, add a tab bar with three tabs: "To Do," "Work in Progress," and "Done." Remove any dummy data or actions from the template.

Step 3: Set Up Authentication

Login API

1. In FlutterFlow, go to the API Calls section and create a new POST API call named "Xano Login."

2. Set the endpoint URL to the Xano Basic Auth Login API.

3. Add two variables: email and password (type: stream).

4. In the body section, paste the schema from Xano's Swagger UI documentation.

5. Replace the dummy data with the email and password variables.

6. On the "Login" page, click the "Sign In" button and set up an action flow:

• Add the "Xano Login" API call, passing the email and password variables.
• Update the local state with the received auth_token.
• Navigate to the "Home" page.

Sign Up API

1. Create a new POST API call named "Xano Sign Up" and set the endpoint URL to the Xano Basic Auth Sign Up API.

2. Add three variables: name, email, and password (type: string).

3. In the body section, paste the schema from Xano's Swagger UI documentation and replace the dummy data with the variables.

4. On the "Sign Up" page, click the "Create Account" button and set up an action flow:

• Add the "Xano Sign Up" API call, passing the name, email, and password variables.
• Call the "Xano Login" API with the email and password to log in the user after sign-up.
• Update the local state with the received auth_token.
• Navigate to the "Home" page.

Step 4: Fetch and Display User Data

1. In FlutterFlow, create a new GET API call named "Get User Data" with the endpoint URL from the Xano "To-Do" API.

2. Add a header with Authorization: Bearer {auth_token} and a variable auth_token (type: string).

3. In the response section, create JSON path variables for the required data (e.g., card_id, user_id, category_to_do, category_work_in_progress, category_done).

4. On the "Home" page, click the tab bar and set up a backend query using the "Get User Data" API call, passing the auth_token from the local state.

5. On each tab ("To Do," "Work in Progress," "Done"), generate dynamic cards based on the corresponding category JSON path variable.

6. Set up the card UI to display the task name, image (if available), due date, and priority status.

Step 5: Implement Delete Functionality

1. In FlutterFlow, create a new DELETE API call named "Delete" with the endpoint URL from the Xano "To-Do" API.

2. Add a variable id (type: int) for the task ID.

3. On each dynamic card, set up an action flow for the delete icon:

• Call the "Delete" API, passing the id from the card's JSON path.
• Call the "Get User Data" API to refresh the page and show the updated data.

Step 6: Implement Create Functionality

1. In FlutterFlow, create a new POST API call named "Create Card" with the endpoint URL from the Xano "To-Do" API.

2. Add variables for the required fields (e.g., task, user_id, due_date, important, category, image).

3. In the body section, initialize each variable and set it to the corresponding value.

4. Create a new tab called "Add" with a form containing text fields for task name, category, a switch for priority status, a date picker, and a button to submit the new card.

5. On the "Submit" button, set up an action flow:

• Call the "Create Card" API, passing the form values as variables.
• Call the "Get User Data" API to refresh the page and show the updated data.

Step 7: Final Touches

1. Delete any remaining dummy containers or actions from the template.

2. Set up a conditional visibility for the date picker text to prevent errors when no date is selected.

3. Test the application by running it in FlutterFlow and ensuring all functionalities work as expected.

Congratulations! You've successfully connected Xano to FlutterFlow and created a fully functional to-do list application with authentication, data management, and dynamic UI rendering. Feel free to explore and customize the project further to suit your needs.