pythonsaving-dataflet

How to use page.client_storage in Flet for ToDoList App


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".


Solution

  • 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