Skip to content

Keep open modal/alert_dialog after refreshing page - Fixed #5176

@iBuitron

Description

@iBuitron

Simple way to keep open a modal/alert_dialog after refresing a web.

Duplicate Check

Describe the requested feature

import flet as ft
import httpx
from fastapi import FastAPI

port = 8000


class NameValidatorPage(ft.View):
    def __init__(self):
        super().__init__(
            route="/",
        )
        self.dialog = SelectDatabaseModal()

        self.controls = [ft.Text("Hello, Flet!"), self.dialog]


class SelectDatabaseModal(ft.AlertDialog):
    def __init__(self):
        super().__init__(modal=True)
        # Start opened modal
        self.open = True
        self.content = ft.Column(
            [
                ft.Text("This is a modal"),
                ft.ElevatedButton("Close", on_click=self.close_dialog),
            ]
        )

    def close_dialog(self, e):
        self.open = False
        #This gonna keep False after refreshing, so use "set_open_modal with on_connect to update on refreshing"
        self.page.update()

    def build(self):
        # Have to set in build, cuz here you can use self.page (unless you init self.page = page) at constructor, didn't try)
        self.page.on_connect = self.set_open_modal

    def set_open_modal(self, e):
        # when you close the modal using "self.open = False" it keeps "False after refreshing",
        # so here, set "self.open = True", this func gonna be call in "on_connect", so this replace the previouse                # "self.open = False" to True.
        self.open = True
        self.page.update()


def main(page: ft.Page):
    view = NameValidatorPage()
    page.views.append(view)
    page.update()


flet_app = ft.app(main, export_asgi_app=True)

if __name__ == "__main__":
    import uvicorn

    uvicorn.run(
        "flet_app_2:flet_app",
        host="0.0.0.0",
        port=port,
        reload=True,
    )

    print("Starting Flet app...")

Suggest a solution

Mb can add to the documentation.
Hope help to someone.

Screenshots

No response

Additional details

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions