[Question]My routes aren’t working properly

[boanr]

Question

My routes aren’t working properly. When I run the app, only the FloatingActionButton is displayed. I’m currently practicing building my own task management features, and some functions haven’t been fully implemented yet. Right now, I want the nav-item “Categories” to display the detailed content of the categories, but when I run it, only the FloatingActionButton shows up. Can anyone help me?

Code sample

import flet as ft
import flet.canvas as Canvas
import flet.controls.core.icon as Icon
from flet.controls.material import icons
import datetime
from datetime import timedelta 
import urllib.parse
import asyncio
# -----------------------

# -----------------------
PRIMARY_BG_TOP = "#0F1C3A"      
PRIMARY_BG_BOTTOM = "#0B1730"   
CARD_BG = "#192648"             
CARD_BG_DARKER = "#152043"
NEON_PINK = "#FF2ED1"
NEON_BLUE = "#4DA3FF"
TEXT_PRIMARY = "#E6EEFF"
TEXT_SECONDARY = "#9CB0D5"
DIVIDER = "#233155"
SUCCESS_GREEN = "#24D17E"

def neon_shadow(color: str, blur: int = 20, spread: int = 0, opacity: float = 0.5):

    return ft.BoxShadow(
        spread_radius=spread,
        blur_radius=blur,
        color=ft.Colors.with_opacity(opacity, color),
        offset=ft.Offset(0, 0),
    )

def soft_drop_shadow(blur: int = 18, y: int = 10, opacity: float = 0.35):
    return ft.BoxShadow(
        spread_radius=0,
        blur_radius=blur,
        color=ft.Colors.with_opacity(opacity, "#000000"),
        offset=ft.Offset(0, y),
    )


# -----------------------

# -----------------------
class CategoryCard(ft.Container):
    def __init__(self, title: str, tasks_count: int, accent_color: str, progress: float = 0.4):
        super().__init__()
        self.width = 180
        self.height = 110
        self.border_radius = 18
        self.bgcolor = CARD_BG
        self.padding = 14
        self.alignment = ft.alignment.Alignment.CENTER
        self.shadow = [soft_drop_shadow()]
        
        
        filled_weight = max(0, min(100, int(progress * 100)))
        empty_weight = max(0, 100 - filled_weight)

        
        progress_bar = ft.Container(
            width=float("inf"),
            height=8,
            border_radius=20,
            bgcolor=CARD_BG_DARKER,
            content=ft.Row(
                spacing=0,
                controls=[
                    ft.Container(
                        expand=filled_weight,                
                        bgcolor=ft.Colors.with_opacity(0.9, accent_color),
                        border_radius=20,
                        shadow=[neon_shadow(accent_color, blur=12, opacity=0.75)],
                    ),
                    ft.Container(expand=empty_weight),       
                ],
            ),
        )

        self.content = ft.Column(
            spacing=8,
            alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
            controls=[
                ft.Text(f"{tasks_count} tasks", color=TEXT_SECONDARY, size=12, weight=ft.FontWeight.W_400),
                ft.Text(title, color=TEXT_PRIMARY, size=18, weight=ft.FontWeight.W_700),
                progress_bar,
            ],
        )



