[Flutter] How to automatically resize and reposition controls when the window is resized?

I'm trying to develop a scratch app with Python Flet. My goal is to find a way to position, or alternatively, to specify controls dimensions relatively to their parent control dimensions. For example, a button width of 70% the container width which is, in turn, the 30% of the page width. In this way, every control dimensions is resized automatically when the page is resized by the user, remaining in the same proportions. I found interesting this property, but when I reduce the window size something still doesn't work. I would like that each control in the page reduces its dimensions proportionally according to the window size.

import flet as ft

def main(page: ft.Page):
page.scroll = ft.ScrollMode.AUTO

### AMBER LEFT CONTAINER ###
col1 = ft.Column([ft.IconButton(icon=ft.icons.UPLOAD_FILE),
ft.IconButton(icon=ft.icons.PICTURE_AS_PDF_OUTLINED),
ft.IconButton(icon=ft.icons.SAVE),])

cont1 = ft.Container(content=col1,
height = page.height,
expand=3, #30% of the page width
bgcolor=ft.colors.AMBER,)
### LEFT CONTAINER ###


### RED RIGHT CONTAINER ###
row0 = ft.Row([ft.Image(src=f"/icon.png", width=200, height=100, fit=ft.ImageFit.FILL,),],
alignment=ft.CrossAxisAlignment.CENTER)
row1 = ft.Row([ft.IconButton(icon=ft.icons.ARROW_CIRCLE_LEFT),
ft.Text("71/155"),
ft.IconButton(icon=ft.icons.ARROW_CIRCLE_RIGHT),])
row2 = ft.Row([ft.TextField(label="Find this keyword inside doc"),
ft.IconButton(icon=ft.icons.FIND_IN_PAGE)])
row3 = ft.Row([ft.TextField(label="Extract these pages from doc", expand=20),
ft.IconButton(icon=ft.icons.FIND_IN_PAGE, expand=1),])

cont2 = ft.Container(content=ft.Column([row0, row1, row2, row3]),
height = page.height,
expand=7, #70% of the page width
bgcolor=ft.colors.RED,)
### RIGHT CONTAINER ###


page.add(ft.Row([cont1, cont2]))
page.update()

ft.app(target=main, assets_dir="assets")


How can I specify controls dimensions in order to make them resize proportionally to the window size?

Continue reading...