[Question]How to fix a container that changes position when a button is pressed

[AngelCard]

Question

I'm working on a desktop app, I'm programming the part that when I press any tool on the toolbar the content of the container on the right side changes, but when I press the button (so far I'm working with the Inventario button) it does what I want but the container of the tools moves down.

In the previous image everything is as it should be before pressing the button. But when the INVENTARIO button is pressed the following happens:

Code sample

import flet
from flet import*

class Herramientas(UserControl):
    def __init__(self, text, icon, on_click):
        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)
                            }
                        )
                    ),
                ]
            ),
            margin=margin.only(bottom=8)
        )
    
    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'


    def view_inventario(e):
        view_inventario = Container(
            Text(
                'Inventory Page'
            ),
            width= page.window_width + 86,
            height=page.window_height + 48,
            
            gradient=LinearGradient(
                colors=['#0650E1', '#12C9B3, 0.7', '#251488'],
                begin=alignment.center_right,
                end=alignment.center_left
            )
        )
        
        main_view.content = view_inventario 
        main_view.update()
        
        

    view_home = Container(
                    Text(
                        'Home Page'
                    ),
                    width= page.window_width + 86,
                    height=page.window_height + 48,
                    
                    gradient=LinearGradient(
                        colors=['#0650E1', '#12C9B3, 0.7', '#251488'],
                        begin=alignment.center_right,
                        end=alignment.center_left
                    ),
                    
                    
                )
    
    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=[
                                        Row(
                                            alignment=MainAxisAlignment.CENTER,
                                            controls=[
                                                Image(
                                                    src='./images/logoEduConter.png',
                                                    width=233,
                                                    height=186
                                                )
                                            ]
                                        ),
                                        Container(
                                            Text(
                                                'HERRAMIENTAS.',
                                                color='#9B80B7',
                                                weight='bold',
                                                size=22
                                            ),
                                            margin=margin.only(bottom=37)
                                        ),
                                        
                                        Herramientas('INVENTARIO', icons.INVENTORY_ROUNDED, view_inventario),
                                        Herramientas('LIBRO DIARIO', icons.BOOK_OUTLINED, lambda e: print('Click :3')),
                                        Herramientas('LIBRO MAYOR', icons.AUTO_STORIES_OUTLINED, lambda e: print('Click :3')),
                                        Herramientas('NÓMINA', icons.ACCOUNT_CIRCLE_OUTLINED, lambda e: print('Click :3')),
                                        Herramientas('BALANCE DE PRUEBA', icons.RULE_FOLDER_OUTLINED, lambda e: print('Click :3')),
                                        Herramientas('BALANCE GENERAL', icons.SPACE_DASHBOARD_OUTLINED, lambda e: print('Click :3')),
                                        Herramientas('BALANCE INICIAL', icons.FOLDER_SPECIAL_OUTLINED, lambda e: print('Click :3')),
                                        Herramientas('MATERIAL DIDÁCTICO', icons.NOTE_ALT_OUTLINED, lambda e: print('Click :3')),
                                        Herramientas('CONFIGURACIÓN', icons.SETTINGS_OUTLINED, lambda e: print('Click :3')),
                                        Herramientas('SALIR', icons.LOGOUT, lambda e: print('Click :3'))
                                        
                                        
                                        
                                        
                                        
                                    ]
                                )    
                            ],
                            
                        )
                    ),
                    gradient=LinearGradient(
                                colors=['#3733FF', '#0C6065', '#16138D'],
                                begin=alignment.bottom_left,
                                end=alignment.top_right
                            ),
                    width=265,
                    height=page.window_height + 48,
                    
                ),
                #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]

#the window height and window width was not persitent so simply i delcared a global window height and width variable and passed it to all widgets wherever needed to specify window height and width
import flet
from flet import*
global page_width, page_height
class Herramientas(UserControl):
    def __init__(self, text, icon, on_click):
        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)
                            }
                        )
                    ),
                ]
            ),
            margin=margin.only(bottom=8)
        )
    
    def build(self):
        return self.button


def main(page: Page):
    page_height=page.window_height + 48
    page_width=page.window_width + 86
    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'


    def view_inventario(e):
        view_inventario = Container(
            Text(
                'Inventory Page'
            ),
            width= page_width,
            height=page_height,
            
            gradient=LinearGradient(
                colors=['#0650E1', '#12C9B3, 0.7', '#251488'],
                begin=alignment.center_right,
                end=alignment.center_left
            )
        )
        
        main_view.content = view_inventario 
        main_view.update()
        
        

    view_home = Container(
                    Text(
                        'Home Page'
                    ),
                    width= page_width,
                    height=page_height,
                    
                    gradient=LinearGradient(
                        colors=['#0650E1', '#12C9B3, 0.7', '#251488'],
                        begin=alignment.center_right,
                        end=alignment.center_left
                    ),
                    
                    
                )
    
    main_view = AnimatedSwitcher(
        view_home,
        transition=AnimatedSwitcherTransition.SCALE,
        duration=250,
        reverse_duration=100,
        
    )
    
    dashboard = Container(
        Row(
            spacing=0,
            controls=[
                    Container(
                        Column(
                            horizontal_alignment=CrossAxisAlignment.CENTER,
                            controls=[
                                Column(
                                    alignment=MainAxisAlignment.SPACE_BETWEEN,
                                    horizontal_alignment=CrossAxisAlignment.CENTER,
                                    spacing=0,
                                    controls=[
                                        Row(
                                            alignment=MainAxisAlignment.CENTER,
                                            controls=[
                                                Image(
                                                    src='./images/logoEduConter.png',
                                                    width=233,
                                                    height=186
                                                )
                                            ]
                                        ),
                                        Container(
                                            Text(
                                                'HERRAMIENTAS.',
                                                color='#9B80B7',
                                                weight='bold',
                                                size=22
                                            ),
                                            margin=margin.only(bottom=37)
                                        ),
                                        
                                        Herramientas('INVENTARIO', icons.INVENTORY_ROUNDED, view_inventario),
                                        Herramientas('LIBRO DIARIO', icons.BOOK_OUTLINED, lambda e: print('Click :3')),
                                        Herramientas('LIBRO MAYOR', icons.AUTO_STORIES_OUTLINED, lambda e: print('Click :3')),
                                        Herramientas('NÓMINA', icons.ACCOUNT_CIRCLE_OUTLINED, lambda e: print('Click :3')),
                                        Herramientas('BALANCE DE PRUEBA', icons.RULE_FOLDER_OUTLINED, lambda e: print('Click :3')),
                                        Herramientas('BALANCE GENERAL', icons.SPACE_DASHBOARD_OUTLINED, lambda e: print('Click :3')),
                                        Herramientas('BALANCE INICIAL', icons.FOLDER_SPECIAL_OUTLINED, lambda e: print('Click :3')),
                                        Herramientas('MATERIAL DIDÁCTICO', icons.NOTE_ALT_OUTLINED, lambda e: print('Click :3')),
                                        Herramientas('CONFIGURACIÓN', icons.SETTINGS_OUTLINED, lambda e: print('Click :3')),
                                        Herramientas('SALIR', icons.LOGOUT, lambda e: print('Click :3'))
                                        
                                        
                                        
                                        
                                        
                                    ]
                                )    
                            ],
                            
                        ),
                    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)

[plugeit]

you should mark it as answer and close this discussion