class TaskItem(ft.Container):
    def __init__(self, title: str, accent="pink", checked: bool = False, striked: bool = False, details: str | None = None, when: datetime.datetime | datetime.date | None = None):
        super().__init__()
        accent_color = NEON_PINK if accent == "pink" else NEON_BLUE
        self.checked = checked
        self.striked = striked
        self.accent_color = accent_color

        self.details = details or "（無內容）"
        self.when = when or datetime.datetime.now()
        if isinstance(self.when, datetime.date) and not isinstance(self.when, datetime.datetime):

            self.when = datetime.datetime.combine(self.when, datetime.time(9, 0))
        self.time_str = self.when.strftime("%Y-%m-%d %H:%M")
        check = ft.Container(
            width=26,
            height=26,
            border_radius=13,
            border=ft.border.all(2, accent_color),
            alignment=ft.alignment.Alignment.CENTER,
            content=ft.Icon(
                ft.icons.Icons.CHECK, size=16, color=TEXT_PRIMARY if checked else ft.Colors.TRANSPARENT
            ),
            on_click=self.toggle_check,
            ink=True,
        )

        self.label = ft.Text(
            title,
            size=14,
            color=TEXT_PRIMARY if not striked else TEXT_SECONDARY,
            weight=ft.FontWeight.W_500,
            #decoration=ft.TextDecoration.LINE_THROUGH if striked else None,
        )

        self.height = 60
        self.border_radius = 18
        self.bgcolor = CARD_BG
        self.padding = 14
        self.margin = ft.margin.only(bottom=12)
        self.shadow = [soft_drop_shadow()]
        self.content = ft.Row(
            alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
            vertical_alignment=ft.CrossAxisAlignment.CENTER,
            controls=[
                ft.Row(
                    spacing=14,
                    vertical_alignment=ft.CrossAxisAlignment.CENTER,
                    controls=[check, self.label],
                ),
                ft.PopupMenuButton(
                    icon=ft.icons.Icons.MORE_HORIZ,
                    icon_color=TEXT_SECONDARY,
                    items=[
                        ft.PopupMenuItem(
                            content=ft.Row(
                                spacing=10,
                                controls=[
                                    ft.Icon(ft.icons.Icons.VISIBILITY_OUTLINED, size=18, color=TEXT_SECONDARY),
                                    ft.Text("View Details", color=TEXT_PRIMARY, size=14),
                                ],
                            ),
                            on_click=lambda e: self.view_detail(),
                        ),
                        ft.PopupMenuItem(
                            content=ft.Row(
                                spacing=10,
                                controls=[
                                    ft.Icon(ft.icons.Icons.DELETE_OUTLINE, size=18, color=TEXT_SECONDARY),
                                    ft.Text("Delete", color=TEXT_PRIMARY, size=14),
                                ],
                            ),
                            on_click=lambda e: self.delete_self(),
                        ),
                    ],
                ),
            ],
        )
    def view_detail(self):
        
        title = getattr(self.label, "value", None) or getattr(self.label, "text", "") or ""
        
        dlg = ft.AlertDialog(
            modal=True,  
            bgcolor=CARD_BG,
            title=ft.Text("Task Details", color=TEXT_PRIMARY, size=18, weight=ft.FontWeight.W_700),
            content=ft.Column(
                tight=True,
                spacing=10,
                controls=[
                    ft.Text(title or "（No title）", color=TEXT_PRIMARY, size=16, weight=ft.FontWeight.W_600),
                    ft.Text(getattr(self, "time_str", "") or "", color=TEXT_SECONDARY, size=12),
                    ft.Divider(height=1, color=DIVIDER),
                    ft.Text(getattr(self, "details", "（No content）") or "（No content）", color=TEXT_PRIMARY, size=14),
                ],
            ),
            actions=[
                ft.TextButton("close", on_click=lambda e: self.page.pop_dialog()),
            ],
            actions_alignment=ft.MainAxisAlignment.END,
        )


        self.page.show_dialog(dlg)


    def delete_self(self):
        parent = self.parent
        if parent and getattr(parent, "controls", None):
            parent.controls.remove(self)
            self.page.update()


    def toggle_check(self, _):
        self.checked = not self.checked

        icon = self.content.controls[0].controls[0].content  # Icon
        icon.color = TEXT_PRIMARY if self.checked else ft.Colors.TRANSPARENT
        self.update()
        


