In the example below, new buttons are being created every time the + button is pressed at the bottom of the screens.
Each new button is given it’s own unique number which is in turn displayed on the button, i.e. Button 1, Button 2, etc.
Finally, these new buttons themselves are clickable, and the clicked stated is persistent as new buttons are added.
Create a New Button
Creating a new button is easy with the “Any Component” blocks, but the trick here is to put all the newly created buttons into their own layout component - in this case
Column1. Note, that for the rest of this tutorial to work, the “as first in” property should in fact be “as last in”. This can be seen in the second screenshot.
Dynamically Numbering Buttons
Every time we create a new button we add it to the bottom of
Column1, which is done by using the “as last in” property.
Once the button is added to the Column we look up it’s index, or position, in the list of buttons in Column 1. This is used to set unique text for each of the new buttons as they are created.
Highlighting the Buttons
This would be slightly easier if we weren’t using a button to create all the buttons in the first place, but here’s my approach.
First, we create a variable called
clickedButton which is use to keep track of which block inside
Column1 has been clicked. It’s OK to give this variable a default value of 0, since as long as the + button is being pressed then there won’t be any new buttons to highlight.
Next, we check if the clicked button is the + button, and if it is, we set the background colour of
clickedButton to light blue.
Finally, if one of the new buttons is pressed, we start by making all of the buttons white and then make the clicked button light blue.
Finally, the clicked button is also stored in the
clickedButton variable so that once a button is highlighted it stays highlighted until another new button is pressed.
There’s not a whole lot to this, but if you want to take a closer look, here’s my remix link: