in this video, you're going to learn from Flutter flow expert Doc Williams how to build a real-world app using Flutter flow. It's perfect if you're brand new to Flutter flow and want to learn by building a real-world project. If you like this video and want to learn more about Flutter flow or building with other no-code tools, check out the link in the description to go to our full Flutter flow course for beginners on No Code MBA. All right, let's go ahead and get into the video. In this video, we're going to break down how to create a simple to-do app. This is going to be done in six steps. We're going to go through each of the steps, and then we're going to do this in real time and build out this simple to-do app. So to get started, here are the different things that we're going to be talking about, the different steps that we need when we build this. Okay, so the steps are:

number one need to create a plan. Two a workflow. Three creating the front end of the app. Four is the basic actions. Five is the backend, which is how we store the data or to make our application smart. And then six is the logic. So we're going to go through those six different steps throughout this video. Let's start with the planning session section. How can we do this? Well, you can do this in a couple different ways, but the main thing is you have to get your ideas down on paper or in a program. You can use something like Lucid chart, Sketch, and I'm going to use Market plan. But the summary is you just need to break down to understand what your app is going to do. What kind of app are you going to build? What is it going to do? All of those things. Then adding the workflow, it allows you to plan out and really diagram what you're going to do. So Lucid chart, a lot of people

like using it sketch is a great option as well, especially if you're going to work with another um developer, uh developing team later on and really build it out. We'll talk about it in a later lesson in this course, uh, and then I'm going to use Market plan. Market plan is usually made to create Market, um, like marketing funnels, different things like that for a business, but I like it because you can create um diagrams very quickly and I build out all my apps for my clients and my students this way. So, uh, what does this look like? Well, Market plan allows you to have different pages, drop them in, and then be able to rename them. That's how I use them, use it. So, right here, we're first going to, um, and allows me to plan and write stuff out here. So, the first one is like the plan. So the plan is I want and let me zoom in so you can see right, so I want to create a to-do list app. What do I need?

to do I want to add a task so so I can remember to do it. Now, that's the basic version of creating a plan. Now, the main thing is you're going to try to imagine what the narrative of what your user is going to do. Right now, I'm creating a simple to-do app for myself. I want it only for myself and then go from there. What does success look like? I want to write down or remember what I plan to do for the day. It's really important that you make it really simple and then add on. A lot of people will be like, I want to create the next YouTube or create the next Uber app. And that's great, that's fine. You may be able to do it later on, but you have to first break down the narrative and what are the actions you're going to do for the application. And then also too, you've got to really write down like why would someone use this versus what's out on the market. And that's

something a lot of people might feel like push off, like well, no, I'm just going to create it, but when you're spending the time creating applications, you want to really make sure, is there something on the market? Are you going to be for a different niche, a different industry, or you going to have your own flair on it? You've got to really write those things down too because a lot of times people might just say like, well, I'm going to just create it because I know that popular, but this is going to take some time, so you have to really make sure you understand all of those different facets as you're building out and ask yourself the hard questions as you're beginning. So but again, we're starting with a simple to-do app so we understand how we start, you know, being able to use different templates, all those things, so that's just something to keep in mind. So here we have the plan. I want to create a to-do, uh, list app. I want to add tasks so I can remember, um, to do it.

so let's back out how would I do this well when I'm building out in um in Market plan. I'm going to start adding pages. So the way that you add pages, you just click pages, and then I can drop them. Once I drop a page, it will let me rename them. I can view instead of saying like landing page, I can say I can do like app homepage, okay? So then when I click it, click return. Now I have this, and then I can add more pages. So I went ahead and already created um the two pages that we the pages that I think I would need. Number one, a homepage which would have the task summaries of like all the different tasks I have to do. And then I need another page. I'm imagining for creating new tasks. So I enter a form and I say hey do this X Y and Z. And then it's going to add more pages onto my homepage summary so it helps me remember um right now I need the basics so I need to

create a new task on page one so they would be 
clicking new task, and then on page two, it would   allow them to add a new task, and then it's going 
to take them back to the homepage. That's what I'm   thinking, right? So I have everything written 
down. I have the homepage. I need a new task, so   I need a minimum of two pages, and that's what I 
need, okay? So that's what I'm going to create. So   this is, and again, start simple, and then you can 
add on. Maybe you want more features to favorite   them, all of those different things, but just to 
show you what you need to think about as you're   going through this process. What are the MVP, the 
minimal viable products? What's the bare minimum   that I need to do first, build out to make sure 
it works, and then add on features. So what I did   was I first went to a plan. I did the plan. The next 
one was the workflow. I created the workflow here.

in Market plan, the next part is creating the front end in Flutter flow. So what do we do? So first of all, we're going to sign in to Flutter flow. But make sure also to, if you haven't already, create a Firebase account. This allows us to create storage for our application and for all of our projects that we're going to be showing. We're going to be using Firebase unless otherwise noted. We'll talk about other options in another module in the course, but we're using Firebase, and there's a lot of great things that are integrated for us to use it very quickly and easily with Flutter flow. And that's why we're going to do it. So we're going to create a to-do list app. We're going to add tasks. And so now we have our list. We need to create the front end. So we need to create the pages. So first, we go to Flutter flow. We're going to go to our dashboard. Once we go to our dashboard

we're going to click new on the right-hand side, and we're going to start create from blank. But we're going to first name it, and we're going to name it something that is unique. So, to-do list MVP, and then I'm going to say unicorn, something like that. And then I'm going to add like 1717. Uh, then we're going to say create. So, we're going to create it. It allows us to see a name right here, the project name. We're going to add it. Okay, we're going to add some other things for the name of the package name. And it says, this is the package name for your app. It is used to uniquely identify your app on the Play Store. It must be unique across all apps in the Play Store. The Play Store will return an error if your package name is already in use. That's huge, especially if you're bringing in, like you're using a template and you don't change this first. You have

to change the package name so this is crucial. So if you want to submit it to the App Store, it's going to be um unique. So please do that, okay? We're going to select a theme. We're going to just say like modern. No, no, no, no, no, we'll do purple tones, right? So we're going to click this. We're going to enable for the web. Says this will enable the web platform support for your project. Later, you can make any modifications to the platforms that you want to support in the settings page. So we're going to use it says set up Firebase. In order to use Firebase in your app, you will need to enable this and set up a Firebase project. We're going to do that. You can also do this later in the settings page. Let's just start. So I'm going to say next step here. And then I'm going to say create project. Now, this allows me to see the project name, which is great. I'm going to pick a project.

region. This basically allows us to know where the 
data or where our backend is stored in the cloud. Right here, and it says, Select the region for your 
Firebase project. This is typically where you or um, where your or most of your users are based. Your 
project's region cannot be changed once created, so if you're going to be mainly using this for 
ones in the United States, you should pick one in 
the US. And if you're in Europe anywhere, pick one 
accordingly. I'm going to pick United States. I'm 
going to do um, yeah, I'm just going to do United 
States. United States. It's going to say, Sign in 
with Google. This is where it's really important 
that you already make that account in Firebase 
with that Gmail account. You want it to be the same 
as your a Gmail account you've signed up for, if 
possible. But I think it just, for simplicity's sake, uh, 
is the one that you did with FlutterFlow. And now,

it's creating the project. So now it's doing all of the. It's setting up the backend for you. So it says, We're creating your Firebase project. This should take three to five minutes. You can navigate away from this page in the meantime. This is awesome. Okay, so we're going to start building. All right, so we now are on the homepage, right? We're on the homepage. So we're going to bring this back over here. What are we going to do? We're going to have a homepage, and this is going to be task summary. All right, so we have homepage, and um, yeah, we're just going to keep it homepage, and we're going to start building out the homepage. The first thing that we're going to do is have a title. Title, and we're going to click on the text, and from there, we're going to see that on the right-hand side, in the section where we can now change things in the property section, we're going to change it.

