Update Calculator tutorial (#5864)

* Refactor calculator buttons and add dataclass example

Simplified button instantiation in calc1.py and calc2.py by removing 'text=' keyword. Refactored calc3.py to use 'content' instead of 'text', updated color and alignment usage, and improved class structure. Added calc3_dataclasses.py to demonstrate using Python dataclasses for calculator button components.

* Set default expand value in CalcButton dataclass

Replaces the default value assignment for 'expand' in CalcButton with an initializer that sets it to 1 if not already set. This ensures the expand property is always initialized properly.

* Update calc3_dataclasses.py

* Refactor calc3.py to use dataclasses and remove calc3_dataclasses.py

Replaces manual class definitions in calc3.py with dataclass-based button classes for cleaner and more concise code. Removes the now-redundant calc3_dataclasses.py file, consolidating the dataclass approach into calc3.py.

* Refactor calculator to use dataclasses and add calc5 example

Refactored calc4.py to use Python dataclasses for button and app classes, simplifying initialization and property management. Added calc5_dataclasses.py, a new example with a fully functional calculator app using dataclasses, including button click handling and calculation logic.

* Refactor calculator buttons to use @ft.control decorator

Replaces @DataClass with @ft.control for button classes in calc3.py and calc4.py to align with Flet's control system. Also updates calc5_dataclasses.py to consistently pass the on_click handler to all DigitButton and ActionButton instances, ensuring button click events are handled properly.

* Refactor calculator to use @ft.control and dataclasses

Refactored calc.py and calc5.py to use @ft.control decorator and dataclass-style field definitions for button and app classes, replacing manual __init__ methods. Updated button instantiation to use 'content' and 'on_click' instead of 'text' and 'button_clicked'. Removed the now-redundant calc5_dataclasses.py file.

* Refactor calculator tutorial and add integration test

Refactored the calculator tutorial documentation to use code includes for examples, updated code snippets for clarity, and improved button class definitions. Added an __init__.py to the calculator example directory and introduced an integration test for the basic calculator example. Also updated calc1.py to use a main guard for script execution.

* Refactor calculator examples and update integration tests

Added __init__.py to chip examples and updated main entry points to use '__name__ == "__main__"' guard. Improved calculator tutorial documentation for clarity. Enhanced integration tests for calculator examples, added golden screenshots for macOS, and expanded test coverage to include calc2 and calc3.

* Update calculator tutorial and example script

Added a main guard to calc2.py to allow direct execution. Updated calculator tutorial documentation to use new image paths, correct code references, and improve clarity.

* Add overloads to control decorator function

Introduced @overload annotations for the control decorator to improve type hinting and clarify supported call signatures.

---------

Co-authored-by: Feodor Fitsner <feodor@appveyor.com>

Author: InesaFitsner

sdk/python/examples/controls/chip/__init__.py

@@ -34,4 +34,5 @@ async def handle_chip2_click(e: ft.Event[ft.Chip]):
     )
 
 
-ft.run(main)
+if __name__ == "__main__":
+    ft.run(main)

sdk/python/examples/controls/chip/assist_chips.py

@@ -29,4 +29,5 @@ def handle_amenity_selection(e: ft.Event[ft.Chip]):
     )
 
 
-ft.run(main)
+if __name__ == "__main__":
+    ft.run(main)

sdk/python/examples/controls/chip/filter_chips.py

@@ -1,100 +1,93 @@
+from dataclasses import field
+
 import flet as ft
 
 
+@ft.control
 class CalcButton(ft.Button):
-    def __init__(self, text, button_clicked, expand=1):
-        super().__init__()
-        self.text = text
-        self.expand = expand
-        self.on_click = button_clicked
-        self.data = text
+    expand: int = field(default_factory=lambda: 1)
 
 
+@ft.control
 class DigitButton(CalcButton):
-    def __init__(self, text, button_clicked, expand=1):
-        CalcButton.__init__(self, text, button_clicked, expand)
-        self.bgcolor = ft.Colors.WHITE24
-        self.color = ft.Colors.WHITE
+    bgcolor: ft.Colors = ft.Colors.WHITE_24
+    color: ft.Colors = ft.Colors.WHITE
 
 
+@ft.control
 class ActionButton(CalcButton):
