How to adapt widgets sizes to any Page dimensions

[guillermollopis]

Question

I have an interface in which the widgets sizes are relative to my screen size. For that I use the functions winfo_screenwidth() and winfo_screenheight() from tkinter to get the dimensions of my screen. And I set each widget dimension relative to it. For example, if I want a container to occupy 50 % of the widht of the screen, I say `winfo_screenwidth()*0'.5' .

This works well, but now I want to make it for any size that the Page has at the moment, since the current implementation just makes sense when the Page is maximized for all the screen. I have tried to use Page.width instead of winfo.screen_width() and it does not work.

I have also tried to create a global variable for width that I update every time the Page size changes (with on_resize). And then I have made the widgets sizes relative to this variable. This way does not work either. The variable value gets correctly updated, but after updating the Page, the widgets still have the same sizes as when the screen started, not the updated values of the variable. It seems like the widgets sizes are always constant although I change them and update the Page.

Does anyone have any idea of how can I update the widget sizes? Or maybe another approach to make the widgets sizes relative to the Page size?

Code sample

# Getting the first values
root = tk.Tk()
screen_width = root.winfo_screenwidth()
screen_height = root.winfo_screenheight()

# This way I update the variables when the screen size changes (by debugging, I have made sure that the variables really change)
def change_values(e):
  screen_width = page.width
  screen_height = page.height
  page.update()

# An example of one of the widgets is:
ft.Container(
  width = screen_width*0.5,
)

Error message

No response

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

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

[fsmosca]

Here is an example code. I used the counter example. It simply uses the page on_resize event to resize the TextField control width size.

import flet as ft

def main(page: ft.Page):
    page.title = "Flet counter example"
    page.vertical_alignment = ft.MainAxisAlignment.CENTER

    def page_resize(e):  # <<< new
        # Pops up a message from page bottom side.
        page.snack_bar = ft.SnackBar(ft.Text(f'New page size => width: {page.width}, height: {page.height}'))
        page.snack_bar.open = True

        # Adjust the control width depending on the page width.
        # It worked for both desktop and web.
        txt_number.width = min(100, max(50, page.width * 0.1))
        page.update()

    page.on_resize = page_resize  # <<< new

    txt_number = ft.TextField(value="0", text_align="right")

    def minus_click(e):
        txt_number.value = str(int(txt_number.value) - 1)
        page.update()

    def plus_click(e):
        txt_number.value = str(int(txt_number.value) + 1)        
        page.update()

    page.add(
        ft.Row(
            [
                ft.IconButton(ft.icons.REMOVE, on_click=minus_click),
                txt_number,
                ft.IconButton(ft.icons.ADD, on_click=plus_click),
            ],
            alignment=ft.MainAxisAlignment.CENTER,
        )
    )

ft.app(target=main, view="web_browser")