How can I use listviews to list certain types of files (.mp3, .mkv, ...) in a given folder

[Soupolait]

Question

Hi, first and foremost, I am aware of some topics related to this question. But me being new to coding, I couldn't use them to fix my issue.

So, I have a json file in which a folder path is stored as well as a global variable from another page that I intend to pass to the page of code - given below - with basket.

I'd like to have a list of every musical file present in the given folder displayed at the center of the app, in a scroll-able list.

I have tried, as you can see in the code sample, to create a container, with a row, with a controls section where ft.ListViews is. I don't think it really works, but I don't know how to make it work, and more importantly, I don't know how to make ft.ListViews actually list the files !

Hope someone is bored enough to help me, thanks in advance !

Code sample

import flet as ft
from flet_route import Params, Basket

def main_page(page: ft.Page, params: Params, basket: Basket):
    return ft.View(
        "/",
        bgcolor='#FFFFFF',
        controls=[
            ft.Row(
                controls=[
                    ft.Container(expand=True),
                    ft.IconButton(
                        icon=ft.Icons.SETTINGS,
                        icon_size=20,
                        on_click=lambda _: page.go('/parameters/')
                    ),
                ],
                alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
            ),

            ft.Container(
                content=ft.Column(
                    controls=[
                        ft.Row(
                            controls=[
                                ft.ListView( #lists nothing, but I guess is there
                                    expand=True,
                                    spacing=10,
                                    padding=20,
                                )
                            ],
                        ),
                    ],
                    alignment=ft.MainAxisAlignment.CENTER,
                    horizontal_alignment=ft.CrossAxisAlignment.CENTER,
                ),
                alignment=ft.alignment.center,  # Unworking center option
                bgcolor=ft.colors.AMBER,
                height=500, #nice but doesn't resize with window
                width=800,
                border_radius=10,
            ),
        ],
    )

Error message

No response

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

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

[ap4499]

Welcome to programming.

Firstly, my apologies - the below is using a class structure, and I notice you were using an imperative style. If you aren't yet using classes - my recommendation would be that you should start, especially when writing GUI code. They are much more manageable in the long run, and actually, much easier to work with. All of the cumbersome passing of global variables, difficulties with mega long scripts, or just unreadable code, and things that just don't feel right - it is what classes were made for.

You mention that you have a json file - I would write a function which can return a Python list for a given json file, the json library will help you, and it will look like this from memory:

import json
python_list = json.loads(json_array_string)

I won't say that I was bored.. but I have actually left a few comments.

Good luck!

import flet as ft

class CharacterListView(ft.ListView):
    """
    A custom Flet control that displays a list of strings in a scrollable view.

    Inherits from ft.ListView and populates itself based on a provided list.
    """
    def __init__(self, character_names: list[str]):
        """
        Initializes the CharacterListView.

        Args:
            character_names: A list of strings, where each string is a character name.
        """
        # Call the constructor of the parent class (ft.ListView)
        # expand=True allows the ListView to fill available vertical space, enabling scrolling
        # spacing adds vertical space between list items
        # padding adds space around the entire list content
        # auto_scroll=False ensures manual scrolling works as expected by default
        # build_controls_on_demand if you have a long list - to keep it performant
        super().__init__(expand=True, spacing=10, padding=20, auto_scroll=False, build_controls_on_demand = True)

        # Populate the ListView's controls property
        # Iterate through the provided list of names
        for name in character_names:
            # For each name, create a Text control and add it to the ListView's children
            self.controls.append(ft.Text(name))

# --- Main Application Function ---
def main(page: ft.Page):
    """
    The main entry point for the Flet application.
    """
    page.title = "Long Star Wars Character List"

    # --- Data ---
    # Define the list.
    base_star_wars_characters = [
        "Luke Skywalker",
        "Darth Vader",
        "Leia Organa",
        "Han Solo",
        "Chewbacca",
        "R2-D2",
        "C-3PO",
        "Yoda",
        "Obi-Wan Kenobi",
        "Emperor Palpatine"
    ]

    # Multiply the base list by 100 for the demo
    long_character_list = base_star_wars_characters * 100

    # --- UI Construction ---
    # Create an instance of our custom CharacterListView class
    # Pass in our characters
    character_list_view = CharacterListView(character_names=long_character_list)

    # Add the custom ListView control to the page.
    page.add(character_list_view)

    # Update the page to display the added controls
    page.update() 

