ListView not scrollable

[tobsome]

Question

Hey guys,

I'm out of my knowledge. I'm building a module in my Flet application. It should be a "list", getting information via API from different services. It has a header row and below that it should look like that.

Name Service 1 Service 2 Service 3
Example 1 x x o
Example 2 o x o
[...x]

Sometimes the list has like 30 rows and is bigger than my window. I can see the first 23 results but then the list is not scrollable. When I do self.status_list_view = ListView(auto_scroll=True, expand=1) my whole content is gone.
I expanded everything I can but the list keeps being static. Do you have a hint why? I really have no clue anymore. Sorry for that wild code.. Am I using the ListView wrongly? The gui.py is called from my main.py and working in general. Just the scrolling seems to be a problem somehow.

Happy for any hint. Thanks a lot in advance! 🙏

Code sample

gui.py

from flet import (
    AlertDialog,
    Container,
    colors,
    UserControl,
    TextField,
    ElevatedButton,
    icons,
    Row,
    Column,
    Text,
    ListView,
    ListTile,
    TextButton, 
    padding,
    alignment
)
import threading
from modules.onboarding_completeness_check.check_onboarding_completeness import check_onboarding_status

class OnboardingCompletenessCheck(UserControl):
    def build(self):
        self.title_text = Text("Onboarding Check", weight="bold", size=18)
        
        self.description_text = Text(
            "Lorem Ipsum...",
            size=16,
        )
        
        self.start_date_input = TextField(
            label="Start Date", 
            hint_text="YYYY-MM-DD", 
            width=300
        )
        
        self.check_button = ElevatedButton(
            text="Check Status",
            on_click=self.on_check_click,
            icon=icons.SEARCH,
            width=200,
            height=50,
        )
        
        # Enable auto-scrolling on the ListView
        self.status_list_view = ListView(auto_scroll=True)

        main_container = Column(
            [
                Row([], height=10),
                self.title_text,
                self.description_text,
                Row(
                    [self.start_date_input, self.check_button],
                    alignment="start",
                ),
                self.status_list_view,
            ],
            expand=True,
        )

        return main_container

    def on_check_click(self, e):
        start_date = self.start_date_input.value
        if start_date:
            self.check_button.text = "Checking..."
            self.check_button.icon = icons.HOURGLASS_EMPTY
            self.check_button.disabled = True
            self.check_button.update()

            check_thread = threading.Thread(target=self.check_and_display_status, args=(start_date,))
            check_thread.start()
        else:
            self.page.show_snack_bar("Please enter a start date.")


    def check_and_display_status(self, start_date):
        try:
            people_status = check_onboarding_status(start_date)
            self.page.update()  # Ensure UI updates occur on the main thread
            self.reset_button_state()

            # Clear existing items before adding new results
            self.status_list_view.controls.clear()

            header = Row([
                Container(content=Text("No.", weight="bold"), width=50, padding=padding.symmetric(vertical=10, horizontal=5)),
                Container(content=Text("Name", weight="bold"), width=250, padding=padding.symmetric(vertical=10, horizontal=5)),
                Container(content=Text("Email", weight="bold"), width=300, padding=padding.symmetric(vertical=10, horizontal=5)),
                Container(content=Text("Okta", weight="bold"), width=60, padding=padding.symmetric(vertical=10, horizontal=5)),
                Container(content=Text("Jira", weight="bold"), width=60, padding=padding.symmetric(vertical=10, horizontal=5)),
                Container(content=Text("Google", weight="bold"), width=60, padding=padding.symmetric(vertical=10, horizontal=5)),
            ])
            self.status_list_view.controls.append(header)

            total_people = len(people_status)
            people_missing_service = 0

            for index, person in enumerate(people_status, start=1):
                services = person["services"]
                missing_service = not all(services.values())
                if missing_service:
                    people_missing_service += 1

                row = Row([
                    Container(content=Text(str(index)), width=50, padding=padding.symmetric(vertical=10, horizontal=5)),
                    Container(content=Text(person["name"]), width=250, padding=padding.symmetric(vertical=10, horizontal=5)),
                    Container(content=Text(person["email"]), width=300, padding=padding.symmetric(vertical=10, horizontal=5)),
                    Container(content=Text("✓" if services["Okta"] else "x", text_align="center", color=colors.GREEN if services["Okta"] else colors.RED), width=60, padding=padding.symmetric(vertical=10, horizontal=5)),
                    Container(content=Text("✓" if services["Jira"] else "x", text_align="center", color=colors.GREEN if services["Jira"] else colors.RED), width=60, padding=padding.symmetric(vertical=10, horizontal=5)),
                    Container(content=Text("✓" if services["Google"] else "x", text_align="center", color=colors.GREEN if services["Google"] else colors.RED), width=60, padding=padding.symmetric(vertical=10, horizontal=5)),
                ])
                self.status_list_view.controls.append(row)

            self.status_list_view.update()

            # Show the summary popup
            self.show_summary_popup(total_people, people_missing_service)

        except Exception as e:
            self.page.update()
            self.show_alert_dialog(f"Failed to check onboarding status: {e}")
            self.reset_button_state()

    def reset_button_state(self):
        """Resets the check button to its initial state."""
        self.check_button.text = "Check Status"
        self.check_button.icon = icons.SEARCH
        self.check_button.disabled = False
        self.check_button.update()

    def show_alert_dialog(self, message):
        dialog = AlertDialog(
            title="Error",
            content=Text(message),
            actions=[
                TextButton(text="CLOSE", on_click=lambda _: self.page.close_dialog())
            ],
        )
        self.page.show_dialog(dialog)

    def show_summary_popup(self, total, missing):
        summary_message = f"Total people checked: {total}\nPeople missing at least one service: {missing}"
        dialog = AlertDialog(
            title=Text("Summary"),  # Corrected to use Text control for title
            content=Text(summary_message),
            actions=[
                TextButton(text="CLOSE", on_click=lambda _: self.page.close_dialog())
            ],
        )
        self.page.show_dialog(dialog)

