How to use dynamic components in Kodular Creator?
Welcome back my dear friends, today we are back again with a complete new tutorial. Today we are going to learn How to use Dynamic components in Kodular Creator? As of all our tutorials I assure you you will find this tutorial very useful while developing any of you application which the no. of components are not fixed. So, we use dynamic components to add as much as number of components as we want. So, here we start our tutorial with some of FAQ's that will help you to learn what is concept of dynamic components if you didn't understood "What does dynamic components mean?"
FAQ's about Dynamic components
1. What are dynamic components?
Dynamic components are the components which allows us to show as much as number of components in our application as we want. So, that we need not to update app to add any component in our application. This is useful when we are developing any application like Shopping application in which we need to add listings on regular basis. So that, we can add a single dynamic component instead of adding the number of components for showing every listing. Here, I think now you guys got understood what are dynamic components?
2. What is advantage of using dynamic component?
The main advantage of using Dynamic components over adding components but if we add a component to update anything in our component. This method makes our app heavier and thus there are more chances of getting our app crashed. This is not convenient for our users and makes a bad impact in the mind of our users. For this method we need to set more blocks but if we use dynamic components then we can make our application easily. That's why I prefer using dynamic component for any app which need to update or add components daily.
These are the main FAQ's which I found related to Dynamic components. Now, we start our tutorial and we will learn using different component....
Here we have the basic things which we need to learn to use dynamic components...
1. For specify every dynamic component we need to set ID using blocks.
2. For using dynamic components we need to use the procedure blocks.
3. We also need to use for-each-from-to block to add every dynamic component with it's id.
1. Dynamic Button component
First component in our list is Dynamic button component. As you can assume by it's name this will add buttons dynamically in our application. But here for setting any dynamic components we need to set ID for every dynamic component we add in our application so that we can specify blocks for the events for any components. But I will try to explain it in the simplest way so that you can understand this concept easily. For this we will talk about it's blocks to learn using it.
1. Create Button
The first block which we have is the block to add any button. This block add a button with given ID to the provided arrangement. Here we can use this block by this method....
In this we have set when screen initialize this will call the event to create buttons by using the from-to loop block. It will set the ID of the button ad the number it is being added by from-to loop. And every time it will be added to the component we have specified here. Such as here we have used vertical scroll arrangement. So, this loop will add a button every time it will run. As we have set the 'to' value here as 10 it will add 10 buttons. We can also set this using firebase and any other online database.
Now we talk about the other blocks available in this component...
2. Delete Button
This block will delete the button whose ID has been given to it. For this we have to add this block whenever we need to delete any button here.
3. Button Clicked
This block will specify the event when any button in clicked. You can set any action using the id variable in the button clicked block. For example here I changed the text of the button that is clicked to 'clicked'.
Similarly as we have changed the text of the button that is clicked you can also call many other events such as we can change the properties of any button which is added dynamically using the similar logic. This are the main blocks which will allow you to use dynamic components.
We also have another blocks which will allow us to change the properties of button added dynamically.
4. Properties Blocks
We also have many other blocks which allow us to change the basic properties of the button. You can use them just by adding the ID of button. We can use these blocks by following method. So, if we need to change any properties of button we just need to add the block and set the ID of button.
2. Add component to Card View
5. Get current value
We can also get the current value of any property of a dynamic button by the following method. For getting value we just need to set the ID and here we get the current value for any property of dynamic button.
2. Dynamic Card View
This also works same as the dynamic button does. You can easily use it in your project. So, we discuss about the main blocks which we use in Dynamic Card View are:
1. Create card view
We can create card view using the following blocks. In this we have to give the ID and the arrangement in which we want to create the card view. We can also set the height and width of the card using this block.
2. Add component to Card View
By using above block we have created a card view but what will the card view will be use of us if we didn't add any component in it. So, for adding any component in it we have another block which we can add any component to card view. For adding we need to give the ID of card view and the arrangement we want to add into into it.
3. Dynamic Image
You can use dynamic images in the same way as we have used card view and button. You just need to add a path for image and give the arrangement in which image is to be added. You can also change the other properties of dynamic image by using the blocks provided easily.
Similarly, you can use Dynamic label using the same method as we have discussed avobe.
4. Dynamic Textbox
You can also use dynamic text similarly and get the text using the get value blocks. You can also use the other dynamic textbox blocks if you understood the main method of using dynamic components. They are same like the non-dynamic components just they have some changes in their using method.
So, these were the topic of dynamic components and I think you might have got this. If you are still confused you can ask me in the comments section I will personally reach you within hours and solve you issue. We will be back again with another tutorial till then.....
Comments
Post a Comment