to be homepage right. So if I click this and I 
say homepage, I can have homepage right there. I   can redo it and say my tasks. All right, so maybe 
I'll do that. Okay, so we have the homepage there,   and next we're going to be adding something. So 
how do we add this? In the previous lessons, we   went through all these different sections. Uh, I'm 
going to go to the widget tree, and I'm going to   see that I can have. I can check on the whole app. 
I can see app bar. I can see column. So what are we   going to do? We're going to go into search for 
widget. We're going to go to list view. Now this   allows us to see a summary of different things in 
a list. This will allow us to see all of our tasks   nicely stacked together. So we're going to take the 
list view. We're going to drop it into the column,   and then we have it there. Now to make sure it's in 
the right area, we can go to the widget tree on the

left-hand side, the widget tree will allow us to see what we just built, right? What we just did there. So, we have a column there, we have a list view, right there. So that's beautiful, the list view looks good. Now what we're going to do is search, and we're going to bring in a card. We're going to bring in something that will be, um, for us to have our tasks. So, we're going to go to the top where it says widget pallet, we're going to click that. And you see right over here where it says template, we're going to click template. Once we click click template, we can now be able to search for very specific templates. After we click on it, might take a second for it to think about its life or something, and I have many pages, so it might just take a moment as we're waiting for it. But once you click templates, it's going to give you different options and everything like that. So, uh.

once we have the templates, we're going to be able to search for different aspects that we can have in our app. So just imagine, remember, where we're having widgets, but then we're having components. We're having things that are multiple different widgets together or different elements together. That's what we're doing. So we're going to look for something. What we're going to look for is we're going to look for card 36. So we're going to type in card 36 here, all right. And card 36 allows us to have a task, a task item, and this would be something that would be really good for us. So we're going to bring in the task item, we're going to put it in the list view. Okay, so now we have the task item. Okay, so let's see if we can zoom in for a moment. And if you see this now, the task item, we have the task type, the task description, and then we also have the date and things like that for us.

what we're going to do is we're just looking 
at task title and a task description. So like, what we should do for the task. Right now I'm 
not going to mess with um this section where   it's the update and the due date, all that stuff. 
I'm going to uh delete that, okay, I don't need it, okay, okay. So what's left is my task type. 
I tap task description, so I'm going to click   into the text for task type. I'm going to say, uh, 
task title. For where it says task description, I'm   going to pretty much leave it there, I think. Now 
I might just have task description right there,   so that way I know like when I'm going to look 
at my list, I'm going to look at my task title,   my task description. Now I have that, that's good. 
But remember, I need a new task button. So what am   I going to do? I'm going to bring over, I'm going 
to click the button over here, I'm going to drag.

it in. I'm going to drag it down below. You see how it's indicated right there. If I switch it's going to highlight where it is. I'm going to put it right there. And now the button is here. Now once I have the button I'm going to change the padding a little bit. I'm going to change the padding to like 50 um. And you know what, let's just have the padding like 25. All right, so we're just getting some padding for the button, okay? So we have the button right here. And what do we say, the um, the button is going to be, it's going to be new task. So I click the button here, it's going to say new task, okay? So we have the basics of what we need right now. We have the homepage, which would be the task summaries. And then this page will again, it will have more here, and we'll talk about in a second. But we have all the different tasks, we have the button where it says new tasks, and then will

take us there. So now we need to create another page for creating new tasks, right? So how do we do that? The next portion that we have to do is go and make a new page. So if we look at this section where it says 110%, right next to it will say add new page. So I'm going to add a new page here. I'm going to say create blank, and we're going to say a new task. Okay, so we're going to create the page, right? So now this is blank again. So we're going to go back, and we're going to change the name. We're going to say a new task for the title. Okay, now we've got to think about what do we need to do for this page. Well, we need to submit a form so we can add a new task into our project. We need to add a new task. So how can we do this? Well, we go back to the build section.