Error message

No response

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

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

[FeodorFitsner]

Try adding expand to ListView:

... = ListView(auto_scroll=True, expand=True)

[yunguangli]

I recently resolved a similar issue. You can search the issues section. It seems if you put listview in another layout control, you should set a "height: at the listview and "expand" at the upper control. That should solve it.

[tobsome]

@FeodorFitsner, when I expand my ListView my content keeps being complete empty: self.status_list_view = ListView(auto_scroll=True, expand=True)

@yunguangli, same here. My content keeps being empty and I can't see anything when I wrap it with a container:

class OnboardingCompletenessCheck(UserControl):
    def build(self):
        self.title_text = Text("Onboarding Completeness Check", weight="bold", size=18)
        
        self.description_text = Text(
            "Check the onboarding status by entering a start date. The system will verify if accounts have been created in Okta, Jira, and Google for the new starts.",
            size=16,
        )
        
        self.start_date_input = TextField(
            label="Start Date", 
            hint_text="YYYY-MM-DD", 
            width=300
        )
        
        self.check_button = ElevatedButton(
            text="Check Status",
            on_click=self.on_check_click,
            icon=icons.SEARCH,
            width=200,
            height=50,
        )
        
        # Create the ListView with auto-scrolling enabled
        self.status_list_view = ListView(auto_scroll=True, height=500)
        
        # Wrap the ListView in a Container with a set height, allowing it to scroll within this height
        list_view_container = Container(
            content=self.status_list_view,
            expand=True,
        )

        main_container = Column(
            [
                Row([], height=10),
                self.title_text,
                self.description_text,
                Row(
                    [self.start_date_input, self.check_button],
                    alignment="start",
                ),
                list_view_container,  # Use the wrapped ListView here
            ],
            expand=True,
        )

        return main_container

