[ISSUE] Container "expand=True" doesn't work

[Dario-Ciceri]

Describe your problem: If you try to expand Container layout it doesn't work, is it a known bug (flexible support)?

Reproducing the problem: Just try to expand a Container with expand=True

Media (optional):

flet_navigator version, flet version, OS: FletNavigator version 2.6.5, Flet Version 0.20.2, OS Windows 11 Home 10.0.22631

Additional: ...

[xzripper]

Hello! Thanks for reporting an issue!

---

Actually, I don't think its FletNavigator issue, at least I think so.

from flet import app, Page, Container, Row, TextField

def main(page: Page) -> None:
    page.add(Container(Row([TextField(hint_text='Text...'), TextField(hint_text='Text...')]), expand=True))

app(main)

No FletNavigator used...

I think we can investigate, would you mind sending example/full code?

[Dario-Ciceri]

from flet import *
from src.classes.styles import login_interface_style

class LoginPage(UserControl):
    def __init__(self, page: Page):
        super().__init__()
        self.page = page
        self.username_field = TextField(
            **login_interface_style.get("username_field"),
            bgcolor=colors.with_opacity(0.7,colors.SURFACE),
            on_change=self.validate,
        )
        self.password_field = TextField(
            **login_interface_style.get("password_field"),
            bgcolor=colors.with_opacity(0.7,colors.SURFACE),
            on_change=self.validate,
            on_submit=self.submit,
        )
        self.login_button = ElevatedButton(
            **login_interface_style.get("login_button"), on_click=self.submit,
            bgcolor=colors.with_opacity(0.7,colors.SURFACE),
        )
        self.remember_device_checkbox = Checkbox(
            **login_interface_style.get("remember_device_checkbox")
        )
        self.exit_button = ElevatedButton(
            **login_interface_style.get("exit_button"), 
            on_click=lambda _: self.page.window_close(),
        )
        self.login_page_layout = Column(
                [
                    Container(
                        Column(
                            [
                                #Topbar(page),
                                Container(
                                    Column([self.username_field,self.password_field,self.login_button],alignment=MainAxisAlignment.CENTER),
                                    alignment=alignment.center,
                                    expand=True,
                                ),
                            ],
                            expand=True,
                            alignment=MainAxisAlignment.CENTER
                        ),
                        image_src=r"V2\assets\login_background.png",
                        image_fit=ImageFit.COVER,
                        expand=True,
                        alignment=alignment.center
                    )
                ],
                expand=True,
                alignment=MainAxisAlignment.CENTER
            )

    def build(self):
        return self.login_page_layout

    def validate(self, e: ControlEvent):
        self.password_field.error_text = None
        if self.password_field.value and self.username_field.value:
            self.login_button.disabled = False
        else:
            self.login_button.disabled = True

        self.update()

    def submit(self, e: ControlEvent) -> bool:
       pass

[Dario-Ciceri]

login interface style dict:

login_interface_style = {
    "title": {
        "content": Text("Company name"),
        "bgcolor": "#1d1e2a",
        "width": 300,
        "height": 30,
        "alignment": alignment.center,
    },
    "username_field": {
        "width": 355,
        "label": "Username",
    },
    "password_field": {
        "width": 355,
        "label": "Password",
        "password": True,
        "can_reveal_password": True,
    },
    "login_button": {"text": "Login", "width": 355, "disabled": True},
    "remember_device_checkbox": {
        "label": "Non chiedere più la password",
        "value": False,
        "width": 355,
    },
    "exit_button": {
        "text": "Esci",
        "width": 355,
        "color": colors.RED,
    },
    "interface_column": {
        "alignment": MainAxisAlignment.CENTER,
        "horizontal_alignment": MainAxisAlignment.CENTER,
    },
    "interface_container": {
        "gradient": RadialGradient(
            center=Alignment(0, -1.25),
            radius=2.4,
            colors=[
                "#42445f",
                "#393b52",
                "#33354a",
                "#2f3143",
                "#292b3c",
                "#222331",
                "#1a1a25",
                "#1a1b26",
                "#21222f",
                "#1d1e2a",
            ],
        ),
        "width": 300,
        "height": 270,
        "alignment": alignment.center,
    },
    "interface": {
        "spacing": 0,
    },
}

[Dario-Ciceri]

