import flet as ft
from reusable_controls import CustomControl, PathControl

path_control = PathControl("Enter Source Path", "Find")
path_control_2 = PathControl("Enter Destination Path", "Browse")
home_controls = ft.Column(
    spacing=10,
    expand=True,
    controls=[path_control, path_control_2,
              ft.Container(
                  alignment=ft.alignment.Alignment(0, 0),
                  content=ft.ElevatedButton(
                      content=ft.Text(value="Run", size=20),
                      width=150,
                      height=50,
                      style=ft.ButtonStyle(
                          shape=ft.RoundedRectangleBorder(radius=10),
                      ),
                  ),
              ),
              ft.Divider(height=10),
              ft.Column(
                  expand=True,
                  width=800,
                  scroll=ft.ScrollMode.ALWAYS,
                  spacing=10,
                  controls=[CustomControl("Path") for _ in range(20)],
              ),
              ],
)


def main(page: ft.Page):
    page.theme = ft.Theme(color_scheme_seed="green")
    page.update()
    page.appbar = ft.AppBar(
        title=ft.Text("Prabhjot"),
        leading=ft.Container(
            margin=10,
            content=ft.PopupMenuButton(
                content=ft.Row(
                    controls=[ft.Icon(ft.cupertino_icons.PERSON)],
                    spacing=5,
                ),
                items=[
                    ft.PopupMenuItem(text="Settings"),
                    ft.PopupMenuItem(text="Logout"),
                ],
                splash_radius=200,
            ),
        ),
    )

    # Home Controls

    tabs = ft.Tabs(
        selected_index=0,
        animation_duration=300,
        tabs=[
            ft.Tab(
                tab_content=ft.Row(
                    controls=[
                        ft.Icon(ft.cupertino_icons.HOME, size=21),
                        ft.Text(value="Home"),
                    ]
                ),
                content=ft.Container(
                    padding=ft.padding.only(top=15),
                    content=home_controls,
                    alignment=ft.alignment.top_left,
                ),
            ),
            ft.Tab(
                tab_content=ft.Row(
                    controls=[
                        ft.Icon(ft.icons.EDIT_NOTE_OUTLINED, size=25),
                        ft.Text(value="Edit"),
                    ]
                )
            ),
        ],
        tab_alignment=ft.TabAlignment.CENTER,
        expand=1,
    )

    page.add(tabs)
    page.add(path_control)


ft.app(target=main)

reusable_controls.py

from flet import UserControl, Text, IconButton, Row, icons, TextStyle, Container
import flet as ft


class CustomControl(UserControl):
    def __init__(self, text: str) -> None:
        super().__init__()
        self.text = Text(text, width=700)

    def build(self) -> Container:
        return Container(
            width=762,
            padding=10,
            border=ft.border.all(1),
            border_radius=10,
            content=Row(controls=[self.text, IconButton(icon=icons.CANCEL_OUTLINED)]),
        )


class PathControl(UserControl):
    def __init__(self, field_str: str, button_str: str):
        super().__init__()
        self.field = ft.TextField(label=field_str, width=650)
        self.file_picker = ft.FilePicker(on_result=self.get_path)
        self.button = ft.ElevatedButton(
            text=button_str,
            width=100,
            height=50,
            style=ft.ButtonStyle(shape=ft.RoundedRectangleBorder(radius=10)),
            on_click=lambda _: self.file_picker.pick_files(allow_multiple=False)
        )

    def build(self) -> Row:
        return ft.Row(
            controls=[
                self.field,
                self.button,
            ]
        )

    def get_path(self, e: ft.FilePickerResultEvent):
        self.field.value = (
            "".join(map(lambda f: f.path, e.files)) if e.files else "Operation Cancelled"
        )
        self.field.update()

I am new to flet and I am constantly getting this error:
File “/Library/Frameworks/Python.framework/Versions/3.11/lib/python3.11/site-packages/flet_core/control.py”, line 314, in update
assert self.__page, “Control must be added to the page first.”
AssertionError: Control must be added to the page first.

It occurs when I click on the button made using PathControl class, I have added the instance of the PathControl class(path_control, path_control_2) to the home_controls which is a column.

I tried adding the path_control and path_control_2 directly to the page using page.add but it still throws that error. also tried page.controls.append.