My content keeps being empty and I can't see anything.

[FeodorFitsner]

Then could you please provide a complete, runnable repro, so we can investigate? Thanks!

[tobsome]

Thanks for your answer. Can be hard because it's multiple folders huge and implemented authentication without manual login yet. Maybe my main.py helps which is building the GUI itself? Might be something obvious with building the pages?

import flet
import settings
import webbrowser
from auth import LoginScreen
from flet import (
    AppBar,
    Column,
    Container,
    Row,
    Page,
    Text,
    Card,
    NavigationRail,
    NavigationRailDestination,
    icons,
    PopupMenuButton,
    PopupMenuItem,
    theme,
)
from modules.crm_user_creator.gui import CRMUserCreator
from modules.group_creator.gui import GroupCreator
from modules.jira_kick_offline_nodes.gui import JiraOfflineNodes
from modules.onboarding_completeness_check.gui import OnboardingCompletenessCheck
from modules.welcome_sheet_creator.gui import WelcomeSheetCreator

user_is_authenticated = False


class DesktopAppLayout(Row):
    """
    Setting up the UI part.
    """

    def __init__(
        self,
        title,
        page,
        pages,
        on_login_success,
        *args,
        window_size=(1200, 1000),
        **kwargs,
    ):
        super().__init__(*args, **kwargs)
        self.page = page
        self.pages = pages
        self.expand = True

        self.navigation_items = [navigation_item for navigation_item, _ in pages]
        self.navigation_rail = self.build_navigation_rail()
        self.update_destinations()
        self._menu_extended = True
        self.navigation_rail.extended = True
        self.on_login_success = on_login_success

        self.menu_panel = Row(
            controls=[self.navigation_rail],
            spacing=0,
            tight=True,
        )

        page_contents = [page_content for _, page_content in pages]
        self.content_area = Column(page_contents, expand=True)

        self._was_portrait = self.is_portrait()
        self._panel_visible = self.is_landscape()
        self.set_content()
        self._change_displayed_page()
        self.page.on_resize = self.handle_resize

        self.page.appbar = self.create_appbar()

        self.window_size = window_size
        self.page.window_width, self.page.window_height = self.window_size
        self.page.title = title

    def select_page(self, page_number):
        self.navigation_rail.selected_index = page_number
        self._change_displayed_page()

    def _navigation_change(self, e):
        self._change_displayed_page()
        self.page.update()

    def _change_displayed_page(self):
        page_number = self.navigation_rail.selected_index
        for i, content_page in enumerate(self.content_area.controls):
            content_page.visible = page_number == i

    def build_navigation_rail(self):
        return NavigationRail(
            selected_index=0,
            label_type="none",
            on_change=self._navigation_change,
        )

    def update_destinations(self):
        self.navigation_rail.destinations = self.navigation_items
        self.navigation_rail.label_type = "all"

    def handle_resize(self, e):
        pass

    def set_content(self):
        self.controls = [self.menu_panel, self.content_area]
        self.update_destinations()
        self.navigation_rail.extended = self._menu_extended
        self.menu_panel.visible = self._panel_visible

    def is_portrait(self) -> bool:
        return self.page.height >= self.page.width

    def is_landscape(self) -> bool:
        return self.page.width > self.page.height

    def logout_user(self):
        global user_is_authenticated, logged_in_user_email
        # Reset session and user data
        user_is_authenticated = False
        logged_in_user_email = None
        self.page.session.clear()
        self.page.client_storage.clear()

        # Clear the page, remove the AppBar, and load the login screen again
        self.page.controls.clear()
        self.page.appbar = None  # This hides the AppBar
        login_screen = LoginScreen(self.page, self.on_login_success)
        self.page.add(login_screen)
        if self.page is not None:
            self.page.update()
        else:
            print("Warning: self.page is None in logout_user method")

    def create_appbar(self) -> AppBar:
        global user_is_authenticated, logged_in_user_email, user

        version_text = Text(f"{settings.version_number}", size=10, color="#FFFFFF")

        def logout_clicked(e):
            self.logout_user()

        help_menu = PopupMenuButton(
            icon=icons.HELP,
            items=[
                PopupMenuItem(
                    icon=icons.CONTACT_SUPPORT,
                    text="Documentation",
                    on_click=lambda e: webbrowser.open_new_tab(
                        "https:/google.de"
                    ),
                ),
                PopupMenuItem(
                    icon=icons.BUG_REPORT,
                    text="Report a bug",
                    on_click=lambda e: webbrowser.open_new_tab(
                        "https://google.de"
                    ),
                ),
            ],
        )

        user_menu = PopupMenuButton(
            icon=icons.PERSON,
            items=[
                PopupMenuItem(
                    text=f"User: {logged_in_user_email}"
                    if logged_in_user_email
                    else "Not logged in"
                ),
                PopupMenuItem(icon=icons.SETTINGS, text="Settings"),
                PopupMenuItem(
                    icon=icons.LOGOUT, text="Logout", on_click=logout_clicked
                ),
            ],
        )

        appbar = AppBar(
            title=Text("Test Tool"),
            center_title=True,
            elevation=8,
            actions=[version_text, help_menu, user_menu],
        )

        return appbar


