Placeholder Image

字幕表 動画を再生する

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

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

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

  • Let's get started.

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

  • So that's the idea of the at.

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

  • All right.

  • 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 this is the third 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.

  • Call him inside.

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

  • And then this will be a column.

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

  • No.

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

  • Yeah.

  • Okay.

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

  • All right, so now it's completely blue.

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

  • And now what?

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

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

  • So let's say d wait, create.

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

  • All right, so this works.

  • I just tried it out.

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

  • Now we start at 6 a.m. Okay.

  • And then we end at nine.

  • I am.

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

  • Yeah.

  • Did I think it?

  • I think I maybe didn't added.

  • Okay.

  • Yeah, it did.

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

  • Yeah.

  • So it added it to the Monday chart.

  • So that works.

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

  • Um, yes.

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

  • So it's coming together.

  • Slow week now, now without the titles work.

  • So that's the title of the task.

  • And then the time.

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

  • So that's two hours yet, and then you can just add keep adding new tasks you can see OK, four hours spent study on dhe, two hours spent working.

  • All right, so it iss now eight o'clock at night, and I've been sitting since about seven this morning.

  • So, cuz up here, it's been 11 hours from 10 minutes, and this is how far I've gotten.

  • Uh, you can see the layout with the days, and you can add tasks.

  • You can select what day you want to add the task and start time.

  • And in time, and then we'll show up here.

  • And then if you press here, you can see the day and then you can also delete the task that I think that's enough for today because I am about fall asleep.

  • So I didn't get it done in one day.

  • But tomorrow I'll come back to you and, uh, finish it off and we'll show you the result route.

  • All right, so it's the second day.

  • And, um, last night, I spent some time working on sorting all the task out so that it would and not only display the tasks, but also the breaks between the tasks.

  • So, for instance, if we look here, we can see that this white part would be work from 9 to 4.

  • And then this part here is the workout from six AM toe eight.

  • And then this part in between those two is the break.

  • So the 8 to 9 break, uh, which had no displaced.

  • Now I think I'll call it a day here because this was supposed to be a one day build and basically is just how far I gots.

  • And, um, I think I'll keep working on it and maybe make another video where I add some more features like I would like to add times here so that you can see like this is 12 o'clock six o'clock, nine o'clock and whatever.

  • So you can kind of get a grasp of where a ll the tests are happening and also like color coded so that, you know, like, okay, work is green and study is blue and yet so that all the tests are kind of separated because now they're just different shades of blue.

  • So it's hard to tell which one is, which also would be good if you could click on the on the piece of the pie chart and it would display the name of the task and all that stuff.

  • All right, so this is the final product, and I'm quite happy with it, considering I got a built in 14 hours and there's a lot of improvements that could be made, but basically this is what I got done in one day.

  • So that's it for my 1st 1 they build.

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.

字幕と単語

ワンタップで英和辞典検索 単語をクリックすると、意味が表示されます

A2 初級

ワンデービルド。フラッターで構築された時間管理アプリ (One Day Builds: Time Management App Built in Flutter)

  • 0 0
    林宜悉 に公開 2021 年 01 月 14 日
動画の中の単語