-    def __init__(self, text, button_clicked):
-        CalcButton.__init__(self, text, button_clicked)
-        self.bgcolor = ft.Colors.ORANGE
-        self.color = ft.Colors.WHITE
+    bgcolor: ft.Colors = ft.Colors.ORANGE
+    color: ft.Colors = ft.Colors.WHITE
 
 
+@ft.control
 class ExtraActionButton(CalcButton):
-    def __init__(self, text, button_clicked):
-        CalcButton.__init__(self, text, button_clicked)
-        self.bgcolor = ft.Colors.BLUE_GREY_100
-        self.color = ft.Colors.BLACK
+    bgcolor: ft.Colors = ft.Colors.BLUE_GREY_100
+    color: ft.Colors = ft.Colors.BLACK
 
 
+@ft.control
 class CalculatorApp(ft.Container):
-    # application's root control (i.e. "view") containing all other controls
-    def __init__(self):
-        super().__init__()
+    def init(self):
         self.reset()
-
-        self.result = ft.Text(value="0", color=ft.Colors.WHITE, size=20)
         self.width = 350
         self.bgcolor = ft.Colors.BLACK
-        self.border_radius = ft.border_radius.all(20)
+        self.border_radius = ft.BorderRadius.all(20)
         self.padding = 20
+        self.result = ft.Text(value="0", color=ft.Colors.WHITE, size=20)
+
         self.content = ft.Column(
             controls=[
-                ft.Row(controls=[self.result], alignment="end"),
+                ft.Row(
+                    controls=[self.result],
+                    alignment=ft.MainAxisAlignment.END,
+                ),
                 ft.Row(
                     controls=[
-                        ExtraActionButton(
-                            text="AC", button_clicked=self.button_clicked
-                        ),
-                        ExtraActionButton(
-                            text="+/-", button_clicked=self.button_clicked
-                        ),
-                        ExtraActionButton(text="%", button_clicked=self.button_clicked),
-                        ActionButton(text="/", button_clicked=self.button_clicked),
+                        ExtraActionButton(content="AC", on_click=self.button_clicked),
+                        ExtraActionButton(content="+/-", on_click=self.button_clicked),
+                        ExtraActionButton(content="%", on_click=self.button_clicked),
+                        ActionButton(content="/", on_click=self.button_clicked),
                     ]
                 ),
                 ft.Row(
                     controls=[
-                        DigitButton(text="7", button_clicked=self.button_clicked),
-                        DigitButton(text="8", button_clicked=self.button_clicked),
-                        DigitButton(text="9", button_clicked=self.button_clicked),
-                        ActionButton(text="*", button_clicked=self.button_clicked),
+                        DigitButton(content="7", on_click=self.button_clicked),
+                        DigitButton(content="8", on_click=self.button_clicked),
+                        DigitButton(content="9", on_click=self.button_clicked),
+                        ActionButton(content="*", on_click=self.button_clicked),
                     ]
                 ),
                 ft.Row(
                     controls=[
-                        DigitButton(text="4", button_clicked=self.button_clicked),
-                        DigitButton(text="5", button_clicked=self.button_clicked),
-                        DigitButton(text="6", button_clicked=self.button_clicked),
-                        ActionButton(text="-", button_clicked=self.button_clicked),
+                        DigitButton(content="4", on_click=self.button_clicked),
+                        DigitButton(content="5", on_click=self.button_clicked),
+                        DigitButton(content="6", on_click=self.button_clicked),
+                        ActionButton(content="-", on_click=self.button_clicked),
                     ]
                 ),
                 ft.Row(
                     controls=[
-                        DigitButton(text="1", button_clicked=self.button_clicked),
-                        DigitButton(text="2", button_clicked=self.button_clicked),
-                        DigitButton(text="3", button_clicked=self.button_clicked),
-                        ActionButton(text="+", button_clicked=self.button_clicked),
+                        DigitButton(content="1", on_click=self.button_clicked),
+                        DigitButton(content="2", on_click=self.button_clicked),
+                        DigitButton(content="3", on_click=self.button_clicked),
+                        ActionButton(content="+", on_click=self.button_clicked),
                     ]
                 ),
                 ft.Row(
                     controls=[
                         DigitButton(
-                            text="0", expand=2, button_clicked=self.button_clicked
+                            content="0", expand=2, on_click=self.button_clicked
                         ),
-                        DigitButton(text=".", button_clicked=self.button_clicked),
-                        ActionButton(text="=", button_clicked=self.button_clicked),
+                        DigitButton(content=".", on_click=self.button_clicked),
+                        ActionButton(content="=", on_click=self.button_clicked),
                     ]
                 ),
             ]
         )
 
     def button_clicked(self, e):
