Here are three different layouts with lots of buttons:
Conventional wisdom would have you believe that creating something like the designs below would be a time consuming and challenging process. If you wanted 9, 16 or 25 buttons then you’ll spend a lot of time messing around with rows and columns and sizes and paddings…right?
Wrong! All 3 of the designs shown above are created from just 1 button, 1 row and 1 column. By using the Any Component blocks you can create a grid of any size you like and the incredible thing about this approach is that making small changes to your design is quick and painless.
Make a grid
This is best done with a function. The steps are always the same, but the number of repetitions will change depending on the size of the grid.
Depending on the button that is pressed the numberOfLoops will change too
Avoid Duplicates
This approach isn’t perfect, and you can create multiple grids at once so - depending on your use case - you might want to temporarily disable the buttons like this:
Delete Previous Grid
In order to have a fresh grid each time, we need some way of deleting the previous grid. To do this we start be creating a list of the rows and a list for the buttons.
Back in our original makeGrid function, each time we clone Button1 that clone gets added to the end of our listOfButtons and similarly, each time we clone Row1 that clone gets inserted into the end of the listOfRows like so:
This allows us to create two new functions; one to delete the duplicate rows and one to create the duplicate buttons. Note, that in this case the original Row1 and Button1 are not deleted or modified in anyway.
Custom Grid Appearance
Now you can customise Button1 inside the makeGrid function and you can modify the properties of your entire grid with just one or two blocks and without the need to change anything in the designer.
Update All Components
Finally, if we want to add some custom text or image to each of the buttons we have just created then we can simply loop through all the buttons in Column1 like so:
