Row

5 minutes
Share the link to this page
Copied
  Completed
Layout a list of child widgets in the horizontal direction.

Transcript

Hello, in this video I am going to show you the row container. Not the row container container is something else containers this do you row widget which is which allows you to do you know handle position. So you got rows and columns. lobby as a guest row is essentially a horizontal based positioning element that allows you to essentially have a single row and position multiple things next to each other. Column based positioning or a column for you know, I don't think contain a column element allows you to position stuff one on top of another, no banana ANOVA. I will do a separate video for columns, four, so four rows, what we are going to do, we're going to get rid of all of this for now.

So all of this inside of the container, we can add a new child to child Conan and we can go and inside of here if you want to Add a new let's say the text I'll attempt my thinking let's do childhood childhood pa Will you have what you have to do is IDs children. And this allows you to add multiple ones. So that's really cool. So if we just do that this is children colon, widget, so it's the same, it's going to have widgets and square brackets. And in here, you put your text. So if we have a text item, what you do is you put new than the actual widget name.

So text, for example, and open curly bracket, specify the properties. In this case, the default property I'm gonna specify is just some text and hello world. Save that you'll see this, you know, quite a bit of a difference. This is a single row, and it is just a sentence. To add multiple items, you just put comma, and you put your next widget. It could be any widget you want.

For now, I'm going to deal with text. But once you know how to implement other widgets, the process is the same. But new tech advice not come up. I mean, not semi colon combat. Also, well save that Aleksey is on the same row. So that's basically the way roads work.

If you want to add some styling properties to one of these texts item, where you do it is you put comma, style colon and in here recommend for like on a nother line just because it will be a lot easier. And here you can you put new text style and here is where you put your normal style in there. So if we change the color, color, colon colors yellow, not hi well yellow will appear less terrible. I don't want yellow or to pick that. Pick it produce, that's not too bad. So we'll leave it pink and obviously you can change you know other properties as well like on site and we could change that To me 28, for example, doubled up.

And if I say that, as you can see, it's a lot bigger, whereas the other textbook to one of the piece of technology is not affected obviously moved accordingly. Because this has now increased in size. The row, you can actually, you know, essentially add other properties to help with positioning and in terms of like the direction so they can change the alignment, you can change the text direction, you can, you know, essentially do all of that stuff. But again, we, you obviously, I can't show you every single thing in one video, but what I'm going to do is make sure you sorted on the supply a link to the best resource, the official documentation, where you can check out all of the different features of rows. And one thing to note the row widget does not scroll And in general, it is considered an era to have more children in a row that will fit in the available room.

So just bear that in mind. So you know, just be a bit conservative about what you are putting in there. And if you only have one child, then maybe consider using a longer center position the child is self instead. And yeah, in a separate video, I'm going to cover column, which essentially will allow you to position stuff on top of each other. And ultimately, you won't use one or the other. You'll use a combination of these, which I'll be covering in later videos.

And if you come from a web development background, the you know, terms container row column, all of this stuff will feel right at home, especially if you've used a responsive framework such as bootstrap. If you have any questions, though, feel free to pop me a message. And as usual, I look forward to seeing you in the next video.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.