def create_page(title: str, body: str):
    return Row(
        controls=[
            Column(
                horizontal_alignment="stretch",
                controls=[
                    Card(
                        content=Container(Text(title, weight="bold"), padding=8),
                    ),
                    Text(body),
                ],
            ),
        ],
        expand=True,
    )


def main(page: Page):
    page.theme = theme.Theme(color_scheme_seed="teal")
    page.theme_mode = settings.theme_mode

    def on_login_success(state, session, client_storage):
        global logged_in_user_email

        if session:
            logged_in_user_email = page.auth.user["email"]
            page.controls.clear()  # Clear all controls and sessions from the page
            load_main_app_layout()

    def load_main_app_layout():
        pages = [
            (
                NavigationRailDestination(
                    icon=icons.INFO,
                    selected_icon=icons.INFO,
                    label="About this tool",
                ),
                create_page(
                    "About this tool",
                    "Nunc elementum lol elit id arcu sagittis, id molestie libero efficitur. Aliquam eget erat posuere, tempor enim sed, varius nibh. Suspendisse potenti. Sed interdum nunc rhoncus justo gravida, ac sodales mi malesuada.",
                ),
            ),
            (
                NavigationRailDestination(
                    icon=icons.EDIT_DOCUMENT,
                    selected_icon=icons.EDIT_DOCUMENT,
                    label="Welcome Sheet Creator",
                ),
                WelcomeSheetCreator(),
            ),
            (
                NavigationRailDestination(
                    icon=icons.SUPERVISED_USER_CIRCLE,
                    selected_icon=icons.SUPERVISED_USER_CIRCLE,
                    label="User Onboarding",
                ),
                create_page(
                    "User Onboarding with Personio",
                    "Morbi ac ipsum felis. In hac habitasse platea dictumst. Nunc euismod posuere suscipit.",
                ),
            ),
            (
                NavigationRailDestination(
                    icon=icons.SUPERVISED_USER_CIRCLE,
                    selected_icon=icons.SUPERVISED_USER_CIRCLE,
                    label="Manual User Onboarding",
                ),
                create_page(
                    "Manual User Onboarding",
                    "Morbi ac ipsum felis. In hac habitasse platea dictumst. Nunc euismod posuere suscipit.",
                ),
            ),
            (
                NavigationRailDestination(
                    icon=icons.SUPERVISED_USER_CIRCLE,
                    selected_icon=icons.SUPERVISED_USER_CIRCLE,
                    label="CRM User Creator",
                ),
                CRMUserCreator(),
            ),
            (
                NavigationRailDestination(
                    icon=icons.SUPERVISED_USER_CIRCLE,
                    selected_icon=icons.SUPERVISED_USER_CIRCLE,
                    label="Group Creator",
                ),
                GroupCreator(),
            ),
            (
                NavigationRailDestination(
                    icon=icons.COMPUTER,
                    selected_icon=icons.COMPUTER,
                    label="Kick Offline Jira Nodes",
                ),
                JiraOfflineNodes(),
            ),
            (
                NavigationRailDestination(
                    icon=icons.SUPERVISED_USER_CIRCLE,
                    selected_icon=icons.SUPERVISED_USER_CIRCLE,
                    label="Onboarding Check",
                ),
                OnboardingCompletenessCheck(),
            ),
        ]

        menu_layout = DesktopAppLayout(
            page=page,
            pages=pages,
            title="Test Tool",
            on_login_success=on_login_success,
        )

        page.add(menu_layout)

    # Check if user is authenticated, if not login
    if not user_is_authenticated:
        login_screen = LoginScreen(page, on_login_success)
        page.add(login_screen)
    else:
        load_main_app_layout()