-        data = e.control.data
+        data = e.control.content
         print(f"Button clicked with data = {data}")
         if self.result.value == "Error" or data == "AC":
             self.result.value = "0"

sdk/python/examples/tutorials/calculator/__init__.py

@@ -7,26 +7,27 @@ def main(page: ft.Page):
 
     page.add(
         result,
-        ft.Button(text="AC"),
-        ft.Button(text="+/-"),
-        ft.Button(text="%"),
-        ft.Button(text="/"),
-        ft.Button(text="7"),
-        ft.Button(text="8"),
-        ft.Button(text="9"),
-        ft.Button(text="*"),
-        ft.Button(text="4"),
-        ft.Button(text="5"),
-        ft.Button(text="6"),
-        ft.Button(text="-"),
-        ft.Button(text="1"),
-        ft.Button(text="2"),
-        ft.Button(text="3"),
-        ft.Button(text="+"),
-        ft.Button(text="0"),
-        ft.Button(text="."),
-        ft.Button(text="="),
+        ft.Button("AC"),
+        ft.Button("+/-"),
+        ft.Button("%"),
+        ft.Button("/"),
+        ft.Button("7"),
+        ft.Button("8"),
+        ft.Button("9"),
+        ft.Button("*"),
+        ft.Button("4"),
+        ft.Button("5"),
+        ft.Button("6"),
+        ft.Button("-"),
+        ft.Button("1"),
+        ft.Button("2"),
+        ft.Button("3"),
+        ft.Button("+"),
+        ft.Button("0"),
+        ft.Button("."),
+        ft.Button("="),
     )
 
 
-ft.run(main)
+if __name__ == "__main__":
+    ft.run(main)

sdk/python/examples/tutorials/calculator/calc.py

@@ -9,44 +9,45 @@ def main(page: ft.Page):
         ft.Row(controls=[result]),
         ft.Row(
             controls=[
-                ft.Button(text="AC"),
-                ft.Button(text="+/-"),
-                ft.Button(text="%"),
-                ft.Button(text="/"),
+                ft.Button("AC"),
+                ft.Button("+/-"),
+                ft.Button("%"),
+                ft.Button("/"),
             ]
         ),
         ft.Row(
             controls=[
-                ft.Button(text="7"),
-                ft.Button(text="8"),
-                ft.Button(text="9"),
-                ft.Button(text="*"),
+                ft.Button("7"),
+                ft.Button("8"),
+                ft.Button("9"),
+                ft.Button("*"),
             ]
         ),
         ft.Row(
             controls=[
-                ft.Button(text="4"),
-                ft.Button(text="5"),
-                ft.Button(text="6"),
-                ft.Button(text="-"),
+                ft.Button("4"),
+                ft.Button("5"),
+                ft.Button("6"),
+                ft.Button("-"),
             ]
         ),
         ft.Row(
             controls=[
-                ft.Button(text="1"),
-                ft.Button(text="2"),
-                ft.Button(text="3"),
-                ft.Button(text="+"),
+                ft.Button("1"),
+                ft.Button("2"),
+                ft.Button("3"),
+                ft.Button("+"),
             ]
         ),
         ft.Row(
             controls=[
-                ft.Button(text="0"),
-                ft.Button(text="."),
-                ft.Button(text="="),
+                ft.Button("0"),
+                ft.Button("."),
+                ft.Button("="),
             ]
         ),
     )
 
 
-ft.run(main)
+if __name__ == "__main__":
+    ft.run(main)