here build section and we're going to look like uh for validation, and this is the form validation so what does this do? This allows us to submit a form and validate it. What does validate simply mean? It allows us when we get a response we can validate, say yes, that's the right response, and then we can decide what we're going to do with it. So the simple thing is we're going to create a form so when we put in a new task, a new title, a new description, it's going to say yes, that is a valid um task, and we're going to add it somewhere. So let's add a form validation. We're going to bring it in right here, then we can go back to the uh the widget tree and see where it is. It's in the right section. We're going to on the right hand side of the form, we're going to make it infinite, so we're going to make it wider right there, and then what we're going to do is add a column in this uh

form, and then we're going to add um more text fields, so we can give a response, right? So we're going to put a column, we're going to put a column there, all right? So nice and easy. So now we have a column there, and then what we're going to do is put in a text field. Let's put in a text field. Now we can look for a text field, we can scroll all the way down and find it. We're gonna add two text fields, one, and we're going to go back, we're going to add another one. Now, why are we adding two right here? Why are we adding two? Well, this now allows us to add um a task title, a task description, so we have that, that looks beautiful. What do we need to do next? So we're in a t, we're in one of the fields, right? So let's go to label, label here, and if you look at this, we're in this section. Let's scroll down, and if we scroll down where it says label properties, this is label.

here I'm going to say task name so we have the 
task name. That's where we're going to put our   answer. The next one is the text field. Here we're 
going to now name it, uh, task description. Okay, so   now we have a new task that would be added. Now 
what's the next thing we got to do? Remember, if   we look at our Market plan design right here, uh, 
we have to add, add a button that says new task.   So we're going to go up, create a [Music] button, 
add it, add some padding right here. Let's do 15, 15   here. And what is the button going to say? Well, the 
button is going to say, let's go back, says add new   task. This video is brought to you by Noode MBA, a 
no-code learning platform. If you like this free   preview of our Flutter Flow course, check the link 
in our description to go to our complete Flutter   Flow course for beginners, taught by Doc Williams, 
the same instructor that you're learning from in.

this video to learn more about flutter flow and 
other no-code tools. Okay, let's go back into the video. Add new task. Okay, so again the button 
is going to be, we're going to write our new task. It's going to say add new task. And 
then it's going to take us to our other page, the homepage. And then we'll see more 
of our tasks for us to, again, see all of our tasks that we need to do. Now we have that. We 
did the front end. Now we're going to do the basic actions in the basic actions, how we actually 
navigate throughout the app. So we're going to do two different things here. So first we're going 
to go back to the homepage. We clicked homepage. And first we're going to change the column, 
and we're going to go over here, click column, and we're going to scroll down, and we're going 
to see we're going to do something to the column.

we're going to make it allow scrolling so this 
going to be when we have more records. When we   have more um tasks, we're going to be able to 
see more on one page. So we just did that, okay.   The next thing that we're going to do is we're 
going to add new task this button where do we   want the person to go when we want a new task. So 
now we're adding the actions to go from homepage   to new T page. So once we click the button, we're 
going to go. On the left hand side, you see how   we've been in the properties section. We're going 
to switch over to actions. We're going to click   on actions. And where it says action flow editor, 
we're going to click open. And then this allows us   to open and create different things based on 
actions, right? So we can do on tap, double tap,   on long press. We're going to just do it on one 
tap. We're going to click add action now on ADD.

action what is it going to do on ADD action we can make it do something. So we're going to have it navigate to and we want it to the new task page so when that clicks something it will then now go to the new task page. Okay, so on the uh new task page let's go there let's change the add new task. We want to do something and we're going to have um some some basic things that it's going to do and we're going to um we're going to have it just navigate back to the homepage. So we're on the new task page we're going to add more things that this button is going to do with the form but for right now we're going to just navigate to the new task page. Go to the action we're going to go to open open for the action flow editor. We're going to say add and we're going to just do a navigate. We're going to uh we can search for an action or we just go to navigate to we want to go

