Multiple ListViews on the same page using keystrokes to scroll

[tataDan]

Question

I have a test application that has two ListViews. It has a on_keyboard(e: ft.KeyboardEvent) function that allows the user to scroll a ListView using keystrokes (e.g. Home, End, Page Up, Arrow Up). The problem is that it only works for the first ListView. Is there a way that I could make it work for the second ListView as well by somehow selecting it?

Code sample

No response

Error message

No response

------------------------------------------------------

• I have searched for answers to my question both in the issues and in previous discussions.

[ndonkoHenri]

When you need help, attach your some code...

[tataDan]

Here is my existing code:

import flet as ft

COLORS = ("red", "blue", "green")
STATES_IN_US = [
                "Alaska", "Alabama", "Arkansas", "American Samoa", "Arizona", 
                "California", "Colorado", "Connecticut", "District ", "of Columbia",
                "Delaware", "Florida", "Georgia", "Guam", "Hawaii", "Iowa", "Idaho",
                "Illinois", "Indiana", "Kansas", "Kentucky", "Louisiana", "Massachusetts",
                "Maryland", "Maine", "Michigan", "Minnesota", "Missouri", "Mississippi", 
                "Montana", "North Carolina", "North Dakota", "Nebraska", "New Hampshire",
                "New Jersey", "New Mexico", "Nevada", "New York", "Ohio", "Oklahoma", "Oregon",
                "Pennsylvania", "Puerto Rico", "Rhode Island", "South Carolina", "South Dakota",
                "Tennessee", "Texas", "Utah", "Virginia", "Virgin Islands", "Vermont", "Washington",
                "Wisconsin", "West Virginia", "Wyoming"
            ]

def main(page: ft.Page):

    def list_view_clicked(e: ft.ContainerTapEvent):
        # Could any code by entered here that would allow the user to select one of the two ListViews?
        pass

    def on_keyboard(e: ft.KeyboardEvent):
        if e.key == 'Home':
            list_view.scroll_to(offset=0)
        if e.key == 'End':
            list_view.scroll_to(offset=-1)
        if e.key == 'Arrow Up':
            list_view.scroll_to(delta=-40)
        if e.key == 'Arrow Down':
            list_view.scroll_to(delta=40)
        if e.key == 'Page Up':
            list_view.scroll_to(delta=-125)
        if e.key == 'Page Down':
            list_view.scroll_to(delta=125)
        
    page.on_keyboard_event = on_keyboard

    page.title = "Flet App"
    page.theme_mode = ft.ThemeMode.LIGHT
    page.bgcolor = ft.colors.AMBER
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
    page.vertical_alignment = ft.MainAxisAlignment.START

    # listview
    list_view = ft.ListView(height=300, width=300, scale=1.0)

    for state in STATES_IN_US:
        list_view.controls.append(ft.Text(state))

    list_view_container = ft.Container(
        content=list_view,
        bgcolor="white",
        padding=5,
    )

    list_view_container.on_click = list_view_clicked

    # list_view_2
    list_view_2 = ft.ListView(height=300, width=300, scale=1.0)

    for state in STATES_IN_US:
        list_view_2.controls.append(ft.Text(state))

    list_view_container_2 = ft.Container(
        content=list_view_2,
        bgcolor="blue",
        padding=5,
    )

    list_view_container_2.on_click = list_view_clicked

    page.add(
        list_view_container,
        list_view_container_2
    )

ft.app(target=main, view=ft.AppView.FLET_APP)