# --- Run the Application ---
if __name__ == "__main__":
    ft.app(target=main)

[Soupolait]

Hi, thank you very much for the detailed explanations. I think the mix of ft.ReturnViews and your method blocks the displaying of the list. The code I made up from yours does not display any errors, but neither does it display the desired list.

import flet as ft
import os
import json
from flet_route import Params, Basket

class MusicListView(ft.ListView):
    """
    A custom Flet control that displays a list of strings in a scrollable view.

    Inherits from ft.ListView and populates itself based on a provided list.
    """

    def __init__(self, music_files: list[str]):
        """
        Initializes the CharacterListView.

        Args:
            character_names: A list of strings, where each string is a character name.
        """

        # Call the constructor of the parent class (ft.ListView)
        # expand=True allows the ListView to fill available vertical space, enabling scrolling
        # spacing adds vertical space between list items
        # padding adds space around the entire list content
        # auto_scroll=False ensures manual scrolling works as expected by default
        # build_controls_on_demand if you have a long list - to keep it performant
        super().__init__(expand=True, spacing=10, padding=20, auto_scroll=False, build_controls_on_demand = True)

        # Populate the ListView's controls property
        # Iterate through the provided list of names
        for name in music_files:
            self.controls.append(ft.Text(name))

def main_page(page: ft.Page, params: Params, basket: Basket):

    #Definment of items in list
    current_dir = os.path.dirname(os.path.abspath(__file__))
    root_dir =  os.path.dirname(current_dir)
    parameters_file = os.path.join(root_dir, 'parameters.json')
    music_files = []

    if os.path.isfile(parameters_file) and os.access(parameters_file, os.R_OK):
        with open (parameters_file) as f:
            data = json.load(f)
            music_folder = data.get('selected_folder')
        for root, dirs, files in os.walk(music_folder):
            for file in files:
                if file.endswith(('.mp3', '.flac', '.wav', '.ogg')):
                    music_files.append(file)
    else:
        pass
    
    music_list = MusicListView(music_files = music_files)
    # Add the custom ListView control to the page.
    page.add(music_list)

    page.update() 

    return ft.View(
        "/",
        bgcolor='#FFFFFF',
        controls=[
            ft.Row(
                controls=[
                    ft.Container(expand=True),
                    ft.IconButton(
                        icon=ft.Icons.SETTINGS,
                        icon_size=20,
                        on_click=lambda _: page.go('/parameters/')
                    ),
                ],
                alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
            )
        ]
    )

if __name__ == "__main__":
    ft.app(target=main)

Also I have several questions on your code sample.

What does if __name__ == "__main__": ft.app(target=main) do that ft.app(target=main) doesn't ? And what is super().__init__() ? It sets the listviews parameters but I've only ever seen that be done with ft.ListView(expand=1, spacing=10, padding=20, auto_scroll=True) !

Also, should I set another directory in the parameters on the, the json file method to display the musics from that directory would need, I think, a restart of the app to actually update the music displayed. Which method - I'd read of Baskets - would allow to have the selected_folder variable of the parameters page accessible by this main page ?

Thanks !

[ap4499]

1. Comparing the two approaches:

A:

if __name__ == "__main__":
    ft.app(target=main)

B:

ft.app(target=main)

Regarding your question about if name == "main": (Approach A) versus just ft.app(target=main) (Approach B):

The key difference is when the ft.app(target=main) line is executed.

• Approach A (if name == "main":): This code block runs only when you execute the script directly (e.g., python your_script.py). Python sets a special variable name to the string "main" in this case, so the if condition is true.

• Approach B (Direct call): This line runs whenever Python processes the file. This includes running it directly, but crucially, it also runs if you import this script into another one.

Why use A? When creating a larger program with multiple Python files (scripts). You might have a main script (main.py) that imports features from other scripts (like your music_list.py).

If music_list.py used Approach B, importing it into main.py would immediately try to launch another Flet app defined in music_list.py. This is usually not what you want – you just want to use its functions or classes.
By using Approach A in music_list.py, you can run python music_list.py directly to test it standalone (because name will be "main"), but when main.py imports it, the if condition will be false ( name will be "music_list"), and the ft.app() call inside music_list.py is skipped. This makes your script reusable as both a standalone program and an importable module.

