How to assign an index to a list tile so that it can be referenced when clicked.

[Haadi-A]

In flutter ListView.builder every tile has an index so that the tiles have sort on an index number so that for example when clicked you could get the index number attribute of the listTile. I looked through the flet documentary for listTiles and listViews I couldn't find anything like index number attributes pertaining to either of them. Is there a way around this? I really need this because I made each listTile for a person using my app and I want to make it such that when it is clicked it shows the person's info to and do that I need the person's id which I'm hoping could be obtained from the person's listTile. Any help would be appreciated, Thanks in advance.

[ndonkoHenri]

All Flet controls have a data property, which takes any python data type (list, dict, str, int etc). At creation of your tiles, set their data property to your index-value, then in the on_click callback, you can grab that value using e.control.data. e.control here is your ListTile and .data grabs it's data property.

ft.ListTile(
    title=ft.Text("One-line list tile"),
    data=20,
    on_click=lambda e: print(e.control.data)
 )

Let me know if it helped.

[Haadi-A]

Thanks very much your answer helped demystify how to get t the data off a ListTile but the problem is that I have multiple listTiles each pertaining to a user, I have tried all I means I know to use your answer but failed, here is the code so you see what I mean:

userNameAndId is read from a database so it could be up to a hundred sometimes

userNameAndId =[["1", "firstname", "middleName", "lastName"],["2", "firstname", "middleName", "lastName"],["3", "firstname", "middleName", "lastName"],]

 for userData in userNameAndId:
     idValue = userData[0]             # <----- here is the value I want when the listTile is clicked 
     firstName = userData[1]
     middleName = userData[2]
     lastName = userData[3]
     listViewObj.controls.append(
     ft.ListTile(leading=ft.Container(content=ft.Icon(ft.icons.PERSON, size=45, color=ft.colors.TEAL_ACCENT_700),
                                     data=int(idValue),  # <----- I have assigned  the id as the data the listTile  holds
                                     bgcolor=ft.colors.AMBER, border_radius=100),
     title=ft.Text(f"{idValue} - {firstName} {middleName} {lastName}"),
     trailing=ft.Row(
                     width=100,
                     controls=[
                        ft.IconButton(
                            icon=ft.icons.EDIT_OUTLINED,
                            tooltip="Edit user data",
                        ),

                        ft.IconButton(
                            ft.icons.DELETE_OUTLINE,
                            tooltip="Delete user data",
                            on_click=lambda:callDeleteStudentData()   #<----- problem is I can't seem to pass it to this function.
                        ),
                    ],
                    alignment="end",
                ),
            )
        )

Here is the picture of the code which prints the listTile for better syntax highlighting :

So I want it to be that when a listTile is clicked the value of the id is given to the onClicked function.
I would be vary glad for any help, plus should you need anymore info, I would respond with it ASAP

[ndonkoHenri]

Ok. I see a little better. What errors exactly do you get??
If your deletesudentDatafromExcel function works well, then I don't see why you should be getting any issues. You are passing the direct value you got from userData, so where should the error be! Maybe you should instead use int(idValue) in your on_click lambda, instead of simply idValue. I don't know what data type your function needs, so you got to figure that out.

Anyway, if you are willing to use the data property, then modify your icon button as follows

ft.IconButton(
    ft.icons.DELETE_OUTLINE,
    tooltip="Delete user data",
    data=idValue    ## or int(idValue) depending on you
    on_click=lambda e: deletesudentDatafromExcel(e.control.data, const.mallam)  ## here i use e.control.data, to get the data i gave up 
)

[ndonkoHenri]

You could alternatively build up a very simple and minimal code piece, that we can I test. It will make the debugging easier.
Instead of fetching the data somewhere, you could create a dictionnary or a list/tuple with some sample data.

[Haadi-A]

Ok, thanks, I'm trying the solutions, I will report back any problems.

[Haadi-A]

Ok so I tried all the solutions you suggested but I couldn't make it work so here is a simple snippet of the code so that you can test it out.
import flet as ft

def getIdFromListTile(e):
    idValue = e.control.data
    print(f"Here is the id from the listTile {idValue}")


def test(page=ft.Page):
    userNameAndId = [["1", "firstname", "middleName", "lastName"],
                                     ["2", "firstname", "middleName", "lastName"],
                                     ["3", "firstname", "middleName", "lastName"],
                                     ["4", "firstname", "middleName", "lastName"],
                                     ["5", "firstname", "middleName", "lastName"],
                                     ["6", "firstname", "middleName", "lastName"],
                                     ["7", "firstname", "middleName", "lastName"],
                                     ["8", "firstname", "middleName", "lastName"], ]


    for userData in userNameAndId:
        idValue = userData[0]
        firstName = userData[1]
        middleName = userData[2]
        lastName = userData[3]
        page.add(
            ft.ListTile(
                leading=ft.Container(content=ft.Icon(ft.icons.PERSON, size=45, color=ft.colors.TEAL_ACCENT_700),
                                     data=int(idValue),
                                     bgcolor=ft.colors.AMBER, border_radius=100),
                data=idValue,
                title=ft.Text(
                    f"{idValue} - {firstName} {middleName} {lastName}"),
                trailing=ft.Row(
                    width=100,
                    controls=[
                        ft.IconButton(
                            icon=ft.icons.EDIT_OUTLINED,
                            tooltip="Edit student data",
                        ),

                        ft.IconButton(
                            ft.icons.DELETE_OUTLINE,
                            tooltip="Delete student data",
                            on_click=lambda e:getIdFromListTile(e)
                        ),
                    ],
                    alignment="end",
                ),
            )
        )


