Developing the dashboard UI

All right, guys. Welcome back. And in this video, let’s start with the application. And what we’re going to do first of all is just open Xcode, go to File, New project and you’re going to come to this window.

Select a single view application. Click on Next. Give your product a name. I’m going to say crypto. Actually, we have named this nice crypto, which is this project right here. But I’m just going to show you how to create this in [? Scripto. ?] Make sure you check on this SwiftUI checkbox and hit Next.

So once you do that, it’s going to prompt you to save this somewhere. And since I already have nice crypto, you just go ahead and create this. Click on this Create button. But I’m not going to do that because I already have that project open.

So once you do that, you’re going to get a view– something like this which say’s there’s a simulator on the right, a preview window on the right, and your code on the left. You see that I have clicked on this Play button. Yours must be something like this.

I clicked on this Play button, which what it essentially does is actually launches a simulator itself right here so it’s easier for us to actually simulate stuff on a real Device

Apart from that, what you can see here is a classic SwiftUI hello world example. And what’s happening here is basically SwiftUI actually requires you to only tell what you want to do, not how you want to do it. That is a declarative way of programming.

So with SwiftUI you no longer need to specify how a particular thing should be done. You just need to say, hey, this is a text. It should contain this. It’s font should be this. It should be bold. You just have to do that. Not how you want it to be done.

So second part is in SwiftUI, you’re going to be creating a lot of structs which is going to conform to a view protocol. And a view protocol is nothing, but it just requires you to have a body which returns you some view. Which means that it doesn’t really need to know what kind of view it is but it just needs to conform to the view protocol.

All right. Once you have done that, what we need to do is we need to start creating the application. And since we have already seen what we are going to create, what I’m going to do is start off by creating a simple navigation view which would allow us to add some pages.

And what we could see is if I add a navigation view right here, we’re going to see that I put out something like hello, and not a lot would change. So as I type here, the preview would be reflected on the right.

So you can see not a lot has changed. But we get a bunch of additional properties and advantages with it. That is, I can specify a navigation bar title just right here, and say that this is Dashboard.

So you see, within three lines of code, we are actually getting started. You’re going to see that we get a dashboard here. We’re actually getting started creating some real application, which is very cool.

So what we want is instead of hello, I want something to happen if I click on this hello. So I’m going to replace this text hello with a navigation link saying that its destination is on– let’s say if I click on this, I’m going to go to hello. And I’m just going to say that go to hello.

So what’s happening here is this is a navigational link view, which on clicking would take me to this particular destination– that is, this view. And what this view itself should say is that go to hello. So you see that if I go ahead and click on this I get to a new view, hello. And we get all that navigation advantage as well.

Make sure you have this Play button enabled here. Otherwise– in the simple preview, you cannot do interactions with the device because it’s just a preview.

All right. So once we have done that, what I need to do is actually start working on the real application a little bit. So in the real application, what we had essentially was a bunch of text views at the top saying your crypto balance. And what we need to do is add some balance.

So I’m going to create a very simple hardcoded view for now so that it is easier for us. But what you’re going to see is now we don’t see this 3133.7 text view. And the reason for that is that you need to throw in a vstack right here which then tells Swift that, hey, I want these two views to be stacked on one another. That is, vertically stacked on one another.

So now if we see, once this updates, what we’re going to see is these two views should be– actually, let me just stop the simulator for now because it’s a bit heavy and it’s not rendering very fast. So you can see that these two get stacked on the top of each other.

All right. So once we do that, what I want to do is actually customize this text view a little. So I’m going to go ahead and Command-Click on this, which is going to show this little menu. And I’m going to say Inspect.

And once I click on Inspect, you can see I can modify a bunch of properties. Let’s go ahead and set this to be a large title. It’s weight should be, let’s say heavy. And we could keep the color just inherited. It doesn’t matter. You can see that you can set some sort of padding width and height as well. But we’re going to just leave that for now.

So once we do that, you’re going to see that we are getting some somewhere. But what I want to do is I do not want this navigation bar. So I’m going to see that this navigation bar hidden. And, yep. I just want to hide this navigation bar. Right. So once we do that, we’re going to see that the dashboard just vanishes.

All right. So the other thing you could do is, let’s say if you want to push it to the very top. So how would you do that? You’re going to throw in a spacer right here. A spacer is a view which is going to take as much height as it can instead of vstack.

And obviously, if you guessed it right, if you put it on the top, you’re going to see that it throws it all the way to the bottom. So that will appear at the bottom.

And obviously, if you have a spacer in both places then it would be centered, because spacers would be crushing these two views towards the center. So, yeah, that makes sense.

But what I want to do is instead of a spacer, I want to create a list. And creating a list in SwiftUI is very easy. You just specify a list view and start writing the items which you want in that list view. So I’m going to say this is item 1. And this is item 2. And so on and so forth.

So once we do that, we’re going to see that on the right, a nice, little list tries to render itself. But you’re going to see that we get a big list of empty cells as well.

So there’s not really any way we could fix it right now in SwiftUI. But a neat trick we could do is actually, we can create a grouped list. That is, we could just go ahead and say right here that it’s list style right here is crude.

So once we do that, we’re going to see that the list view separates itself but becomes smaller in size. And that is exactly the number of elements we have in here. So yeah.