sdk/python/examples/tutorials/calculator/calc1.py

@@ -1,86 +1,84 @@
+from dataclasses import field
+
 import flet as ft
 
 
 def main(page: ft.Page):
     page.title = "Calc App"
     result = ft.Text(value="0", color=ft.Colors.WHITE, size=20)
 
+    @ft.control
     class CalcButton(ft.Button):
-        def __init__(self, text, expand=1):
-            super().__init__()
-            self.text = text
-            self.expand = expand
+        expand: int = field(default_factory=lambda: 1)
 
+    @ft.control
     class DigitButton(CalcButton):
-        def __init__(self, text, expand=1):
-            CalcButton.__init__(self, text, expand)
-            self.bgcolor = ft.Colors.WHITE24
-            self.color = ft.Colors.WHITE
+        bgcolor: ft.Colors = ft.Colors.WHITE_24
+        color: ft.Colors = ft.Colors.WHITE
 
+    @ft.control
     class ActionButton(CalcButton):
-        def __init__(self, text):
-            CalcButton.__init__(self, text)
-            self.bgcolor = ft.Colors.ORANGE
-            self.color = ft.Colors.WHITE
+        bgcolor: ft.Colors = ft.Colors.ORANGE
+        color: ft.Colors = ft.Colors.WHITE
 
+    @ft.control
     class ExtraActionButton(CalcButton):
-        def __init__(self, text):
-            CalcButton.__init__(self, text)
-            self.bgcolor = ft.Colors.BLUE_GREY_100
-            self.color = ft.Colors.BLACK
+        bgcolor: ft.Colors = ft.Colors.BLUE_GREY_100
+        color: ft.Colors = ft.Colors.BLACK
 
     page.add(
         ft.Container(
             width=350,
             bgcolor=ft.Colors.BLACK,
-            border_radius=ft.border_radius.all(20),
+            border_radius=ft.BorderRadius.all(20),
             padding=20,
             content=ft.Column(
                 controls=[
-                    ft.Row(controls=[result], alignment="end"),
+                    ft.Row(controls=[result], alignment=ft.MainAxisAlignment.END),
                     ft.Row(
                         controls=[
-                            ExtraActionButton(text="AC"),
-                            ExtraActionButton(text="+/-"),
-                            ExtraActionButton(text="%"),
-                            ActionButton(text="/"),
+                            ExtraActionButton(content="AC"),
+                            ExtraActionButton(content="+/-"),
+                            ExtraActionButton(content="%"),
+                            ActionButton(content="/"),
                         ]
                     ),
                     ft.Row(
                         controls=[
-                            DigitButton(text="7"),
-                            DigitButton(text="8"),
-                            DigitButton(text="9"),
-                            ActionButton(text="*"),
+                            DigitButton(content="7"),
+                            DigitButton(content="8"),
+                            DigitButton(content="9"),
+                            ActionButton(content="*"),
                         ]
                     ),
                     ft.Row(
                         controls=[
-                            DigitButton(text="4"),
-                            DigitButton(text="5"),
-                            DigitButton(text="6"),
-                            ActionButton(text="-"),
+                            DigitButton(content="4"),
+                            DigitButton(content="5"),
+                            DigitButton(content="6"),
+                            ActionButton(content="-"),
                         ]
                     ),
                     ft.Row(
                         controls=[
-                            DigitButton(text="1"),
-                            DigitButton(text="2"),
-                            DigitButton(text="3"),
-                            ActionButton(text="+"),
+                            DigitButton(content="1"),
+                            DigitButton(content="2"),
+                            DigitButton(content="3"),
+                            ActionButton(content="+"),
                         ]
                     ),
                     ft.Row(
                         controls=[
-                            DigitButton(text="0", expand=2),
-                            DigitButton(text="."),
-                            ActionButton(text="="),
-                        ]
+                            DigitButton(content="0", expand=2),
+                            DigitButton(content="."),
+                            ActionButton(content="="),
+                        ],
                     ),
                 ]
             ),
         )
     )
 
 
-ft.run(main)
+if __name__ == "__main__":
+    ft.run(main)