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).

1. Open the `GET` API and note the custom query `to-do.userId = auth.id`, which fetches tasks for the authenticated user.
2. 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.