Simple App from Flet

#python #flet

Here's an example of a simple Flet application development I've tried. Try to change the page of the app. Because the document does not have a clear guideline. I could just pop() remove the containers one by one instead. This might not be the best way. But hopefully there will be a better way in the future.

App Index Page

def main(page: Page):
    page.title = 'App wk18k'

    page.theme = theme.Theme(color_scheme_seed="indigo")

    page.theme_mode = "dark"

    page.horizontal_alignment = 'center'

    AppMain(page)
    SwithMode(page)
    page.update()

flet.app(target=main,port=25648,)
brownser://localhost:25648/

Toggle dark mode and light mode.

class SwithMode:
    def __init__(self,page):
        self.page = page
        self.page.floating_action_button = FloatingActionButton("+",icon="add",content=Icon(icons.DARK_MODE))
        self.page.floating_action_button.on_click = self.switch_mode
    def switch_mode(self,e):
        self.page.theme_mode="light" if self.page.theme_mode=="dark" else "dark"
        self.page.floating_action_button.content = Icon(icons.LIGHT_MODE) if self.page.theme_mode=="dark" == "dark" else Icon(icons.DARK_MODE)
        self.page.update()

Main App Page

class AppMain:
    def __init__(self,page):
        self.page = page
        self.page.horizontal_alignment = 'center'
        self.page.vertical_alignment = 'center'
        self.TextHeaderWelcome = Text('Hello all members, this is wk-18k's test app.',style="headlineLarge",text_align='center')
        self.BtnToRes = FilledButton('Press To Register',height=50,width=200)
        self.BtnToRes.on_click = self.to_res
        self.Container1 = Container(content=self.TextHeaderWelcome,margin=5,padding=padding.only(left=30,right=30))
        self.Container2 = Container(content=self.BtnToRes,margin=5,padding=padding.only(left=30,right=30))
        self.img = Image(src=f"/icons/icon-512.png",width=100,height=100,fit="contain",)
        self.WidgetList = [self.img,self.Container1,self.Container2]
        for i in self.WidgetList:
            self.page.add(i)
        self.page.update()


    def to_res(self,event):
        for i in self.WidgetList:
            self.page.controls.pop()
        AppRegister(self.page)
        self.page.update()

App Registration page

class AppRegister:
    def __init__(self,page):
        self.page = page
        self.page.horizontal_alignment = 'center'
        self.page.vertical_alignment = 'start'
        self.NameInput = TextField(label='First',hint_text='First Name',width=300)
        self.SurnameInput = TextField(label='Last',hint_text='Last Name',width=300)
        self.AgeInput = TextField(label='Age',hint_text='อายุ',width=300,keyboard_type='number',value = 0)
        self.TextHeader = Text('Subscribe',style="displaySmall")
        self.Submit = FilledButton('Register',height=50,width=200)
        self.Submit.on_click = self.submit
        self.BackMain = FilledButton('Back',height=50,width=200)
        self.BackMain.on_click = self.back_main
        self.Container1 = Container(content=self.TextHeader,margin=10,)
        self.Container2 = Container(content=self.NameInput,margin=5,padding=padding.only(left=30,right=30))
        self.Container3 = Container(content=self.SurnameInput,margin=5,padding=padding.only(left=30,right=30))
        self.Container4 = Container(content=self.AgeInput,margin=5,padding=padding.only(left=30,right=30))
        self.Container5 = Container(content=self.Submit,margin=5,padding=padding.only(left=30,right=30))
        self.Container6 = Container(content=self.BackMain,margin=5,padding=padding.only(left=30,right=30))
        self.InputList = [self.Container1,self.Container2,self.Container3,self.Container4,self.Container5,self.Container6]
        for i in self.InputList:
            self.page.add(i)
        self.page.update()
    def back_main(self,event):
        for i in self.InputList:
            self.page.controls.pop()
        AppMain(self.page)

    def submit(self,event):
        import json
        data = {
            "id":self.page.session_id,
            "first":self.NameInput.value,
            "last":self.SurnameInput.value,
            "age":self.AgeInput.value
        }
        with open('data.json','r') as f:
            data_json = json.load(f)
        data_json.append(data)
        with open('data.json','w') as f:
            json.dump(data_json,f)

        # print(self.page.session_id)
        # print(self.NameInput.value)

        # print(self.SurnameInput.value)
        # print(self.AgeInput.value)