Although everything is working and this point here our no do is working fine.
We can add items and they show up in the list.
Now we are going to go and look at the user interface.
Seems like that is the that is the most fun part.
I think in the development part of things right.
Because we can work with data and everything.
As long as everything the data wise is working the user interface is the more fun name because it gives
you the liberty of being creative and so forth.
There's always a few guidelines here and there but usually the sky's the limit.
Forget good.
So what are we gonna do now is create a row and will look like this.
And of course later we're going to add the just now.
And of course we're going to add all these little trinkets that we have there and other functionality.
Let's start by putting together a very nice row.
At this point you should be able to create your own row because all we will be doing is to change this
text to something better.
OK so what I want you to do is if you can just pause this video and figure out a way to create a nice
row like this shouldn't be that difficult.
Go ahead and positivity and do that.
It's nice to get some exercise so you can actually get better at coding.
Pause the video and I'll see you in a little bit.
I'm still here.
Yes.
Do you pause the video.
Go ahead and do it all right.
I hope you were able to at least get started here.
All right.
So we could go ahead and do all of it here right.
Create our put base instead of a h stack or a group and start changing things.
But we know better now that the best way to do this is to actually remove that code and put in sort
of a different struct.
So they struct here.
I'm gonna call this struct a no do row like this.
It's going to be it's going to inherit from a view obviously and the field here force wants can say
far body.
It's gonna be some view generic that we're gonna be adding there.
But most importantly is that at the top here we have to pass the data that's going to be using because
remember there's no do is going to be passing inside here which means we have to go and get a data which
is in this case just an item from our node list.
There simply can come up here.
I'm going to say at state I'm going to call this just var item var no do item like this.
It's gonna be a string which is going to be empty and I'm going to go ahead and say at State.
And this is going to be var.
No do list internal one.
It's gonna be an array of strings.
All right.
OK.
That is good for now.
And of course everybody here that's where we're going to actually put a text and do all sort of things
that we want for our row.
First of all I'm going to say v stack because I love v stacks.
And in this case I'm going to put it alignment.
Let's see.
I want the alignment to be dots Center and for spacing just give it about two and content.
I don't need anything there.
Very good.
And what are we gonna be doing next here.
When I get rid of this because we don't need since we're not using the preview.
So next I'm going to add a group here and in this group it will put an H stack and I'm going to put
a text inside here which will have something obviously.
In this case I want to pass the item name or in this case here I'm going to pass it out no do item like
this and I'm going to say the color is going to be white and I want to make sure that the multi
line text alignment it's not helping a lot.
It's just gonna be dots leading.
Okay.
I just to make sure that as more lines we end up adding into our view we want to make sure that is always
leading if there's more than one line.
And of course it's always nice when we dealing with text.
Some people have very long to do or no dos in this case to say the line limit.
Give it about two just two lines that limit looks like right.
I should have said equal like that.
All right.
To this point I think we don't even need that right.
So I'm gonna get rid of that because you're just passing the actual item from our list.
But it get so if I take this I'm going to call.
Copy this and come down here.
Just call it there of course I have to pass the actual no do item in this case.
Just gonna be our item.
As such save and run we should be able to hopefully see something a little bit better.
Let's go ahead and add
laugh too much and ah looks like we're not seeing anything.
What is going on.
Something was added I think I made it.
Why.
Let's make a different color here.
Let's say Fred that was very naive of me.
Let's go ahead and run again and see.
We should be able to see things right now.
OK.
Let's.
Let's see.
Bye cars.
There we go.
Now you can see there is red.
You can say something else.
And the thing is are actually being added.
But the main goal here is of course to make sure that the actual row has a nice background something
like this.
That this is the main item that we're going to be creating.
To do that is very simple We can either go to our group and start adjusting things with modifiers or
we can just go to our H stack depends on what is is that it will trying to do here.
I'm actually going to go a level up to our v stack and click here you can see the highlights there and
I'm going to add a few things here.
So the first thing I'm going to do and say that background and when I see color pink like this if you
save this and give it a run we should be able hopefully to see something better just as gibberish there
and you can see it's looking good too.
Now it's time for us to change this to white because now we have that nice contrast the background there.
Very good.
It's looking nice.
All right.
Not what we are looking for real or expecting.
What are we going to do next is we're going to add a rectangle clip shape there and when say dot clip
shape.
And when I pass a rounded rectangle that's very handy because it can just go ahead and pass our corner
radius there to be about five again and let's save and run
OK and enter.
Very nice.
It's very small but at least you can see that something is actually happening there.
So let's go inside of our group now and walk a little bit more here.
So we are wanting to have something that looks like this.
So we're gonna have this item here which we've added.
We're going to add later this added just now.
And then of course we're going to add this image there.
So let's go ahead and start putting that together in place at least.
So right after our item there's no do here inside of our H stack there.
I'm going to add a spacer because I'm going to add something else below that is spacer forces everything
inside of this particular container group to spread out.
So in this case here I'm going to go ahead and add image.
So I'm going to also use a system image name here which I already know in this case here I want a square
like that say padding.
Just giving her general padding.
And then while I'm here I'm going to add another spacer because there's three items here and then I'm
gonna go ahead and add something else which is going to be time I go.
So in this case here I just want to add.
This time I go text.
So for that I'm going to add a h stack here because I want to align things differently inside there
and for alignment I'm want to make this center in for spacing about 3.
And no need for content whatsoever.
And inside here this is where I'm going to add something.
What I'm going to add here is a text that will say something like time added like this.
OK.
And for this text here while I'm here.
Let's go ahead and do a few things where I'm going to add a color that it's going to be not white.
And I'm going to see a italic because I want this to be a italic and I want padding that all to be around
for just adjusting things here and there.
Very good.
Let's save these and run and see why we'll conspire little world enter and voila.
Now it looks looks much much better but things are not necessarily looking the way we want.
We still have some issues here which we'll need to address.
First of all these H stack here should be actually outside of our group because I wanted to be below
so I'm going to cut this and put outside there.
Let's save these and see what's going to happen.
So it's gonna be below everything.
And voila.
This is exactly what I want.
And notice that this guy here is in the middle there.
I want both of them to actually be to the right.
Well how do we do that.
Well I'm gonna get rid of these spacer there because I don't want any spacer to do anything after the
image.
I do however inside of our H space here I want to put that spacer there which will force this text to
go all the way to the right.
In fact if I save this and run you'll see just that in Whyalla is all the way to the right.
Exactly as I want and also it pushed in this case our image Square they're all way to the right as well
because we have this spacer but it will so have this space spaces so it goes ahead and pushes everything
to the other side.
And what I'm going to do with this H stack here because I want to give some sort of padding at the bottom
here just a little bit when I say dot padding and I want the actual bottom edge to have about five padding.
So just the small things here nothing that would break your application of course but it's just going
to help you a little bit.
OK.
You can see there's a little padding there.
Very good.
Now if I wanted to give it more padding around the entire view here I can come up.
Let's see outside here.
This is our v stack.
I could come down here and say that padding like this and run should give us a general padding for everything.
Now gave a general padding for everything.
We don't want for everything because now notice that everything is constrained to the right into the
left.
What we can do actually can get rid of that and find where exactly I can just go ahead and give that
padding their.
There we go.
He gave us some padding there maybe it's a little bit too much but I can also go ahead and say something
that all and specify I want just a pattern of four.
That's right.
This we can always play around with this as you know by now.
Nice.
I like this much better because you can see now the edges are kind of little bit freer.
Oh there we go.
And just like that we're able to put together a very nice user interface here especially our row.
It has a collar it has personality and it's looking looking much better and did take that long or that
much in the next video we'll continue with our progress here so to finalize our user interface and hopefully
start actually adding more functionality such as delete on swipe and also make sure that when they click
each row.
That would mean that they know dualist is actually checked or meaning it's done.
All right.
Gonna do that next time.