Wider context:
When to use the if name block? It depends how you develop, but I would say almost always. It is personal preference, but I develop my submodules standalone, and create dummy apps within the group (using if name blocks). This allows me to test a small part of the application, and know that it works, before taking it into the main application. This isn't limited to developing GUIs, but to all code - like developing a module which can read in a JSON file/directory, perhaps when you develop, you hard code in a file path/folder in the if name block, but the actual functions accept arguments like "filepath". This allows you to develop in a controlled way, but still create something which is reusable.

2. Why use Super:

• This is called inheritance.
• I'd recommend finding a resource that explains it properly, it is a key concept and very useful (Youtube is my own personal go to on this). Effectively, what we are doing here is:
  • We want to retain all of the logic (both attributes and methods), from the Flet class (ft.ListView). But, we want to add our own functionality. So the new class that we have, it actually contains everything that the original ListView does.
  • In that exact line, we are setting the attributes within ListView, exactly the same as you do in your code - setting up that ListView instance.
  • The end result, is that now we have our own custom version of ListView.
  • In the below example, you will see why it is so useful and powerful (when we use append and clear).

3. Why yours doesn't work

Based on your code, the reason the list likely isn't showing up is how it's being added to the display when using flet_route.

Your main_page function correctly creates the music_list = MusicListView(...) instance. However, the lines page.add(music_list) and page.update() won't work as expected here because flet_route relies on the ft.View object returned by your function to build the UI for that route. (where you don't have the object's instance)

The Fix: You need to include your music_list instance inside the controls list of the ft.View you are returning. Remove the page.add(music_list) and page.update() lines from your main_page function.

4. Demo of what I think you're trying to do:

import flet as ft
import json
import random

# --- 1. Data Setup ---
# Here, we set these Python lists to be Json strings, the same as you are dealing with.
# This allows us to similate the json parsing below.
# It is technically a completely redundant step - but, I don't have access to your data - and we need something to demo!
STAR_WARS_JSON = json.dumps([
    "Luke Skywalker", "Darth Vader", "Leia Organa", "Han Solo", "Chewbacca",
    "R2-D2", "C-3PO", "Yoda", "Obi-Wan Kenobi", "Emperor Palpatine"
])
SHREK_JSON = json.dumps([
    "Shrek", "Donkey", "Princess Fiona", "Lord Farquaad", "Dragon",
    "Puss in Boots", "Gingerbread Man", "Pinocchio", "Big Bad Wolf", "Three Little Pigs"
])
PHYSICISTS_JSON = json.dumps([
    "Albert Einstein", "Isaac Newton", "Marie Curie", "Niels Bohr", "Galileo Galilei",
    "Max Planck", "Erwin Schrödinger", "Werner Heisenberg", "Richard Feynman", "Paul Dirac"
])
LIST_MULTIPLIER = 100




# --- 2. JSON Parsing Function ---
def parse_json_string_to_list(json_string: str) -> list[str]:

    python_object = json.loads(json_string)
    return python_object


# --- 3. Custom ListView Class ---
class CharacterListView(ft.ListView):
    """
    A custom Flet control that displays a list of strings in a scrollable view.

    Inherits from ft.ListView and populates itself based on a provided list.
    """
    def __init__(self):
        super().__init__(
            expand=True,
            spacing=10,
            padding=20,
            auto_scroll=False,
            build_controls_on_demand=True
        )
        self.controls.append(ft.Text("Select a category above to show the list."))

    def update_characters(self, new_character_names: list[str]):
        """
        Clears the current list, populates it with new character names,
        and triggers an update of only this ListView control.
        """
        # This is an example of where we are able to use "ListView" itself in our class.
        # So too is the "append above".
        # We are just clearing all of the controls the widget has, using the inbuilt Flet command.
        # This is the benefit of "inheritence". We are creating something new, with all the power and logic of the original class.

        self.controls.clear()
        if not new_character_names:
            self.controls.append(ft.Text("No characters to display for this category."))
        else:
            # Counter for numbering the items, starting from 1
            item_number = 1
            # Loop through each name in the provided list
            for name in new_character_names:
                # Append the Text control with the current number and name
                self.controls.append(ft.Text(f"{item_number}. {name}"))
                # Increment the counter for the next item
                item_number += 1

                # This loop could be made easier by using "enumerate".
                # But it isn't so easy to follow the logic if you aren't already familiar with it.

        # This is more efficient than page.update(), as it only updates this widget.
        # Generally, this is the recommended way of updating widgets, although, the delta update in Flet/Flutter is pretty good.
        self.update()


