Refactor ToDo tutorial to use code includes

Updated the ToDo tutorial to reference example code files using --8<-- includes instead of embedding code directly. Improved formatting, clarified instructions, and streamlined explanations for better readability and maintainability.

Author: InesaFitsner

sdk/python/packages/flet/docs/tutorials/todo.md

@@ -1,5 +1,6 @@
 ---
 title: ToDo Tutorial
+examples: ../../examples/tutorials/todo
 ---
 
 In this tutorial we will show you, step-by-step, how to create a To-Do app in Python using Flet framework and then publish it as a desktop, mobile or web app. The app is a single-file console program of just
@@ -22,55 +23,37 @@ The tutorial consists of the following steps:
 * [Final touches](#final-touches)
 * [Publishing the app](#publishing-the-app)
 
-/// details | For beginners
-    type: info
-To create a multi-platform app in Python with Flet, you don't need to know HTML, CSS or JavaScript, but you do need a basic knowledge of Python and object-oriented programming.
+## Getting started with Flet
+
+To create a multi-platform app in Python with Flet, you don't need to know HTML,
+CSS or JavaScript, but you do need a basic knowledge of Python and object-oriented
+programming.
 
 Before you can create your first Flet app, you need to
-[setup your development environment](../getting-started/installation.md).
+[setup your development environment](../getting-started/installation.md), which requires Python 3.10 or above and `flet` package.
 
 Once you have Flet installed, let's [create](../getting-started/create-flet-app.md) a simple hello-world app.
 
 Create `hello.py` with the following contents:
 
 ```python title="hello.py"
-import flet as ft
-
-def main(page: ft.Page):
-    page.add(ft.Text(value="Hello, world!"))
-
-ft.run(main)
+--8<-- "{{ examples }}/hello.py"
 ```
 
-Run this app, and you will see a new window with a greeting:
+Run this app and you will see a new window with a greeting:
 
 {{ image("../examples/tutorials/todo/media/hello-world.png", alt="hello-world", width="80%") }}
 
 
-///
-
 ## Adding page controls and handling events
 
-To start, we'll need a [`TextField`][flet.TextField] for entering a task name, and an "+"
-[`FloatingActionButton`][flet.FloatingActionButton] with an event handler that will display
-a [`Checkbox`][flet.Checkbox] with a new task.
+To start, we'll need a [`TextField`][flet.TextField] for entering a task name, and "+"
+[`FloatingActionButton`][flet.FloatingActionButton] with an event handler that will display a [`Checkbox`][flet.Checkbox] with a new task.
 
 Create `todo.py` with the following contents:
 
 ```python title="todo.py"
-import flet as ft
-
-def main(page: ft.Page):
-    def add_clicked(e):
-        page.add(ft.Checkbox(label=new_task.value))
-        new_task.value = ""
-        page.update()
-
-    new_task = ft.TextField(hint_text="What's needs to be done?")
-
-    page.add(new_task, ft.FloatingActionButton(icon=ft.Icons.ADD, on_click=add_clicked))
-
-ft.run(main)
+--8<-- "{{ examples }}/step_1.py"
 ```
 
 Run the app and you should see a page like this:
@@ -80,8 +63,7 @@ Run the app and you should see a page like this:
 
 ### Page layout
 
-Now let's make the app look nice! We want the entire app to be at the top center of the page,
-taking up 600 px width. The TextField and the "+" button should be aligned horizontally, and take up full app width:
+Now let's make the app look nice! We want the entire app to be at the top center of the page, taking up 600 px width. The TextField and the "+" button should be aligned horizontally, and take up full app width:
 
 {{ image("../examples/tutorials/todo/media/diagram-1.svg", alt="diagram-1", width="80%") }}
 
@@ -91,34 +73,8 @@ taking up 600 px width. The TextField and the "+" button should be aligned horiz
 
 Replace `todo.py` contents with the following:
 
-```python title="todo.py"
-import flet as ft
-
-def main(page: ft.Page):
-    def add_clicked(e):
-        tasks_view.controls.append(ft.Checkbox(label=new_task.value))
-        new_task.value = ""
-        view.update()
-
-    new_task = ft.TextField(hint_text="What needs to be done?", expand=True)
-    tasks_view = ft.Column()
-    view=ft.Column(
-        width=600,
-        controls=[
-            ft.Row(
-                controls=[
-                    new_task,
-                    ft.FloatingActionButton(icon=ft.Icons.ADD, on_click=add_clicked),
-                ],
-            ),
-            tasks_view,
-        ],
-    )
-
-    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
-    page.add(view)
-
-ft.run(main)
+```python title="hello.py"
+--8<-- "{{ examples }}/step_2.py"
 ```
 
 Run the app and you should see a page like this:
@@ -128,54 +84,12 @@ Run the app and you should see a page like this:
 
 ### Reusable UI components
 
-While we could continue writing our app in the `main` function, the best practice would be to
-create a [reusable UI component](../cookbook/custom-controls.md). Imagine you are working on an app header, a side menu,
-or UI that will be a part of a larger project. Even if you can't think of such uses right now,
-we still recommend creating all your Flet apps with composability and reusability in mind.
+While we could continue writing our app in the `main` function, the best practice would be to create a [reusable UI component](../cookbook/custom-controls.md). Imagine you are working on an app header, a side menu, or UI that will be a part of a larger project. Even if you can't think of such uses right now, we still recommend creating all your Flet apps with composability and reusability in mind.
 
-To make a reusable To-Do app component, we are going to encapsulate its state and presentation
-logic in a separate class:
+To make a reusable To-Do app component, we are going to encapsulate its state and presentation logic in a separate class:
 
 ```python title="todo.py"
-import flet as ft
-
-class TodoApp(ft.Column):
-    # application's root control is a Column containing all other controls
-    def __init__(self):
-        super().__init__()
-        self.new_task = ft.TextField(hint_text="What needs to be done?", expand=True)
-        self.tasks_view = ft.Column()
-        self.width = 600
-        self.controls = [
-            ft.Row(
-                controls=[
-                    self.new_task,
-                    ft.FloatingActionButton(
-                        icon=ft.Icons.ADD, on_click=self.add_clicked
-                    ),
-                ],
-            ),
-            self.tasks_view,
-        ]
-
-    def add_clicked(self, e):
-        self.tasks_view.controls.append(ft.Checkbox(label=self.new_task.value))
-        self.new_task.value = ""
-        self.update()
-
-
-def main(page: ft.Page):
-    page.title = "To-Do App"
-    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
-    page.update()
-
-    # create application instance
-    todo = TodoApp()
-
-    # add application's root control to the page
-    page.add(todo)
-
-ft.run(main)
+--8<-- "{{ examples }}/step_3.py"
 ```
 
 /// details | Try this out!
@@ -195,127 +109,25 @@ page.add(app1, app2)
 ## View, edit and delete list items
 
 In the [previous step](#adding-page-controls-and-handling-events), we created a basic To-Do app with task items shown as checkboxes.
-Let's improve the app by adding "Edit" and "Delete" buttons next to a task name. The "Edit" button
-will switch a task item to edit mode.
+Let's improve the app by adding "Edit" and "Delete" buttons next to a task name. The "Edit" button will switch a task item to edit mode.
 
 {{ image("../examples/tutorials/todo/media/diagram-2.svg", alt="diagram-2", width="80%") }}
 
 
-Each task item is represented by two rows: `display_view` row with Checkbox, "Edit" and "Delete"
-buttons and `edit_view` row with TextField and "Save" button. `view` column serves as a container
-for both `display_view` and `edit_view` rows.
+Each task item is represented by two rows: `display_view` row with Checkbox, "Edit" and "Delete" buttons and `edit_view` row with TextField and "Save" button. `view` column serves as a container for both `display_view` and `edit_view` rows.
 
-Before this step, the code was short enough to be fully included in the tutorial. Going forward,
-we will be highlighting only the changes introduced in a step.
+To encapsulate task item views and actions, we introduced a new `Task` class.
 
-Copy the entire code for this step from [here](https://github.com/flet-dev/flet/blob/main/sdk/python/examples/tutorials/todo/to-do-4.py). Below we will explain the changes we've done
-to implement view, edit, and delete tasks.
+Additionally, we changed `TodoApp` class to create and hold `Task` instances when the "Add" button is clicked.
 
-To encapsulate task item views and actions, we introduced a new `Task` class:
+For "Delete" task operation, we implemented `task_delete()` method in `TodoApp` class which accepts task control instance as a parameter.
 
-```python title="todo.py"
-class Task(ft.Column):
-    def __init__(self, task_name, task_delete):
-        super().__init__()
-        self.task_name = task_name
-        self.task_delete = task_delete
-        self.display_task = ft.Checkbox(value=False, label=self.task_name)
-        self.edit_name = ft.TextField(expand=1)
-
-        self.display_view = ft.Row(
-            alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
-            vertical_alignment=ft.CrossAxisAlignment.CENTER,
-            controls=[
-                self.display_task,
-                ft.Row(
-                    spacing=0,
-                    controls=[
-                        ft.IconButton(
-                            icon=ft.Icons.CREATE_OUTLINED,
-                            tooltip="Edit To-Do",
-                            on_click=self.edit_clicked,
-                        ),
-                        ft.IconButton(
-                            ft.Icons.DELETE_OUTLINE,
-                            tooltip="Delete To-Do",
-                            on_click=self.delete_clicked,
-                        ),
-                    ],
-                ),
-            ],
-        )
-
-        self.edit_view = ft.Row(
-            visible=False,
-            alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
-            vertical_alignment=ft.CrossAxisAlignment.CENTER,
-            controls=[
-                self.edit_name,
-                ft.IconButton(
-                    icon=ft.Icons.DONE_OUTLINE_OUTLINED,
-                    icon_color=ft.Colors.GREEN,
-                    tooltip="Update To-Do",
-                    on_click=self.save_clicked,
-                ),
-            ],
-        )
-        self.controls = [self.display_view, self.edit_view]
-
-    def edit_clicked(self, e):
-        self.edit_name.value = self.display_task.label
-        self.display_view.visible = False
-        self.edit_view.visible = True
-        self.update()
-
-    def save_clicked(self, e):
-        self.display_task.label = self.edit_name.value
-        self.display_view.visible = True
-        self.edit_view.visible = False
-        self.update()
-
-    def delete_clicked(self, e):
-        self.task_delete(self)
-```
-
-Additionally, we changed `TodoApp` class to create and hold `Task` instances when the "Add" button is clicked:
+Then, we passed a reference to `task_delete` method into Task constructor and called it on "Delete" button event handler.
 
 ```python title="todo.py"
-class TodoApp(ft.Column):
-    # application's root control is a Column containing all other controls
-    def __init__(self):
-        super().__init__()
-        self.new_task = ft.TextField(hint_text="What needs to be done?", expand=True)
-        self.tasks = ft.Column()
-        self.width = 600
-        self.controls = [
-            ft.Row(
-                controls=[
-                    self.new_task,
-                    ft.FloatingActionButton(
-                        icon=ft.Icons.ADD, on_click=self.add_clicked
-                    ),
-                ],
-            ),
-            self.tasks,
-        ]
-
-    def add_clicked(self, e):
-        task = Task(self.new_task.value, self.task_delete)
-        self.tasks.controls.append(task)
-        self.new_task.value = ""
-        self.update()
-
-    def task_delete(self, task):
-        self.tasks.controls.remove(task)
-        self.update()
+--8<-- "{{ examples }}/step_4.py"
 ```
 
-For "Delete" task operation, we implemented `task_delete()` method in `TodoApp` class which
-accepts task control instance as a parameter.
-
-Then, we passed a reference to `task_delete` method into Task constructor and called it on
-"Delete" button event handler.
-
 Run the app and try to edit and delete tasks:
 
 {{ image("../examples/tutorials/todo/media/view-edit-delete.gif", alt="view-edit-delete", width="80%") }}