[ISSUE] Container "expand=True" doesn't work about flet_navigator HOT 22 CLOSED

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!

from flet_navigator.

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

from flet_navigator.

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.

from flet_navigator.

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

from flet_navigator.

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"

from flet_navigator.

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

from flet_navigator.

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

from flet_navigator.

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()

from flet_navigator.

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)

from flet_navigator.

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...

from flet_navigator.

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

from flet_navigator.

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?

from flet_navigator.

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

from flet_navigator.

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,
    },
}

from flet_navigator.

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
                    )

from flet_navigator.

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.

from flet_navigator.

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

from flet_navigator.

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
                    )

from flet_navigator.

You mean this fixes the issue?

from flet_navigator.

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

from flet_navigator.

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

from flet_navigator.

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?

from flet_navigator.