From fbc4e7bacbc9d5a2926a06b112bb1036e499e403 Mon Sep 17 00:00:00 2001 From: Inesa Fitsner Date: Sat, 11 Jun 2022 14:44:27 -0700 Subject: [PATCH 01/10] Create calc.py --- python/tutorials/calc/calc.py | 181 ++++++++++++++++++++++++++++++++++ 1 file changed, 181 insertions(+) create mode 100644 python/tutorials/calc/calc.py diff --git a/python/tutorials/calc/calc.py b/python/tutorials/calc/calc.py new file mode 100644 index 00000000..e6379b42 --- /dev/null +++ b/python/tutorials/calc/calc.py @@ -0,0 +1,181 @@ +import flet +from flet import ( + Column, + Container, + ElevatedButton, + Page, + Row, + Text, + border_radius, + colors, +) + + +class CalcApp: + def __init__(self): + self.result = Text(value="0", color=colors.WHITE, size=20) + + # application's root control (i.e. "view") containing all other controls + self.view = Container( + bgcolor=colors.BLACK, + border_radius=border_radius.all(20), + padding=20, + content=Column( + controls=[ + Row(controls=[self.result], alignment="end"), + Row( + controls=[ + ElevatedButton( + text="AC", + bgcolor=colors.BLUE_GREY_100, + color=colors.BLACK, + expand=1, + ), + ElevatedButton( + text="+/-", + bgcolor=colors.BLUE_GREY_100, + color=colors.BLACK, + expand=1, + ), + ElevatedButton( + text="%", + bgcolor=colors.BLUE_GREY_100, + color=colors.BLACK, + expand=1, + ), + ElevatedButton( + text="/", + bgcolor=colors.ORANGE, + color=colors.WHITE, + expand=1, + ), + ], + ), + Row( + controls=[ + ElevatedButton( + text="7", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + ), + ElevatedButton( + text="8", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + ), + ElevatedButton( + text="9", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + ), + ElevatedButton( + text="*", + bgcolor=colors.ORANGE, + color=colors.WHITE, + expand=1, + ), + ] + ), + Row( + controls=[ + ElevatedButton( + text="4", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + ), + ElevatedButton( + text="5", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + ), + ElevatedButton( + text="6", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + ), + ElevatedButton( + text="-", + bgcolor=colors.ORANGE, + color=colors.WHITE, + expand=1, + ), + ] + ), + Row( + controls=[ + ElevatedButton( + text="1", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + ), + ElevatedButton( + text="2", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + ), + ElevatedButton( + text="3", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + ), + ElevatedButton( + text="+", + bgcolor=colors.ORANGE, + color=colors.WHITE, + expand=1, + ), + ] + ), + Row( + controls=[ + ElevatedButton( + text="0", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=2, + ), + ElevatedButton( + text=".", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + ), + ElevatedButton( + text="=", + bgcolor=colors.ORANGE, + color=colors.WHITE, + expand=1, + ), + ] + ), + ], + ), + ) + + def add_clicked(self, e): + self.view.update() + + +def main(page: Page): + page.title = "Calc App" + page.horizontal_alignment = "center" + page.vertical_alignment = "center" + page.update() + + # create application instance + app = CalcApp() + + # add application's root control to the page + page.add(Column([app.view], width=300)) + + +flet.app(target=main) From 7b8da6ee184bdf742c020ae589160f07483a2fe5 Mon Sep 17 00:00:00 2001 From: Inesa Fitsner Date: Sat, 11 Jun 2022 15:23:32 -0700 Subject: [PATCH 02/10] Update calc.py --- python/tutorials/calc/calc.py | 47 ++++++++++++++++++++++++++++++++++- 1 file changed, 46 insertions(+), 1 deletion(-) diff --git a/python/tutorials/calc/calc.py b/python/tutorials/calc/calc.py index e6379b42..6bb1ab9b 100644 --- a/python/tutorials/calc/calc.py +++ b/python/tutorials/calc/calc.py @@ -13,6 +13,10 @@ class CalcApp: def __init__(self): + self.operator = "+" + self.operand1 = 0 + self.operand2 = 0 + self.new_operand = True self.result = Text(value="0", color=colors.WHITE, size=20) # application's root control (i.e. "view") containing all other controls @@ -30,6 +34,8 @@ def __init__(self): bgcolor=colors.BLUE_GREY_100, color=colors.BLACK, expand=1, + on_click=self.button_clicked, + data="AC", ), ElevatedButton( text="+/-", @@ -58,18 +64,24 @@ def __init__(self): bgcolor=colors.WHITE24, color=colors.WHITE, expand=1, + on_click=self.button_clicked, + data="7", ), ElevatedButton( text="8", bgcolor=colors.WHITE24, color=colors.WHITE, expand=1, + on_click=self.button_clicked, + data="8", ), ElevatedButton( text="9", bgcolor=colors.WHITE24, color=colors.WHITE, expand=1, + on_click=self.button_clicked, + data="9", ), ElevatedButton( text="*", @@ -86,18 +98,24 @@ def __init__(self): bgcolor=colors.WHITE24, color=colors.WHITE, expand=1, + on_click=self.button_clicked, + data="4", ), ElevatedButton( text="5", bgcolor=colors.WHITE24, color=colors.WHITE, expand=1, + on_click=self.button_clicked, + data="5", ), ElevatedButton( text="6", bgcolor=colors.WHITE24, color=colors.WHITE, expand=1, + on_click=self.button_clicked, + data="6", ), ElevatedButton( text="-", @@ -114,24 +132,32 @@ def __init__(self): bgcolor=colors.WHITE24, color=colors.WHITE, expand=1, + on_click=self.button_clicked, + data="1", ), ElevatedButton( text="2", bgcolor=colors.WHITE24, color=colors.WHITE, expand=1, + on_click=self.button_clicked, + data="2", ), ElevatedButton( text="3", bgcolor=colors.WHITE24, color=colors.WHITE, expand=1, + on_click=self.button_clicked, + data="3", ), ElevatedButton( text="+", bgcolor=colors.ORANGE, color=colors.WHITE, expand=1, + on_click=self.button_clicked, + data="+", ), ] ), @@ -142,12 +168,16 @@ def __init__(self): bgcolor=colors.WHITE24, color=colors.WHITE, expand=2, + on_click=self.button_clicked, + data="0", ), ElevatedButton( text=".", bgcolor=colors.WHITE24, color=colors.WHITE, expand=1, + on_click=self.button_clicked, + data=".", ), ElevatedButton( text="=", @@ -161,7 +191,22 @@ def __init__(self): ), ) - def add_clicked(self, e): + def button_clicked(self, e): + if e.data == "AC": + self.result.value = "0" + + elif e.data in ("1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "."): + if self.result.value == "0" or self.new_operand == True: + self.result.value = e.data + self.new_operand = False + else: + self.result.value = self.result.value + e.data + + elif e.data in ("+"): + self.operator = e.data + self.operand1 = float(self.result.value) + self.new_operand = True + self.view.update() From ab89f793cb17ffefe112e393ec051e8dd8865806 Mon Sep 17 00:00:00 2001 From: Inesa Fitsner Date: Sat, 11 Jun 2022 16:48:28 -0700 Subject: [PATCH 03/10] Update calc.py --- python/tutorials/calc/calc.py | 375 +++++++++++++++++++--------------- 1 file changed, 210 insertions(+), 165 deletions(-) diff --git a/python/tutorials/calc/calc.py b/python/tutorials/calc/calc.py index 6bb1ab9b..65e4c7eb 100644 --- a/python/tutorials/calc/calc.py +++ b/python/tutorials/calc/calc.py @@ -15,185 +15,200 @@ class CalcApp: def __init__(self): self.operator = "+" self.operand1 = 0 - self.operand2 = 0 self.new_operand = True self.result = Text(value="0", color=colors.WHITE, size=20) # application's root control (i.e. "view") containing all other controls - self.view = Container( - bgcolor=colors.BLACK, - border_radius=border_radius.all(20), - padding=20, - content=Column( - controls=[ - Row(controls=[self.result], alignment="end"), - Row( + self.view = Column( + width=300, + controls=[ + Container( + bgcolor=colors.BLACK, + border_radius=border_radius.all(20), + padding=20, + content=Column( controls=[ - ElevatedButton( - text="AC", - bgcolor=colors.BLUE_GREY_100, - color=colors.BLACK, - expand=1, - on_click=self.button_clicked, - data="AC", + Row(controls=[self.result], alignment="end"), + Row( + controls=[ + ElevatedButton( + text="AC", + bgcolor=colors.BLUE_GREY_100, + color=colors.BLACK, + expand=1, + on_click=self.button_clicked, + data="AC", + ), + ElevatedButton( + text="+/-", + bgcolor=colors.BLUE_GREY_100, + color=colors.BLACK, + expand=1, + ), + ElevatedButton( + text="%", + bgcolor=colors.BLUE_GREY_100, + color=colors.BLACK, + expand=1, + ), + ElevatedButton( + text="/", + bgcolor=colors.ORANGE, + color=colors.WHITE, + expand=1, + on_click=self.button_clicked, + data="/", + ), + ], ), - ElevatedButton( - text="+/-", - bgcolor=colors.BLUE_GREY_100, - color=colors.BLACK, - expand=1, + Row( + controls=[ + ElevatedButton( + text="7", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + on_click=self.button_clicked, + data="7", + ), + ElevatedButton( + text="8", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + on_click=self.button_clicked, + data="8", + ), + ElevatedButton( + text="9", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + on_click=self.button_clicked, + data="9", + ), + ElevatedButton( + text="*", + bgcolor=colors.ORANGE, + color=colors.WHITE, + expand=1, + on_click=self.button_clicked, + data="*", + ), + ] ), - ElevatedButton( - text="%", - bgcolor=colors.BLUE_GREY_100, - color=colors.BLACK, - expand=1, + Row( + controls=[ + ElevatedButton( + text="4", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + on_click=self.button_clicked, + data="4", + ), + ElevatedButton( + text="5", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + on_click=self.button_clicked, + data="5", + ), + ElevatedButton( + text="6", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + on_click=self.button_clicked, + data="6", + ), + ElevatedButton( + text="-", + bgcolor=colors.ORANGE, + color=colors.WHITE, + expand=1, + on_click=self.button_clicked, + data="-", + ), + ] ), - ElevatedButton( - text="/", - bgcolor=colors.ORANGE, - color=colors.WHITE, - expand=1, + Row( + controls=[ + ElevatedButton( + text="1", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + on_click=self.button_clicked, + data="1", + ), + ElevatedButton( + text="2", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + on_click=self.button_clicked, + data="2", + ), + ElevatedButton( + text="3", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + on_click=self.button_clicked, + data="3", + ), + ElevatedButton( + text="+", + bgcolor=colors.ORANGE, + color=colors.WHITE, + expand=1, + on_click=self.button_clicked, + data="+", + ), + ] ), - ], - ), - Row( - controls=[ - ElevatedButton( - text="7", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=1, - on_click=self.button_clicked, - data="7", - ), - ElevatedButton( - text="8", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=1, - on_click=self.button_clicked, - data="8", - ), - ElevatedButton( - text="9", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=1, - on_click=self.button_clicked, - data="9", - ), - ElevatedButton( - text="*", - bgcolor=colors.ORANGE, - color=colors.WHITE, - expand=1, - ), - ] - ), - Row( - controls=[ - ElevatedButton( - text="4", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=1, - on_click=self.button_clicked, - data="4", - ), - ElevatedButton( - text="5", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=1, - on_click=self.button_clicked, - data="5", - ), - ElevatedButton( - text="6", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=1, - on_click=self.button_clicked, - data="6", - ), - ElevatedButton( - text="-", - bgcolor=colors.ORANGE, - color=colors.WHITE, - expand=1, - ), - ] - ), - Row( - controls=[ - ElevatedButton( - text="1", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=1, - on_click=self.button_clicked, - data="1", - ), - ElevatedButton( - text="2", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=1, - on_click=self.button_clicked, - data="2", - ), - ElevatedButton( - text="3", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=1, - on_click=self.button_clicked, - data="3", + Row( + controls=[ + ElevatedButton( + text="0", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=2, + on_click=self.button_clicked, + data="0", + ), + ElevatedButton( + text=".", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + on_click=self.button_clicked, + data=".", + ), + ElevatedButton( + text="=", + bgcolor=colors.ORANGE, + color=colors.WHITE, + expand=1, + on_click=self.button_clicked, + data="=", + ), + ] ), - ElevatedButton( - text="+", - bgcolor=colors.ORANGE, - color=colors.WHITE, - expand=1, - on_click=self.button_clicked, - data="+", - ), - ] - ), - Row( - controls=[ - ElevatedButton( - text="0", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=2, - on_click=self.button_clicked, - data="0", - ), - ElevatedButton( - text=".", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=1, - on_click=self.button_clicked, - data=".", - ), - ElevatedButton( - text="=", - bgcolor=colors.ORANGE, - color=colors.WHITE, - expand=1, - ), - ] + ], ), - ], - ), + ) + ], ) def button_clicked(self, e): if e.data == "AC": self.result.value = "0" + self.operator = "+" + self.operand1 = 0 + self.new_operand = True elif e.data in ("1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "."): if self.result.value == "0" or self.new_operand == True: @@ -202,13 +217,43 @@ def button_clicked(self, e): else: self.result.value = self.result.value + e.data - elif e.data in ("+"): + elif e.data in ("+", "-", "*", "/"): + self.result.value = self.calculate( + self.operand1, float(self.result.value), self.operator + ) self.operator = e.data self.operand1 = float(self.result.value) self.new_operand = True + elif e.data in ("="): + self.result.value = self.calculate( + self.operand1, float(self.result.value), self.operator + ) + self.operator = "+" + self.operand1 = 0 + self.new_operand = True + self.view.update() + def calculate(self, operand1, operand2, operator): + def format_number(num): + if num % 1 == 0: + return int(num) + else: + return num + + if operator == "+": + return format_number(operand1 + operand2) + + elif operator == "-": + return format_number(operand1 - operand2) + + elif operator == "*": + return format_number(operand1 * operand2) + + elif operator == "/": + return format_number(operand1 / operand2) + def main(page: Page): page.title = "Calc App" @@ -220,7 +265,7 @@ def main(page: Page): app = CalcApp() # add application's root control to the page - page.add(Column([app.view], width=300)) + page.add(app.view) flet.app(target=main) From b821f91f70c9c3cb45cafe375c9f3c3937a9130f Mon Sep 17 00:00:00 2001 From: Inesa Fitsner Date: Sat, 11 Jun 2022 17:21:59 -0700 Subject: [PATCH 04/10] Update calc.py --- python/tutorials/calc/calc.py | 38 ++++++++++++++++++++++++++--------- 1 file changed, 29 insertions(+), 9 deletions(-) diff --git a/python/tutorials/calc/calc.py b/python/tutorials/calc/calc.py index 65e4c7eb..20b5d220 100644 --- a/python/tutorials/calc/calc.py +++ b/python/tutorials/calc/calc.py @@ -44,12 +44,16 @@ def __init__(self): bgcolor=colors.BLUE_GREY_100, color=colors.BLACK, expand=1, + on_click=self.button_clicked, + data="+/-", ), ElevatedButton( text="%", bgcolor=colors.BLUE_GREY_100, color=colors.BLACK, expand=1, + on_click=self.button_clicked, + data="%", ), ElevatedButton( text="/", @@ -233,26 +237,42 @@ def button_clicked(self, e): self.operand1 = 0 self.new_operand = True + elif e.data in ("%"): + self.result.value = float(self.result.value) / 100 + self.operator = "+" + self.operand1 = 0 + self.new_operand = True + + elif e.data in ("+/-"): + if float(self.result.value) > 0: + self.result.value = "-" + str(self.result.value) + + elif float(self.result.value) < 0: + self.result.value = str( + self.format_number(abs(float(self.result.value))) + ) + self.view.update() + def format_number(self, num): + if num % 1 == 0: + return int(num) + else: + return num + def calculate(self, operand1, operand2, operator): - def format_number(num): - if num % 1 == 0: - return int(num) - else: - return num if operator == "+": - return format_number(operand1 + operand2) + return self.format_number(operand1 + operand2) elif operator == "-": - return format_number(operand1 - operand2) + return self.format_number(operand1 - operand2) elif operator == "*": - return format_number(operand1 * operand2) + return self.format_number(operand1 * operand2) elif operator == "/": - return format_number(operand1 / operand2) + return self.format_number(operand1 / operand2) def main(page: Page): From e985fe36af1cff14d1122db4ee9f5bf26aad5c40 Mon Sep 17 00:00:00 2001 From: Inesa Fitsner Date: Sat, 11 Jun 2022 18:15:17 -0700 Subject: [PATCH 05/10] Update calc.py --- python/tutorials/calc/calc.py | 29 +++++++++++++++++------------ 1 file changed, 17 insertions(+), 12 deletions(-) diff --git a/python/tutorials/calc/calc.py b/python/tutorials/calc/calc.py index 20b5d220..499f2300 100644 --- a/python/tutorials/calc/calc.py +++ b/python/tutorials/calc/calc.py @@ -208,11 +208,9 @@ def __init__(self): ) def button_clicked(self, e): - if e.data == "AC": + if self.result.value == "Error" or e.data == "AC": self.result.value = "0" - self.operator = "+" - self.operand1 = 0 - self.new_operand = True + self.reset() elif e.data in ("1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "."): if self.result.value == "0" or self.new_operand == True: @@ -226,22 +224,21 @@ def button_clicked(self, e): self.operand1, float(self.result.value), self.operator ) self.operator = e.data - self.operand1 = float(self.result.value) + if self.result.value == "Error": + self.operand1 = "0" + else: + self.operand1 = float(self.result.value) self.new_operand = True elif e.data in ("="): self.result.value = self.calculate( self.operand1, float(self.result.value), self.operator ) - self.operator = "+" - self.operand1 = 0 - self.new_operand = True + self.reset() elif e.data in ("%"): self.result.value = float(self.result.value) / 100 - self.operator = "+" - self.operand1 = 0 - self.new_operand = True + self.reset() elif e.data in ("+/-"): if float(self.result.value) > 0: @@ -272,7 +269,15 @@ def calculate(self, operand1, operand2, operator): return self.format_number(operand1 * operand2) elif operator == "/": - return self.format_number(operand1 / operand2) + if operand2 == 0: + return "Error" + else: + return self.format_number(operand1 / operand2) + + def reset(self): + self.operator = "+" + self.operand1 = 0 + self.new_operand = True def main(page: Page): From c99959eeedd04012315cdcecfedf627e4ab95610 Mon Sep 17 00:00:00 2001 From: Inesa Fitsner Date: Sat, 11 Jun 2022 20:37:03 -0700 Subject: [PATCH 06/10] steps 1 - 7 --- python/tutorials/calc/calc.py | 355 ++++++++++++++++----------------- python/tutorials/calc/calc1.py | 33 +++ python/tutorials/calc/calc2.py | 57 ++++++ python/tutorials/calc/calc3.py | 72 +++++++ python/tutorials/calc/calc4.py | 116 +++++++++++ python/tutorials/calc/calc5.py | 168 ++++++++++++++++ python/tutorials/calc/calc6.py | 174 ++++++++++++++++ python/tutorials/calc/calc7.py | 190 ++++++++++++++++++ 8 files changed, 984 insertions(+), 181 deletions(-) create mode 100644 python/tutorials/calc/calc1.py create mode 100644 python/tutorials/calc/calc2.py create mode 100644 python/tutorials/calc/calc3.py create mode 100644 python/tutorials/calc/calc4.py create mode 100644 python/tutorials/calc/calc5.py create mode 100644 python/tutorials/calc/calc6.py create mode 100644 python/tutorials/calc/calc7.py diff --git a/python/tutorials/calc/calc.py b/python/tutorials/calc/calc.py index 499f2300..53deb933 100644 --- a/python/tutorials/calc/calc.py +++ b/python/tutorials/calc/calc.py @@ -19,192 +19,188 @@ def __init__(self): self.result = Text(value="0", color=colors.WHITE, size=20) # application's root control (i.e. "view") containing all other controls - self.view = Column( + self.view = Container( width=300, - controls=[ - Container( - bgcolor=colors.BLACK, - border_radius=border_radius.all(20), - padding=20, - content=Column( + bgcolor=colors.BLACK, + border_radius=border_radius.all(20), + padding=20, + content=Column( + controls=[ + Row(controls=[self.result], alignment="end"), + Row( controls=[ - Row(controls=[self.result], alignment="end"), - Row( - controls=[ - ElevatedButton( - text="AC", - bgcolor=colors.BLUE_GREY_100, - color=colors.BLACK, - expand=1, - on_click=self.button_clicked, - data="AC", - ), - ElevatedButton( - text="+/-", - bgcolor=colors.BLUE_GREY_100, - color=colors.BLACK, - expand=1, - on_click=self.button_clicked, - data="+/-", - ), - ElevatedButton( - text="%", - bgcolor=colors.BLUE_GREY_100, - color=colors.BLACK, - expand=1, - on_click=self.button_clicked, - data="%", - ), - ElevatedButton( - text="/", - bgcolor=colors.ORANGE, - color=colors.WHITE, - expand=1, - on_click=self.button_clicked, - data="/", - ), - ], + ElevatedButton( + text="AC", + bgcolor=colors.BLUE_GREY_100, + color=colors.BLACK, + expand=1, + on_click=self.button_clicked, + data="AC", ), - Row( - controls=[ - ElevatedButton( - text="7", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=1, - on_click=self.button_clicked, - data="7", - ), - ElevatedButton( - text="8", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=1, - on_click=self.button_clicked, - data="8", - ), - ElevatedButton( - text="9", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=1, - on_click=self.button_clicked, - data="9", - ), - ElevatedButton( - text="*", - bgcolor=colors.ORANGE, - color=colors.WHITE, - expand=1, - on_click=self.button_clicked, - data="*", - ), - ] + ElevatedButton( + text="+/-", + bgcolor=colors.BLUE_GREY_100, + color=colors.BLACK, + expand=1, + on_click=self.button_clicked, + data="+/-", ), - Row( - controls=[ - ElevatedButton( - text="4", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=1, - on_click=self.button_clicked, - data="4", - ), - ElevatedButton( - text="5", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=1, - on_click=self.button_clicked, - data="5", - ), - ElevatedButton( - text="6", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=1, - on_click=self.button_clicked, - data="6", - ), - ElevatedButton( - text="-", - bgcolor=colors.ORANGE, - color=colors.WHITE, - expand=1, - on_click=self.button_clicked, - data="-", - ), - ] + ElevatedButton( + text="%", + bgcolor=colors.BLUE_GREY_100, + color=colors.BLACK, + expand=1, + on_click=self.button_clicked, + data="%", ), - Row( - controls=[ - ElevatedButton( - text="1", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=1, - on_click=self.button_clicked, - data="1", - ), - ElevatedButton( - text="2", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=1, - on_click=self.button_clicked, - data="2", - ), - ElevatedButton( - text="3", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=1, - on_click=self.button_clicked, - data="3", - ), - ElevatedButton( - text="+", - bgcolor=colors.ORANGE, - color=colors.WHITE, - expand=1, - on_click=self.button_clicked, - data="+", - ), - ] - ), - Row( - controls=[ - ElevatedButton( - text="0", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=2, - on_click=self.button_clicked, - data="0", - ), - ElevatedButton( - text=".", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=1, - on_click=self.button_clicked, - data=".", - ), - ElevatedButton( - text="=", - bgcolor=colors.ORANGE, - color=colors.WHITE, - expand=1, - on_click=self.button_clicked, - data="=", - ), - ] + ElevatedButton( + text="/", + bgcolor=colors.ORANGE, + color=colors.WHITE, + expand=1, + on_click=self.button_clicked, + data="/", ), ], ), - ) - ], + Row( + controls=[ + ElevatedButton( + text="7", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + on_click=self.button_clicked, + data="7", + ), + ElevatedButton( + text="8", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + on_click=self.button_clicked, + data="8", + ), + ElevatedButton( + text="9", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + on_click=self.button_clicked, + data="9", + ), + ElevatedButton( + text="*", + bgcolor=colors.ORANGE, + color=colors.WHITE, + expand=1, + on_click=self.button_clicked, + data="*", + ), + ] + ), + Row( + controls=[ + ElevatedButton( + text="4", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + on_click=self.button_clicked, + data="4", + ), + ElevatedButton( + text="5", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + on_click=self.button_clicked, + data="5", + ), + ElevatedButton( + text="6", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + on_click=self.button_clicked, + data="6", + ), + ElevatedButton( + text="-", + bgcolor=colors.ORANGE, + color=colors.WHITE, + expand=1, + on_click=self.button_clicked, + data="-", + ), + ] + ), + Row( + controls=[ + ElevatedButton( + text="1", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + on_click=self.button_clicked, + data="1", + ), + ElevatedButton( + text="2", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + on_click=self.button_clicked, + data="2", + ), + ElevatedButton( + text="3", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + on_click=self.button_clicked, + data="3", + ), + ElevatedButton( + text="+", + bgcolor=colors.ORANGE, + color=colors.WHITE, + expand=1, + on_click=self.button_clicked, + data="+", + ), + ] + ), + Row( + controls=[ + ElevatedButton( + text="0", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=2, + on_click=self.button_clicked, + data="0", + ), + ElevatedButton( + text=".", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + on_click=self.button_clicked, + data=".", + ), + ElevatedButton( + text="=", + bgcolor=colors.ORANGE, + color=colors.WHITE, + expand=1, + on_click=self.button_clicked, + data="=", + ), + ] + ), + ], + ), ) def button_clicked(self, e): @@ -282,9 +278,6 @@ def reset(self): def main(page: Page): page.title = "Calc App" - page.horizontal_alignment = "center" - page.vertical_alignment = "center" - page.update() # create application instance app = CalcApp() diff --git a/python/tutorials/calc/calc1.py b/python/tutorials/calc/calc1.py new file mode 100644 index 00000000..81059692 --- /dev/null +++ b/python/tutorials/calc/calc1.py @@ -0,0 +1,33 @@ +import flet +from flet import ElevatedButton, Page, Text + + +def main(page: Page): + page.title = "Calc App" + result = Text(value="0") + + page.add( + result, + ElevatedButton(text="AC"), + ElevatedButton(text="+/-"), + ElevatedButton(text="%"), + ElevatedButton(text="/"), + ElevatedButton(text="7"), + ElevatedButton(text="8"), + ElevatedButton(text="9"), + ElevatedButton(text="*"), + ElevatedButton(text="4"), + ElevatedButton(text="5"), + ElevatedButton(text="6"), + ElevatedButton(text="-"), + ElevatedButton(text="1"), + ElevatedButton(text="2"), + ElevatedButton(text="3"), + ElevatedButton(text="+"), + ElevatedButton(text="0"), + ElevatedButton(text="."), + ElevatedButton(text="="), + ) + + +flet.app(target=main) diff --git a/python/tutorials/calc/calc2.py b/python/tutorials/calc/calc2.py new file mode 100644 index 00000000..cdea56a8 --- /dev/null +++ b/python/tutorials/calc/calc2.py @@ -0,0 +1,57 @@ +import flet +from flet import Column, ElevatedButton, Page, Row, Text + + +def main(page: Page): + page.title = "Calc App" + result = Text(value="0") + + page.add( + Column( + controls=[ + Row(controls=[result]), + Row( + controls=[ + ElevatedButton(text="AC"), + ElevatedButton(text="+/-"), + ElevatedButton(text="%"), + ElevatedButton(text="/"), + ] + ), + Row( + controls=[ + ElevatedButton(text="7"), + ElevatedButton(text="8"), + ElevatedButton(text="9"), + ElevatedButton(text="*"), + ] + ), + Row( + controls=[ + ElevatedButton(text="4"), + ElevatedButton(text="5"), + ElevatedButton(text="6"), + ElevatedButton(text="-"), + ] + ), + Row( + controls=[ + ElevatedButton(text="1"), + ElevatedButton(text="2"), + ElevatedButton(text="3"), + ElevatedButton(text="+"), + ] + ), + Row( + controls=[ + ElevatedButton(text="0"), + ElevatedButton(text="."), + ElevatedButton(text="="), + ] + ), + ] + ) + ) + + +flet.app(target=main) diff --git a/python/tutorials/calc/calc3.py b/python/tutorials/calc/calc3.py new file mode 100644 index 00000000..b229ad8c --- /dev/null +++ b/python/tutorials/calc/calc3.py @@ -0,0 +1,72 @@ +import flet +from flet import ( + Column, + Container, + ElevatedButton, + Page, + Row, + Text, + border_radius, + colors, +) + + +def main(page: Page): + page.title = "Calc App" + result = Text(value="0", color=colors.WHITE, size=20) + + page.add( + Container( + width=300, + bgcolor=colors.BLACK, + border_radius=border_radius.all(20), + padding=20, + content=Column( + controls=[ + Row(controls=[result], alignment="end"), + Row( + controls=[ + ElevatedButton(text="AC"), + ElevatedButton(text="+/-"), + ElevatedButton(text="%"), + ElevatedButton(text="/"), + ] + ), + Row( + controls=[ + ElevatedButton(text="7"), + ElevatedButton(text="8"), + ElevatedButton(text="9"), + ElevatedButton(text="*"), + ] + ), + Row( + controls=[ + ElevatedButton(text="4"), + ElevatedButton(text="5"), + ElevatedButton(text="6"), + ElevatedButton(text="-"), + ] + ), + Row( + controls=[ + ElevatedButton(text="1"), + ElevatedButton(text="2"), + ElevatedButton(text="3"), + ElevatedButton(text="+"), + ] + ), + Row( + controls=[ + ElevatedButton(text="0"), + ElevatedButton(text="."), + ElevatedButton(text="="), + ] + ), + ] + ), + ) + ) + + +flet.app(target=main) diff --git a/python/tutorials/calc/calc4.py b/python/tutorials/calc/calc4.py new file mode 100644 index 00000000..8c9a1455 --- /dev/null +++ b/python/tutorials/calc/calc4.py @@ -0,0 +1,116 @@ +import flet +from flet import ( + Column, + Container, + ElevatedButton, + Page, + Row, + Text, + border_radius, + colors, +) + + +def main(page: Page): + page.title = "Calc App" + result = Text(value="0", color=colors.WHITE, size=20) + + page.add( + Container( + width=300, + bgcolor=colors.BLACK, + border_radius=border_radius.all(20), + padding=20, + content=Column( + controls=[ + Row(controls=[result], alignment="end"), + Row( + controls=[ + ElevatedButton( + text="AC", + bgcolor=colors.BLUE_GREY_100, + color=colors.BLACK, + ), + ElevatedButton( + text="+/-", + bgcolor=colors.BLUE_GREY_100, + color=colors.BLACK, + ), + ElevatedButton( + text="%", + bgcolor=colors.BLUE_GREY_100, + color=colors.BLACK, + ), + ElevatedButton( + text="/", bgcolor=colors.ORANGE, color=colors.WHITE + ), + ] + ), + Row( + controls=[ + ElevatedButton( + text="7", bgcolor=colors.WHITE24, color=colors.WHITE + ), + ElevatedButton( + text="8", bgcolor=colors.WHITE24, color=colors.WHITE + ), + ElevatedButton( + text="9", bgcolor=colors.WHITE24, color=colors.WHITE + ), + ElevatedButton( + text="*", bgcolor=colors.ORANGE, color=colors.WHITE + ), + ] + ), + Row( + controls=[ + ElevatedButton( + text="4", bgcolor=colors.WHITE24, color=colors.WHITE + ), + ElevatedButton( + text="5", bgcolor=colors.WHITE24, color=colors.WHITE + ), + ElevatedButton( + text="6", bgcolor=colors.WHITE24, color=colors.WHITE + ), + ElevatedButton( + text="-", bgcolor=colors.ORANGE, color=colors.WHITE + ), + ] + ), + Row( + controls=[ + ElevatedButton( + text="1", bgcolor=colors.WHITE24, color=colors.WHITE + ), + ElevatedButton( + text="2", bgcolor=colors.WHITE24, color=colors.WHITE + ), + ElevatedButton( + text="3", bgcolor=colors.WHITE24, color=colors.WHITE + ), + ElevatedButton( + text="+", bgcolor=colors.ORANGE, color=colors.WHITE + ), + ] + ), + Row( + controls=[ + ElevatedButton( + text="0", bgcolor=colors.WHITE24, color=colors.WHITE + ), + ElevatedButton( + text=".", bgcolor=colors.WHITE24, color=colors.WHITE + ), + ElevatedButton( + text="=", bgcolor=colors.ORANGE, color=colors.WHITE + ), + ] + ), + ] + ), + ) + ) + + +flet.app(target=main) diff --git a/python/tutorials/calc/calc5.py b/python/tutorials/calc/calc5.py new file mode 100644 index 00000000..e5ff4a26 --- /dev/null +++ b/python/tutorials/calc/calc5.py @@ -0,0 +1,168 @@ +import flet +from flet import ( + Column, + Container, + ElevatedButton, + Page, + Row, + Text, + border_radius, + colors, +) + + +def main(page: Page): + + page.title = "Calc App" + result = Text(value="0", color=colors.WHITE, size=20) + + page.add( + Container( + width=300, + bgcolor=colors.BLACK, + border_radius=border_radius.all(20), + padding=20, + content=Column( + controls=[ + Row(controls=[result], alignment="end"), + Row( + controls=[ + ElevatedButton( + text="AC", + bgcolor=colors.BLUE_GREY_100, + color=colors.BLACK, + expand=1, + ), + ElevatedButton( + text="+/-", + bgcolor=colors.BLUE_GREY_100, + color=colors.BLACK, + expand=1, + ), + ElevatedButton( + text="%", + bgcolor=colors.BLUE_GREY_100, + color=colors.BLACK, + expand=1, + ), + ElevatedButton( + text="/", + bgcolor=colors.ORANGE, + color=colors.WHITE, + expand=1, + ), + ] + ), + Row( + controls=[ + ElevatedButton( + text="7", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + ), + ElevatedButton( + text="8", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + ), + ElevatedButton( + text="9", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + ), + ElevatedButton( + text="*", + bgcolor=colors.ORANGE, + color=colors.WHITE, + expand=1, + ), + ] + ), + Row( + controls=[ + ElevatedButton( + text="4", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + ), + ElevatedButton( + text="5", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + ), + ElevatedButton( + text="6", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + ), + ElevatedButton( + text="-", + bgcolor=colors.ORANGE, + color=colors.WHITE, + expand=1, + ), + ] + ), + Row( + controls=[ + ElevatedButton( + text="1", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + ), + ElevatedButton( + text="2", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + ), + ElevatedButton( + text="3", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + ), + ElevatedButton( + text="+", + bgcolor=colors.ORANGE, + color=colors.WHITE, + expand=1, + ), + ] + ), + Row( + controls=[ + ElevatedButton( + text="0", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=2, + ), + ElevatedButton( + text=".", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + ), + ElevatedButton( + text="=", + bgcolor=colors.ORANGE, + color=colors.WHITE, + expand=1, + ), + ] + ), + ] + ), + ) + ) + + +flet.app(target=main) diff --git a/python/tutorials/calc/calc6.py b/python/tutorials/calc/calc6.py new file mode 100644 index 00000000..5a6ace74 --- /dev/null +++ b/python/tutorials/calc/calc6.py @@ -0,0 +1,174 @@ +import flet +from flet import ( + Column, + Container, + ElevatedButton, + Page, + Row, + Text, + border_radius, + colors, +) + + +class CalcApp: + def __init__(self): + self.result = Text(value="0", color=colors.WHITE, size=20) + # application's root control (i.e. "view") containing all other controls + self.view = Container( + width=300, + bgcolor=colors.BLACK, + border_radius=border_radius.all(20), + padding=20, + content=Column( + controls=[ + Row(controls=[self.result], alignment="end"), + Row( + controls=[ + ElevatedButton( + text="AC", + bgcolor=colors.BLUE_GREY_100, + color=colors.BLACK, + expand=1, + ), + ElevatedButton( + text="+/-", + bgcolor=colors.BLUE_GREY_100, + color=colors.BLACK, + expand=1, + ), + ElevatedButton( + text="%", + bgcolor=colors.BLUE_GREY_100, + color=colors.BLACK, + expand=1, + ), + ElevatedButton( + text="/", + bgcolor=colors.ORANGE, + color=colors.WHITE, + expand=1, + ), + ] + ), + Row( + controls=[ + ElevatedButton( + text="7", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + ), + ElevatedButton( + text="8", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + ), + ElevatedButton( + text="9", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + ), + ElevatedButton( + text="*", + bgcolor=colors.ORANGE, + color=colors.WHITE, + expand=1, + ), + ] + ), + Row( + controls=[ + ElevatedButton( + text="4", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + ), + ElevatedButton( + text="5", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + ), + ElevatedButton( + text="6", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + ), + ElevatedButton( + text="-", + bgcolor=colors.ORANGE, + color=colors.WHITE, + expand=1, + ), + ] + ), + Row( + controls=[ + ElevatedButton( + text="1", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + ), + ElevatedButton( + text="2", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + ), + ElevatedButton( + text="3", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + ), + ElevatedButton( + text="+", + bgcolor=colors.ORANGE, + color=colors.WHITE, + expand=1, + ), + ] + ), + Row( + controls=[ + ElevatedButton( + text="0", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=2, + ), + ElevatedButton( + text=".", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + ), + ElevatedButton( + text="=", + bgcolor=colors.ORANGE, + color=colors.WHITE, + expand=1, + ), + ] + ), + ] + ), + ) + + +def main(page: Page): + page.title = "Calc App" + # create application instance + app = CalcApp() + + # add application's root control to the page + page.add(app.view) + + +flet.app(target=main) diff --git a/python/tutorials/calc/calc7.py b/python/tutorials/calc/calc7.py new file mode 100644 index 00000000..3aaca459 --- /dev/null +++ b/python/tutorials/calc/calc7.py @@ -0,0 +1,190 @@ +import flet +from flet import ( + Column, + Container, + ElevatedButton, + Page, + Row, + Text, + border_radius, + colors, +) + + +class CalcApp: + def __init__(self): + + self.result = Text(value="0", color=colors.WHITE, size=20) + + # application's root control (i.e. "view") containing all other controls + self.view = Container( + width=300, + bgcolor=colors.BLACK, + border_radius=border_radius.all(20), + padding=20, + content=Column( + controls=[ + Row(controls=[self.result], alignment="end"), + Row( + controls=[ + ElevatedButton( + text="AC", + bgcolor=colors.BLUE_GREY_100, + color=colors.BLACK, + expand=1, + on_click=self.button_clicked, + data="AC", + ), + ElevatedButton( + text="+/-", + bgcolor=colors.BLUE_GREY_100, + color=colors.BLACK, + expand=1, + ), + ElevatedButton( + text="%", + bgcolor=colors.BLUE_GREY_100, + color=colors.BLACK, + expand=1, + ), + ElevatedButton( + text="/", + bgcolor=colors.ORANGE, + color=colors.WHITE, + expand=1, + ), + ] + ), + Row( + controls=[ + ElevatedButton( + text="7", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + ), + ElevatedButton( + text="8", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + ), + ElevatedButton( + text="9", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + ), + ElevatedButton( + text="*", + bgcolor=colors.ORANGE, + color=colors.WHITE, + expand=1, + ), + ] + ), + Row( + controls=[ + ElevatedButton( + text="4", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + ), + ElevatedButton( + text="5", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + ), + ElevatedButton( + text="6", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + ), + ElevatedButton( + text="-", + bgcolor=colors.ORANGE, + color=colors.WHITE, + expand=1, + ), + ] + ), + Row( + controls=[ + ElevatedButton( + text="1", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + on_click=self.button_clicked, + data="1", + ), + ElevatedButton( + text="2", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + ), + ElevatedButton( + text="3", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + ), + ElevatedButton( + text="+", + bgcolor=colors.ORANGE, + color=colors.WHITE, + expand=1, + ), + ] + ), + Row( + controls=[ + ElevatedButton( + text="0", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=2, + ), + ElevatedButton( + text=".", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + ), + ElevatedButton( + text="=", + bgcolor=colors.ORANGE, + color=colors.WHITE, + expand=1, + ), + ] + ), + ] + ), + ) + + def button_clicked(self, e): + if e.data == "AC": + self.result.value = "0" + + elif e.data == "1": + self.result.value = self.result.value + e.data + + # call update() every time controls need to be updated on the page + self.view.update() + + +def main(page: Page): + page.title = "Calc App" + # create application instance + app = CalcApp() + + # add application's root control to the page + page.add(app.view) + + +flet.app(target=main) From 397e490244f59628039d1a390d4c3154218e1ca2 Mon Sep 17 00:00:00 2001 From: Inesa Fitsner Date: Sat, 11 Jun 2022 20:40:28 -0700 Subject: [PATCH 07/10] Update calc.py --- python/tutorials/calc/calc.py | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/python/tutorials/calc/calc.py b/python/tutorials/calc/calc.py index 53deb933..c4c414d2 100644 --- a/python/tutorials/calc/calc.py +++ b/python/tutorials/calc/calc.py @@ -13,9 +13,7 @@ class CalcApp: def __init__(self): - self.operator = "+" - self.operand1 = 0 - self.new_operand = True + self.reset() self.result = Text(value="0", color=colors.WHITE, size=20) # application's root control (i.e. "view") containing all other controls From 389a871d35f067912a206b55c8950c9de755aeeb Mon Sep 17 00:00:00 2001 From: Inesa Fitsner Date: Mon, 13 Jun 2022 17:54:03 -0700 Subject: [PATCH 08/10] updated steps --- python/tutorials/calc/calc4.py | 83 +++++++++++--- python/tutorials/calc/calc5.py | 24 +++-- python/tutorials/calc/calc6.py | 16 +++ python/tutorials/calc/calc7.py | 190 --------------------------------- 4 files changed, 98 insertions(+), 215 deletions(-) delete mode 100644 python/tutorials/calc/calc7.py diff --git a/python/tutorials/calc/calc4.py b/python/tutorials/calc/calc4.py index 8c9a1455..56f8ef70 100644 --- a/python/tutorials/calc/calc4.py +++ b/python/tutorials/calc/calc4.py @@ -30,80 +30,131 @@ def main(page: Page): text="AC", bgcolor=colors.BLUE_GREY_100, color=colors.BLACK, + expand=1, ), ElevatedButton( text="+/-", bgcolor=colors.BLUE_GREY_100, color=colors.BLACK, + expand=1, ), ElevatedButton( text="%", bgcolor=colors.BLUE_GREY_100, color=colors.BLACK, + expand=1, ), ElevatedButton( - text="/", bgcolor=colors.ORANGE, color=colors.WHITE + text="/", + bgcolor=colors.ORANGE, + color=colors.WHITE, + expand=1, ), ] ), Row( controls=[ ElevatedButton( - text="7", bgcolor=colors.WHITE24, color=colors.WHITE + text="7", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, ), ElevatedButton( - text="8", bgcolor=colors.WHITE24, color=colors.WHITE + text="8", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, ), ElevatedButton( - text="9", bgcolor=colors.WHITE24, color=colors.WHITE + text="9", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, ), ElevatedButton( - text="*", bgcolor=colors.ORANGE, color=colors.WHITE + text="*", + bgcolor=colors.ORANGE, + color=colors.WHITE, + expand=1, ), ] ), Row( controls=[ ElevatedButton( - text="4", bgcolor=colors.WHITE24, color=colors.WHITE + text="4", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, ), ElevatedButton( - text="5", bgcolor=colors.WHITE24, color=colors.WHITE + text="5", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, ), ElevatedButton( - text="6", bgcolor=colors.WHITE24, color=colors.WHITE + text="6", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, ), ElevatedButton( - text="-", bgcolor=colors.ORANGE, color=colors.WHITE + text="-", + bgcolor=colors.ORANGE, + color=colors.WHITE, + expand=1, ), ] ), Row( controls=[ ElevatedButton( - text="1", bgcolor=colors.WHITE24, color=colors.WHITE + text="1", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, ), ElevatedButton( - text="2", bgcolor=colors.WHITE24, color=colors.WHITE + text="2", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, ), ElevatedButton( - text="3", bgcolor=colors.WHITE24, color=colors.WHITE + text="3", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, ), ElevatedButton( - text="+", bgcolor=colors.ORANGE, color=colors.WHITE + text="+", + bgcolor=colors.ORANGE, + color=colors.WHITE, + expand=1, ), ] ), Row( controls=[ ElevatedButton( - text="0", bgcolor=colors.WHITE24, color=colors.WHITE + text="0", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=2, ), ElevatedButton( - text=".", bgcolor=colors.WHITE24, color=colors.WHITE + text=".", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, ), ElevatedButton( - text="=", bgcolor=colors.ORANGE, color=colors.WHITE + text="=", + bgcolor=colors.ORANGE, + color=colors.WHITE, + expand=1, ), ] ), diff --git a/python/tutorials/calc/calc5.py b/python/tutorials/calc/calc5.py index e5ff4a26..5a6ace74 100644 --- a/python/tutorials/calc/calc5.py +++ b/python/tutorials/calc/calc5.py @@ -11,20 +11,18 @@ ) -def main(page: Page): - - page.title = "Calc App" - result = Text(value="0", color=colors.WHITE, size=20) - - page.add( - Container( +class CalcApp: + def __init__(self): + self.result = Text(value="0", color=colors.WHITE, size=20) + # application's root control (i.e. "view") containing all other controls + self.view = Container( width=300, bgcolor=colors.BLACK, border_radius=border_radius.all(20), padding=20, content=Column( controls=[ - Row(controls=[result], alignment="end"), + Row(controls=[self.result], alignment="end"), Row( controls=[ ElevatedButton( @@ -162,7 +160,15 @@ def main(page: Page): ] ), ) - ) + + +def main(page: Page): + page.title = "Calc App" + # create application instance + app = CalcApp() + + # add application's root control to the page + page.add(app.view) flet.app(target=main) diff --git a/python/tutorials/calc/calc6.py b/python/tutorials/calc/calc6.py index 5a6ace74..3aaca459 100644 --- a/python/tutorials/calc/calc6.py +++ b/python/tutorials/calc/calc6.py @@ -13,7 +13,9 @@ class CalcApp: def __init__(self): + self.result = Text(value="0", color=colors.WHITE, size=20) + # application's root control (i.e. "view") containing all other controls self.view = Container( width=300, @@ -30,6 +32,8 @@ def __init__(self): bgcolor=colors.BLUE_GREY_100, color=colors.BLACK, expand=1, + on_click=self.button_clicked, + data="AC", ), ElevatedButton( text="+/-", @@ -114,6 +118,8 @@ def __init__(self): bgcolor=colors.WHITE24, color=colors.WHITE, expand=1, + on_click=self.button_clicked, + data="1", ), ElevatedButton( text="2", @@ -161,6 +167,16 @@ def __init__(self): ), ) + def button_clicked(self, e): + if e.data == "AC": + self.result.value = "0" + + elif e.data == "1": + self.result.value = self.result.value + e.data + + # call update() every time controls need to be updated on the page + self.view.update() + def main(page: Page): page.title = "Calc App" diff --git a/python/tutorials/calc/calc7.py b/python/tutorials/calc/calc7.py deleted file mode 100644 index 3aaca459..00000000 --- a/python/tutorials/calc/calc7.py +++ /dev/null @@ -1,190 +0,0 @@ -import flet -from flet import ( - Column, - Container, - ElevatedButton, - Page, - Row, - Text, - border_radius, - colors, -) - - -class CalcApp: - def __init__(self): - - self.result = Text(value="0", color=colors.WHITE, size=20) - - # application's root control (i.e. "view") containing all other controls - self.view = Container( - width=300, - bgcolor=colors.BLACK, - border_radius=border_radius.all(20), - padding=20, - content=Column( - controls=[ - Row(controls=[self.result], alignment="end"), - Row( - controls=[ - ElevatedButton( - text="AC", - bgcolor=colors.BLUE_GREY_100, - color=colors.BLACK, - expand=1, - on_click=self.button_clicked, - data="AC", - ), - ElevatedButton( - text="+/-", - bgcolor=colors.BLUE_GREY_100, - color=colors.BLACK, - expand=1, - ), - ElevatedButton( - text="%", - bgcolor=colors.BLUE_GREY_100, - color=colors.BLACK, - expand=1, - ), - ElevatedButton( - text="/", - bgcolor=colors.ORANGE, - color=colors.WHITE, - expand=1, - ), - ] - ), - Row( - controls=[ - ElevatedButton( - text="7", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=1, - ), - ElevatedButton( - text="8", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=1, - ), - ElevatedButton( - text="9", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=1, - ), - ElevatedButton( - text="*", - bgcolor=colors.ORANGE, - color=colors.WHITE, - expand=1, - ), - ] - ), - Row( - controls=[ - ElevatedButton( - text="4", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=1, - ), - ElevatedButton( - text="5", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=1, - ), - ElevatedButton( - text="6", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=1, - ), - ElevatedButton( - text="-", - bgcolor=colors.ORANGE, - color=colors.WHITE, - expand=1, - ), - ] - ), - Row( - controls=[ - ElevatedButton( - text="1", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=1, - on_click=self.button_clicked, - data="1", - ), - ElevatedButton( - text="2", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=1, - ), - ElevatedButton( - text="3", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=1, - ), - ElevatedButton( - text="+", - bgcolor=colors.ORANGE, - color=colors.WHITE, - expand=1, - ), - ] - ), - Row( - controls=[ - ElevatedButton( - text="0", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=2, - ), - ElevatedButton( - text=".", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=1, - ), - ElevatedButton( - text="=", - bgcolor=colors.ORANGE, - color=colors.WHITE, - expand=1, - ), - ] - ), - ] - ), - ) - - def button_clicked(self, e): - if e.data == "AC": - self.result.value = "0" - - elif e.data == "1": - self.result.value = self.result.value + e.data - - # call update() every time controls need to be updated on the page - self.view.update() - - -def main(page: Page): - page.title = "Calc App" - # create application instance - app = CalcApp() - - # add application's root control to the page - page.add(app.view) - - -flet.app(target=main) From 6ccdef8fde9757a77339ed797d4a8579b21502b0 Mon Sep 17 00:00:00 2001 From: Inesa Fitsner Date: Tue, 14 Jun 2022 21:00:55 -0700 Subject: [PATCH 09/10] updated steps --- python/tutorials/calc/calc2.py | 82 +++++++------- python/tutorials/calc/calc3.py | 133 +++++++++++++++++++---- python/tutorials/calc/calc4.py | 23 ++-- python/tutorials/calc/calc5.py | 174 ------------------------------ python/tutorials/calc/calc6.py | 190 --------------------------------- 5 files changed, 168 insertions(+), 434 deletions(-) delete mode 100644 python/tutorials/calc/calc5.py delete mode 100644 python/tutorials/calc/calc6.py diff --git a/python/tutorials/calc/calc2.py b/python/tutorials/calc/calc2.py index cdea56a8..e20cf61b 100644 --- a/python/tutorials/calc/calc2.py +++ b/python/tutorials/calc/calc2.py @@ -1,5 +1,5 @@ import flet -from flet import Column, ElevatedButton, Page, Row, Text +from flet import ElevatedButton, Page, Row, Text def main(page: Page): @@ -7,50 +7,46 @@ def main(page: Page): result = Text(value="0") page.add( - Column( + Row(controls=[result]), + Row( controls=[ - Row(controls=[result]), - Row( - controls=[ - ElevatedButton(text="AC"), - ElevatedButton(text="+/-"), - ElevatedButton(text="%"), - ElevatedButton(text="/"), - ] - ), - Row( - controls=[ - ElevatedButton(text="7"), - ElevatedButton(text="8"), - ElevatedButton(text="9"), - ElevatedButton(text="*"), - ] - ), - Row( - controls=[ - ElevatedButton(text="4"), - ElevatedButton(text="5"), - ElevatedButton(text="6"), - ElevatedButton(text="-"), - ] - ), - Row( - controls=[ - ElevatedButton(text="1"), - ElevatedButton(text="2"), - ElevatedButton(text="3"), - ElevatedButton(text="+"), - ] - ), - Row( - controls=[ - ElevatedButton(text="0"), - ElevatedButton(text="."), - ElevatedButton(text="="), - ] - ), + ElevatedButton(text="AC"), + ElevatedButton(text="+/-"), + ElevatedButton(text="%"), + ElevatedButton(text="/"), ] - ) + ), + Row( + controls=[ + ElevatedButton(text="7"), + ElevatedButton(text="8"), + ElevatedButton(text="9"), + ElevatedButton(text="*"), + ] + ), + Row( + controls=[ + ElevatedButton(text="4"), + ElevatedButton(text="5"), + ElevatedButton(text="6"), + ElevatedButton(text="-"), + ] + ), + Row( + controls=[ + ElevatedButton(text="1"), + ElevatedButton(text="2"), + ElevatedButton(text="3"), + ElevatedButton(text="+"), + ] + ), + Row( + controls=[ + ElevatedButton(text="0"), + ElevatedButton(text="."), + ElevatedButton(text="="), + ] + ), ) diff --git a/python/tutorials/calc/calc3.py b/python/tutorials/calc/calc3.py index b229ad8c..56f8ef70 100644 --- a/python/tutorials/calc/calc3.py +++ b/python/tutorials/calc/calc3.py @@ -26,41 +26,136 @@ def main(page: Page): Row(controls=[result], alignment="end"), Row( controls=[ - ElevatedButton(text="AC"), - ElevatedButton(text="+/-"), - ElevatedButton(text="%"), - ElevatedButton(text="/"), + ElevatedButton( + text="AC", + bgcolor=colors.BLUE_GREY_100, + color=colors.BLACK, + expand=1, + ), + ElevatedButton( + text="+/-", + bgcolor=colors.BLUE_GREY_100, + color=colors.BLACK, + expand=1, + ), + ElevatedButton( + text="%", + bgcolor=colors.BLUE_GREY_100, + color=colors.BLACK, + expand=1, + ), + ElevatedButton( + text="/", + bgcolor=colors.ORANGE, + color=colors.WHITE, + expand=1, + ), ] ), Row( controls=[ - ElevatedButton(text="7"), - ElevatedButton(text="8"), - ElevatedButton(text="9"), - ElevatedButton(text="*"), + ElevatedButton( + text="7", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + ), + ElevatedButton( + text="8", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + ), + ElevatedButton( + text="9", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + ), + ElevatedButton( + text="*", + bgcolor=colors.ORANGE, + color=colors.WHITE, + expand=1, + ), ] ), Row( controls=[ - ElevatedButton(text="4"), - ElevatedButton(text="5"), - ElevatedButton(text="6"), - ElevatedButton(text="-"), + ElevatedButton( + text="4", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + ), + ElevatedButton( + text="5", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + ), + ElevatedButton( + text="6", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + ), + ElevatedButton( + text="-", + bgcolor=colors.ORANGE, + color=colors.WHITE, + expand=1, + ), ] ), Row( controls=[ - ElevatedButton(text="1"), - ElevatedButton(text="2"), - ElevatedButton(text="3"), - ElevatedButton(text="+"), + ElevatedButton( + text="1", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + ), + ElevatedButton( + text="2", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + ), + ElevatedButton( + text="3", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + ), + ElevatedButton( + text="+", + bgcolor=colors.ORANGE, + color=colors.WHITE, + expand=1, + ), ] ), Row( controls=[ - ElevatedButton(text="0"), - ElevatedButton(text="."), - ElevatedButton(text="="), + ElevatedButton( + text="0", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=2, + ), + ElevatedButton( + text=".", + bgcolor=colors.WHITE24, + color=colors.WHITE, + expand=1, + ), + ElevatedButton( + text="=", + bgcolor=colors.ORANGE, + color=colors.WHITE, + expand=1, + ), ] ), ] diff --git a/python/tutorials/calc/calc4.py b/python/tutorials/calc/calc4.py index 56f8ef70..5a6ace74 100644 --- a/python/tutorials/calc/calc4.py +++ b/python/tutorials/calc/calc4.py @@ -11,19 +11,18 @@ ) -def main(page: Page): - page.title = "Calc App" - result = Text(value="0", color=colors.WHITE, size=20) - - page.add( - Container( +class CalcApp: + def __init__(self): + self.result = Text(value="0", color=colors.WHITE, size=20) + # application's root control (i.e. "view") containing all other controls + self.view = Container( width=300, bgcolor=colors.BLACK, border_radius=border_radius.all(20), padding=20, content=Column( controls=[ - Row(controls=[result], alignment="end"), + Row(controls=[self.result], alignment="end"), Row( controls=[ ElevatedButton( @@ -161,7 +160,15 @@ def main(page: Page): ] ), ) - ) + + +def main(page: Page): + page.title = "Calc App" + # create application instance + app = CalcApp() + + # add application's root control to the page + page.add(app.view) flet.app(target=main) diff --git a/python/tutorials/calc/calc5.py b/python/tutorials/calc/calc5.py deleted file mode 100644 index 5a6ace74..00000000 --- a/python/tutorials/calc/calc5.py +++ /dev/null @@ -1,174 +0,0 @@ -import flet -from flet import ( - Column, - Container, - ElevatedButton, - Page, - Row, - Text, - border_radius, - colors, -) - - -class CalcApp: - def __init__(self): - self.result = Text(value="0", color=colors.WHITE, size=20) - # application's root control (i.e. "view") containing all other controls - self.view = Container( - width=300, - bgcolor=colors.BLACK, - border_radius=border_radius.all(20), - padding=20, - content=Column( - controls=[ - Row(controls=[self.result], alignment="end"), - Row( - controls=[ - ElevatedButton( - text="AC", - bgcolor=colors.BLUE_GREY_100, - color=colors.BLACK, - expand=1, - ), - ElevatedButton( - text="+/-", - bgcolor=colors.BLUE_GREY_100, - color=colors.BLACK, - expand=1, - ), - ElevatedButton( - text="%", - bgcolor=colors.BLUE_GREY_100, - color=colors.BLACK, - expand=1, - ), - ElevatedButton( - text="/", - bgcolor=colors.ORANGE, - color=colors.WHITE, - expand=1, - ), - ] - ), - Row( - controls=[ - ElevatedButton( - text="7", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=1, - ), - ElevatedButton( - text="8", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=1, - ), - ElevatedButton( - text="9", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=1, - ), - ElevatedButton( - text="*", - bgcolor=colors.ORANGE, - color=colors.WHITE, - expand=1, - ), - ] - ), - Row( - controls=[ - ElevatedButton( - text="4", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=1, - ), - ElevatedButton( - text="5", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=1, - ), - ElevatedButton( - text="6", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=1, - ), - ElevatedButton( - text="-", - bgcolor=colors.ORANGE, - color=colors.WHITE, - expand=1, - ), - ] - ), - Row( - controls=[ - ElevatedButton( - text="1", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=1, - ), - ElevatedButton( - text="2", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=1, - ), - ElevatedButton( - text="3", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=1, - ), - ElevatedButton( - text="+", - bgcolor=colors.ORANGE, - color=colors.WHITE, - expand=1, - ), - ] - ), - Row( - controls=[ - ElevatedButton( - text="0", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=2, - ), - ElevatedButton( - text=".", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=1, - ), - ElevatedButton( - text="=", - bgcolor=colors.ORANGE, - color=colors.WHITE, - expand=1, - ), - ] - ), - ] - ), - ) - - -def main(page: Page): - page.title = "Calc App" - # create application instance - app = CalcApp() - - # add application's root control to the page - page.add(app.view) - - -flet.app(target=main) diff --git a/python/tutorials/calc/calc6.py b/python/tutorials/calc/calc6.py deleted file mode 100644 index 3aaca459..00000000 --- a/python/tutorials/calc/calc6.py +++ /dev/null @@ -1,190 +0,0 @@ -import flet -from flet import ( - Column, - Container, - ElevatedButton, - Page, - Row, - Text, - border_radius, - colors, -) - - -class CalcApp: - def __init__(self): - - self.result = Text(value="0", color=colors.WHITE, size=20) - - # application's root control (i.e. "view") containing all other controls - self.view = Container( - width=300, - bgcolor=colors.BLACK, - border_radius=border_radius.all(20), - padding=20, - content=Column( - controls=[ - Row(controls=[self.result], alignment="end"), - Row( - controls=[ - ElevatedButton( - text="AC", - bgcolor=colors.BLUE_GREY_100, - color=colors.BLACK, - expand=1, - on_click=self.button_clicked, - data="AC", - ), - ElevatedButton( - text="+/-", - bgcolor=colors.BLUE_GREY_100, - color=colors.BLACK, - expand=1, - ), - ElevatedButton( - text="%", - bgcolor=colors.BLUE_GREY_100, - color=colors.BLACK, - expand=1, - ), - ElevatedButton( - text="/", - bgcolor=colors.ORANGE, - color=colors.WHITE, - expand=1, - ), - ] - ), - Row( - controls=[ - ElevatedButton( - text="7", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=1, - ), - ElevatedButton( - text="8", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=1, - ), - ElevatedButton( - text="9", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=1, - ), - ElevatedButton( - text="*", - bgcolor=colors.ORANGE, - color=colors.WHITE, - expand=1, - ), - ] - ), - Row( - controls=[ - ElevatedButton( - text="4", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=1, - ), - ElevatedButton( - text="5", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=1, - ), - ElevatedButton( - text="6", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=1, - ), - ElevatedButton( - text="-", - bgcolor=colors.ORANGE, - color=colors.WHITE, - expand=1, - ), - ] - ), - Row( - controls=[ - ElevatedButton( - text="1", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=1, - on_click=self.button_clicked, - data="1", - ), - ElevatedButton( - text="2", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=1, - ), - ElevatedButton( - text="3", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=1, - ), - ElevatedButton( - text="+", - bgcolor=colors.ORANGE, - color=colors.WHITE, - expand=1, - ), - ] - ), - Row( - controls=[ - ElevatedButton( - text="0", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=2, - ), - ElevatedButton( - text=".", - bgcolor=colors.WHITE24, - color=colors.WHITE, - expand=1, - ), - ElevatedButton( - text="=", - bgcolor=colors.ORANGE, - color=colors.WHITE, - expand=1, - ), - ] - ), - ] - ), - ) - - def button_clicked(self, e): - if e.data == "AC": - self.result.value = "0" - - elif e.data == "1": - self.result.value = self.result.value + e.data - - # call update() every time controls need to be updated on the page - self.view.update() - - -def main(page: Page): - page.title = "Calc App" - # create application instance - app = CalcApp() - - # add application's root control to the page - page.add(app.view) - - -flet.app(target=main) From 3467fe82d6d6424882d98d49c4194b10c4fb2139 Mon Sep 17 00:00:00 2001 From: Feodor Fitsner Date: Fri, 17 Jun 2022 11:20:01 -0700 Subject: [PATCH 10/10] Calc examples using UserControl --- python/tutorials/calc/calc.py | 13 +++++++------ python/tutorials/calc/calc4.py | 16 +++++++++------- 2 files changed, 16 insertions(+), 13 deletions(-) diff --git a/python/tutorials/calc/calc.py b/python/tutorials/calc/calc.py index c4c414d2..5517c1fe 100644 --- a/python/tutorials/calc/calc.py +++ b/python/tutorials/calc/calc.py @@ -6,18 +6,19 @@ Page, Row, Text, + UserControl, border_radius, colors, ) -class CalcApp: - def __init__(self): +class CalculatorApp(UserControl): + def build(self): self.reset() self.result = Text(value="0", color=colors.WHITE, size=20) # application's root control (i.e. "view") containing all other controls - self.view = Container( + return Container( width=300, bgcolor=colors.BLACK, border_radius=border_radius.all(20), @@ -243,7 +244,7 @@ def button_clicked(self, e): self.format_number(abs(float(self.result.value))) ) - self.view.update() + self.update() def format_number(self, num): if num % 1 == 0: @@ -278,10 +279,10 @@ def main(page: Page): page.title = "Calc App" # create application instance - app = CalcApp() + calc = CalculatorApp() # add application's root control to the page - page.add(app.view) + page.add(calc) flet.app(target=main) diff --git a/python/tutorials/calc/calc4.py b/python/tutorials/calc/calc4.py index 5a6ace74..3b24fb73 100644 --- a/python/tutorials/calc/calc4.py +++ b/python/tutorials/calc/calc4.py @@ -6,23 +6,25 @@ Page, Row, Text, + UserControl, border_radius, colors, ) -class CalcApp: - def __init__(self): - self.result = Text(value="0", color=colors.WHITE, size=20) +class CalculatorApp(UserControl): + def build(self): + result = Text(value="0", color=colors.WHITE, size=20) + # application's root control (i.e. "view") containing all other controls - self.view = Container( + return Container( width=300, bgcolor=colors.BLACK, border_radius=border_radius.all(20), padding=20, content=Column( controls=[ - Row(controls=[self.result], alignment="end"), + Row(controls=[result], alignment="end"), Row( controls=[ ElevatedButton( @@ -165,10 +167,10 @@ def __init__(self): def main(page: Page): page.title = "Calc App" # create application instance - app = CalcApp() + calc = CalculatorApp() # add application's root control to the page - page.add(app.view) + page.add(calc) flet.app(target=main)