Update chat tutorial (#5879)

* Update chat examples for session and dialog API changes

Refactored chat_2.py and chat_3.py to use the updated session and dialog APIs. Replaced deprecated session_id and session.get/set with session.id and session.store.get/set. Updated dialog handling to use show_dialog and pop_dialog methods, and fixed color constant naming.

* Update session access to use store attribute

Replaces direct session get/set calls with session.store.get/set for user_name in chat example. Ensures compatibility with updated session API.

* Refactor Message class and fix color/border usage

Refactored the Message class to use a dataclass for cleaner code. Updated color constants to use the correct Flet naming (e.g., BLACK_45 instead of BLACK45) and replaced ft.border.all with ft.Border.all for border creation.

* Remove unnecessary page.update() calls in chat examples

Eliminated redundant page.update() calls from chat_1.py, chat_2.py, chat_3.py, and main.py, as updates are now handled automatically in event handlers. Updated chat.md documentation to reflect this change and improved code snippets and explanations for clarity.

Author: InesaFitsner

sdk/python/examples/tutorials/chat/chat_1.py

@@ -8,7 +8,6 @@ def main(page: ft.Page):
     def send_click(e):
         chat.controls.append(ft.Text(new_message.value))
         new_message.value = ""
-        page.update()
 
     page.add(
         chat,

sdk/python/examples/tutorials/chat/chat_2.py

@@ -20,9 +20,8 @@ def on_message(message: Message):
     page.pubsub.subscribe(on_message)
 
     def send_click(e):
-        page.pubsub.send_all(Message(user=page.session_id, text=new_message.value))
+        page.pubsub.send_all(Message(user=page.session.id, text=new_message.value))
         new_message.value = ""
-        page.update()
 
     page.add(chat, ft.Row([new_message, ft.Button("Send", on_click=send_click)]))
 

sdk/python/examples/tutorials/chat/chat_3.py

@@ -19,7 +19,7 @@ def on_message(message: Message):
             chat.controls.append(ft.Text(f"{message.user}: {message.text}"))
         elif message.message_type == "login_message":
             chat.controls.append(
-                ft.Text(message.text, italic=True, color=ft.Colors.BLACK45, size=12)
+                ft.Text(message.text, italic=True, color=ft.Colors.BLACK_45, size=12)
             )
         page.update()
 
@@ -28,39 +28,39 @@ def on_message(message: Message):
     def send_click(e):
         page.pubsub.send_all(
             Message(
-                user=page.session.get("user_name"),
+                user=page.session.store.get("user_name"),
                 text=new_message.value,
                 message_type="chat_message",
             )
         )
         new_message.value = ""
-        page.update()
 
     user_name = ft.TextField(label="Enter your name")
 
     def join_click(e):
         if not user_name.value:
             user_name.error_text = "Name cannot be blank!"
-            user_name.update()
         else:
-            page.session.set("user_name", user_name.value)
-            page.dialog.open = False
+            page.session.store.set("user_name", user_name.value)
+            # page.dialog.open = False
+            page.pop_dialog()
             page.pubsub.send_all(
                 Message(
                     user=user_name.value,
                     text=f"{user_name.value} has joined the chat.",
                     message_type="login_message",
                 )
             )
-            page.update()
 
-    page.dialog = ft.AlertDialog(
-        open=True,
-        modal=True,
-        title=ft.Text("Welcome!"),
-        content=ft.Column([user_name], tight=True),
-        actions=[ft.Button(content="Join chat", on_click=join_click)],
-        actions_alignment=ft.MainAxisAlignment.END,
+    page.show_dialog(
+        ft.AlertDialog(
+            open=True,
+            modal=True,
+            title=ft.Text("Welcome!"),
+            content=ft.Column([user_name], tight=True),
+            actions=[ft.Button(content="Join chat", on_click=join_click)],
+            actions_alignment=ft.MainAxisAlignment.END,
+        )
     )
 
     page.add(chat, ft.Row([new_message, ft.Button("Send", on_click=send_click)]))

sdk/python/examples/tutorials/chat/main.py

@@ -1,29 +1,33 @@
+from dataclasses import dataclass
+
 import flet as ft
 
 
+@dataclass
 class Message:  # noqa: B903
-    def __init__(self, user_name: str, text: str, message_type: str):
-        self.user_name = user_name
-        self.text = text
-        self.message_type = message_type
+    user_name: str
+    text: str
+    message_type: str
 
 
+@ft.control
 class ChatMessage(ft.Row):
     def __init__(self, message: Message):
         super().__init__()
+        self.message = message
         self.vertical_alignment = ft.CrossAxisAlignment.START
         self.controls = [
             ft.CircleAvatar(
-                content=ft.Text(self.get_initials(message.user_name)),
+                content=ft.Text(self.get_initials(self.message.user_name)),
                 color=ft.Colors.WHITE,
-                bgcolor=self.get_avatar_color(message.user_name),
+                bgcolor=self.get_avatar_color(self.message.user_name),
             ),
             ft.Column(
                 tight=True,
                 spacing=5,
                 controls=[
-                    ft.Text(message.user_name, weight=ft.FontWeight.BOLD),
-                    ft.Text(message.text, selectable=True),
+                    ft.Text(self.message.user_name, weight=ft.FontWeight.BOLD),
+                    ft.Text(self.message.text, selectable=True),
                 ],
             ),
         ]
@@ -62,7 +66,7 @@ def join_chat_click(e):
             join_user_name.error_text = "Name cannot be blank!"
             join_user_name.update()
         else:
-            page.session.set("user_name", join_user_name.value)
+            page.session.store.set("user_name", join_user_name.value)
             welcome_dlg.open = False
             new_message.prefix = ft.Text(f"{join_user_name.value}: ")
             page.pubsub.send_all(
@@ -72,26 +76,24 @@ def join_chat_click(e):
                     message_type="login_message",
                 )
             )
-            page.update()
 
     async def send_message_click(e):
         if new_message.value != "":
             page.pubsub.send_all(
                 Message(
-                    page.session.get("user_name"),
+                    page.session.store.get("user_name"),
                     new_message.value,
                     message_type="chat_message",
                 )
             )
             new_message.value = ""
             await new_message.focus()
-            page.update()
 
     def on_message(message: Message):
         if message.message_type == "chat_message":
             m = ChatMessage(message)
         elif message.message_type == "login_message":
-            m = ft.Text(message.text, italic=True, color=ft.Colors.BLACK45, size=12)
+            m = ft.Text(message.text, italic=True, color=ft.Colors.BLACK_45, size=12)
         chat.controls.append(m)
         page.update()
 
@@ -137,7 +139,7 @@ def on_message(message: Message):
     page.add(
         ft.Container(
             content=chat,
-            border=ft.border.all(1, ft.Colors.OUTLINE),
+            border=ft.Border.all(1, ft.Colors.OUTLINE),
             border_radius=5,
             padding=10,
             expand=True,