how to get parent control dimension.

[asagarshinde]

I want to create a container with the maximum available space, whenever I use expand=True output goes blank. If I get the parent widget size then I can set the width and height for the container. Is there any way to know the parent size similar to MediaQuery in flutter?

[FeodorFitsner]

Would you share a code sample please?

[asagarshinde]

import flet
import flet as ft


class LeftPanel(ft.UserControl):
    def __init__(self):
        super().__init__()

    def build(self):
        return ft.Column(
            controls=[
                ft.Container(
                    bgcolor=ft.colors.BLUE,
                    width=300,
                    height=300
                ),
                ft.Container(
                    bgcolor=ft.colors.RED_50,
                    width=300,
                    height=300
                ),
            ]
        )


class RightPanel(ft.UserControl):
    def __init__(self):
        super().__init__()

    def build(self):
        return ft.Column(
            controls=[
                ft.Container(
                    bgcolor=ft.colors.BLUE,
                    width=600,
                    height=300
                ),
                ft.Container(
                    bgcolor=ft.colors.RED_50,
                    width=600,
                    height=300
                ),
            ]
        )


def main(page):
    page.add(
        ft.Row(
            controls=[
                LeftPanel(),
                RightPanel()
            ]
        )
    )


flet.app(target=main)

I don't want to hardcode the height and width in the above code. It should be derived from the current screen dimensions so I can use the entire screen properly. If you execute the above you can observe there is space available on the right side of the screen.

[ndonkoHenri]

Please what did you mean by 'parent'?
Why not maybe get/use page.width and/or page.height and from there, arrange the sizes of your containers?
Or maybe add an expand property in the constructor of each UserControl?

def __init__(self):
    super().__init__()
    self.expand = True

[asagarshinde]

Whenever I use a page.width /page.height in UserControl get below error.
To test in above shared snippet I have user width=page.width in LeftPanel user control.

width=self.page.width,
AttributeError: 'NoneType' object has no attribute 'width'

[ndonkoHenri]

Yeah. Have a look at this comment on that issue:
#489 (comment)

[Francois-Belanger]

Maybe you could change your init of your control and pass the width and height of your page. I don't see how UserControl could have access to this, self.page is a NoneType. When you call your UserControl, you pass by arguments.

import flet as ft


class LeftPanel(ft.UserControl):
    def __init__(self, width, height):
        super().__init__()
        self.width_arg = width
        self.height_arg = height

    def build(self):
        return ft.Column(
            controls=[
                ft.Container(
                    bgcolor=ft.colors.BLUE,
                    width=self.width_arg / 3,
                    height=self.height_arg / 2
                ),
                ft.Container(
                    bgcolor=ft.colors.RED_50,
                    width=self.width_arg / 3,
                    height=self.height_arg / 2
                ),
            ]
        )


class RightPanel(ft.UserControl):
    def __init__(self, width, height):
        super().__init__()
        self.width_arg = width
        self.height_arg = height

    def build(self):
        return ft.Column(
            controls=[
                ft.Container(
                    bgcolor=ft.colors.BLUE,
                    width=self.width_arg * 2 / 3,
                    height=self.height_arg / 2
                ),
                ft.Container(
                    bgcolor=ft.colors.RED_50,
                    width=self.width_arg * 2 / 3,
                    height=self.height_arg / 2
                ),
            ]
        )


def main(page):
    page.add(
        ft.Row(
            controls=[
                LeftPanel(page.width, page.height),
                RightPanel(page.width, page.height)
            ]
        )
    )


flet.app(target=main)