# --- 4. Main Application Logic ---
def main(page: ft.Page):
    page.title = "Dynamic ListView Demo"
    page.vertical_alignment = ft.MainAxisAlignment.START
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER

    # --- Instantiate the Reusable ListView ---
    character_list_view = CharacterListView()

    # --- Button Click Handlers ---
    def show_list(json_data_string, category_name):
        """Generic function to update the list view."""
        
        # We pass in the Json string to our function, and it returns a Python list that
        # we can use directly in Flet/Python.
        base_list = parse_json_string_to_list(json_data_string)

        if base_list:
            multiplied_list = (base_list * LIST_MULTIPLIER)
            # We use shuffle list here - but you could just as easily use something to order alphabetically or similar. 
            random.shuffle(multiplied_list)
            # Tell the existing list view instance to update its contents.
            character_list_view.update_characters(multiplied_list)
        else:
            character_list_view.update_characters([])


    # The catagory name is technically redundant, but it could be used as a header of similar if you wanted. 
    # Within the characterclass, you could add an argument and then place it in a textfield.
    def show_star_wars(e): show_list(STAR_WARS_JSON, "Star Wars")
    def show_shrek(e): show_list(SHREK_JSON, "Shrek")
    def show_physicists(e): show_list(PHYSICISTS_JSON, "Physicists")

    # --- UI Layout ---
    btn_star_wars = ft.ElevatedButton("Star Wars", on_click=show_star_wars)
    btn_shrek = ft.ElevatedButton("Shrek", on_click=show_shrek)
    btn_physicists = ft.ElevatedButton("Physicists", on_click=show_physicists)

    page.add(
        ft.Row(
            [btn_star_wars, btn_shrek, btn_physicists],
            alignment=ft.MainAxisAlignment.CENTER
        ),
        character_list_view
    )
    # By using page.add() we don't need to call page.update() as page.add() already does it. 

# --- 5. Run the Application ---
if __name__ == "__main__":
    ft.app(target=main)

[Soupolait]

Thanks again for your replies. They are very detailed / valuable. I now understand why my code doesn't work and how I should fix it, but I'm also completely lost within my own code and I just don't know where to put things 😅.

I think I'm going to try and re arrange it with classes and all rather than keep trying mixing new nice code written by you, and old wobbly code / inadequate code written following an introduction video on Flet.

Also, I have one more question - kind of out of topic - : how long did it take you to understand code, how much longer to be able to write it without copy / paste / forums ? And would you have a channel or site or method or whatever that you'd recommend to learn ? I figured that by trying to make an app I'd be put in contact with many notions, which I am, but I feel like it'd be years before I'm even slightly comfortable with coding.

[ap4499]

If you mix in some tutorials/studying, with a lot of practical implementation - I think you will make a lot of progress in a few months. Probably confident enough to propose the example above within 3-12months.

As for your approach - it is the same that I have had with every new language.. dive in, do a project and make some mistakes to learn from.

Code design
Your observation of "wobbly code" is a good one, and one most experienced programmers will recall, and often stumble into if they aren't careful. It comes about from a lack of structure, which can make it difficult to maintain as something grows, difficult to access and manipulate certain things, as well as difficult to understand what you've done.

• To avoid wobbly code, I would recommend having a look at "Separation of concerns" as a principle. Each piece of code that you write should be a neat lego block that can be used flexibly. It should always remain focussed on one particular thing, and as soon as you feel like it is doing too much, it is time to create another block (often a class, sometimes a function).

• When working with GUIs, there are a lot of design philosophies. To get started, and when working with Flet, I recommend having at MVP (Model View Presenter), MVC might be simpler to start with, but I find it slightly limited. There are many - and a dev may chose one simply because they know it from another language, like MVVM is often used by .net developers from Avalonia.

• There is no harm in writing wobbly code when you are learning. It is part of the process.

Resources wise:
I think Python Simplified is a well regarded Youtube channel - the presenter often has a good way of explaining things and demoing them. But there are many others if it isn't to your taste:

https://youtu.be/6c6NYPjO_rI?si=ylYcJhkWaoMbpa8E
https://youtu.be/f0TrMH9s-VE?si=7ZtoGiWjnOj5qIpP

As for this - I chuckled:

how much longer to be able to write it without copy / paste / forums

Never! You can't ever know everything. For libraries/languages I use infrequently, like say, Sql Lite, I will often have to lookup the syntax, or find what the best way of doing something in it is - it is especially important in a language like Python, where Python itself is slow - and some of its libraries are fast (because they use "compiled" non-Python code behind the scenes, like Pandas/Numpy and Sqllite).

