Function TodoAppView

sdk/python/examples/apps/declarative/todo/main.py:73–143

()

@ft.component
def TodoAppView():
    state, _ = ft.use_state(lambda: TodoAppState())
    new_task_name, set_new_task_name = ft.use_state("")
    new_task_field: ft.Ref = ft.Ref()

    async def add_task():
        state.add_task(new_task_name)
        set_new_task_name("")
        await cast(ft.TextField, new_task_field.current).focus()

    return ft.View(
        scroll=ft.ScrollMode.AUTO,
        controls=[
            ft.SafeArea(
                content=ft.Column(
                    [
                        Header(),
                        ft.Row(
                            controls=[
                                ft.TextField(
                                    ref=new_task_field,
                                    hint_text="What needs to be done?",
                                    on_submit=add_task,
                                    value=new_task_name,
                                    on_change=lambda e: set_new_task_name(
                                        e.control.value
                                    ),
                                    autofocus=True,
                                    expand=True,
                                ),
                                ft.FloatingActionButton(
                                    icon=ft.Icons.ADD,
                                    on_click=add_task,
                                ),
                            ],
                        ),
                        ft.Column(
                            spacing=25,
                            controls=[
                                ft.Tabs(
                                    selected_index=state.statuses.index(state.status),
                                    length=len(state.statuses),
                                    on_change=state.status_changed,
                                    content=ft.TabBar(
                                        scrollable=False,
                                        tabs=[
                                            ft.Tab(label=tab) for tab in state.statuses
                                        ],
                                    ),
                                ),
                                ft.Column(
                                    [
                                        TaskItemView(
                                            task,
                                            state.delete_task,
                                            key=task.id,
                                        )
                                        for task in state.get_tasks()