Is it possible to change a control to another control during on_click event?

[AaronCatolico]

Question

I'm thinking that this should be something easy to do, no?
Say that I have an IconButton and when I click it, I'd like it to change into a row with 2 buttons.
Please check the example code I've added to get an idea of what I'm aiming for.

Code sample

btn1 = ft.IconButton(content=ft.Text('Change Me!'), style=ft.ButtonStyle(bgcolor='red', color='white'),
on_click=change_controls)

def change_controls(e):
    e.control = ft.Row([
        ft.IconButton(content=ft.Text('Im new!'), style=ft.ButtonStyle(bgcolor='blue', color='white'),
        ft.IconButton(content=ft.Text('Im new!'), style=ft.ButtonStyle(bgcolor='green', color='white')
])

Error message

No response

------------------------------------------------------

• I have searched for answers to my question both in the issues and in previous discussions.

[gbrandt]

You can place the controls you need in a stack and then make them visible or not as required, the controls will appear to replace each other.

[AaronCatolico]

Thanks, but not quite what I was looking for. I found a good workaround for it though.

[gbrandt]

I misunderstood the question then. Please post your solution here so other people with the same question can get help.

[AaronCatolico]

Oh, my apologies. I should have shared it, but was side-tracked from work.

If anyone would like a simple workaround, you could achieve a really good effect with the method I'll post here.

So, say that you're collecting data from somewhere and you have a button that the user needs to click in order to collect that data, and you want two button icons or some other controls to appear to show new data, but you never know what that data will be in advance, the first button that the user clicks will disappear and be replaced by the two new buttons (or anything you want), you could do something like this with a container:

#starting button to be replaced could be inside of a container:
btn1 = ft.Container(width=40, height=40, content=ft.IconButton(content=ft.Image(src='path-to-your-image'),
on_click=replace_button)

def replace_button(e):
    e.control.content = ft.Row([
        ft.IconButton(content=ft.Image(src='path-to-your-image')),
        ft.IconButton(content=ft.Image(src='path-to-your-image'))
])

The above code is not exactly how I wrote it, but the concept is still there. Just change the content of the original Container to replace the first button. This saves space in memory and loading speed/performance is better because you never pre-loaded any controls directly behind the first button.

Say that you had all of these buttons in a ListView or a DataTable (possibly THOUSANDS), you wouldn't want to load too many buttons behind other buttons in order to achieve such an effect, which would slow down the ListView or DataTable - the entire program in general. It's more efficient to dynamically load the data by simply changing the content of a Container (since you apparently cannot entirely replace a control with another).

I know that I never gave you all details of exactly what I was trying to do, gbrant. Thanks for sharing your idea.