Add, Update and Delete Widgets

5 minutes
Share the link to this page
Learn how to modify existing widgets and elements with new content.


Hello, in this video, I am going to show you how to add an extra widget. So we've got, you know, this layer which produces five stars from these icons and this text label. So imagine if we want to do an update. So imagine if I have a button. But, and in VLC on first unpressed, we'll do something, and we'll have a child. And I'm going to say, save that you'll notice in the files, and if I was to click that, maybe I want to change this piece of text.

How can we go about doing that? So the way we can do it, is instead of having every textbook that we cut down, and if we create a variable, so this will be a string, if we put string I want to call this str Val, according LBL value equals, you know, the initial value, and we'll find LBL vibe to it. That's you can see once we save it didn't change, you know, as you shouldn't do. If you want to update it, maybe maybe we want to, say LBL value, because you knew I click it and change it. And the reason is we need to set the new set state. And now if I do let me just do a hot restart.

So it's an epic text, I click it, as you can see, it says you value now. So this set state function, basically we load any data. And if it's based on variables, it could be a list, for example, because you know, this is a list, then it will update it, you could put this inside of here, and that is fine as well. So you could do like, so that will work. Generally, any major calculation should go outside of it, and then any changes should go inside. So that's how you physically update an existing widget.

So imagine we've got these, you know, these, you know, row here, and we want to add a new icon to it. How do we do that? First of all, what you're wanting to do is either separate this row out and create a variable from it. Or if you know, you're only going to modify the children, you know, separate this site. I'm gonna show you how to separate out the toy widget. We haven't done that.

Yeah, so let me put over here. Yeah, and this would literally just be a row. And I'll put it all the view equals. And that's it. Um, so I'm gonna indent this. Like so yes, one more level of indentation should get the job done.

This needs to be a semi colon. If I now go back down here, if I was to say that we get no icons there before I put our w now and save it as empty the icon the PSL on press. if let's say we want to update this, we could essentially create a whole nother road so we could say something Copy this part of it. Yes, not all of this, we are going to say all of you equals this or it equals it again, instead of star star star, let's say for only want four stars now. So if I save that, and I was to click it, as you can see one star, you know, essentially disappeared. So that's essentially how you add extra widgets, delete extra widgets, and update it to widgets, nice need to abstract it out into a variable or into variable.

So as you can see, this part right here shows you the list of widgets can be abstracted out as well. So depending on how complex let's say your row, your column is it's a lot of it that could be changed on the fly. You will not want to recreate this again and again like this. All you'll want to do is just recreate that little aspect of it, call the set state, and this will be run. So that's how you add extra widgets, you just modify it. So theoretically, you could abstract this entire container.

And they could be modifications to separate that model, you know, abstract to the law. This is so so you add extra widgets or you update existing widgets like we did with the text for the LBL value right here. And thing, how do you delete widgets as well? Do I delete them is simply by updating it and not having it in the original one anymore. So that's it. If you have any questions, feel free to drop me a message.

And as usual, I look forward to seeing you in the next video.

Sign Up


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.