Building a Full Stack App with Dart and Flutter | MonoRepo, Melos, and Dart 3 Course

in this video we are going to build a full stack application using flutter and dart and this is going to be really really interesting video because we are going to cover a lot of new topics in this video which will include monorepo malos backend front and shared code Dart 3 features and many more things so if you are interested then please watch till the end thank you so let's get just started with what we are going to build so we are going to build our task application and this application is going to be interesting why because uh this application will have the back end as well and front end as well for backend I am going to use dart frog and for front end I am going to use flutter obviously that's my first choice always so as you can see I am in my terminal and I'll just go back to my photo folder and here I am going to create a new application so the project structure will be very simple um it will have a backend folder a front-end folder as well as a shared folder where we will have the common code for both the client and the server so this is how it will look like I'll give you an idea while we start the development so first of all what you have to do is something which I'll I'm just gonna tell you so first of all you have to install malos or or activate my loss now if you want to see what is malos then we can go to Pub dot Dev and here you can search malos and you can see it is a tool for managing Dart and flutter repositories with multiple packages that's what we call monorepo so mono wrapper is nothing but when you have a single repository with multiple packages then it's it this is what we call monorepo it's a project or it's a package by invertise which is a very well known company in the flutter ecosystem and this is this is how it works and you don't have to worry about a lot I'll just explain how everything works so let's go back to our terminal how we will activate Mallows so you have to write that Pub Global activate Melos and you'll just press enter so as you can see I have already active version which is 3.1.1 which is fine I guess right now what I'm going to do I am going to create a new directory here so I can say mkdir and I can name it let's say full stack underscore task underscore app so full stack task app is my directory which I am going to create and then I can call full stack task app so I am inside that folder now and now I want to create another folder which will have all the packages so I can say mkdir packages which is again a good addition right now I have packages as well now what else you want to do so now we don't have anything right now for example we don't have a pubspec.tml or anything like that so what I can do is I'll just directly open this application inside my vs code that would be a good idea and here we are with the vs code where we have let's let me increase the font a little bit so as you can see we have just a packages folder which is empty which has nothing at all so I'll create a new file here I'll call it pubs pack dot EML right this is how you have seen uh the application so far and you give the name of the particular app which you are creating so uh in this case we can just say task app okay you can name it anything and then we will also set the environment which is for SDK right and rather than 2.7 I'll change it to 2.18 by the way this automatic suggestion which I am getting is because of GitHub Co pilot and I like it so I'm using it but yeah I mean it's your call if you want to use it or if you don't want to use it that's totally fine now we have this Pub spec uh done now we also want to install malos into this particular application but as a developer dependency not as a normal dependency so what I can do here I can just go here and I can say Dart Pub add Melos okay and dash dash Dev this is or you can use Dash D also this is basically to say that okay it says that okay you don't have any pubspec.eml in this particular application okay we actually made it out we have to make it outside packages folder that's the mistake I did by chance so now it's fine let's run the command again and now okay as you can see we have a Dev dependency which is Melos 3.1.1 which is what we wanted right uh apart from uh like we can now create one more file so here I will go and I'll create Melos dot EML so as you know we do all those sort of things using uh like yaml so here also I'll give the probably the same name which is the task app right um then I have to specify the folder of packages so this is my folder and I will just replace it with star that it is packages slash whatever I will bring here and then um I'll also write something for scripts that whenever I want to analyze I will execute a particular command let's say I'll have execute Dart analyze thought okay and uh lies dot okay this is cool so this is uh majorly the part where you know like um we have specified the scripts and everything like the melos.tml and pop spec.tml is ready now here now now's the time when we will use Melos for our bootstrapping so basically we can run a command which will bootstrap this mono wrapper and what is bootstrapping here which will have like which will install all the package dependencies as well as it will basically link all the packages together right so um that's what we have to do but before that um so basically how you can do it I can tell you so you can just run Melos BS for that so right now I'm just showing you because we don't have anything to do because our packages are empty so it does not make sense but yes we will use it again so uh now what I am want to do in the packages folder I want to create um a new folder probably right so for that what I can do I am going to use dart frog as I told you for back-end stuff so let's also activate that so you can go back here and you can also say Dart Pub Global activate and not this but Dart flux CLI okay and once you do that this CLI will be installed and once you have the CLI you can go to let's say CD packages and inside here you can use Dart frock command to create let's say backend you can name it anything else if it's totally your choice but it will take some time and it will do some of the stuff and as you can see we have inside packages now we have this backend folder which has again routes test and whatever so I'll give you a little bit explanation what is happening so routes is the folder the default route is there which is index.dot so whenever you will just go to the local URL slash this will be what you this this is what you will see and then you have another Pub spec dot EML where you have a dependency as dart frog and sub developer dependencies including very good analysis so this is what we have now if we want to run this server inside this back-end folder we will have to go so I can just say CD backend and I'll just clear it and from here I can just say um start frog Dev so basically it means that I want to run it it's similar to yarn Dev or npm run Dev it's it's very similar to that now our server is running at localhost 8080 by default the port we are using is 8080 and our Dart VM service is listening at 81.81 which is good and now if I open this you can see that we have welcome to Dart from this is very cool uh there is one more thing though if you want to know and that is let's see if I do it like that okay I'll just add it here so welcome to dart frog and there's one more thing if I go back to routes and I change this welcome to code poor dart frog then I don't have to restart the server it's automatically gonna do the hot reload for me I will just have to refresh the browser and you can see welcome to code poor dart frog okay so this is all you have you can do which is pretty cool right um that's cool anyway I'll just uh do one thing I'll just close it because right now we don't need it and now we have this thing and we can run it here as well if you want like for example if I go back I'll just copy this URL and I can run it in any browser doesn't matter actually and welcome to code put art frog we can see okay guys so this is uh uh like setup of the back end so far okay we have still a long way to go we have we are not yet done so now the second thing which we want is basically we will create front end right and for front end we are going to use flutter right so uh what I'm gonna do I'll just um let's let's close this server for now and I will just root CD dot dot now we are again in the packages folder now I can write the command flutter create and you can name it anything else but I am going to name it just front end okay so it will take some time and it will create so inside the packages folder you can see I have a front-end folder now which has Android iOS live Mac OS and everything else which is pretty cool this is what we wanted and it's very easy actually now let's come to the main part which is back and front end is done but how we will share code between those things right because um we will be needing that thing so how we can do that we can create another package inside it which we can call shared or task or whatever right so for example um I can create a package here inside CD so I'll I can use the command Dart create okay Dash T which is for template and then I want to like have a template as package so package dot create T package and name of the package let's call it task itself or you can call it shared or whatever you want to call it so whatever I mean we can also call it shared by the way let's call it um shared so that we understand what's happening okay shared uh shared is fine and inside shared you will see again we have a lift folder we have a source folder and we have a pub spec dot EML also with the version 1.0.0 and we have some lints and everything like that so we are mostly done um with all these things so now we have to like I as I told you we have to link all this together right so to do that we will have to add this shared dependency in every package so in backend in pubspect.tml I can add a dependency let's say shared and the version is let's say 1.0.0 and the same thing I can do with um front end which is again here I can add shared 1.0.0 now you can see both of these are giving me an error that the shared thing does not exist okay 69 which is a very useful error code okay now um okay if there is a problem I understand there is a problem how we will fix it because this is happening because this these folders are not linked together so how we can link it again you know if you remember we have to run a command which is I'll go to CT dot dot we are in the root folder and here I can just say Melos BS which is bootstrap and this time this linking will be done okay and now the linking is done so now if I go back here and if I go to pubspec dot EML shared if I do uh let's see what happens so let's say I am in the packages slash back-end folder and if I do flutter Pub get okay share from you can see from path to this this this this so basically we are done with the setup part now uh we will move to the uh main part where we will start writing code we haven't written code as such to be honest we are just playing with the things so far so uh let's start with the shared code first that's what I will suggest so um here I can go to let's say okay shared lib source source we have shared base um something something let's delete this we don't need this and now what I'm going to do inside okay this is something doing this is exporting this at this fine so inside source folder I will create a new um file let's call it entity entity dot art something like this where we will create a class basically what this task will be like so class task and we can have a couple of things like we can have an ID right of this task we can have a title so title we can have um if that task is completed or not so we can have a Boolean is completed okay so this is all we can do now based on this we can create a Constructor for this so create Constructor for this final field which is pretty good and also I would want to make it a named Constructor so I'll just use this braces here and then we will make this required required and by default the completed would be false okay okay because by default none of the task is actually like making any sense right and what else we can do we can also create a copy with method so if I okay I don't have the shortcut here but I can create it quickly so copy with will have again the same thing if you can see it will return a task it will have ID and this this this now we are done with the copy with also we can also have a factory uh for like from map and to map something like that so from Json and to Json we can do where we can see from Json is basically uh we have a Json and from that we want to return a task same thing we can do for um two Json so I can have another map to Json which is what I wanted okay so we are done with this particular file which is having a task file where we have just some of the basic stuff right like how the to-do looks like and we will again like now um this task or to do whatever you want to call it is very very generic right it does not have anything it's just a model file now we also want to perform some operation on this task right so what I can do I can create a new file and I can call it task underscore repo dot dot so this task wrapper basically will decide that what kind of operations I can do right so what I'm going to do is first of all let's import this task entity um I think we can do that or maybe okay one more thing guys ah this uh share dot dot right it can export things now so I will just change it to Source slash task entity dot dot okay so this will fix our error and in the test folder also I can just okay I can just remove this thing right now I mean it's not necessary as of now okay okay leave it now example also is struggling which is fine let's remove this I don't need it so task entity is there in task repo what I'm going to do I'm going to create an interface for it so I can call it abstract interface uh now we we can use this keyword interface by the way if you don't know and we can just make task repo okay and it will have some of the um like methods like get tasks tasks or we can just say fetch tasks you can rename them to anything and then we have get tasks we can replace it let's say get by ID okay and then we have um add task which is fine I guess get task with by ID is making more sense right fetch all tasks we can also do it so let's let's rename them a little bit better that's what we are doing here and what we have ADD delete task update task I think delete and update is fine and then we will import this package shared dot share dot dot whatever okay so now what we have done is we have a shared folder where we have two files one is Task model class one is repository that these are the kind of operations you are supposed to do right and then in the shared we can export both of these things so this is how you write a package by the way so if you are not familiar with writing packages then this is the time where you can learn so yeah support for doing something awesome is what I can read here which is what we are doing so this is perfectly done now see how our architecture looks like is basically we have a flutter um like folder or front-end folder we have a backend folder and in the middle there is shared okay which will give this to do class to backend also and or task class to backend also or this task class to front end also so it will do this um basically this is the um kind of you can say uh declaration here and the implementation will be done by both front and and back end okay now we can go back to backend we can do a little bit of routing and everything whichever whatever is required right so what I'm going to do is I will go to backend folder now so we will start with backend now so backend is here guys let's close this thing so backend is here it is little messy right now so what I'm I'm going to do inside this routes folder okay we have index.dot which is for on the normal scenario right but let's say I want to go to task slash task slash something something so I can create a new folder here and I can call it task okay so basically now when you will go to URL you will have to apply slash task that's that's how it works okay so um so it's basically it is this routing mechanism is using directory based routing so this is directory so this will use it this way okay now it will also have an index dot dot so I can just call it index Dot dot right and then we can do something here uh so it will be like localhost uh Slash task slash uh something okay so now inside it we can also have ID dot dot where if you want to do something with the ID so I can just say ID where the square brackets and dot dot so we we will have these two files where we can do certain things so for example now we will start with um this thing which is the index dot dot so if we take the inspiration from here okay so this is how our response uh structure request and response structure looks like so same thing we will try to do here so what I'm going to do I will create a method called on request okay and what it will do it will take request context I will have to import dart frog here by the way and then it will return a response right but I want to return a future response so I can just call it like this okay and then it will be a asynchronous method and we can remove this thing for now okay so we will get a request either it will be a get request or it will be a post request right so now I am going to use something which was introduced in Dart 3 which was that how you can use switches so you can use switches like this also so yes something like this okay but this is too much I will remove some of the things okay let's let's write from scratch this is not looking good so we will switch for context.request DOT method and then we will have cases so we don't write cases like that we can just say let's say http method Dot get right and for get dot get forget for get we can do something for example we are awaiting let's say uh on get on get and then we will pass the context there okay this is what we are doing for um get same thing we can do for post so for post uh we will just say on post so we'll call these methods in these situations right and then um if there is some other case let's say we will just represent it with a blank then we can just give a response with a status code okay and we can just call it HTTP status dot not found okay we have to import HTTP status dot IO not found yes so I think we are done with okay this is fine I guess so what we are doing why this is giving me error is because ah this is like it does not understand what is on get what is on post so basically we have a switch where we are looking for this method if it is get we will do this if it is post we will do something else and yes this is this is all you have to do now you have to create these two methods also so we can just say on get and we can just say on post right and now you can see the errors are gone but this on Cat and on post is not doing anything so we have to do something for it right so um what I can do is I can so basically what will happen if you'll go to index task index so it will give you all the tasks right that's what um you understand by default right so um let's say we will have to get all the tasks so for example I can write final tasks so it should give me all the tasks right so I can just say await because it's an asynchronous method context dot read so we have read something like that and we can use the task wrapper to fetch all the tasks and we can import it here okay now we have not implemented task wrapper for this back end so we will do that okay because this is right now not available right so we have to make it available otherwise how it will know like what is happening right so this is something which you have to remember that we will need this thing as well that we will have to import this uh like we will have to make this task repo here as well so this is one thing um now um what else so okay well let's do the implementation in front end itself now why we have to do it here okay so we have the tasks here so that means it will give us all the tasks whichever is available and then after that we can have a Json we can get the Json from here right so we can just say um four final task in tasks and task.json to Json so this is for all the tasks in tasks right like if you have let's say six tasks so for every task it will get the Json and it will return it here and then it will create a list of it that's what is happening by the way and then you can just return that response in body as Json and we can just use response.json here okay so this is what will happen when you will do a get request same thing you will have to do for a post request but it will be different it will be opposite of this um earlier you had the tasks then you find the Json and you return it as a response but in the case of post first you will have to make the Json right so I'll just say final Json how you will get the Json we have already written all the methods right so we can say context dot request I'm using autocomplete but you don't have to use it okay and request dot Json I guess you will get and you can call it as map string Dynamic that's how we represent Json right and then you will have to specify the task so not task from CSN we will read this task again from Context so context dot request dot or or we don't have to we can directly use read context.read should be there I guess yes so read will have again we will have to mention task wrapper okay and then because it's a post basically we are adding something right so we can just say dot add task and task from Json okay this something like this and then why this is giving me an error okay because I missed o here okay so basically what is happening we have a Json um which we get from context.request.json and we get it here we have a task where we have context dot read task repo add task from Json and all that now once you have that you will do the same thing return response.json task dot to Json okay so this is what you have to do and you are mostly done with this part now um there's one more thing like for example if someone wants to get a particular task right a particular task then they have to specify that ID right for the task for example I have five tasks one two three four five uh the ID is one two three four five so I will specify this task here ID dot dot okay which will have again two different methods you can say right where one method will be having um sort of you can say that one method will have this like it will expect that string in in in such a way for example let's if we will have to write it how we will write it is basically I'll copy this thing from here for now let's say I copy this here to here so we have a response I'll just import dot frog here so earlier we were just taking context in the parameter now I will also take an ID okay string ID so this is basically to make it authentic okay like if you are asking for a particular ID so give me the ID and based on your ID I'll do something okay so this time on get will be the same but it will also pass the ID here same thing it will do for this and everything can remain same or maybe uh okay so you cannot post it obviously you can put it though and same thing we can do for on post we can change it to on put and same Chase we can do for delete so we can have another method let's say on delete and again you will pass the same thing and this will remain the same now we will have to create three different functions okay one would be for getting for putting and for deleting okay so for getting you have request ID you will just say context dot read task wrapper and we have get task by ID where we are specifying the ID and in the response.json we can just say task.2 Json which is looking nice now we can have for put so for put again we will just say context.request.json as map string then task from Json and then we can use this copy with um actually we don't have to use this this way you can just remove this that is also fine even if you use it like this this I think it should be fine or you can use it like this it's totally your call then you have um an updated task right which you can return as a response so where we have like updated task is context.read dot update task and response dot Json where we will just say updated task.json I think it's fine okay or maybe the good part is that you don't have to actually return anything in this case uh you can just return a normal response blank response because once you update it it does not matter anyway we will fix it later that's totally fine um and then we will have on delete where you will just say context dot request nope we will have to get the Json first of all guys otherwise we want to be able to delete the task I guess okay the autocomplete is not working very well probably um what we can do is context dot reduce fine task prep for delete an ID I think we can directly use the ID also that's fine only okay okay this is um majorly this is correct only I don't blame GitHub co-pilot to write the code for me it's been very helpful thank you GitHub Co pilot you did half of my work already so this looks nice um however um like I don't think that onput and on delete has to return this response as such because you you won't utilize it but it's fine if even if it is doing right now okay now there is one more important thing we have to do dependency injection and how we can do it we can use a middleware here okay so this dart frog actually supports this dependency injection by default okay so how we can do that so um that is also going to be directory based so for example if you want to do something in task then you can specify the middleware inside this for example here if I want the middleware so I can create a new file and it will start like the underscore middleware dot dot same which is uh same thing if you don't want to specify for task let's say you directly want to specify the direct route you can specify another middle uh where here right so this is how it going uh it it is going to work okay but before that before we uh specify all these middle layers and all right we also need some repository as I told you for example if you remember um so backend should have some database right so either we can use in-memory database or we can use some other database let's say post query SQL SQL amongodb anything like that so this task wrapper which you see for example if we go back to this index.dot we can see here we have this task repo and as I told you if you go to this task wrapper this is just um a kind of Declaration right implementation is not done like right now we don't have anything if it's a blank declaration only we have to implement it in backend also and in front end also right so especially in backend because the backend will give the data we want to use it this way directly in front end I'll show you I'll show you but this needs to be implemented in backend for now where we can um like either have a database real database or we will have a fake database so let's do that first okay so uh inside back end I can create a new folder let's they lib because we keep all our things inside live right all our code and then lib folder can have oh no let's create another folder let's say data or model whatever you want to name it and then let's have new file which we can call um in memory in memory because we are not going to use any specific database right now so task wrapper dot dot let's call it okay in memory task repo so what it will do um it will have a class okay let's say in memory task wrapper what it will do it will Implement as I told you that it has to implement something so task wrapper okay what it has done I don't know but let's see what it has done so okay let's remove this I am not very fan of all this Auto generated code okay first of all you will have to import this again okay and then you will have to override all the five missing functions or methods I should say in this case and then first of all we will have to return all the tasks so we can just say list of task is equal to tasks okay let's remove this we don't want it to be private but this is a final list of tasks which we are going to return we can remove the final also that's fine okay now what else uh let's say first of all this is your tasks and uh not tasks let's call it data in fact because we we are not returning data so let's say we have to give this entire tasks how we will give it so we can just say list of tasks get task equal to data so and we can now keep it like this okay like this is as private so whenever you will go to this class you want a task so you can just get it using this tasks property and it will just return all the data with back to you right this is what you can do then we have something called get task by ID this is the first thing which I'm gonna touch so what I'm going to do I am going to return here this data we can use data dot firstware task is Task dot ID equal to equal to ID and I think this should done the job for me there is some issue though let's see what is the issue okay because we are not using asynchronous here so it should be asynchronous okay so basically what it is doing it is checking wherever when you find this ID just return that ID okay now I can also fill this data with some random data okay I'll show you that as well so we are done with the task by ID now let's say we have to add some task how we will do that so let's go here we can again make it asynchronous that's fine now how we will do that we will let's say have new task final new task how you can create it you can create a task dot copy with ID you can just say data dot length plus one or you can use some uuid or anything like that it's totally your call but let's uh use the easiest thing right now and then you can append the data like this data dot add new task okay and then you can return new task no actually not you don't have to do that yeah let's return new task so when you add a task you just return that task and you add it to your in memory database which is nothing but this data okay okay new task is also done now let's say I want to delete it how I will delete it so let's remove this thing here and let's wait for some autocomplete if it can help me or if it cannot let's do it by ourselves let's say data is equal to data Dot uh uh um okay what we can do is we can apply a for Loop four final task in data okay where ID is not equal to ID and then if task is then then you return that task okay that's it so basically delete by ID or delete by task is basically what you provide an ID you have this data thing here okay and you just set the data without that particular ID okay so now it's showing me some error okay because it's final it should not be final guys okay so um this again we can make it asynchronous uh causing null to be returned this is something it is saying the body okay because it should not return anything so make it wide okay I think in the task wrapper we made this mistake that this delete thing should be avoid not a task and now okay that's why this thing was happening so once you are done with this I think you can return a blank response that is fine so you can do this okay I think we are good in the Middle where we haven't done anything in memory database okay so what we are doing we are creating a new data list where we are just using the same tasks which which does not have that ID we are just excluding it that's what we are doing okay this was interesting and now we have fetch all tasks this is very very simple we will just return uh future dot value data or we can just return data that should be fine we can make it asynchronous here so we have just one more thing which is updating the tasks so here again we will do the same thing it will again be avoid by the way it should not be a you don't want to return a task I guess and it will be same thing if it is equal equal then it will return the task as it will return T this thing okay and uh okay we have we don't have to return anything I guess that's fine now this thing needs to be updated guys so how we will update it we will go back to this task repo I was thinking that there is some issue with this and here also we can just make it void and then in the ID again we have this this this this this let's remove it and we can just return a blank response that's fine it just means that the task is updated and task is deleted that's it because we don't have to return anything that's what while I was making it that was in my mind as well now it is saying that there are some missing documentation okay um let's write something over here a class that analyzing in memory list that's fine and then for this also let's say something nice over here return the list of tasks okay so now we are done we have the middle layer also um it is not middleware sorry we have the data class also where we have the in memory list which is doing at task delete task and all those kind of things now what we have to do we have to create that middleware which I was talking about right so how I will do it I will go back to this middleware dot dot here what I can do is I can have let's say first of all I can use my in memory task repo and I can call it task repo it can be null label also by default I guess and I will just import this thing okay we have one thing and then we will create a Handler which will be let's say middleware the name of it will be middleware and we can just say Handler Handler so many handlers and this Handler needs to be imported guys so we can import it using dart frog now we have this middleware and we can just return Handler dot use okay and we can probably um use something called a provider here because it gives me that provider I think so I can use like something like this I guess provider and I can specify let's say task repo and it will just return me this thing okay uh what happened okay this is fine so what it is doing is it is using this task wrapper okay and this task repo it is returning this in memory task repo for example what is happening here why we are using middleware whenever we are going to this index.dot we are returning some fetch all task and all but how where we are specifying that which task wrapper we are talking about here right I mean it's is it a real database or it's a it's in memory database we are not specifying it anywhere so that's where we have to like somehow specify it somewhere so that's why we have used this middleware where we just say that please provide me this task repo as in memory task report if tomorrow you want to change it to let's say you have SQL for example let's say I create SQL something like this so I can write class I ql Tasker Apple implements okay and then I have all these things over here okay so um we will just implement SQL Tasker okay leave it for now but let's say this is this is the case then we will go to our middleware we can just replace uh just change it like this and here I can just use this so this this is the easiest way of replacing the task rep okay so for now we are using in memory task wrapper that's what we need and I think we have done a lot of stuff already um now what else we can do okay I think we are done with most of the parts let's try it guys what do you think so how we can try it in the back end we can just say dart frog diff and we are running it again on localhost which is a very good thing and if I go back you can see that if I refresh it this is fine right but now I can go to yeah here and I can just say slash tasks and it says route not found the reason is because we have uh this as task I should rename it because task does not mean anything I mean it's not a good name it should be tasks okay the name is simple actually why I'm making it complicated okay this is fine now if I go back and okay so now you can see a empty list of tasks so let's say I want to add some dummy tasks so I can go to in memory I have this task over here and I can add some tasks not description bro don't do that okay is completed okay this is something which we need so let's say we have some random three tasks okay this is what we have this is fine so we have three tasks and now if I go and if I refresh okay I think why it didn't work let's do a hot restart guys otherwise we can have some issues okay now if I do slash tasks you can see we have id1 Title 1 task task two task three and now if I want to get let's say slash 1 or slash two then it will give me just ID with two task this this and this is actually working very very well I mean I am not trying put and delete right now you can do it later but um but main task is done I mean main idea is done now guys we are coming to the main part which is the front end part so let's jump into front end okay so for so far we have done uh all these things the front end is not done at all and uh I think it can be very interesting when it comes to front end we can just install couple of dependencies and I think that should be fine so we have to create a little bit UI also which looks a little bit nicer right so let's go back okay so in front end um what I'm going to do I am going to pop spec.tml we already have a dependency called shared I also want to add another dependency so I'll just okay let's for now let's close the server for now we will come back to it uh I can do one more thing guys um I can go to CD packages front end and I can just say flutter Pub add HTTP because we have to make HTTP requests so we will have to add HTTP to this uh this thing okay because front 10 depends on shared any which does not exist what business you could not find packages shared at pub.orgon solving conflict okay this is interesting okay why the shared thing has to be anyway specified because I think that should have been done by malos BS already okay it's fine we will we will take a look and for State Management guys I think you can use anything but I am using my package which is I'm little biased I may use velocity X or VX state so I am going with velocity X for now you can use something else it's totally your call but I like it so yeah okay front end has some problem let's see what is the problem we did Melos PS no okay I think it should be fine only okay um CD front end flutter packages bobcat I think it's fine we have all the things all right so um we are done with all these things we have the front end ready guys before I proceed I just want to tell you one thing that I forgot to do anything with grid so far so let's do that let's create another terminal here and here let's do get in it because it's always good to have all changes inside your git folder git add get commit m initial commit with backend done and share done okay so now we have all the changes here I am happy that we are done with the git part as well now let's do one more thing let's go to front end lib main dot dot we have so many things over here which we probably don't need but let's run it okay so to run it how we can run it now that's a good question because I don't have anything here ready okay it's showing me some error here that please open a folder closer to your flutter project root or increase the value of the dart project search depth string okay this is something interesting because I I am using terminal most of the time so now I got to know that this thing directly does not work because it's does not understand what is this package is then inside there there's a front end so we have to set Dart project search depth okay let's try this as well I don't have any idea like how this works but we can do it let's do this okay and the depth we can specify let's let's say five will this help I don't know five is depth like one two three three is the current depth so it should work I guess um even if it does not work or maybe I will have to restart this project but that's fine I mean let's go back to our uh this front end which is here and here from here we can run this application so let's say flutter run um flutter run that simple I think and uh I can also open my uh simulator guys that will be better I guess or I can use Mac OS also what do you think let's open Mac OS so Mac OS for Mac OS guys we will have to do one more setting um which I don't know if you know or not they by default the ongoing connection like if you make a network request is not open okay it's off by default so we will have to turn it on so let's uh let's see and guys this is taking time this entire video because I don't want to um cut anything I'd want to show you everything which is there right so now if I go where it is running I don't know okay it is running over here somewhere okay so now we have this thing let's do one thing before we jump we go back to our front end we go to Mac OS and let's open it in xcode if you see here somewhere there will be open in xcode is there anything like that no okay or we should have for iOS we can see open in xcode no actually because this is um okay this is let's let's reveal the reveal in finder that's a better call I guess so we have this why it is not showing because of the deep nesting of folders and we have this XC workspace here let's double click here and we can open it this way as well and once we open that I think it should be fine okay guys so we have the xcode here we can okay allow we can go to Runner and here you can see signing and capabilities that outgoing connection is off we can on it and even for release let's on it right now I I we are not doing any release right now but um I mean it's good okay so this is all you have to do and now you can go back and one more thing I can do is I can attach this thing here so it will be better for us to create the UI right so um okay I think this is fine now let's do a little bit changes here in this code or we can also write this code from scratch what do you think let's write it from scratch that is that's going to be always better okay so we have my app basically we can just say async widget flutter binding dot insuring is sliced and here guys I'll create a stateless widget I'm not going to explain what exactly is happening like because it's very simple if you don't know how to make flutter application so the first priority should be to learn that return material app and then we have title and all okay dude we don't need this sorry home also Let's ignore we can just go with theme theme data okay what's what's wrong man const we can remove we can use material 3 by I think it's on by default now but still flooded ammo we can just say task app anything like this okay this is looking fine and we can have one home as well and for home we can just say home page and those two we don't have a home page so we will create a home page here so we will create home page dot tart this home page will again be a stateless widget where we can just call it home page okay and then this home page will have some scaffold where we will have an app bar where we will have our title wherever we will just say um home task nothing much and tasks okay and then in the body uh we can have just a container for now nothing much okay this looks nice now in the main dot dot we can just have a home page like this one second guys this is not helping me okay now we can do a hot restart and you can see the task folder is looking very very blank now um we can also remove this debug show checked Banner false and now we have a very like generic home page which has nothing nothing at all now oh let's do our restart again okay we have this tasks though now what all we can do is we can have a list view we can have um so in the body what we can have we can have a column okay so column will have children right so children will have one will be let's say um we can have a text field which just says that okay that um maybe you know add some task and list some tasks so how I should do it so maybe I can just say that um I just want to have a list view first so I can just have a to-do list View or task list view anything you want to call it on task list review list view okay and this will be expended okay because it will take the all the space whatever it can take so there's one stupid mistake I am doing is not wrapping it before because it's little bit tough sometimes you should use Comas wherever you can so we have to have this task list view okay because we don't have that list view unless we have that list view it does not make any any sense okay so um to do all of these things we will have to like um write all the business logic and do all those kind of things so first of all before I make this list view I can also do one thing guys let's make this code a little bit better so I'll create a folder called Pages I'll create a folder called widgets I'll create a folder called let's say core inside core we can have our repositories and all those things which can be very useful I guess right so let's let's start with the repository okay this task list view we can fix later that's totally fine so uh how I'm going to do it is I have to create uh in the core I have to let's say create a new folder which icon can call data and inside it I can just say remote dot task repo dot dot like in if you remember in backend we had in memory task repo this time we can have remote task repo and how this will work I can just say class remote task repo implements okay this is very much simple to what you have seen already and it Imports this shared folder and then it has five missing overrides you remember this is fun now so again we have delete task add task and all these sort of things which we will fix one by one so let's remove all of these things and now we have to add that so what I'm going to do is I am going to rearrange them so first of all we will have fetch all tasks add task and um second would be fetch all tasks then we will have get task by ID then we will have add task delete task and update task that is fine now fetch altask how this is going to work or even for ad right how is that is going to work so for fetch all task we can have let's say we can create a client over here itself for example we can say final client is equal to http dot client we don't have HTTP yet so we will import it so you can just say import HTTP okay what happened import http dot dot as HTTP okay so we have this client now using this client we can do something okay so first of all we will need a base URL we don't have a base URL as of now so we will have to make a base URL also so how you can do that um you will have here let's say we can specify somewhere else also guys you don't have to do it here for example 88 is our base URL and for fetch all task what I can do is I can just say um final response how you will get it let's say await let's make them asynchronous await client Dot get and you have to pass the URL right so what you have to do is you can just say URI dot parse you will take the base URL slash tasks okay so this will give us the response from this thing okay and also [Music] um you can specify the content type and headers if you want to do that but I think for now it should be fine we will we will test it as well and then once you have that then you can say Json as response dot body as list Dynamic I think this is fine response dot what if we can make it Dynamic ourselves and then we can just return a list so for final task in Json decode which we will use like this and from task from dot Json we can return these tasks okay so this is patch all tasks so basically when you say virtual task it will take the client it will make a get request it will just run all the tasks and this will just return some tasks okay now to see if this works or not okay we will have to first of all remove all the errors otherwise this code will not work okay so add task should return some tasks so let's do this like this okay and this also should return some tasks so I'm just giving some random data to this so that we can remove error from our code and this also we can do later okay or we can do it here itself let's replace it with a container for now Canada okay now um I just want to see what data we get okay so final data is equal to n okay remote task repo I'm just doing this for fun guys it's not something which we are going to do by the way this this will change okay and then we can print this data um and this is not how it's gonna work we can go to main dot dot in fact and here um we can print it maybe um let's do this get data and then we have a data and yeah okay guys so let's do a hot restart and see if this works before that we will also have to make sure our backend is running which is not running right now so I'll just run it 88 is fine I think we haven't specified okay this is fine now let's do this so let's go back to front end and let's do hot restart and we can see something has happened okay we have socket connection failed with operation not permitted socket exception this this this this this is some issue with our on this thing okay let's do one thing um so the connection is failed for sure let's try here as well if this is working or not okay so this thing is working for sure okay this thing is working guys so that means there is some issue with our code now let's try to find out what can be that issue okay so um first of all maybe when we are specifying our getter we are not specifying our headers and when we are showing this we can also call it list Dynamic this is fine oh okay this is fine then we'll see we'll see first of all we are not able to make a connection that's our first major problem so how we can fix it we can fix it and do you remember when we change the outgoing connection did we do right now or when we did so let's do it one more time so that we are sure that things are working as expected so now let's do it one more time guys and once it is running then we will be happy to do this okay we have this thing running and did we get some data already nope what happened main dot dot or we haven't awaited it guys that's the biggest problem oh I'll shut it down by mistake please bear with me as I'm doing some stupid mistakes it's it's it's the thing with coding continuously for some time okay now guys I can see we have instance of task instance of task instance of task that means our code is working we are getting those instance back and now we can use this data to do something okay so let's say if I say data.length then I'm sure that this will give me three because we have three tasks if you remember in the back end which we have set by ourselves right if you go our back end and inside lib in memory task we have these three tasks which are dummy tasks okay we will delete these and we will create the task using our front end itself so that means one thing is for sure that our code is working perfectly fine now uh because this fetch all task is working or first of all guys this is not the best practice to do so I am just going to remove this piece of code because this is I was just checking uh and we could have write some test cases also for doing this by the way this that could be even better okay for example I I can go to my um test folder here and I can write some test over here let's say I can just say um unit test dot dot okay and I can test this here for example I'll just copy this thing why I'm showing you all this okay I can make this example even faster but the point is that you should know what is happening that's the whole point of making this video otherwise I don't care bro I I could have just finished this tutorial as soon as possible doesn't it's it's it's easier for me to do that so test will have description function body so it does not need this and then um we can just have okay so we can just say um final response okay wait no we can just say remote await remote task wrapper dot fetch all tasks and then we can expect this to be three yep now let's run this test let's see what happens okay so the problem we cannot run this test so we cannot run this test the reason is not uh because we are running our application the reason is that it's like we are inside this front end thing I haven't explored this thing honestly I don't know why this does not work when you have nesting of folders in vs code this is not working maybe if I restart it because I have already setted it somewhere maybe restarting can fix it but I don't want it folder and then you have to run flutter test oh this was the easiest thing to do but I forgot and okay I see some exception finally some test has failed okay okay so it's saying that this widget test has failed which is fine I don't want to actually do anything here so I'll just do this and one test has been passed also I guess let's do it one more time guys okay all tests passed so basically this unit test passed if I let's say I write it 2 then this should fail yeah this test failed okay because the expected is 2 and actual is three okay this is this means that everything is working just fine okay so we can test our code here whenever we want to do anything so that's the good thing about unit tests so let's commit it we can just say initial um initial front end is done we can do more into this so right now let's close others let's go back to remote task no not this one where is our uh okay this is this is this is the one now we have done just fetch oil task let's also do get task by ID okay so here in this case what will happen um we will have same response final response client dot get this time we will pass the ID also and then we will get the data and based on that data we will have the response dot body and then based on that we can just decode it and send it back this is fine now the third thing we need is adding the task right how you will add the task so that's one of the uh like this is something which we haven't done yet like post request basically so we can just say um return not return let's say final um response client dot post slash tasks and then we have body Json encode this body and after encoding it uh what we can do we can have final Json response.body and then we can just say this so this will do the add task also for me now I have two more one is delete task and another one is update tasks so let's do the delete part Maybe so here I can do um await client dot delete that's the best thing I should do I don't think I have to do anything else and it should get the job done for me and this is the easiest one by the way and update one is also not that difficult honestly you have to do client dot put and I think because we are getting some response out of these so if you want you can do that otherwise just leave it like this okay so we have done the update delete add get task by ID fetch all tasks so this is what uh was the most important thing for us right to um to make sure that we have those things ready from where we will just perform some operations or do that and that stuff so our DB part is sorted now what we have to do uh like not DB but our remote part is sorted now we have to perform these operations okay how we are going to do that that's the most difficult question right so um it's going to be very easy guys so bear with me and we will quickly do this thing okay so first of all we want to show the list of tasks available to us okay that's pretty much sure so how we can do that um by default um okay one more thing we can do is we can use a package called uuid which can generate ID for us that's something which I am always thinking we should do so how we can do that um or we should set some random ID right now I don't know let's let's install it now what is they are installing so let's do one thing let's say flutter Pub add yoyoid okay uuid is added that is fine now once we have this thing okay let's go back to our home page dot this looks very very empty so first of all we have to make a widget which can give us task list view okay so in widgets I will create this new file which I'll call task list view okay dot dot so this this will be again a stateless widget guys which will be task list View this will have a list view basically list view dot Builder okay and what will happen in this case it's that um or we can use a future Builder also what do you think but I think um this is easier I think yeah okay let's have let's say that we will have a list of tasks here so I can just say list of task all the tasks this will be provided by someone okay so require this dot task we can import it and using this task we will show some index something like this and then it will have a count also item count where we can just say task dot length and it will have let's say um a list style Maybe we can use a list style I guess so import material oh this widgets I didn't need actually material is all I need and here in the title guys we can just say text um data index.title there is data this will be tasks and we have to remove this thing and then in the subtitle we can just have uh I mean this is all we have we don't have a description of it so that's fine uh we can have trailing um icon button no no icon is fine so if let's say tasks index dot is completed is true then we will show icon start done otherwise null okay so what we are doing is we have a list view dot Builder where we have task.length based on all the tasks we will show a list tile where we will show a title of that task and in the trailing if there is if it is completed then we will show done otherwise we won't show and now home page have this task list View which it will import from here and now it has to provide those tasks so let's say right now I am providing empty tasks so it will be like this but if I provide some tasks like this for now so if I do a hot restart here I should see it most probably yes and you can see we have Task 1 which is not completed task 2 is completed over here and task 3 is not completed right so because we have is complete is true so this all data we will get from backend don't worry about it but right now I am working on making the UI so that's why I'm taking my time and then um then we can have a floating action button which will have add task and all those kind of things so or maybe you can go at the bottom and you can add a task we can do anything like that for example what I want to say here is here we can have um let's say in the bottom navigation bar we can have for a text field maybe I don't know text field it can be fine I guess and how does it look I why can't I see anything so far okay so we have a text field okay why because we are not doing hot restart so we have a test field here and uh okay let's give some safe area to this guys so I'll wrap it this body with a safe area widget safe area and this is fine and then I also want to give some padding to these widgets so column wrap with padding of 16 similarly this text field can also get some padding I guess and then again we can give it for 16. and now if I do this this is fine so we have this new task here we can write something here and there and then we can also wrap it in a column so I can wrap it in sorry in a row so wrap with row why I'm doing this because this will be my expanded View this padding can go to row in fact um swap with is there a Mac third call slap with okay it's not there so row entire row will be wrapped with padding this time with 16 and I can make this text field as expanded um like let's do this because I wanted to take the entire screen whatever is possible then I will give some size blocks so I am using velocity I can use the shortcuts but I don't want to use it because you don't you might not be knowing it and then once you have the sized box um I want to have a floating action button which will have child okay okay so it will be like this okay and then this child icon icons let's say something like this can be there okay so now if I do a hard restart okay you can see we have a new task we add something here and we press this button then something happens okay so we have all this tasks on the top we have a button here or we have a text field here based on these something happens okay now uh now comes the main part where we have to perform something based on these actions which we are going to take so how we will do that um so okay let's do this thing um main page UI is done okay now we have these things ready uh what we need is um we can we have to introduce some State Management or something like that okay so how we are going to do that guys so for the Simplicity of the course um I have okay I have used okay let me go to first of all the front end where it is so I have used here velocity X which I think I am not using anymore so what I'm going to do is I am going to remove it and I am going to add VX State here okay so VX state is my um State Management which I prefer or I don't let's not make it complicated let's have this velocity X itself okay I'll show you even if you're using velocity that's fine and if you want to use something else that's also fine okay now uh what I'm going I'm going to do is I am going to wrap this my app with something called um let's say here over here itself I can wrap it with something called VX app or you can use VX state so uh let's use VX state for now there's a difference between vxis State and VX app I'll show you in some time now this VX State takes a store okay so um you can have a store let's say my store and or maybe you can just say task store because this is a task app okay and then this is fine so now in the core folder we will create another folder which will be like store store will have let's say for example task store.tart okay and then we can have another folder let's say mutations mutations will be all the operations so store we have task store so we can just say class task store extends VX store and I think this should be fine and this task store will have some data okay it does not matter what data you want to keep it here but this is fine now we have the store ready we have the mutations not ready but we have in the main dot dot we have the task restore so I can specify this okay now the first mutation is get oil task so I can just say mutation here um get all task dot dot so this mutation what it will do oh okay I made a mistake I should remove this folder the mistake which I did it okay I have this but why it's not working I don't know okay if something is wrong what I did wrong refresh I don't know but I'm not able to click this file for some reason okay let's delete this folder itself okay now I'm not able to delete it as well for some reason this is weird Okay now I can see that the file is deleted okay get all tasks dot dot and here I can just say class get all tasks mutation extends v x mutation task store and yeah think this should be fine and we don't have task here so we can specify in the store that we want some tasks okay so we have this list of tasks here in the store and we get this store dot tasks is equal to this tasks this story does not understand because of this thing and now it can do that but when we say get all mutations what exactly is going to happen so we are going to hit some API so how we will do that we will have let us say final tasks okay we want to specify this thing here this is not we wanted so final task is equal to task repo sync await and we can also do dependency injection guys but for the Simplicity of it let's go with remote task wrapper for now okay otherwise what we can do is we can just say task repo and we can implement that thing here rather than using remote task wrapper we can change it later that's totally fine and this is how we can specify these tasks once this is done I think we get all task notation is done so first mutation is done get all task which is fetching from database and then giving it to this and that so this is uh this is how you write with the vxis state or velocity X this is how you specify it now we can go to main.dot we can go to home page and somewhere we have to do get all mutations right so what I can do is I can um in the main dot dot itself after we call this we can just say get all tasks mutation okay and once you do that actually we have to do it before we make this store so I think we can do it in um my app itself yes this is this is also fine it's totally okay and once you have this we can just do something something once you have the task then what you can do is you can go to home page you can um so this area is where the task will be loaded right um this thing like this column so what I can do is I can wrap it with um let's say with a widget called VX Builder which I'll import and it will have obviously a builder so Builder will give it um context comma store comma status and and it can render based on that and for mutations we can specify that it just listen for get oil task mutation so whenever there is a get all task there is a change from this mutation this widget will rebuild okay that's what it is doing by the way okay now what error we are getting okay we have one missing or what okay I think okay I think um we missed some parentheses somewhere that's what I feel okay I think here we missed it okay I think there is some issue oh okay I think what it has done is it has um oh this padding is done I think it's all good I I don't know what is the issue here column is fine Builder is fine padding is fine safe area is also fine this padding has certain issue for sure so row is fine okay let's do one thing let's remove this okay and then add a padding again okay oh it replaced it with that equal to sign that was the problem okay so guys this is what we have and from here rather than showing this tasks we can just use store.tasks or we can do one more thing we can just copy this and we can just say um if a status [Music] dot is loading okay what is this status we existed this okay status is equal to SQL to VX status dot loading that it is fine otherwise we can do um store as task store okay one second guys thought tasks okay so I'll explain you what is happening so we have a VX Builder where we are fetching for get all task mutation inside the Builder we have a column we this Builder gives us three things when there is a mutation done for example when this operation gets done this is this perform function is completed then it goes to this home page again right and inside this what it does is it get all the tasks uh it it gives you the store and the status so if it is loading then we just saw circular progress indicator otherwise we just us give the task back okay so what I'm going to do is I am going to run this application now finally okay here we are and let's see what happens okay guys we got so many issues why I don't know let's check what issue we are getting the following exception was on perform resized there is some resize issue with the list View oh it's a this is the problem guys this should not be scroll vertical here I think it was added by this thing itself let's do a hard restart and we can see Task 1 task two task three okay and this is not our task this is uh the task which is coming from this back end okay for example if I do let's let's change something here so rather than let's say task one I can name it by iPhone okay through iPhone and the last task is by another iPhone okay now I have changed it let's do a hot restart and let's see if this reflex or refreshes here as well okay we have to refresh the server also I guess no yes dart frog Dev and now if I go back and if I refresh and you can see we have buy iPhone through iPhone and buy another iPhone so basically this thing is working perfectly fine so um now this task we are adding our self we don't want to add it we want to add it using our front end so how we can do that as well so we can add some functionality with these things as well don't worry about that so we will do that um so before that we have to do something when this thing happens right um there's one more thing which I feel I should have done on this task list view should have done this task rather than doing something here so what I can do is we can remove this part from here and we can probably just return the task list view that's it so what I mean is I can just say task list view here okay and we can remove this VX Builder from here okay how this will help you might be wondering um but actually it will help so for example if I go here I can remove this task from here I can make this UI even better that's what I mean like right now it's very cluttered so what I can do I can use the VX Builder here itself and we if we get this thing then I can just remove this thing from here and I can replace this thing from here okay so what is happening here is rather than doing that thing there we are doing inside the task list view because this is the responsibility of this task list view to do all the job okay this is not a responsibility of anything else right and here the tasks length which I am asking is basically inside this store or this thing so how I can do it is I can convert it to block body I can say final tasks is equal to store.tasks or I can also name it I can use it like this um let's say store as task store and then I can say dot tasks okay so this is pretty good um this is doing the same thing which doing here but this is looking better right and uh um when we are calling about new task okay when we are just writing a task we are using this thing so what we can do we can have a controller as well which we haven't specified so what I'm going to do is for this bottom navigation bar this entire thing including the padding I am pushing it as a um let's say okay basically I will extract this as a add task widget okay so this add task widget is here I'll just uh copy this widget from here I'll get it from here and I'll paste it as a different widget so I'll just say add task widget dot dot we can also write test cases for these also this is also fine I mean there is no harm in writing test cases so this is the add task widget and now I can just import it from here and now you can see home page looks very clean right we have a safe area we have a task list to view the responsibility of the list view is fetching the list View and we have a add task widget and here we can have let's say a controller final um task controller will will be text editing controller and we can assign this task controller to um we can have it here as well that's also the same thing because it's a stateless widget so that's no problem and I believe that if you are using vxis State you never have to make stateful widgets as such unless you have to do lot of animation and all those sort of things okay so we have the task controller what I want to do when the floating action button is pressed I want to um do something like I want to add some tasks so I can just say add task mutation and which will have task controller.txt okay so basically it will add a task so now uh this mutation does not exist so in the mutations I'll go back and I'll say add task dot dot okay so here um we can again have class add task mutation and extends this is this this is not what I want I want VX um X build oh sorry v x mutation with task store and then I can have importing of this importing of this and then we will just have the missing function okay and similar to what we have here if you remember in the get all tasks we have this thing so we will just copy this we'll go back here this we can make asynchronous and then we can import this but this time it won't be fetch or task it will be add task and we have to give a task right so this task um is basically we have to create this task okay so final task new task squared to this so what happened with me so I can just have this and we have to give some ID okay so ID I can give like we can use uuid dot V4 I think this should give me what it returns it's written a string okay this is cool then title is task and is completed is by default false right it's anyway Falls only but still and then we can also perform we can get what what it returns at task it Returns the task itself okay we don't need that task to be honest we can just leave it like this and once we are done with this once we get the task [Music] um yeah I think it should be fine it should be fine let's try this let's try this and let's see what happens so in this case when you do this um you also want to make this task controller dot clear because once you have done this you don't need this right and add new task I can write okay we are done with this now whenever there is a change whenever there is a new task which is there so we will want to update our list to you as well right so um we can also say there are two ways of doing it either we call get all task notation again or we can also add that add task mutation when there is some change here then also like you know do something here like update this thing update this particular thing um or maybe get all task is a better call because like if you see here um okay what we can do we can from here we can say get all task notation because somewhere we have to update the list right so now if I go back and restart our server we have three tasks already let's have another task we can call it um go to market I hope you can see it it's here itself go to market and if I press here and you can see we have go to market over here okay I am nowhere saying at any place that this add this task here right and now even if I go to my URL and if I refresh it you can see we have fourth ID go to market but this time it is setting the ID as this right which is not correct right so what I'm going to do is I'm going to go back to my backend and I'm going to fix this thing so um if I go back to my back end I have routes I have this ID dot dot and here if we see on post where is on post okay it's not the ID it's actually the index.dot so in the post part uh we are doing this we have this add task right and we if I go back to my um this data okay see there we are having this task let's delete all these tasks we don't need them anymore or we can just uh do this and here the ID is the problem right so this task we are copying with a new ID which we should not do right so we will just do something like this and then I will just restart my server again just for all these changes Ctrl C and I'll just restart and this time if I'll try to fetch it so once I restart the server these changes are not reflecting anyway but for that we will have to refresh our app or refresh our tasks so what I can do is we can have another button over here guys which can refresh our view so here um in the front end in the app bar home page app bar we can have actions and we can have an icon button which will be refresh okay and this will do nothing but it will just say get all task mutation and now what will happen uh if I do hot restart we have this button here and if I just do this okay now let's add some task here so let's say hello hold if I press this I can see it here okay and now if I do there you can see there is some random ID and there is hello world is completed is false and then I can just say my name is PK okay I can see it as well right so and if I refresh it we can say it so even if we add some data from somewhere else let's say if I want to um like we can use a thunder client let's say we can create a new request and here we can have a post request we can use this URL right and in the body part we can have a Json where we can say um ID is equal to something something something um what it is what is the problem bad string okay now it should be fine um then we can have title and title can be um new client and we can have is completed which we will say false okay so this is our new um this thing new post request we do and we will do send and you can see we get status 200 okay this is done and now if I refresh it here and you can see we have the new client here so this is perfectly working I'm very happy that we are able to do this kind of thing uh now and this request is working so I'll just um get done this thing okay so let's do that at task is done okay this is looking nice now what else how we can improve this UI we can delete also we can update also so I think updation would be too much I am already tired now but but like you can definitely do the updation part delete part I think we can still do if you want I can help you so how you will do it it's very simple um even edit part I can help you in doing but the thing is that for edit we have to make them edit text or text fields and then it will be a little bit boring work but let's improve them a little bit further first of all so in the widgets I'll go to task list View and here in the list style this looks fine but what if I can wrap it to okay maybe this title itself you can make it interesting you can wrap it with a box you can make it and you can give it some random color VX dot random color like this okay this is fine now you can give uh it's some padding so let's say padding of piece 32 okay this is looking a little better we can make it rounded and also we can make the text a little bit better instance Excel dot make and then we can also make it semi bold let's do this okay this is looking much better application now because um yeah it's fun and now we can have a delete icon as well or if it is completed then um we already showing how it will be completed though that's uh that's the main target right how you will make sure that this thing is completed that we can do using update right so that's one thing which we can do so um okay let's do one thing um okay let's do one thing this thing this trailing function is something I will remove it from here and I can add it to Leading okay that when it is completed it will show the done icon in trailing rather I will have a row or a button bar where I will have two children one would be to delete and another would be to like two icon buttons I would say icon button I can start delete okay so this is the first button I can have second button okay now this is the second button I can have first button this will be icons dot done and now if I do a hot restart you can probably not see anything okay button bar is not working basically row let's use row okay this is also not working interesting okay um why it's not working though that's my question okay I think we can just say shrink to true just to make sure that it's not taking all those things I think we will have to give it a specific width otherwise this is not gonna work so what I can do is this row I can give a width let's say context dot screen width percentage screen width percent width into my 10 okay something like this now you can see it here right this is interesting um now this looks fine the main thing is that what else we can do okay let's call it button bar itself we can because give some kind of beautification we can do basically okay uh I'll change the color also of this thing color start green for this and for this we can use color color start red okay this is nice completed okay one more thing I can do is um rather than this leading this will not look good with that this this thing um I can use a subtitle right so subtitle we can just say if um if let's say this okay why we are doing this by the way we can just say final task is equal to this so you can just say task dot title and yeah this is fine if task is completed then we can just say text completed as not completed okay this is sign and now uh when we say done and when we say delete we have to create two different mutations for this so um we can go back to our core we can go back to our mutations and we will have delete task dot dot and we can have update task dot dot delete task will be similar to add task by the way so I'll just copy this thing and I'll just say this accept the fact that I'll change the name and delete task is basically it will take the ID right so it should be like this and okay store.tasks remove where is fine I don't think we should do this right we should rather fetch new tasks so what I'm going to do is I will do this rather that um um a weight remote this where is this thing a remote task for Apple dot delete task and we can have the ID here this is a much better approach in my opinion and then we can just say get all task notation right same thing we can do for I think in update as well like uh update task like update is the name which we will change update task mutation update task mutation and here also we will just say update task update task takes a task so I think we will have to give it a task okay I can just say task and this task we can pass here okay like this and I think this should be fine so now we have all these things ready we can go back here and in case of delete we can just say delete task mutation we have task.id here which is perfect all right and then we have here we have update task mutation again we have the task which we will have to change a little bit where we can say copy with completed as basically the opposite of it okay sometimes it will be completed sometime it won't be completed okay something like this so we have done lot of progress let's see if everything works so right now you can see this is not completed um Okay this not completed is also looking a little bit um okay let's give it some PX it adding okay now if I do a delete button press then we can see this task has gone even if I refresh there is no not this task does not exist anymore I and in the back end also you will see that um the thing will reflect like this only if it if I do it here you can see I have just two tasks now and now let's say if I want to make it completed so you can see this is saying completed if I press it again it will be not completed completed not completed completed not completed and right now it's not completed so if I refresh it you can see it is false but if I go back if I make it completed then you can see if I refresh it is true right so this is how um this app is working perfectly fine we have perform all the operations guys and this is the app is working just fine okay so this is it I think we have done back end front end uh there is a lot more things we can do with this we can make it even better and maybe in the future videos we'll try to make it even better guys but I hope you enjoyed it before I just wrap up this session folks we can make this UI even better and we can also add dark mode uh here we were setting the random color let's remove this thing um let's call it some purplish color for example like this or you can add some other color just in case um you don't like this okay something like this and now let's see how we can add or let's remove it for now what do you think yeah I think it's fine also we can just use the theme um from here like context dot theme Dot card color maybe right and that should be good I think this thing is not working that uh well we have primary color as well uh this is kind nice and based on the primary color the text color we can uh make it let's say for example or white okay this is fine for now now what I'm going to do is um one more thing I want to do before I just add dark mode to this I can make these icons a little bit like rounded or maybe I can add some circle or make make them bigger at least um let's say 30. okay I don't think so that this okay this is increasing but we have to increase I can go to size okay I think this size is fine for the kind of space we have now to add dark mode what you have to do you have to go to main dot dot um this is very easy if you are using velocity X so you have to just change this VX state to VX app nothing else and then in rather than child you will add or maybe you can remove it from here itself or let's say we just remove it from here and we can wrap it here wrap with let's say a builder and we can just say VX app the Builder here will take a couple of things for example let's import it the Builder here takes build context and also okay it gives us app data as well which is perfectly fine and then it is specific we can specify the store which was a word task store so we have just changed to rename it from vxis state to VX app and then it can be very useful for let's say if I used to say set the brightness then this app data has this thing called Dark mode if it is true then dark otherwise it is light and that's it that's all you have to do now to change the dark mode you will have to go to your app bar and here in the actions you can add let's say dark VX dark mode button okay and uh and you can see we have the button over here we can make it single because this is looking better so single icon to true okay this is fine now if I click on it you can see we have dark mode without much efforts yeah this is looking nice now new dark mode added wow this is looking cool awesome yeah this is pretty cool yeah all right guys I hope you enjoyed this video if you did press the like button subscribe to the channel if you want some mentorship or any kind of that thing you can go to topmed.io slash your power and you can book an appointment with me and I will be happy to help with either your resume review or any consultation or anything like that you can read that there and also make sure you are following me on Instagram and Twitter and even on LinkedIn so I'll see you in the next one bye bye take care and let me know your thoughts in the comments that how you feel about this video as well as what kind of other videos you would like to watch thank you so much I'll see you next time

Channel: Codepur

Views: 8,702

Keywords: flutter, flutter sdk, flutter tutorial, flutter tutorials, dart, flutter course, mtechviral, dart ba, dart frog, dart frog flutter, flutter dart full course, flutter fullstack, dart full stack, dart backend course, flutter and dart course

Id: _LhSRbekY5k

Length: 127min 1sec (7621 seconds)

Published: Thu Aug 10 2023