[Question]How to change the bgcolor of a container when pressed

[AngelCard]

Question

I have a class called tools which creates a container where it has as content a textbutton and an arrow and when it is pressed it guides it to a different page. What I want is that when, for example, the Inicio button is pressed, the background color is changed to another color.

Please solve this problem in the function "def view_homeDef(e)".

Code sample

import flet
from flet import*
from flet_route import Params, Basket

#Declarar gobala las variables sobre las dimensiones de la ventanas
global page_width, page_height


class Herramientas(UserControl):
    def __init__(self, text, icon, on_click, bgcolor='Transpare'):
        super().__init__()
        self.button=Container(
            Row(
                vertical_alignment=CrossAxisAlignment.CENTER,
                spacing=0,
                controls=[
                    TextButton(
                        expand=True,
                        height=40,
                        content=Row(
                            alignment=MainAxisAlignment.START,
                            controls=[
                                Icon(icon, color='#17F1FF'),
                                Text(text, color='white', size=16, weight='normal')
                            ]
                        ),
                        on_click=on_click,
                        style=ButtonStyle(
                            shape={
                                '':RoundedRectangleBorder(radius=0)
                            }
                        )
                    ),
                    IconButton(
                        icon=icons.ARROW_FORWARD_IOS_ROUNDED,
                        icon_color='#8DF1A9',
                        icon_size=24,
                        tooltip=text,
                        style=ButtonStyle(
                            shape={
                                '':RoundedRectangleBorder(radius=0)
                            }
                        ),
                        on_click=on_click
                    )
                ]
            ),
            margin=margin.only(bottom=4),
            bgcolor=bgcolor
        )
    
    def build(self):
        return self.button