navigate to Home homepage. Okay, so now we have the basics. When I click one button, it will take me to one place. So when I go to the homepage, it will take me to the new task. And when I go from the new task, it will take me to the homepage. Now, before we can test it, we have to be able to navigate and look at this Firebase setup. Here, if you have any errors, it will require you to solve the errors before you can run it or preview it. So we're going to do this, and we're going to just look at a time. So it says Firebase setup project uses Firebase performance monitoring, but Firebase config files are not uploaded. If I click this, if I click anywhere there, it will take me to what I need to do. So this page is what I need to fix now. The config file is down here, right? So if I click autogenerate config files, let's see if I

do that. It will ask me, Do I want to do this config? and it's saying, Generate files. Let me see if I do it, going to think about it life for a moment. And let's see if we do this action, will it fix what needs to happen. We're going to wait for a moment, okay? And if you look at that now that we did the config files, look, now we have green lights all the way across, right? Green lights. So for right now, what we're going to do is now we see how we debug. And there's another module that we'll talk about, you know, if we run into this, what do we need to do. But remember, it's going to be looking at what our errors are and then going from there. Now that we have that, we can actually run in test mode of what the app will look like. So it's going to take a few minutes. It's going to make an instance. It will take a couple minutes. So as it's doing that, there's a couple other things.

that I can be doing in the back end um that 
are additional. You don't have to do it but there's reasons why you might want to do this. 
So right here it says enable off on Firebase. This is like authorization, so if you're going 
to create a project using Firebase and you're going to have different users and you 
need authentication, I would turn this on. In general, I'm going to turn it on. So if I 
click this button, it's going to take me to my project. We'll say get started and you can decide 
how you want people to authenticate or do that for your sign-in, right? So I'm just going to do 
email and password, but you can do a bunch of other things. Twitter, GitHub, all those things. 
I'm just doing email and password. So I'm doing email and password enable. I'm going to say save 
and then if I want to do sign-in methods later on, and I'm going to do email and password, 
that's what I already set up, okay? And then it.

says enable storage on Firebase. I want that. Uh, you also need to enable Firebase storage, so I'm going to click on this, especially when we're saving our files, right? So I'm going to say get started. Now, here is a major thing that I would keep in mind to start in production mode. This allows you. It says your data is private by default. Client read-write access will be granted on a specified by your security rules. So, okay, so this is good. That means that everything is going to be secure automatically. There'll be good things there, but also too, you can decide. Do you want on production mode if you're going to be creating your app long term and really build or do you want to do test mode? Now, test mode says your data is open by default to enable quick setup. However, you must update your security rules within 30 days to enable long-term client read-write access. Um, you can decide what you want to do. A lot of people do production mode right off the

bat um it's up to you. There's other benefits 
going back and forth with test or production. We'll just do production right now, right? It will 
say, Where's your storage location? We already   said which one it's going to be, so it's going to 
set that up, and it's saying, Uh, creating default   bucket. Imagine like a bucket holding water. This is 
going to store our information, right? It's holding   something, so it's holding our information. It's 
setting that up, okay. Let's going to think about   it's life, and as we do that, um, I'm looking at my 
app now, right here. This is the basic app, right? I   haven't added anything yet. Let's see what it 
does when I say, New task. Takes me to the new   task page. When I click Add new task, takes me 
back to my homepage, all right. So we now have   seen that we've got some functionality, we've 
got some things, um, the storage is set up now, okay. So I'm going to exit that, exit some pages, 
okay, have that while I'm here, I'm going to, uh.

the Firebase storage. I'm going to deploy, um, yeah. I'm going to deploy this too. Uh, are you sure you want to, uh, deploy these storage rules? Yes, we can change this later, but we're going to deploy this as well. Okay, so we have this all set up, and as we do this, let's look at our list. Okay, so we set up the front end, we created basic actions, and we just tested it, right? We just tested the basic actions of what we want in our app. The next part is setting up the back end. Now, this is allowing us, even though we have the buttons set up, that doesn't mean it's saving the data, right? It's not saving our information. We have to set that up. So what we do is we navigate, we navigate over to the connect section, Firestore. And then from here, we're going to be able to create a collection. The collection, just imagine this like on a Google sheet, like a page or a sheet that allows you.

