I, um Well, today, I'm gonna think I haven't really decided what I'm gonna do in this video.

We're gonna get into building the aft and flutter, or if we're gonna start with the back end, so building the rest FBI.

But what I thought I'd begin with, it's just to show you what I've done during the weekend on Dhe.

So what I did, where we left off was basically here.

We were trying to figure out how to show the entire week to the user.

Oh, wait.

All right.

So where we left off was here.

We were trying to show the entire week to the user and what I decided to do with this sort of lay out where way, show all of the days like this, like small little cards.

And then each task is essentially going to be represented by a black little line.

So this way, you kind of get an overview of how many tasks you have for each day.

And I think this gives kind of a good overview, at least at least for what I can come up with right now and a so you can see when you press one of the days you'll get a lock window talk thing that looked like this.

And within this, you can scroll and go through all the different tasks for that day.

And, uh, I'm not really sure what it's gonna look like when you haven't pressed anything.

So if you don't press any of the days essentially right now, it looks like this.

So it's just a black screen, basically, and I'm not really sure what we're going to do or what way or what tohave here.

But before you actually press something, So, uh, that is one of the things that are left for that for that view essentially over that screen.

And then I decided that we're gonna have this kind of look or design for the month.

So if you go to a month of you, then you get all the different days like this, and then you get also the date or the actual number of the day on each card as well.

And basically this is just the same as this one.

But it's all the days for that month.

I'm know I'm not like, super happy about this design, but I think that this I like this to sign.

No, but I'm not sure how.

Well a ll the different lines are gonna work to give you a, like an over you of your week.

But I think I think it does a pretty good job of showing you kind of help me test you have and then assumes you press one of the days you get a more specific list of all the tests so than I think the combination of showing this overview and then also being able to go into each day to see what the specific tests are, I think that that combination is gonna be good enough to kind of display it or to get the overview that we want.

So this these are the four screens that we've come up with so far and what we're gonna do today, I think I think we're going to start with just building it out and flutter just because that is the more fun part.

The back end is also going to be the more like, slightly more advanced part.

So I feel like that.

It makes sense to have that a little bit later on in this series.

I guess and, uh, even though it some things that would be good to Dio like if we if we built the rest a p I straightaway, it would be kind of good to do that because then you would be able Thio, get the daughter from the FBI in the way that you actually would in the real or wait.

So when we if we were to build the rest FBI first, then we would be able to once we build the when we start building the screens out in the flutter, we'd be able to actually pull the daughter from the A P I in the way that it actually would work in the final act.

So that way it kind of makes sense to start with the rest A p I.

But we can still start by just designing the layout and kind of getting the base functionality of the U I up and running.

So I think that's gonna be also more interesting to watch.

And like I said, I feel like that makes more sense to start out with.

So we're gonna start by just creating a flutter project.

We can use my command that we have And we're gonna call this, um, to do, uh, and then this does everything we want that traits.

The repo rates, the project, and it pushes everything to kids.

So this it's our project.

Now, what we need to do is we need thio creates a We're going to start for just creating a subdirectory cold, because we're gonna have both the AP and the back end in this in this project.

So I think it makes sense.

Thio kind of split those up into one folder called after one full report back end, Similarly going to, uh, And now we do.

Or is it?

Yeah, I think that's the way to do it.

All right, Dawn.

Good.

All right.

Um, good.

All right.

S o What I just came up with right now is that it might be interesting, too.

Also kind of great to do for this project.

Get up.

So let's word so that we kind of build this out in a little bit more of a realistic way.

Um, okay, create a project.

Is it important?

Uh, all right.

So what we can do now is we can show you kind of the whole workflow.

I guess of how I would build this act if I was doing it in, like a bigger group or a project s.

So what we're gonna do is we're gonna add this is get top where we basically save all the code and we're gonna create a couple different columns here to d'oh is one of them.

We're gonna also create a in progress at another one, Um, the and then come.

The reason for doing this is that once we have this kind of list, we can then or one of the problems when you're building something when you coding something, especially when you're doing it in a big group is trying thio, essentially keeping like making sure that the scope of the thing that you're working on this small is that convenience, actually, because the smaller the scope of the thing that you're working on, the less likely this for your changes, the changes that you're making, that they're going to actually affect the entire project or affect something else in someone else's coat.

Part of the code.

Uh, So what we can do now is we can then go through and kind of see what are the things that we need to get done on.

Then we can list them here as two DUIs.

So for the screen, we could have actually different boards.

So one board for three u i and flutter and then one board for the back end.

And I think that's what we're gonna end up with.

But today we're just gonna do, uh, front then So, uh, essentially, what you could do, then you could divide this up into, for instance, creating create the navigation bar that could be one of the produce so we can create a new task here.

Call that.

Hey, uh, far meant.

And then we trade way also added it as an issue.

So then we can go where we can see a list of all the issues that we have.

Um yep.

So that's that's gonna be one of them.

And then what we want to dio is we want to create this thing here.

Um, I'm not sure what to call that.