def main(page: Page):
    page.title = 'EduConter'
    page.theme_mode = 'DARK'
    page.padding = 0
    page.window_maximized = True
    page.window_resizable = False
    page.vertical_alignment = 'Center'
    page.horizontal_alignment = 'Center'
    page.bgcolor = '#0650E1, 0.6'

    #Constante de las dimesiones de la ventana
    page_height=page.window_height + 48
    page_width=page.window_width + 86
    
    #Color de fondo de la parte donde se muestran las herramientas (la parte dercha)
    bgcolor_pages = LinearGradient(
        colors=['#0650E1', '#12C9B3, 0.7', '#251488'],
        begin=alignment.center_right,
        end=alignment.center_left
    )
    
    
    
    #Vistas de Cada Heramienta
    def view_homeDef(e):
        
        main_view.content = view_home 
        main_view.update()
    
    def view_inventario(e):
        view_inventario = Container(
            Text(
                'Inventory Page'
            ),
            width= page_width,
            height=page_height,
            
            gradient=bgcolor_pages
            
        )
        #Cambiar contenido del main_view con el inventario 
        main_view.content = view_inventario 
        main_view.update()
        
    def view_libroDiario(e):
        view_libroDiario = Container(
            Text(
                'Libro Diario Page'
            ),
            width= page_width,
            height=page_height,
            
            gradient=bgcolor_pages
        )
        
        main_view.content = view_libroDiario 
        main_view.update()

    def view_libroMayor(e):
        view_libroMayor = Container(
            Text(
                'Libro Mayor Page'
            ),
            width= page_width,
            height=page_height,
            
            gradient=bgcolor_pages
        )
        
        main_view.content = view_libroMayor 
        main_view.update()

    def view_nomina(e):
        view_nomina = Container(
            Text(
                'Nómina Page'
            ),
            width= page_width,
            height=page_height,
            
            gradient=bgcolor_pages
        )
        
        main_view.content = view_nomina
        main_view.update()

    def view_balanceDePrueba(e):
        view_balanceDePrueba = Container(
            Text(
                'Balance de Prueba Page'
            ),
            width= page_width,
            height=page_height,
            
            gradient=bgcolor_pages
        )
        
        main_view.content = view_balanceDePrueba
        main_view.update()

    def view_balanceGeneral(e):
        view_balanceGeneral = Container(
            Text(
                'Balance General Page'
            ),
            width= page_width,
            height=page_height,
            
            gradient=bgcolor_pages
        )
        
        main_view.content = view_balanceGeneral 
        main_view.update()

    def view_balanceInicial(e):
        view_balanceInicial = Container(
            Text(
                'Balance Inicial Page'
            ),
            width= page_width,
            height=page_height,
            
            gradient=bgcolor_pages
        )
        
        main_view.content = view_balanceInicial 
        main_view.update()

    def view_materialDidactico(e):
        view_materialDidactico = Container(
            Text(
                'Material Didáctico Page'
            ),
            width= page_width,
            height=page_height,
            
            gradient=bgcolor_pages
        )
        
        main_view.content = view_materialDidactico 
        main_view.update()

    def view_configuracion(e):
        view_configuracion = Container(
            Text(
                'Configuración Page'
            ),
            width= page_width,
            height=page_height,
            
            gradient=bgcolor_pages
        )
        
        main_view.content = view_configuracion 
        main_view.update()

    def view_salir(e):
        view_salir = Container(
            Text(
                'Salir Page'
            ),
            width= page_width,
            height=page_height,
            
            gradient=bgcolor_pages
        )
        
        main_view.content = view_salir 
        main_view.update()



    #Vista Home 
    view_home = Container(
                    #Todas las herramientas de view Home
                    Container(
                        Column(
                            alignment=MainAxisAlignment.CENTER,
                            controls=[
                                Container(
                                    #Graficas
                                    Row(
                                        vertical_alignment=CrossAxisAlignment.CENTER,
                                        controls=[
                                            #Grafico Total Activo
                                            Container(
                                                width=190,
                                                height=240,
                                                bgcolor='green',
                                                margin=margin.only(right=52)
                                            ),
                                            #Actividad de la Empresa
                                            Container(
                                                width=667,
                                                height=304,
                                                bgcolor='yellow'
                                            )
                                        ]
                                    ),
                                    margin=margin.only(bottom=10)
                                ),
                                #Vista del libro diario en Home
                                Container(
                                    width=919,
                                    expand=True,
                                    bgcolor='brown'
                                )
                            ]
                        ),
                        padding=padding.only(left=100, top=50, right=100, bottom=50)
                    ),
                    
                    
                    width= page_width,
                    height=page_height,
                    gradient=bgcolor_pages   
                )
    
    #Vista Principal Home, para su animación de cambio 
    main_view = AnimatedSwitcher(
        view_home,
        transition=AnimatedSwitcherTransition.SCALE,
        duration=250,
        reverse_duration=100,
    )
    
    
    
    dashboard = Container(
        Row(
            spacing=0,
            controls=[
                Container(
                    Container(
                        Column(
                            horizontal_alignment=CrossAxisAlignment.CENTER,
                            controls=[
                                Column(
                                    alignment=MainAxisAlignment.SPACE_BETWEEN,
                                    horizontal_alignment=CrossAxisAlignment.CENTER,
                                    spacing=0,
                                    controls=[
                                        Container(
                                            Row(
                                                alignment=MainAxisAlignment.CENTER,
                                                controls=[
                                                    Image(
                                                        src='./images/logoEduConter.png',
                                                        width=233,
                                                        height=186
                                                    )
                                                ]  
                                            ),
                                            tooltip='EduConter Inicio',
                                            on_click=view_homeDef
                                        ),
                                        Container(
                                            Text(
                                                'HERRAMIENTAS.',
                                                color='#9B80B7',
                                                weight='bold',
                                                size=22
                                            ),
                                            margin=margin.only(bottom=25)
                                        ),
                                        
                                        Herramientas('INÍCIO', icons.HOUSE_ROUNDED, view_homeDef),
                                        Herramientas('INVENTARIO', icons.INVENTORY_ROUNDED, view_inventario),
                                        Herramientas('LIBRO DIARIO', icons.BOOK_OUTLINED, view_libroDiario),
                                        Herramientas('LIBRO MAYOR', icons.AUTO_STORIES_OUTLINED, view_libroMayor),
                                        Herramientas('NÓMINA', icons.ACCOUNT_CIRCLE_OUTLINED, view_nomina),
                                        Herramientas('BALANCE DE PRUEBA', icons.RULE_FOLDER_OUTLINED, view_balanceDePrueba),
                                        Herramientas('BALANCE GENERAL', icons.SPACE_DASHBOARD_OUTLINED, view_balanceGeneral),
                                        Herramientas('BALANCE INICIAL', icons.FOLDER_SPECIAL_OUTLINED, view_balanceInicial),
                                        Herramientas('MATERIAL DIDÁCTICO', icons.NOTE_ALT_OUTLINED, view_materialDidactico),
                                        Herramientas('CONFIGURACIÓN', icons.SETTINGS_OUTLINED, view_configuracion),
                                        Herramientas('SALIR', icons.LOGOUT, view_salir)
                                    ]
                                )    
                            ],
                            
                        )
                    ),
                    gradient=LinearGradient(
                                colors=['#3733FF', '#0C6065', '#16138D'],
                                begin=alignment.bottom_left,
                                end=alignment.top_right
                            ),
                    width=265,
                    height=page_height,
                    
                ),
                #El siguiente es para dar animaciones a todas las vistas por eso all view con AnimatedSwitcher
                main_view
            ]
        )
    )

    page.add(dashboard)
    page.update()
    
flet.app(target=main)

Error message

No response

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

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

[plugeit]

you should mark my earlier response as answer first #1939