Name: One Day Builds: Time Management App Built in Flutter
Uploaded: 2020-03-30T06:15:36.000Z
Duration: 17 min 39 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

Past simple

So it's time for a one day build, and today we're going to be building a time management at, and I thought I'd use the flutter framework to build it.

Future simple

My ideas that I'll be making some of these videos where I attempt to build something during the span of one day, and I want to mention that this is not meant as a tutorial, and I'm not an expert at this, So I'm basically learning as I go along, and I'll probably be making a lot of mistakes.

To-infinitive

And if and when I do, please feel free to comment and share how this could be done better, I think this would be nothing but good biggest.

Then other people will learn from it as well as me.

I hope this will be somewhat entertaining anyway.

So the app that we're building today, I'm really excited to build, and it's gonna be that kind of will display a visual representation each day as like a circle or a pie chart.

So basically, how I see my days, ISS s a circle in the after.

This will be a pie chart and you'll be able to divide or Let's say that you won't do task one, which is work from six thio nine.

Then this will automatically add this to the pie chart and you will have a block of time here, uh, represented in some color.

And let's see, you want to work out 10 to 12 it will fill this in automatically into the graph, and that will be a different color.

And then I want you to be able to have repeating tasks.

So maybe you do You work out from 10 to 12 every every day, and then I'll repeat this'll block of time will be selected every day for working out.

And now I'm gonna do just write out some requirements and start thinking about what classes I'm gonna need.

So the first thing that I'll do is just create the folder where l keep my all right.

Once I've done this, I will start a gift harbor depository, and I will publish all the code here.

So if you want to have a look and try it yourself, you can.

And yesterday I wrote up some quick requirements for the app.

I didn't spend a lot of time looking at all the different requirements, and I think I'm gonna probably come up with some new ones while I'm building it.

But this is gonna be the basic layout or idea of the app, but we'll start out with this.

And now I need to figure out how to get a flutter project started.

All right, so I think we've got it all started.

All right, so now we have the flutter demo, uh, or the first up that you get, which is to stay counter out.

And, um yeah, now it's time to get started with actually building out the real app.

So now what I like to do is just create folders for the different classes that I need.

And basically, I only need one class, so I'll make if over Yeah.

Okay, So now basically implemented the first, the first implementation off the task class, and then the occurrence classes down as well.

And I also decided to add a user class that has a list of all the tasks which will be like the main a place where we add and create new tasks.

And now I think I can start to actually build some of the you right to try to start to make simple versions of adding tasks and removing tasks.

All right, so now I've built out basically the very, very basic implementation of adding a task.

And, uh, if we run it and I type in a name of a task, let's say work and then I press add it should prince the name of the task, which it does here.

All right, so this is the collapse of the basic layout of what I'm thinking.

It's gonna look like when you create a task.

I wanted to be able to get a can overview of what I need to add to the screen.

I thought I'd tell you kind of how I look at this and how it works with flutter.

The whole thing is gonna be basically called.

Um, So what I'm thinking is that this is gonna be one color, and this is gonna be the second column.

And then within the first column to this will be a container, and then it will have basically rose, and each row will have a container.

So basically, this is one row, second row, third row, and then that row in itself has a column, which is The first column will be the text Monday, and then the second column will have the box to tick and same thing for the next one.

Save the next one and then for this column.

We have another column inside this, Yeah, one.

This and the top column will have probably about two rows of something where I'll put thymus the title.

This will be a column this then ISS a row that has from.

And then the time picture of some sort of I don't know exactly what I'll use for the time picker.

Same thing here and then the sisters about.

So this basically makes it so that I can see what what I need to build, and it'll make it a bit easier when I start to actually build it out.

Okay, so now I've basically got the implementation for creating the task.

So basically, here you can select which days this happens.

So let's say you were on Mondays and Wednesdays and you start that, uh, nine Hey, and then you pick the end time and let's say that is 12.

When you press create task here, it prints what days?

So they said the days that you work Monday, Wednesday, and from nine until 12.

All right, so I think I'm may have actually managed to get to work now on gum.

And this is representative of a, uh of 24 hours, and let's say we word, then we create task.

So this is now gonna be work, and this part is free time.

And then we think we can add another task as well.

All right, So this is the This is the first graph.

Now, the next thing is to figure out how to display every day.

I think I like the full representation when you see the entire, like, the full screen is filled up with.

It s so I think I'm gonna make, like, one page where you can see, um, seven days displayed.

And then if you press one of the days, then it will pop over to another view where you'll see just this day and maybe a list of all the tests.

And now if I add a task, uh, stuff D and we'll say that we study on Tuesday, Thursday and Saturday.

Then this should basically add this to the to the already existing flight charts.

It worked, but I didn't have anything on a already existing day.

Let's just say and it's home one day six thio eight.

And, um, now I just need to add the Saturday or Friday, Saturday and Sunday.

All right, So what we have left to do is basically, we need to make sure that the's all of these diagrams are bottoms, so that when you press one of them, you get to a new screen that displaced the, um that is this.

So it displaced the specific day and that graph for that day and then at least double the tests that you have on for that date.

And now if we press Monday, we get a view off that date more detail.

And now what we have left to do is we need to add a list underneath here with all the tasks.

So, basically, what I'll do is he'll implement some sort of list you all right?

Slow week now, now without the titles work.

So from 5 22 to 1922 and then the total time, let's spend to do anything.