to store data in like columns and rows, we have to set up the database so the application remembers how to store the information. So we're setting the framework of the data being saved. So we're going to create a new collection. Let's go with a create, uh, create collection name. Let's do tasks, okay? So remember, this is like a page. Now here we can collect different, we can have different templates for it. We even have like a section where we could do a to-do task right there. But for this exercise, we're going to start from scratch. You can even generate with AI, but it's really important that you first think about and know the structure that you're looking for, and not just having AI do it. I'm always like AI assist, so think about what you need to do and then ask AI, but don't just assume because you ask it, it will do it perfectly. So that's why I would use a template or do it from scratch, just get used to it and then go from there. So we're going to, uh.

start from scratch now what we're going to do is have a field name and I'm going to say task uncore name, and the data type. Now there's a full Flutter flow article about the different data types, all of those things, and there's another lesson where we actually talk about it in those in detail, but for this to have a name, letters, and everything, it's going to be a string. So we're going to do task name, that's a string, the check mark, we're going to click it for actions, and then we're going to say task description, right, and that's going to be a string too. So we have that, very nice, okay. So we have all of those things, now we're going to manage the content here. So when we go here, we're going to add a couple different documents. Now the way that we set it up, you can also upload a CSV if you have it, but it would have to be set up correctly, right.

columns would have to match so the columns it would have to be like task underscore name that would be one column to hold all the task names and then you know task underscore description so it had to be structured out the way it's done but we're going to just add a document right here we're going to say task name um we're going to say get cat food uh go to petsmart after work all right so that's one task that I have to do and you see when we did it it has an ID that it autogenerated and then it has the task name task name is get cat food task description go to petmart after work we're going to add one more we'll say [Music] um pick up dessert from store so that will be the uh the title the task name and then we're going to say don't forget to buy Apple P something like that right so we have that we'll add that okay

so now that's going to be a record in our uh 
in our application. Let's see if this is going to have it um show up here on on the homepage. 
So we added the backend. Let's see. So we added scrollable um let's see if we, yeah, we might have 
to add more things or something. We'll see what it does. It's thinking about its life. Aha, okay, so why is it not showing up yet? 
Okay, we're going to get into a little bit more details in a moment, but it's showing up in my 
database, but it's not showing up here yet. Hm, why is that not happening? Okay, so now we're 
going to go into the logic. So logic has to do right here, logic after we set up the back end. 
We have to tell the app what it's doing and just because we have certain things, it's missing 
things, right? So it's missing certain things what to do. So it's almost there, but we 
need to build in the logic on each P. So we're on

the homepage for a second. We're going to click list View, and from list view, we want to have a backend query. So we want to have this section to be able to reference or understand the documents that I just made, the stuff that I just put in about cat food and everything. So I click on list view. Right there, I have list view on the side. Then I'm going to click backend query. From there, I'm going to say add query. I'm going to click query collection. And then I'm going to go for a collection. I'm going to say tasks. That's what it is. I'm going to the query type, which is list of documents, all the different things that I'm looking for. Right? And then I'm going to click confirm. It's going to say create backend query. By adding a backend query to this list view, you are telling it to generate its children dynamically from the return list of tasks. What does that saying? Basically, the more records I have, it's going to make more cards.

so I'm going to see all of the selected items. Do I want to do that? I'm going to say confirm, okay. Ah, and look at this. Now I have all of these different things here, right? But that's not it. I don't want it to just be here. I need to tell it, right? I need to make my application smart. I need to give it logic. Um, I need to give it more detail of where they should put the information, right? Where does it go? So now I'm going to click the task title, and after I click the task title, I'm going to go over here in the property section. And where it's for the tasks, right here, I'm going to click these orange dots right here, and this is going to be here. And then I'm going to be able to set from variable. So what I'm going to do is task document. I'm going to click this. So this is getting the information from the query. It's going to be okay. What do I want to have dynamically?