I also wanted to ask you this, I decided to use your library because I find it well done and especially appreciate that, unlike Flet's basic navigator, it doesn't break anything... what I mean is that I tried to do the same thing with Flet but punctually the reference to the page between different views becomes None and I don't understand why, to give you an example: login page ---> login done goes to home page ---> error if you do a page resize that says NoneType doesn't have the width parameter (so it loses the reference to the current page). .. your library on the other hand requires to send the reference to the current page and in fact this solves my problem thus being able to not only make a multi page app but also with pages of different looks and sizes... do you happen to know what could be the reason why on Flet instead everything breaks, what did you do differently?

I hope I explained myself well, in the meantime thank you!

[Dario-Ciceri]

update:

self.login_page_layout = Container(
                        Column(
                            [
                                #Topbar(self.page),
                                #Container(
                                    Column([self.username_field,self.password_field,self.login_button],alignment=MainAxisAlignment.CENTER),
                                    #alignment=alignment.center,
                                    #expand=True,
                                #),
                            ],
                            #expand=True,
                           # alignment=MainAxisAlignment.CENTER
                        ),
                        image_src=r"V2\assets\login_background.png",
                        image_fit=ImageFit.COVER,
                        expand=True,
                        alignment=alignment.center
                    )

[xzripper]

I also wanted to ask you this, I decided to use your library because I find it well done and especially appreciate that, unlike Flet's basic navigator, it doesn't break anything... what I mean is that I tried to do the same thing with Flet but punctually the reference to the page between different views becomes None and I don't understand why, to give you an example: login page ---> login done goes to home page ---> error if you do a page resize that says NoneType doesn't have the width parameter (so it loses the reference to the current page). .. your library on the other hand requires to send the reference to the current page and in fact this solves my problem thus being able to not only make a multi page app but also with pages of different looks and sizes... do you happen to know what could be the reason why on Flet instead everything breaks, what did you do differently?

I hope I explained myself well, in the meantime thank you!

Thank you, I very appreciate that and I am really glad that you like my library!

Navigation support in Flet is lacking and attempts to implement it are unstable. Separate support for this mechanic was necessary. Navigation in FletNavigator is not straightforward. In VirtualFletNavigator, the library uses a virtual path, making it easier to implement. However, this approach eliminates the possibility of using URL parameters and, most importantly, there are no public routes available. This means that you cannot share a link leading to this route. In the public navigator, the page route is accessed through 'page.route'. FletNavigator intercepts route changes from external sources, such as changes made in the search bar. Additionally, the 'navigate' function is used to modify the route. Each page is linked to a specific route, and when FletNavigator detects that the current route corresponds to a linked page, it calls the corresponding function. The main code for the page is written within this function.

[Dario-Ciceri]

I also wanted to ask you this, I decided to use your library because I find it well done and especially appreciate that, unlike Flet's basic navigator, it doesn't break anything... what I mean is that I tried to do the same thing with Flet but punctually the reference to the page between different views becomes None and I don't understand why, to give you an example: login page ---> login done goes to home page ---> error if you do a page resize that says NoneType doesn't have the width parameter (so it loses the reference to the current page). .. your library on the other hand requires to send the reference to the current page and in fact this solves my problem thus being able to not only make a multi page app but also with pages of different looks and sizes... do you happen to know what could be the reason why on Flet instead everything breaks, what did you do differently? I hope I explained myself well, in the meantime thank you!

Thank you, I very appreciate that and I am really glad that you like my library!

Navigation support in Flet is lacking and attempts to implement it are unstable. Separate support for this mechanic was necessary. Navigation in FletNavigator is not straightforward. In VirtualFletNavigator, the library uses a virtual path, making it easier to implement. However, this approach eliminates the possibility of using URL parameters and, most importantly, there are no public routes available. This means that you cannot share a link leading to this route. In the public navigator, the page route is accessed through 'page.route'. FletNavigator intercepts route changes from external sources, such as changes made in the search bar. Additionally, the 'navigate' function is used to modify the route. Each page is linked to a specific route, and when FletNavigator detects that the current route corresponds to a linked page, it calls the corresponding function. The main code for the page is written within this function.

And I think that's much better, I use flet for desktop and mobile not web so that's perfect for me

[Dario-Ciceri]

update:

self.login_page_layout = Container(
                        Column(
                            [
                                #Topbar(self.page),
                                #Container(
                                    Column([self.username_field,self.password_field,self.login_button],alignment=MainAxisAlignment.CENTER),
                                    #alignment=alignment.center,
                                    #expand=True,
                                #),
                            ],
                            #expand=True,
                           # alignment=MainAxisAlignment.CENTER
                        ),
                        image_src=r"V2\assets\login_background.png",
                        image_fit=ImageFit.COVER,
                        expand=True,
                        alignment=alignment.center
                    )

btw, before using your library it was working so it must be something with your page layout but it doesn't matter I just need to adapt it

[Dario-Ciceri]

this way works but if I expand the internal container it breaks everything!

Also, the external container doesn't expand...

self.login_page_layout = Container(
                        Column(
                            [
                                #Topbar(self.page),
                                Container(
                                    Column([self.username_field,self.password_field,self.login_button],alignment=MainAxisAlignment.CENTER),
                                    alignment=alignment.center,
                                    #expand=True,
                                ),
                            ],
                            expand=True,
                            alignment=MainAxisAlignment.CENTER
                        ),
                        image_src=r"V2\assets\login_background.png",
                        image_fit=ImageFit.COVER,
                        expand=True,
                        alignment=alignment.center
                    )

[xzripper]

FletNavigator just renders the page, but doesn't add any changes. Perhaps the problem is in the front-end of the page, or when the page is refreshed, the past settings for the page are lost. Honestly I have no idea what's happening, I have no experience in Flet front-end, styling, etc... I'll keep investigating in this issue.

[Dario-Ciceri]

FletNavigator just renders the page, but doesn't add any changes. Perhaps the problem is in the front-end of the page, or when the page is refreshed, the past settings for the page are lost. Honestly I have no idea what's happening, I have no experience in Flet front-end, styling, etc... I'll keep investigating in this issue.

For now, I could use height=page.window_height and update this value on_resize

[xzripper]

You mean this fixes the issue?

[Dario-Ciceri]

You mean this fixes the issue?

it's a workaround but still not really flexible because it has a little delay I believe I mean, expand is much faster (idk why) and on_resize is a little "laggy"

[xzripper]

Hmm, is it possible for you to send me full project code and resources? Because I can't run code because it has lack of images and other parts of code

[Dario-Ciceri]

Hmm, is it possible for you to send me full project code and resources? Because I can't run code because it has lack of images and other parts of code

Unfortunately I don't think I can do it, I didn't send you drafts to complicate your life but just because I am limited on what material to share, I understand if you can't help me but if I find the solution I will share it here for everyone

[xzripper]

Yep, sure I understand that. I will continue investigating. Good luck!

[Dario-Ciceri]

I can share with you this solution: You can adapt it to your example and see how it behaves

self.page.on_resize = self.on_resize

def on_resize(self,e):
        self.login_page_layout.height = self.page.window_height
        self.update()

[Dario-Ciceri]

ok, useful update: I tried to come back to my original code before using your library: the good news is that I think it's not your library fault but the layout type I used... before your library I was using class LoginPage(View) and it works very well, but your library requires UserControl and that breaks everything, I tried without your library and with class LoginPage(userControl) and that breaks everything too! So it looks like I can't use UserControl and maybe it's my fault

[Dario-Ciceri]

so now my question is: how do I correctly define a page layout with your library? It doesn't accept the View type, any ideas?

[Dario-Ciceri]

ok, I got it! just use pg.page.views.append(LoginPage(pg)) and this way I can use your beautiful working navigator with my classes (View type)

[Dario-Ciceri]

well, I think we can close this. Example:

@route("login_page")
def second_page(pg: PageData) -> None:
    for key, value in page_style.get("root", {}).items():
        setattr(pg.page, key, value)
    pg.page.padding = 0
    pg.page.views.append(LoginPage(pg))

class LoginPage(View):
    def __init__(self, pg:PageData):
        super().__init__()
        self.pg = pg
        self.page = self.pg.page
        self.route = "/login"
        self.padding = 0
        self.vertical_alignment=MainAxisAlignment.CENTER
        self.horizontal_alignment=CrossAxisAlignment.CENTER
       etc...

[xzripper]

I am glad you got your issue fixed! Congratulations and good luck!