if __name__ == "__main__":
    flet.app(main, assets_dir="assets", port=8550, view=flet.AppView.WEB_BROWSER)

[FeodorFitsner]

It's hard to tell without having a working code.
Try doing a small example and add more and more features until it breaks...

[tobsome]

I was able to reproduce it with random data and without all of the authentication stuff etc. If you click on "Onboarding Check" on the left side you can see my list is not scrollable but I except a list of 30 items. I want it responsive and scrollable if I change the size of the window. Thanks a lot for your effort!

main.py

import flet
import webbrowser
from flet import (
    AppBar,
    Column,
    Container,
    Row,
    Page,
    Text,
    Card,
    NavigationRail,
    NavigationRailDestination,
    icons,
    PopupMenuButton,
    PopupMenuItem,
    theme,
)

from gui import OnboardingCompletenessCheck

user_is_authenticated = True
logged_in_user_email = "example"


class DesktopAppLayout(Row):
    """
    Setting up the UI part.
    """

    def __init__(
        self,
        title,
        page,
        pages,
        on_login_success,
        *args,
        window_size=(1200, 1000),
        **kwargs,
    ):
        super().__init__(*args, **kwargs)
        self.page = page
        self.pages = pages
        self.expand = True

        self.navigation_items = [navigation_item for navigation_item, _ in pages]
        self.navigation_rail = self.build_navigation_rail()
        self.update_destinations()
        self._menu_extended = True
        self.navigation_rail.extended = True
        self.on_login_success = on_login_success

        self.menu_panel = Row(
            controls=[self.navigation_rail],
            spacing=0,
            tight=True,
        )

        page_contents = [page_content for _, page_content in pages]
        self.content_area = Column(page_contents, expand=True)

        self._was_portrait = self.is_portrait()
        self._panel_visible = self.is_landscape()
        self.set_content()
        self._change_displayed_page()
        self.page.on_resize = self.handle_resize

        self.page.appbar = self.create_appbar()

        self.window_size = window_size
        self.page.window_width, self.page.window_height = self.window_size
        self.page.title = title

    def select_page(self, page_number):
        self.navigation_rail.selected_index = page_number
        self._change_displayed_page()

    def _navigation_change(self, e):
        self._change_displayed_page()
        self.page.update()

    def _change_displayed_page(self):
        page_number = self.navigation_rail.selected_index
        for i, content_page in enumerate(self.content_area.controls):
            content_page.visible = page_number == i

    def build_navigation_rail(self):
        return NavigationRail(
            selected_index=0,
            label_type="none",
            on_change=self._navigation_change,
        )

    def update_destinations(self):
        self.navigation_rail.destinations = self.navigation_items
        self.navigation_rail.label_type = "all"

    def handle_resize(self, e):
        pass

    def set_content(self):
        self.controls = [self.menu_panel, self.content_area]
        self.update_destinations()
        self.navigation_rail.extended = self._menu_extended
        self.menu_panel.visible = self._panel_visible

    def is_portrait(self) -> bool:
        return self.page.height >= self.page.width

    def is_landscape(self) -> bool:
        return self.page.width > self.page.height

    def create_appbar(self) -> AppBar:
        global user_is_authenticated, logged_in_user_email, user

        version_text = Text(f"alpha 0.1.0", size=10, color="#FFFFFF")

        def logout_clicked(e):
            self.logout_user()

        help_menu = PopupMenuButton(
            icon=icons.HELP,
            items=[
                PopupMenuItem(
                    icon=icons.CONTACT_SUPPORT,
                    text="Documentation",
                    on_click=lambda e: webbrowser.open_new_tab(
                        "https://google.de"
                    ),
                ),
                PopupMenuItem(
                    icon=icons.BUG_REPORT,
                    text="Report a bug",
                    on_click=lambda e: webbrowser.open_new_tab(
                        "https://google.de"
                    ),
                ),
            ],
        )

        user_menu = PopupMenuButton(
            icon=icons.PERSON,
            items=[
                PopupMenuItem(
                    text=f"User: [email protected]"
                    if logged_in_user_email
                    else "Not logged in"
                ),
                PopupMenuItem(icon=icons.SETTINGS, text="Settings"),
                PopupMenuItem(
                    icon=icons.LOGOUT, text="Logout", on_click=logout_clicked
                ),
            ],
        )

        appbar = AppBar(
            title=Text("Test Tool"),
            center_title=True,
            elevation=8,
            actions=[version_text, help_menu, user_menu],
        )

        return appbar