So the thing is that this is kind of up thio you or yourself because you're just trying to make this as a specific as possible so that you were really clear about like.

Okay, this is what I'm doing right now so that you kind of so that all the changes that you make in the code or super small, small as they can be And, uh, therefore, it's kind of up to you Tow.

Define how small the thing that you would like to have us an issue or is a task for yourself.

For instance, you could have something as small.

It's like, OK, add this text here, um, at a button here, I would probably divide it morning to, like, creating the nut bar and then maybe creating this part.

That's I'm not really sure what?

The cold that part.

So this little fold or something, and then the button, I think that's gonna be the second issue.

So we're gonna create a new issue.

Want to recall this?

Let's call.

It's, uh in tray.

So took far.

Yes.

Okay, yeah.

So then you add it to the project.

The thing is, I've been working with get lab a little bit, so there's that's a different site.

Essentially, there's get hub, and then they get lab.

I've been doing this and get up for the last, like, five months I think so.

I kind of forgot how to do it and gets hub and haven't done it that much at all in get a bottle.

So I'm not really an expert on how to do it.

But now it should be added.

It's now we have to tasks in our project for okay, they're real.

All right.

So now we have those two tests, we can add another one on dhe.

The 2nd 1 is gonna be creating this list.

So, uh, a list of all the tasks, essentially, we're just gonna call that, uh, create ghosts.

Comfort shoe.

Okay, Now, you could go into even more detail.

And if you're working on a more proper kind of project, you probably would go into more detail.

So, for instance, what you could do is you could go into this and you can edit it, and then you can add Wait here.

Well, what you could do is you could add things like what needs to get done for this toe?

Actually be accomplished.

So right T area or something on you could say like, Okay, we need to have, uh, list.

00 but, um sure, these grow a bowl on, then you can just have those things as all the criteria.

And then when When you're like when you feel like you're done with the task that you can go thio this issue, you can see Okay, what does that have All the criteria?

Does it fulfill all the criteria?

And if it does, then you can commit or like Well, if it doesn't, then you can commit or you could create, like, a full request.

They connected Thio this'll ce issue.

And that is just kind of an easy way.

Thio organized all the commits so that all the commits makes sense and make sure that everything is like connected to something in the sense that we so that it's it's just a way to kind of structure the project.

We're not gonna be a super detailed about it.

Like I said, So we're gonna start with just this issue here creating that nap bar, and we know that that's gonna be on top of the screen.

So now what?

We're gonna d'oh!

I pretty much always used this or this thing.

This article that I found for creating nut bars, um, that I just have to remember what the name of it?

Yep.

So this one.

And the reason that I will always use this one is that I like the ability of swiping between the different screens or between the different tabs and also being able to press the different times because I feel like that, um, it's more intuitive to be able to swipe between the different screens.

And, uh, yeah, I just kind of like that design.

So now we're gonna actually go into our er rights.

All right, so this is what the or the code that we have looks like right now, Uh, so now we're running it just to see what it looks like at the moment, just removing all the comments because we don't really need them.

All right, so now that is what it looks like.

We've cleaned it out.

So we've removed some of the things that you usually get when you open up a starter project for in flutter.

And now we're gonna do is we're just gonna implement this navigation bar.

Essentially.

All right, Just call me that on dhe, then wait.

Praised that here?

I thought we'd also need it's We're just gonna run that, See if it works.

All right, So that works already straightaway, which is good.

Now what we want to d'oh ISS.

There's something like, All right, so now we need to figure out how to do a talk navigation bar, because right now we have a bottom navigation bar, and that is part of the yes.

So it's part of the default Have controller bottom navigation bar.

So it doesn't really It doesn't seem like it has anything called like talk navigation bar.

So what we need to do is we need to figure out which what thing we use for a variation.

But I'm not like, entirely, um it doesn't matter too much to say if we go with a top or a bottom navigation bar So and we might just for the, like, the minimum viable product thing, we might just end up with a bottom navigation bar just cause it's faster essentially to do it this way.

But we're gonna do a short little Google search, and we're going to see if we can find something that's really simple for how to implement the tough navigation bar.

And if we can't find that, then, uh, I'm gonna give it about, like, five minutes.

Maybe if I can't find it in five minutes, then we're gonna go with a bottom variation.

Mark, I wonder if we can switch because now this might work.

So what we did was just switch bottom navigation.

More for Akbar, Uh, which could work.

It seems like it may have worked.

Okay, so that actually does work.

But a CZ You can see we have some issue here.

Would like the top part of the screen covering some of the icons.

So what we need to d'oh iss.

Okay, so there's some widget in flutter called safe area widgets, which essentially, like, protects against this stuff.

It adds some space up here so that we said that anything you add on the top of the screen will end up like down below so that it won't won't get covered by anything.

Um, okay, so I'm gonna try to just not good with and just see if I can figure it out.

We're just gonna go say good, Okay.

So that that works now.

So we that moved everything down a little bit more so that we have the navigation bar on the tall doing.