Build a task manager app

Tools: Flutter Flow, Square Guide on how to build a task manager app using Squarespace and Flutter Flow This is a core need and the main area for many productivity-boosting app ideas. Today, we will create our own mobile app to manage our personal tasks. You will learn how to develop an app to manage your daily tasks using Flutterflow and Firebase tools. We will set up a database on Firebase, link it to FlutterFlow, create data collections from there, and design the user interface in such a way that the user can register, log in, add tasks, and manage his own tasks.

Tools In this exercise, we will be using Flutterflow and Firebase. - FlutterFlow is an online app builder that lets users quickly build native apps. Build fully functional apps with Firebase integration and API support. - **Firebase ****is a Backend-as-a-Service (Baas) by Google. It can be used to create your database and link it to other front-end development platforms.

Use case > We have chosen to develop this scenario with these tools as an example of a use case where the client is asking for a native app with basic user registration functionality, and data collections with straightforward CRUD actions to add, edit, and delete data.

Steps - Click on “Create Project” - Click on the Settings button on the left, then choose “Firebase” - Go to Firebase and put the website's information such as “Add the email” - Go to the Google cloud platform - Add roles “Service account user” and “Cloud functions admin” on the email added and save all modifications. - Go back to firebase and go to the Firestore database - Click on “Create database” and then activate the start in the test mode button - Go to Project settings and copy the ID - Go back to Fluterflow and paste the ID you copied and save the changes. - Flutterflow has been linked to firebase - Start with the website, choose a name for it - Arrange the interface by modifying the colours and adding the website's logo - Add a button and change its size, colour, and name (login) - Add another button and name it (Register) then change its colour and size to match the size of the button that was added a while ago - Click on “Create Page” and choose a login page - Start designing an interface for the login page - Add the logo - Add textField with proper size and colour and field type as (Email) - Add textField with proper size and colour and field type as (Password) - We have designed the account creation page in the same way as before - Now let’s create the homepage of our app (we called it “RobinDo”) - Go to the settings and choose the Authentication start page when launching the application and the page after logging in - Start designing the database for users - From the collection create a table with the name Users - Add the appropriate action on the Login Register buttons - Go to Firebase - From the firestorm database, choose collection and start creating a Users database so that those registered on the site will be saved here - Go to Authentication and choose Email/Password and activate it while saving the modifications by pressing the save button - We are still inside Firebase - Go to Firestore Database - Choose the start collection and give it an ID and then start creating a database for the todolist - Fill in the options (task name) (task description) (task due) (task state) - Return to FlutterFlow and add a collection, name it Todolist, and create it - Refill the same options as step #4 in the to-do list - Start designing the RobinDo page - Add a Row within the Column - Add Container within the Row - Add a Column within the Container - Add a text within the Column - Fix the order of the fields on the RobinDo page 1- Complete the work on the design of the RobinDo page 2- Work on the “My tasks” section by adding a place to write with the select button 1- Start designing the components 2- Click on Create Component and create a new one 3- Adjust the size 4- Add a new Container after clicking on Column and adjusting its colour and size 5- Add text inside Row, adjust its location, and modify its colour 6- Add TextField inside Row and name it (task name) 7- Add a TextField inside Row and name it (task description) 1- Start adding action to Components 2- Click on Add actions and select the date/time picker 3- Select the Add button and add an action to it by selecting the Query type and placing it as Document from Reference 4- Specify the collection, source, and User Record Reference We have made a small tweak in the action add and added a Floating action button to the RobinDo page to add tasks. 1- Create the finish task page by copying it from my task page 2- Start adding filters to it by going to Backend Query 3- Go to Firestore Settings 4- Click on display for Firestore Indexes Congratulations! You are ready to run and test your app by registering as a new user, adding your tasks, and experiencing a wonderful feeling of achievement!