class SideBar(ft.Container):
    def __init__(self, collapsed: bool = False, on_collapse=None):
        super().__init__()
        self.collapsed = collapsed
        self.on_collapse = on_collapse


        avatar_ring = ft.Container(
            width=64,
            height=64,
            border_radius=32,
            gradient=ft.RadialGradient(
                center=ft.Alignment(0, 0),
                radius=1.2,
                colors=[ft.Colors.with_opacity(0.15, NEON_PINK), ft.Colors.with_opacity(0.05, NEON_BLUE)],
            ),
            border=ft.border.all(2, NEON_PINK),
            shadow=[neon_shadow(NEON_PINK, blur=20, opacity=0.8)],
            alignment=ft.alignment.Alignment.CENTER,
            content=ft.Icon(ft.icons.Icons.PERSON, color=TEXT_PRIMARY, size=28),
        )

        name = ft.Column(
            spacing=2,
            controls=[
                ft.Text("Olivia", size=18, weight=ft.FontWeight.W_700, color=TEXT_PRIMARY),
                ft.Text("Mitchell", size=16, weight=ft.FontWeight.W_500, color=TEXT_PRIMARY),
            ],
        )

        header = ft.Row(
            spacing=12,
            vertical_alignment=ft.CrossAxisAlignment.CENTER,
            controls=[avatar_ring, name] if not self.collapsed else [avatar_ring],
        )

        # 導覽項目
        def nav_item(icon, label, selected=False, on_click=None):
            return ft.Container(
                height=44,
                border_radius=12,
                padding=ft.padding.symmetric(10, 12),
                bgcolor=ft.Colors.with_opacity(0.0, CARD_BG),
                ink=True,
                on_click=on_click or (lambda _: None),
                content=ft.Row(
                    spacing=12,
                    vertical_alignment=ft.CrossAxisAlignment.CENTER,
                    controls=[
                        ft.Icon(icon, color=NEON_BLUE if selected else TEXT_SECONDARY, size=20),
                        ft.Text(label, color=TEXT_PRIMARY if selected else TEXT_SECONDARY, visible=not self.collapsed),
                    ],
                ),
            )

        chart_wave = ft.Container(
            height=80,
            border_radius=16,
            bgcolor=CARD_BG,
            padding=10,
            shadow=[soft_drop_shadow()],
            content=ft.Stack(
                controls=[
                    ft.Container(
                        left=0,
                        right=0,
                        bottom=10,
                        content=ft.Row(
                            controls=[
                                ft.Container(
                                    expand=1,
                                    height=2,
                                    bgcolor=ft.Colors.with_opacity(0.2, TEXT_SECONDARY),
                                    border_radius=1,
                                )
                            ]
                        ),
                    ),
                    ft.Container(
                        left=0,
                        right=0,
                        top=0,
                        bottom=0,
                        padding=0,
                        content=Canvas.Canvas(
                            shapes=[
                                Canvas.Points(
                                    points=[
                                        ft.Offset(0, 50),
                                        ft.Offset(20, 55),
                                        ft.Offset(40, 45),
                                        ft.Offset(60, 60),
                                        ft.Offset(80, 40),
                                        ft.Offset(100, 55),
                                        ft.Offset(120, 35),
                                        ft.Offset(140, 60),
                                    ],
                                    paint=ft.Paint(
                                        stroke_width=3,
                                        style=ft.PaintingStyle.STROKE,
                                        color=NEON_PINK,
                                    ),
                                )
                            ]
                        ),
                    ),
                ]
            ),
        )

        collapse_btn = ft.IconButton(
            icon=ft.icons.Icons.CHEVRON_LEFT if not self.collapsed else ft.icons.Icons.CHEVRON_RIGHT,
            icon_color=TEXT_SECONDARY,
            tooltip="Collapse",
            on_click=self.toggle,
        )

        self.width = 280 if not self.collapsed else 92
        self.padding = 16
        self.border_radius = 24
        self.bgcolor = ft.LinearGradient(
            begin=ft.alignment.Alignment.TOP_CENTER,
            end=ft.alignment.Alignment.BOTTOM_CENTER,
            colors=[PRIMARY_BG_TOP, PRIMARY_BG_BOTTOM],
        )
        self.shadow = [soft_drop_shadow(blur=30, y=20, opacity=0.45)]
        self.content = ft.Column(
            spacing=18,
            controls=[
                ft.Row(
                    alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
                    controls=[header, collapse_btn] if not self.collapsed else [collapse_btn],
                ),
                ft.Divider(height=1, color=DIVIDER),
                nav_item(ft.icons.Icons.VIEW_SIDEBAR_ROUNDED, "Templates", selected=True),
                nav_item(ft.icons.Icons.CATEGORY, "Categories", on_click=lambda e: self.page.go("/categories")),
                nav_item(ft.icons.Icons.INSIGHTS, "Analytics"),
                ft.Container(height=8),
                ft.Text("Good", color=TEXT_SECONDARY, size=12, visible=not self.collapsed),
                ft.Text("Consistancy",  
                        color=TEXT_PRIMARY, size=14, visible=not self.collapsed),
                chart_wave,
            ],
        )

    def toggle(self, _):
        self.collapsed = not self.collapsed
        self.width = 280 if not self.collapsed else 92

        self.__init__(collapsed=self.collapsed, on_collapse=self.on_collapse)
        if self.on_collapse:
            self.on_collapse(self)