want to have the task name there and look now it 
shows up task name. So we're going to do the same   for task description. We're going to click that 
here. I'm going to click the orange ones right   there. It's going to say, What do I want to do? 
What do I want to look up? What's the variables?   What am I looking for? I'm going to bring in task 
description. Okay, so now let's see if we um, instant   reload to see if we can see some difference 
right here. All right, so we're going to go to   the homepage. We're going to see some things for a 
moment. Okay, it's going to think about its life, and   when it's doing this, it might 
take a minute. So don't worry if you can't see it automatically. Have to wait some time, okay? So 
it might be thinking about it. Okay, but now we   see that it's going to be dynamically. It's going 
to be generating something. Okay, so we have that.

okay, so we have the new task. It will take us to. Remember, navigate us to the new task. Let's go to the new task page. And what we need to do with the new task page is we need to now add some things to the submit, right? So we need to make it smarter. So remember, we can't just say add a new task and then we don't know where it's going to go. We need to do some things for it. So we're going to click the add new task button. And then we're going to open Action flow editor. And then we're going to add some more actions, actually, to it. So first, we need to make sure that the form understands it has to validate or say that the responses that we're adding, it's going to say okay, it's going to be okay. So we click the plus sign. We say add action. And this time, we're going to say validate. Says validate form. We're going to move it up to action one where it says action one.

says form validate form. Then it will say select form to validate. We're going to say form one. This is form one so we know what to do. Next thing is we need to add a record, right? So if people add a title and description, we need to see it. So we're going to click the plus sign right there. Click the plus sign, click the plus sign. And then we're going to add an action. And then what we're going to do is um, we need it to do something on Firebase. So we click Firebase. You see where you say Firestore. It'll say create document. Click a document right there. From there, it'll say create document collection tasks. Because that's going to be the collection. Now we need to set up the fields. So let's set up a field. It says add field. Now the first one will be task name. Um, if I click task name type, it's a string. Now it says value source. We're going to switch it to from variable.

and then we're going to say see that it's unset. We got to change it and we're going to switch it from widget state to um text field so it'll be uh text name right. So we're mapping it out. So this is just saying an a backend call. So we're saying when it validates, when we're getting the response, it needs to create a new row in the database. It needs to create more information. It needs to um, excuse me, it needs to add more to the um database. So we have it for the task name. We have to map it out for the task description as well. So we said, uh, the field. We click the down arrow. We have the field. It says task description value. Source. If we drop it from variable, we're going to do it again. Um, widget state task, uh, description. We have it there. We go. All right. So we can click it again, open it. It has three actions, right? And we see that's good because we get error free, right?

there no errors detected, so it's going to validate. It's going to back do a backend call, and then it's going to take us back to the homepage, right? So we have that. Now we have this done right here. We're going to look at our options. What we're going to do, we're on the um logic step, so we need to have it click a button, create a new T oh, or from the homepage go to the new task create a new page or create a new task, and then take us back home. That is the sequence of events. So we have that. That's great. There. We're still getting error-free. It will have a warning, but we'll talk about that in a little bit. Um, but that looks good. So what we can go here, we're going to first see if we can do an instant reload here. Let make take some time, and depending on what's going on with um just the platform and everything, it might take some time um to load and everything, um, but we'll

be able to we have a version of this to be able 
to look at this. Okay, so it's allowing us to go   to the page. Um, I'm just going to say get dog food, 
go to store. Okay, and then add new task. It's going   to allow us to add a new task right there, then 
go from there. Now right here, because we're even   seeing a reload on the front page, we might just 
have to wait and wait until the session is over,   and then be able to, um, see what we've just done, 
but what we'll do in the meantime, we're going to   go back out, and you're going to be seeing, uh, what 
this looks like, right? So we just created the page   name task, task detail of this, um, what we're 
going to do is we're going to generate what   it looks like. We just, we did this as another task, 
same exact thing, another thing of the same exact   app. So, name of task, description, all those things 
again. It just takes time, but let's fast forward.

