How to use page.client_storage in Flet for ToDoList App

Question

I'm trying to save the tasks between the app restarts but I get the following error:

Exception in thread Thread-24 (add_clicked):
ValueError: Circular reference detected

Then the next restart I get this:

'dict' object has no attribute '_build_add_commands'

PD: in the first try it let me add only 1 task. The error comes when a create the second task.

Here is my code:

import flet as ft


def main(page: ft.Page):

    page.window_width = 400
    page.window_height = 600
    page.bgcolor = "#141414"
    page.window_center()

    rows = list()  

    #BARRA SUPERIOR
    page.appbar = ft.AppBar(bgcolor= "#303030",
                            leading=ft.Icon(ft.icons.CHECKLIST),
                            title= ft.Text("Tareas", font_family="Roboto"))


    def add_clicked(e):

        #SI TAREA NO ESTA VACIA
        if(new_task.value != ""):

            #FUNCION BORRAR
            def clear(e):
                #BORRA DE LA LISTA
                rows.remove(row)
                page.update()

            #VARIABLES CHECKBOX, TAREA Y BOTON DE BORRAR 
            checkbox = ft.Checkbox()
            task = ft.Text(value=new_task.value, width=258)
            remove = ft.IconButton(icon="remove_circle", icon_size="32", icon_color="#D05050", on_click=clear)

            #FILA QUE CONTIENE LAS 3 VARIABLES
            row = (ft.Row(controls=[
                checkbox,
                task,
                remove
            ]))    

            #AÑADE UNA TAREA A TAREAS
            rows.append(row)
            print(rows)
            
            page.client_storage.set("tasks", rows)

            #ACTUALIZA LA PAGINA
            page.update()

            #TAREA ESTA VACIA
            new_task.value = ""
            new_task.update()

    #BORRAR TODAS LAS TAREAS
    def clearall(e):
        rows.clear()
        page.update()
        print(len(rows))

    #VARIABLE TAREA
    new_task = ft.TextField(hint_text="Agregar tarea", width=300)

    #TAREA Y BOTON AGREGAR TAREA
    page.add(ft.Row(
        [new_task, ft.FloatingActionButton(icon="add", on_click=add_clicked, bgcolor="#4B90BE", scale=0.95)
         ]))
    
    #BOTON BORRAR TODAS LAS TAREAS
    page.add(ft.FloatingActionButton(icon=ft.icons.CLEANING_SERVICES_ROUNDED, on_click=clearall, bgcolor="#4B90BE", scale=0.95))


    
    

    savedtasks = page.client_storage.get("tasks")

    page.add(ft.Column(savedtasks))
    page.add(ft.Column(rows))


ft.app(target=main)

I tried several times saving the tasks individually, saving the checkbox status, the task text and the remove task button separately or saving those 3 in a different variable "list".

Answer 1

An example of a similar application for working with client_storage

import flet as ft


def main(page: ft.Page):
    page.window_center()
    page.window_width = 400
    page.window_height = 600

    def all_clear(e):
        page.client_storage.clear()
        task_r.clean()
        page.update()

    page.floating_action_button = ft.FloatingActionButton(
        icon=ft.icons.CLEANING_SERVICES_ROUNDED,
        on_click=all_clear
    )

    def add_task(e):
        add_b.data += 1
        tr = ft.Text(tf.value)
        task_r.controls.append(tr)
        page.client_storage.set(f"t{add_b.data}", f"{tf.value}")
        page.update()
        print(page.client_storage.get_keys(''))

    tf = ft.TextField(label='Enter task')
    add_b = ft.IconButton(icon=ft.icons.ADD, on_click=add_task, data=0)

    task_r = ft.Column(
        controls=[]
    )

    page.add(
        ft.Row(
            controls=[
                tf,
                add_b
            ]
        ),
        ft.Column(
            controls=[
                task_r
            ]
        )
    )

    if page.client_storage.get_keys(''):
        for task in page.client_storage.get_keys(''):
            tr = ft.Text(page.client_storage.get(task))
            task_r.controls.append(tr)
        page.update()


ft.app(target=main)

pay attention to the use of data

also, using data, you can delete only what you need using events