def main(page: ft.Page):
    page.title = "Tasks – Neon Dark UI"
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
    page.vertical_alignment = ft.MainAxisAlignment.START
    page.padding = 16
    page.bgcolor = ft.LinearGradient(
        begin=ft.alignment.Alignment.TOP_CENTER,
        end=ft.alignment.Alignment.BOTTOM_CENTER,
        colors=[PRIMARY_BG_TOP, PRIMARY_BG_BOTTOM],
    )

    # ---------------------------

    # ---------------------------
    tasks_title = ft.Text("TODAY'S TASKS", size=12, color=TEXT_SECONDARY, weight=ft.FontWeight.W_500)
    tasks_list = ft.Column(
        spacing=0,
        controls=[
            TaskItem("Daily meeting with team", accent="pink", checked=True),
            TaskItem("Pay for rent", accent="blue", checked=True, striked=True),
            TaskItem("Check emails", accent="blue"),
            TaskItem("Lunch with Emma", accent="pink"),
            TaskItem("Meditation", accent="blue"),
        ],
    )

    # ---------------------------

    # ---------------------------
    search_field = ft.TextField(
        hint_text="Search tasks…",
        height=40,
        width=260,
        border_radius=12,
        prefix_icon=ft.icons.Icons.SEARCH,
        bgcolor=ft.Colors.with_opacity(0.08, "#FFFFFF"),
        color=TEXT_PRIMARY,
        cursor_color=NEON_BLUE,
        text_style=ft.TextStyle(size=14),
        on_submit=lambda e: do_search(e.control.value),  
    )


    def _text_value(txt: ft.Text) -> str:
        return (getattr(txt, "value", None) or getattr(txt, "text", None) or "").strip()

    # ---------------------------

    # ---------------------------
    def do_search(query: str | None):
        q = (query or search_field.value or "").strip()
        if not q:

            for ti in tasks_list.controls:
                ti.visible = True
                ti.bgcolor = CARD_BG
            tasks_title.value = "TODAY'S TASKS"

            page.snack_bar = ft.SnackBar(content=ft.Text("Please enter the keyword to search"), bgcolor=CARD_BG)
            page.snack_bar.open = True
            page.update()
            return

        low = q.lower()
        hits = 0
        for ti in tasks_list.controls:
            if isinstance(ti, TaskItem):
                title = _text_value(ti.label) if hasattr(ti, "label") else ""
                is_hit = low in title.lower()
                ti.visible = is_hit

                ti.bgcolor = (ft.Colors.with_opacity(0.12, NEON_BLUE) if is_hit else CARD_BG)
                if is_hit:
                    hits += 1

        tasks_title.value = f'ReSULTS FOR "{q}"  ({hits} found)' if hits else f'ReSULTS FOR "{q}"  (no matches)'
        page.update()

    def clear_search():
        search_field.value = ""
        for ti in tasks_list.controls:
            if isinstance(ti, TaskItem):
                ti.visible = True
                ti.bgcolor = CARD_BG
        tasks_title.value = "TODAY'S TASKS"
        page.update()

    # ---------------------------

    # ---------------------------
    top_bar = ft.Row(
        alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
        vertical_alignment=ft.CrossAxisAlignment.CENTER,
        controls=[
            ft.Row(
                spacing=8,
                controls=[
                    #ft.Icon(ft.icons.Icons.MENU, color=TEXT_SECONDARY),
                    ft.Text("What's up, Olivia!", color=TEXT_PRIMARY, size=24, weight=ft.FontWeight.W_700),
                ],
            ),
            ft.Row(
                spacing=8,
                vertical_alignment=ft.CrossAxisAlignment.CENTER,
                controls=[
                    search_field,

                    ft.IconButton(
                        icon=ft.icons.Icons.SEARCH,
                        icon_color=TEXT_SECONDARY,
                        tooltip="Search",
                        on_click=lambda _: do_search(search_field.value),
                    ),

                    ft.IconButton(
                        icon=ft.icons.Icons.CLOSE,
                        icon_color=TEXT_SECONDARY,
                        tooltip="Clear search",
                        on_click=lambda _: clear_search(),
                    ),

                    ft.IconButton(
                        ft.icons.Icons.NOTIFICATIONS_NONE_ROUNDED,
                        on_click=lambda e: print("Notifications clicked"),
                    ),
                ],
            ),
        ],
    )

    # ---------------------------

    categories_data = ["Business", "Personal"]
    categories = ft.Row(
        spacing=14,
        wrap=True,
        controls=[
            CategoryCard("Business", tasks_count=40, accent_color=NEON_PINK, progress=0.35),
            CategoryCard("Personal", tasks_count=18, accent_color=NEON_BLUE, progress=0.55),
        ],
    )

    main_cards = ft.Column(
        spacing=18,
        controls=[
            top_bar,
            ft.Text("CATEGORIES", size=12, color=TEXT_SECONDARY, weight=ft.FontWeight.W_500),
            categories,
            tasks_title,
            tasks_list,
        ],
    )

    # ---------------------------

    def show_add_snack():
        page.snack_bar.open = True
        page.update()

    fab = ft.FloatingActionButton(
        icon=ft.icons.Icons.ADD,
        bgcolor=NEON_PINK,
        foreground_color="white",
        width=58,
        height=58,
        on_click=lambda _: show_add_snack(),
    )
    page.snack_bar = ft.SnackBar(content=ft.Text("Add new task"), bgcolor=CARD_BG)

    sidebar = SideBar(collapsed=False, on_collapse=lambda _: page.update())

    content_card = ft.Container(
        expand=True,
        border_radius=24,
        padding=18,
        bgcolor=ft.Colors.with_opacity(0.05, "#000000"),
        content=main_cards,
    )

    layout = ft.Row(
        spacing=16,
        vertical_alignment=ft.CrossAxisAlignment.START,
        controls=[sidebar, content_card],
    )


    def on_resize(e: ft.WindowEvent):
        if page.width < 820 and not sidebar.collapsed:
            sidebar.toggle(None)
        elif page.width >= 820 and sidebar.collapsed:
            sidebar.toggle(None)
        page.update()
  
    def build_detail_view(title: str, time_str: str, content: str) -> ft.View:
        return ft.View(
            "/categories",
            [
                ft.AppBar(
                    title=ft.Text("Categories", color=TEXT_PRIMARY),
                    bgcolor=CARD_BG,
                    leading=ft.IconButton(
                        icon=ft.icons.Icons.ARROW_BACK,
                        icon_color=TEXT_SECONDARY,
                        on_click=lambda _: page.go("/"),
                    ),
                ),
                ft.Container(
                    padding=20,
                    content=ft.Column(
                        spacing=12,
                        controls=[
                            ft.Text("Category Management", color=TEXT_PRIMARY, size=20, weight=ft.FontWeight.W_700),
                            ft.Text("You can add or delete categories here; the dropdown above lets you quickly select existing categories.", color=TEXT_SECONDARY, size=12),
                            ft.Row([dd]),
                            ft.Divider(height=1, color=DIVIDER),
                            ft.Row(
                                spacing=10,
                                vertical_alignment=ft.CrossAxisAlignment.CENTER,
                                controls=[
                                    new_input,
                                    ft.ElevatedButton("Add category", bgcolor=NEON_PINK, color="white", on_click=add_category),
                                ],
                            ),
                            lv,
                        ],
                    ),
                ),
            ],
            bgcolor=ft.Colors.with_opacity(0.05, "#000000"),
        )

    def build_categories_view():

        dd = ft.Dropdown(
            width=260,
            label="Select an existing category",
            label_style=ft.TextStyle(color=TEXT_SECONDARY),
            border_color=NEON_BLUE,
        )


        lv = ft.ListView(spacing=10, expand=True, height=400)


        new_input = ft.TextField(
            label="Add a new category name",
            border_color=NEON_BLUE,
            color=TEXT_PRIMARY,
            width=320,
        )

        def refresh():

            dd.options = [ft.dropdown.Option(c) for c in categories_data]
  
            lv.controls = [
                ft.Container(
                    padding=10,
                    bgcolor=CARD_BG,
                    border_radius=12,
                    shadow=[soft_drop_shadow()],
                    content=ft.Row(
                        alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
                        vertical_alignment=ft.CrossAxisAlignment.CENTER,
                        controls=[
                            ft.Text(c, color=TEXT_PRIMARY, size=14, weight=ft.FontWeight.W_500),
                            ft.IconButton(
                                icon=ft.icons.Icons.DELETE_OUTLINE,
                                icon_color=TEXT_SECONDARY,
                                tooltip="Delete this category",
                                on_click=lambda _, name=c: delete_category(name),
                            ),
                        ],
                    ),
                )
                for c in categories_data
            ]
            page.update()

        def add_category(_):
            name = (new_input.value or "").strip()
            if not name:
                page.snack_bar = ft.SnackBar(content=ft.Text("Please enter a category name"), bgcolor=CARD_BG)
                page.snack_bar.open = True
                page.update()
                return
            if name in categories_data:
                page.snack_bar = ft.SnackBar(content=ft.Text("The category already exists"), bgcolor=CARD_BG)
                page.snack_bar.open = True
                page.update()
                return
            categories_data.append(name)
            new_input.value = ""
            refresh()

        def delete_category(name):
            if name in categories_data:
                categories_data.remove(name)
                refresh()


        refresh()

        return ft.View(
            route="/categories",
            bgcolor=ft.Colors.with_opacity(0.05, "#000000"),
            controls=[
                ft.AppBar(
                    title=ft.Text("Categories", color=TEXT_PRIMARY),
                    bgcolor=CARD_BG,
                    leading=ft.IconButton(
                        icon=ft.icons.Icons.ARROW_BACK,
                        icon_color=TEXT_SECONDARY,
                        on_click=lambda _: page.go("/"),
                    ),
                ),
                ft.Container(
                    padding=20,
                    content=ft.Column(
                        spacing=12,
                        controls=[
                            ft.Text("Category Management", color=TEXT_PRIMARY, size=20, weight=ft.FontWeight.W_700),
                            ft.Text("You can add or delete categories here; use the dropdown menu at the top to quickly select existing categories.", color=TEXT_SECONDARY, size=12),
                            ft.Row([dd]),
                            ft.Divider(height=1, color=DIVIDER),
                            ft.Row(
                                spacing=10,
                                vertical_alignment=ft.CrossAxisAlignment.CENTER,
                                controls=[
                                    new_input,
                                    ft.ElevatedButton("insert Categories", bgcolor=NEON_PINK, color="white", on_click=add_category),
                                ],
                            ),
                            lv,
                        ],
                    ),
                ),
            ],
        )

    
    def route_change(e: ft.RouteChangeEvent):
        page.views.clear()

        page.views.append(
            ft.View(
                "/",                 # route
                [layout],            
                bgcolor=ft.Colors.with_opacity(0.05, "#000000"),
            )
        )


        if page.route.startswith("/detail"):
            # 解析 query
            qs = urllib.parse.urlparse(page.route).query
            d = urllib.parse.parse_qs(qs)
            title = d.get("title", [""])[0]
            time_str = d.get("time", [""])[0]
            content = d.get("content", [""])[0]
            page.views.append(build_detail_view(title, time_str, content))

        # /categories -> 分類管理頁
        elif page.route == "/categories":
            page.views.append(build_categories_view())

        page.update()

    def view_pop(e: ft.ViewPopEvent):
        page.views.pop()
        top_view = page.views[-1] if page.views else None
        page.go(top_view.route if top_view else "/")

 


    

    def on_date_change(e):
        selected_date_text.value = f"Selected Date: {date_picker.value.strftime('%Y-%m-%d')}"
        page.update()

    date_picker = ft.DatePicker(
        on_change=on_date_change,
        first_date=datetime.datetime(2023, 1, 1),
        last_date=datetime.datetime(2030, 12, 31),
    )
    page.overlay.append(date_picker) 

    selected_date_text = ft.Text("No date selected", color=TEXT_SECONDARY)


    def open_add_task_sheet(e):
        name_input = ft.TextField(label="Task Name", border_color=NEON_BLUE, color=TEXT_PRIMARY)
        detail_input = ft.TextField(label="Details", multiline=True, min_lines=3, border_color=NEON_BLUE, color=TEXT_PRIMARY)

        selected_date_value = None
        def save_task(e):

            if name_input.value:
                tasks_list.controls.insert(0, TaskItem(name_input.value, accent="pink", details=detail_input.value, when=selected_date_value or datetime.datetime.now()))
                bs.open = False
                page.update()

        def handle_change(e: ft.Event[ft.DatePicker]):
            nonlocal selected_date_value
            if e.control.value:
                
                raw_date = e.control.value
                

                corrected_date = raw_date + timedelta(hours=12)

                selected_date_value = corrected_date.date()
                # 3. 再取日期部分並顯示
                selected_date_text.value = f"Selected Date: {corrected_date.strftime('%Y-%m-%d')}"
            #page.add(ft.Text(f"Date changed: {e.control.value.strftime('%m/%d/%Y')}"))
        def handle_dismissal(e: ft.Event[ft.DialogControl]):
            page.add(ft.Text("DatePicker dismissed"))
        today = datetime.datetime.now()
        d = ft.DatePicker(first_date=datetime.datetime(year=today.year - 1, month=1, day=1),
        last_date=datetime.datetime(year=today.year + 1, month=today.month, day=20),
        on_change=handle_change,on_dismiss=handle_dismissal)

        bs.content = ft.Container(
            padding=20,
            bgcolor=CARD_BG,
            border_radius=ft.border_radius.only(top_left=20, top_right=20),
            content=ft.Column(
                tight=True,
                spacing=20,
                controls=[
                    ft.Text("Add New Task", size=20, weight="bold", color=TEXT_PRIMARY),
                    name_input,
                    detail_input,
                    ft.Row([
                        ft.IconButton(ft.icons.Icons.CALENDAR_MONTH, icon_color=NEON_BLUE, on_click=lambda _: page.show_dialog(d)),
                        selected_date_text
                    ]),
                    ft.ElevatedButton(
                        "SAVE TASK", 
                        bgcolor=NEON_PINK, 
                        color="white", 
                        width=400,
                        on_click=save_task
                    ),
                ],
            ),
        )
        bs.open = True
        page.update()

    bs = ft.BottomSheet(content=ft.Container())
    page.overlay.append(bs)

    page.floating_action_button = fab
    page.on_resize = on_resize
    
    page.on_route_change = route_change
    page.on_view_pop = view_pop

    
    page.go(page.route or "/")

if __name__ == "__main__":
    ft.run(main)

Error message

No response

------------------------------------------------------

• I have searched for answers to my question both in the issues and in previous discussions.