ft.app(target=test)

[DavMelchi]

Try this :

import flet as ft

def getIdFromListTile(e):
    idValue = e.control.data
    print(f"Here is the id from the listTile {idValue}")


def test(page=ft.Page):
    userNameAndId = [["1", "firstname", "middleName", "lastName"],
                                     ["2", "firstname", "middleName", "lastName"],
                                     ["3", "firstname", "middleName", "lastName"],
                                     ["4", "firstname", "middleName", "lastName"],
                                     ["5", "firstname", "middleName", "lastName"],
                                     ["6", "firstname", "middleName", "lastName"],
                                     ["7", "firstname", "middleName", "lastName"],
                                     ["8", "firstname", "middleName", "lastName"], ]

    for userData in userNameAndId:
        idValue = userData[0]
        firstName = userData[1]
        middleName = userData[2]
        lastName = userData[3]
        page.add(
            ft.ListTile(
                leading=ft.Container(content=ft.Icon(ft.icons.PERSON, size=45, color=ft.colors.TEAL_ACCENT_700),
                                     data=int(idValue),
                                     bgcolor=ft.colors.AMBER, border_radius=100),
                data=idValue,
                on_click=getIdFromListTile,
                title=ft.Text(
                    f"{idValue} - {firstName} {middleName} {lastName}"),
                trailing=ft.Row(
                    width=100,
                    controls=[
                        ft.IconButton(
                            data=idValue,
                            on_click=getIdFromListTile,
                            icon=ft.icons.EDIT_OUTLINED,
                            tooltip="Edit student data",
                        ),

                        ft.IconButton(
                            ft.icons.DELETE_OUTLINE,
                            data=idValue,
                            tooltip="Delete student data",
                            on_click=getIdFromListTile
                        ),
                    ],
                    alignment="end",
                ),
            )
        )


ft.app(target=test)```

[ndonkoHenri]

Thanks for help on this issue @DavMelchi !
@Haadi-A use the above. I think it works as you expected.

[Haadi-A]

Thanks very much @ndonkoHenri and @DavMelchi, it worked.

[Haadi-A]

Hello @ndonkoHenri Is there a way to pop a listTile when the delete IconButton is clicked, I tried using page.controls.pop(control.data) but it works unpredictably, so I wonder whether there is a way to delete a specific tile. Plus @ndonkoHenri I would be really happy if you could give me your contact if its not much of a problem so that I could contact you if have a question.

[ndonkoHenri]

The code below shows how I will approach the problem.

import flet as ft


def getIdFromListTile(e):
    idValue = e.control.data
    print(f"Here is the id from the listTile {idValue}")


def deleteTile(e):
    e.page.remove(e.control.data["tile"])


def main(page: ft.Page):

    # def deleteTile(e):
    #     page.remove(e.control.data["tile"])

    userNameAndId = [["1", "firstname", "middleName", "lastName"],
                     ["2", "firstname", "middleName", "lastName"],
                     ["3", "firstname", "middleName", "lastName"],]

    for userData in userNameAndId:
        idValue = userData[0]
        firstName = userData[1]
        middleName = userData[2]
        lastName = userData[3]
        # store in a variable
        tile = ft.ListTile(
            leading=ft.Container(content=ft.Icon(ft.icons.PERSON, size=45, color=ft.colors.TEAL_ACCENT_700),
                                 data=int(idValue), bgcolor=ft.colors.AMBER, border_radius=100),
            data=idValue,
            on_click=getIdFromListTile,
            title=ft.Text(f"{idValue} - {firstName} {middleName} {lastName}"))


        tile.trailing = ft.Row(
            width=100,
            controls=[
                ft.IconButton(
                    data=idValue,
                    on_click=getIdFromListTile,
                    icon=ft.icons.EDIT_OUTLINED,
                    tooltip="Edit student data",
                ),

                ft.IconButton(
                    ft.icons.DELETE_OUTLINE,
                    data={'id': idValue, 'tile': tile},     ### <------------------------------------- store both in a dictionary
                    tooltip="Delete student data",
                    on_click=deleteTile
                ),
            ],
            alignment="end",
        )

        page.add(tile)


ft.app(target=main)

• I added a function to delete a tile.
• I modified the data of delete IconButton, have a look.

I am on discord. But feel free to ask any flet related stuff on Flet's discord please. It is very active.