def create_page(title: str, body: str):
    return Row(
        controls=[
            Column(
                horizontal_alignment="stretch",
                controls=[
                    Card(
                        content=Container(Text(title, weight="bold"), padding=8),
                    ),
                    Text(body),
                ],
            ),
        ],
        expand=True,
    )


def main(page: Page):
    page.theme = theme.Theme(color_scheme_seed="teal")
    page.theme_mode = "dark"

    def on_login_success():
        global logged_in_user_email

        if True == True:
            logged_in_user_email = "email@email"
            load_main_app_layout()

    def load_main_app_layout():
        pages = [
            (
                NavigationRailDestination(
                    icon=icons.INFO,
                    selected_icon=icons.INFO,
                    label="About this tool",
                ),
                create_page(
                    "About this tool",
                    "Nunc elementum lol elit id arcu sagittis, id molestie libero efficitur. Aliquam eget erat posuere, tempor enim sed, varius nibh. Suspendisse potenti. Sed interdum nunc rhoncus justo gravida, ac sodales mi malesuada.",
                ),
            ),
            # Assume WelcomeSheetCreator() is a placeholder; replace with actual content/control as developed
            (
                NavigationRailDestination(
                    icon=icons.EDIT_DOCUMENT,
                    selected_icon=icons.EDIT_DOCUMENT,
                    label="Welcome Sheet Creator",
                ),
                create_page("Welcome Sheet Creator", "Placeholder content for Welcome Sheet Creator."),
            ),
            (
                NavigationRailDestination(
                    icon=icons.SUPERVISED_USER_CIRCLE,
                    selected_icon=icons.SUPERVISED_USER_CIRCLE,
                    label="User Onboarding",
                ),
                create_page(
                    "User Onboarding with Personio",
                    "Morbi ac ipsum felis. In hac habitasse platea dictumst. Nunc euismod posuere suscipit.",
                ),
            ),
            (
                NavigationRailDestination(
                    icon=icons.SUPERVISED_USER_CIRCLE,
                    selected_icon=icons.SUPERVISED_USER_CIRCLE,
                    label="Manual User Onboarding",
                ),
                create_page(
                    "Manual User Onboarding",
                    "Morbi ac ipsum felis. In hac habitasse platea dictumst. Nunc euismod posuere suscipit.",
                ),
            ),
            (
                NavigationRailDestination(
                    icon=icons.SUPERVISED_USER_CIRCLE,
                    selected_icon=icons.SUPERVISED_USER_CIRCLE,
                    label="CRM User Creator",
                ),
                create_page("CRM User Creator", "Placeholder content for CRM User Creator."),
            ),
            (
                NavigationRailDestination(
                    icon=icons.SUPERVISED_USER_CIRCLE,
                    selected_icon=icons.SUPERVISED_USER_CIRCLE,
                    label="Group Creator",
                ),
                create_page("Group Creator", "Detailed instructions and tools for creating new groups."),
            ),
            (
                NavigationRailDestination(
                    icon=icons.COMPUTER,
                    selected_icon=icons.COMPUTER,
                    label="Kick Offline Jira Nodes",
                ),
                create_page("Kick Offline Jira Nodes", "Tools and procedures for managing Jira nodes."),
            ),
            (
                NavigationRailDestination(
                    icon=icons.SUPERVISED_USER_CIRCLE,
                    selected_icon=icons.SUPERVISED_USER_CIRCLE,
                    label="Onboarding Check",
                ),
                OnboardingCompletenessCheck(),
            ),
        ]

        menu_layout = DesktopAppLayout(
            page=page,
            pages=pages,
            title="TEST TOOL",
            on_login_success=on_login_success
        )

        page.add(menu_layout)


    # Check if user is authenticated, if not login
    if not user_is_authenticated:
        print("LOGIN PAGE")
    else:
        load_main_app_layout()