My own journey:
I am actually relatively new to GUIs, and pretty new to Flet. I only started around 9months ago. I would say the key to cracking it was finding a design philosophy that I like, and feels a fit for Flet (I use MVP).

Programming overall quite a bit longer..

[Soupolait]

Haha 3-12 months is quite the gap ! I had a much longer time in mind though.

As for your approach - it is the same that I have had with every new language.. dive in, do a project and make some mistakes to learn from.

Honestly the hardest with this is to actually learn from the mistakes, as I have to restrain myself from going straight to AI and copy / paste their answer ! Doing that gives you a great false feeling of progress though !

I'll take time to put what I've written in order, before trying to implement any more functionalities, so I'll keep in my the separation of concerns. I'm also going to look into MVP, although I think it's a bit advanced for someone who doesn't yet have the bases !

Thanks you for the resources you shared, I'll watch them.

You've really helped me a lot, so thanks a lot. I really feel like I'm pushing it, sorry, but for each clarification you bring I have new issues / questions... so really feel free to ask me to handle it by myself.
I think I cleared a bit the code, at least it feels less messy. However, and I know it's quite a dumb question, I thought that ListViews was what displayed the list. The same way that ft.IconButton is what displays the actual button.

But by creating a whole ListView class, how do I now actually append it to my page ? I can't add ft.ListViews(MusicListView(ft.ListView)) in a row I think, and page.add didn't work earlier. By the way how do you make your code colored here in GitHub ?

import flet as ft
import os
import json
from flet_route import Params, Basket

class MusicListView(ft.ListView):
    def __init__(self, music_files: list[str]):
        """
        Initializes the MusicListView.
        Args:
            music_files: A list of strings, where each string is a music file name.
        """ 
        super().__init__( # Call the constructor of the parent class (ft.ListView)
            expand=True,  # allows the ListView to fill available vertical space, enabling scrolling
            spacing=10, # vertical space between list items
            padding=20, # space around the entire list content
            build_controls_on_demand=True # keeps long lists performant
        )

        for name in music_files: 
            self.controls.append(ft.Text(name))

    def which_music(): # finding music files, adding them to the list
        current_dir = os.path.dirname(os.path.abspath(__file__))
        root_dir = os.path.dirname(current_dir)
        parameters_file = os.path.join(root_dir, 'parameters.json')
        music_folder = None
        music_files = []

        if os.path.isfile(parameters_file) and os.access(parameters_file, os.R_OK):
            with open(parameters_file) as f:
                data = json.load(f)
                music_folder = data.get('selected_folder', None)
                if music_folder:
                    for root, dirs, files in os.walk(music_folder):
                        for file in files:
                            if file.endswith(('.mp3', '.flac', '.wav', '.ogg')):
                                music_files.append(file)
        return music_files

    music_files = which_music()

def main_page(page: ft.Page, params: Params, basket: Basket):

    return ft.View(
        "/",
        bgcolor='#FFFFFF',
        controls=[
            ft.Row(
                controls=[
                    ft.Container(expand=True),
                    ft.IconButton(
                        icon=ft.Icons.SETTINGS,
                        icon_size=20,
                        on_click=lambda _: page.go('/parameters/')
                    ),
                    ft.ElevatedButton(
                        "TEST",
                        on_click = MusicListView(music_files=music_files)
                    )   
                ],
                alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
            )
        ]
    )

if __name__ == "__main__":
    ft.app(target=main_page)

[ap4499]

In the example I shared, we are directly adding that widget to the page - character_list_view.

Because it is an instance of a class, and assigned a variable, we can manipulate it in the button clicks.

    page.add(
        ft.Row(
            [btn_star_wars, btn_shrek, btn_physicists],
            alignment=ft.MainAxisAlignment.CENTER
        ),
# This line, we actually add that control to the page.
        character_list_view

Your function
def which_music(): # finding music files, adding them to the list
Should exist outside of the class. It isn't actually related to the class, and shouldn't be in there as a method (note, a "function" within a class is called a "method"). It isn't actually a GUI widget.

In your main() block, you should obtain your list using your function, and then pass the list into the MusicListView widget in the same way that we did this:

character_list_view = CharacterListView()
character_list_view.update_characters(multiplied_list)

To get the Python formatting, see this:

[Soupolait]

Thanks a lot it worked ! Honestly didn't think seeing a list of files would make me so happy !