and let it generate, and then we'll see it. So let's look on the back end what it looks like. We had name, task detail, so same thing as description. We can manage. You can see what we have on the back end. We have a bunch of different ones like new cat toys, grocery order, and you can see our different things that we have here. It's generating in a moment, and then um to keep in mind too when we have the settings, we're going to have um be able to let everyone be able to create, read, write, and delete. We're going to do that for this seg for this section right now because again we're doing this for only one user. If we were going to have a bunch of users, that's when we have different uh ones like tagged user, authorized user, but because we're using this for our personal use, we're actually going into the settings and making sure that our deployment rules. Everyone is allowed to do it, so it's going to allow us to see the test version in a

moment. It's going to think about its life. It's thinking. It's thinking. I have a lot of pages open. So, okay. So you see this. Now you see an option of okay. I need to buy a new anime order on Amazon. Uh, new task now also two. We'll talk about how to add buttons at the bottom too to go to different pages. But remember, we're going to use the new task. Click there up here. We're going to scroll up. Hold on. Come on there. Go Amazon. Let's go here. Do I need to order more dog food? Um, buy on Amazon, right? We click submit. Okay. And now we have scroll down. We have the new right here. We just said I need to order more dog food. Buy on Amazon. So we have all those things now. Um, so we did it. We went through it all. Those things match up. It works. Now the question is, I have a navigate bar. How would I create a navigate bar for the app? If you want to do this, you go to the page that you want to go. So like

homepage on the right-hand side where you can 
the detail section. I would say, or the third   uh, third section. Scroll down, and that's where 
you can say, show um, show Navar. I'm showing the   Navar. I can label it home. I can have different 
icons. I can change the icon, all those different   things, and then I can go to settings, and then 
Navar here, I can say, show Navar, or don't show   it. I can do, show nav bar, right here. I have two 
different things, homepage and new task. So on   the second page, I go over to new task. I can say, 
show navbar. And right here, I just said, add note,   or note add, and then that allows me to say, new 
task. And again, I added a new image. I can say, add,   or anything like that, and you can use an image 
like this, and change it, and you'll be good to   go. Then at the bottom, you see the two different 
icons right here, and that's how you create an app.

now this is a simple to-do app. We had it being able to create one, and then you can be able to display all the different uh actions or different tasks that you need to collect or do. There are many different things that we're going to talk about later on in the course where we can add different actions, be able to do bowling or like on-off things, be able to add different things, but it's important to understand the fundamentals of first creating a database, a simple database to store information, create the front end, and really everything that we talked about doing everything in order. So the plan planning out what kind of app you want workflow building it out in a in a you know diagram building the front end in flutter flow building the basic function act or the basic actions by building it out building out the backend by saving information making the application smart and then the logic once you have that and you've just been able to do this

as you follow along, the next portion is, and we talked about it a little bit, but making sure that as we have issues, to be able to debug what's happening. And this is the process of creating your Simple app. In the next video, we're going to be talking about how to debug and what that means and all of those things for your app. I'll see you in the next video. I hope you enjoyed this video. If you want to learn more from Doc or from other no code experts teaching other no code tools, check the link in the description to get our full Flutter Flow course for beginners. And when you sign up for the Flutter Flow course on No Code MBA, you get all of our other no code education, including Bubble, AI Glide, Zapier, Airtable, and more. So leave a comment if you have any questions and be sure to subscribe to our channel to get all of our future content on YouTube right here. Thanks again for watching, and I'll see you in the next video.

How to build an app in FlutterFlow: step-by-step tutorial for beginners (2024)

💡 ABOUT NO CODE MBA
We want to teach the 99% of the world who can’t code how to change their life building apps, websites, and automations.

Our mission is to make building online accessible to anyone who’s curious and willing to learn. No-code democratizes the digital economy. Instead of having to $10k+ to hire a developer or learn to code, No Code MBA makes education for building apps, websites, and automations accessible to anyone. 

Discover more at https://www.nocode.mba


How to build an app in FlutterFlow: step-by-step tutorial for beginners (2024)

How to build an app in FlutterFlow: step-by-step tutorial for beginners (2024)

Scripts