Posted onJun 13, 2022

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

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

classSwithMode:def__init__(self,page):self.page=pageself.page.floating_action_button=FloatingActionButton("+",icon="add",content=Icon(icons.DARK_MODE))self.page.floating_action_button.on_click=self.switch_modedefswitch_mode(self,e):self.page.theme_mode="light"ifself.page.theme_mode=="dark"else"dark"self.page.floating_action_button.content=Icon(icons.LIGHT_MODE)ifself.page.theme_mode=="dark"=="dark"elseIcon(icons.DARK_MODE)self.page.update()

Main App Page

classAppMain:def__init__(self,page):self.page=pageself.page.horizontal_alignment='center'self.page.vertical_alignment='center'self.TextHeaderWelcome=Text('Hello all members, this is wk-18k'stestapp.',style="headlineLarge",text_align='center')        self.BtnToRes = FilledButton('PressToRegister',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

classAppRegister:def__init__(self,page):self.page=pageself.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.submitself.BackMain=FilledButton('Back',height=50,width=200)self.BackMain.on_click=self.back_mainself.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]foriinself.InputList:self.page.add(i)self.page.update()defback_main(self,event):foriinself.InputList:self.page.controls.pop()AppMain(self.page)defsubmit(self,event):importjsondata={"id":self.page.session_id,"first":self.NameInput.value,"last":self.SurnameInput.value,"age":self.AgeInput.value}withopen('data.json','r')asf:data_json=json.load(f)data_json.append(data)withopen('data.json','w')asf:json.dump(data_json,f)# print(self.page.session_id)# print(self.NameInput.value)# print(self.SurnameInput.value)# print(self.AgeInput.value)