if __name__ == "__main__":
    flet.app(main, assets_dir="assets", port=8550, view=flet.AppView.WEB_BROWSER)

gui.py:

from flet import (
    AlertDialog,
    Container,
    colors,
    UserControl,
    TextField,
    ElevatedButton,
    icons,
    Row,
    Column,
    Text,
    ListView,
    ListTile,
    TextButton, 
    padding,
    alignment
)
import threading


class OnboardingCompletenessCheck(UserControl):
    def populate_dummy_data(self):
        # Clear existing items before adding dummy data
        self.status_list_view.controls.clear()

        # Example of adding 30 dummy items
        for index in range(1, 31):
            item = ListTile(
                leading=Text(str(index)),
                title=Text(f"Dummy User {index}"),
                subtitle=Text(f"user{index}@example.com"),
            )
            self.status_list_view.controls.append(item)

    def build(self):
        self.title_text = Text("Onboarding Completeness Check", weight="bold", size=18)
        
        self.description_text = Text(
            "Check the onboarding status by entering a start date. The system will verify if accounts have been created in Okta, Jira, and Google for the new starts.",
            size=16,
        )
        
        self.start_date_input = TextField(
            label="Start Date", 
            hint_text="YYYY-MM-DD", 
            width=300
        )
        
        self.check_button = ElevatedButton(
            text="Check Status",
            on_click=self.on_check_click,
            icon=icons.SEARCH,
            width=200,
            height=50,
        )
        
        self.status_list_view = ListView(auto_scroll=True, expand=1)
        list_view_container = Container(
            content=self.status_list_view,
        )

        main_container = Column(
            [
                Row([], height=10),
                self.title_text,
                self.description_text,
                Row(
                    [self.start_date_input, self.check_button],
                    alignment="start",
                ),
                list_view_container,
            ],
            expand=True,
        )

        self.populate_dummy_data()  # Call the method to populate the ListView with dummy data

        return main_container

    def on_check_click(self, e):
        start_date = self.start_date_input.value
        if start_date:
            self.check_button.text = "Checking..."
            self.check_button.icon = icons.HOURGLASS_EMPTY
            self.check_button.disabled = True
            self.check_button.update()

            check_thread = threading.Thread(target=self.check_and_display_status, args=(start_date,))
            check_thread.start()
        else:
            self.page.show_snack_bar("Please enter a start date.")


    def check_and_display_status(self, start_date):
        try:
            self.page.update()  # Ensure UI updates occur on the main thread
            self.reset_button_state()

            # Clear existing items before adding new results
            self.status_list_view.controls.clear()

            # Header, assuming it's defined elsewhere as needed
            header = Row([
                Container(content=Text("No.", weight="bold"), width=50, padding=padding.symmetric(vertical=10, horizontal=5)),
                Container(content=Text("Name", weight="bold"), width=250, padding=padding.symmetric(vertical=10, horizontal=5)),
                Container(content=Text("Email", weight="bold"), width=300, padding=padding.symmetric(vertical=10, horizontal=5)),
                Container(content=Text("Okta", weight="bold"), width=60, padding=padding.symmetric(vertical=10, horizontal=5)),
                Container(content=Text("Jira", weight="bold"), width=60, padding=padding.symmetric(vertical=10, horizontal=5)),
                Container(content=Text("Google", weight="bold"), width=60, padding=padding.symmetric(vertical=10, horizontal=5)),
            ])
            self.status_list_view.controls.append(header)

            # Add 30 dummy items for visualization
            for index in range(1, 31):
                row = Row([
                    Container(content=Text(str(index)), width=50, padding=padding.symmetric(vertical=10, horizontal=5)),
                    Container(content=Text(f"Person {index}"), width=250, padding=padding.symmetric(vertical=10, horizontal=5)),
                    Container(content=Text(f"person{index}@example.com"), width=300, padding=padding.symmetric(vertical=10, horizontal=5)),
                    Container(content=Text("✓", text_align="center", color=colors.GREEN), width=60, padding=padding.symmetric(vertical=10, horizontal=5)),
                    Container(content=Text("x", text_align="center", color=colors.RED), width=60, padding=padding.symmetric(vertical=10, horizontal=5)),
                    Container(content=Text("✓", text_align="center", color=colors.GREEN), width=60, padding=padding.symmetric(vertical=10, horizontal=5)),
                ])
                self.status_list_view.controls.append(row)

            self.status_list_view.update()

            # Placeholder for the actual summary popup, assuming it's implemented elsewhere
            # This line can be commented out or adjusted according to your actual data handling logic
            # self.show_summary_popup(total_people, people_missing_service)

        except Exception as e:
            self.page.update()
            self.show_alert_dialog(f"Failed to check onboarding status: {e}")
            self.reset_button_state()

    def reset_button_state(self):
        """Resets the check button to its initial state."""
        self.check_button.text = "Check Status"
        self.check_button.icon = icons.SEARCH
        self.check_button.disabled = False
        self.check_button.update()

    def show_alert_dialog(self, message):
        dialog = AlertDialog(
            title="Error",
            content=Text(message),
            actions=[
                TextButton(text="CLOSE", on_click=lambda _: self.page.close_dialog())
            ],
        )
        self.page.show_dialog(dialog)

    def show_summary_popup(self, total, missing):
        summary_message = f"Total people checked: {total}\nPeople missing at least one service: {missing}"
        dialog = AlertDialog(
            title=Text("Summary"),  # Corrected to use Text control for title
            content=Text(summary_message),
            actions=[
                TextButton(text="CLOSE", on_click=lambda _: self.page.close_dialog())
            ],
        )
        self.page.show_dialog(dialog)

[FeodorFitsner]

OnboardingCompletenessCheck control itself should be expanded and then all controls in the chain holding ListView:

[tobsome]

omg, the self.expand = True did the trick! You guys are such amazing, thank you so much! Keep up that good work, hopefully Flet has a bright future! 💣