Function App

sdk/python/examples/apps/studio_gallery/todo.py:157–212

()

@ft.component
def App():
    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.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()
                        ]
                    ),
                    Footer(
                        active_tasks_number=state.active_tasks_number,
                        clear_completed=state.clear_completed,
                    ),
                ],
            ),
        ]
    )