AssertionError: Control must be added to the page first.

[bambier]

Question

I'm trying to add hover effect to chart but it says AssertionError: Control must be added to the page first.

base page is

# pages/BasePage.py
import flet as ft
from peewee import SqliteDatabase
from typing import Tuple
import os

# Codes


class BasePage(ft.Container):
    page: ft.Page

    def __init__(self, page: ft.Page, db: SqliteDatabase, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.page = page
        self.db = db
        self.expand = True
        self.padding = ft.Padding(10, 10, 10, 10)

and main.py

# main.py
#! /usr/bin/env python3
import json
from os import listdir, mkdir
from pathlib import Path

import flet as ft

from models.BaseModel import database
from models.Stuff import Category, Product, SubProduct
from models.User import Staff, User
from utils.theme import FONTS, THEME
from views.BaseView import BaseView
from views.HomeView import HomeView

# Codes


BASE_DIR = Path().parent


class Application(ft.UserControl):
    name = "Application"

    def __init__(self, page: ft.Page, *args, **kwargs) -> None:
        super(Application, self).__init__(*args, **kwargs)

        self.page = page
        self.update = self.page.update

        self.get_db()

        self.set_theme()

        self.page.title = self.name
        self.page.on_keyboard_event = self.on_keyboard_event
        self.page.on_resize = self.on_resize_scale

        self.page.on_route_change = self.on_route_change

        self.get_views_static()

        self.page.go("/")

    def get_views_static(self):
        self.pages_list = {
            HomeView.route: HomeView,
        }

    def get_views(self) -> None:
        """Get views dynamically and put them in `page.views`
        """
        self.page.views.clear()
        views_names = filter(lambda x:
                             x.endswith("View.py") and x != "BaseView.py",
                             listdir(BASE_DIR / "views"))

        import importlib
        self.pages_list = {}
        for view_name in views_names:
            view_name = view_name.replace(".py", "")

            module = importlib.import_module(f"views.{view_name}")
            view_class: BaseView = getattr(module, view_name)

            self.pages_list.update({view_class.route: view_class})

    def set_theme(self) -> None:
        """Set theme, page size and define fonts
        """
        self.page.fonts = FONTS
        self.page.theme = THEME

        # self.page.window_width = 1280
        # self.page.window_height = 720

        self.page.window_min_width = 1280
        self.page.window_min_height = 720
        self.page.window_frameless = True
        self.page.window_maximized = True
        # self.page.window_full_screen = True
        # self.page.window_resizable = False

        self.page.rtl = True

        self.page.padding = 0

        self.page.theme_mode = "light"
        self.page.window_bgcolor = ft.colors.WHITE

        self.update()

    def on_route_change(self, event: ft.RouteChangeEvent, *args, **kwargs):
        """Gets new route and changes page to given route
        """
        new_view: BaseView = self.pages_list.get(event.route)
        cview = getattr(self, "cview", None)
        if cview != new_view:
            self.page.views.clear()
            self.cview = new_view
            self.page.views.append(
                self.cview(page=self.page, route=self.cview.route, db=self.db))
            self.update()

    def get_db(self):
        try:
            mkdir(BASE_DIR / "data")
        except:
            pass
        finally:
            self.db = database
            self.db.connect()
            self.db.create_tables([User, Staff, Product, Category, SubProduct])

    def on_keyboard_event(self, event: ft.KeyboardEvent):
        data = json.loads(event.data)
        if data["key"] == "F11":  # Go to fullscreen by F11 or get out of full screen
            self.page.window_full_screen = not self.page.window_full_screen
            self.page: ft.Page = event.page
            self.update()

    def on_resize_scale(self, event: ft.ControlEvent):
        self.page: ft.Page = event.page
        self.update()


# Run App
if __name__ == "__main__":
    ft.app(
        target=Application,
        name=Application.name,
        view=ft.AppView.FLET_APP,
        assets_dir=BASE_DIR / "assets",
        use_color_emoji=True
    )

Home view is:

# views/HomeView.py
import flet as ft

from components.AppBar import AppBar
from components.NavigationRail import NavigationRail
from pages.Account import Account
from pages.Analytics import Analytics
from pages.Dashboard import Dashboard
from pages.Loan import Loan
from pages.Payments import Payments
from utils import colors
from views.BaseView import BaseView

# Code


class HomeView(BaseView):
    route = "/"

    def __init__(self, *args, **kwargs) -> None:
        super().__init__(*args, **kwargs)

        self.appbar = AppBar(
            page=self.page,
            title=ft.Text("داشبورد", color=colors.BLACK_COLOR)
        )

        self.pages = [Dashboard, Account, Payments, Analytics, Loan]
        self.active_page = 0
        self.is_rail_menu_open = False

        self.create_contents()

    def change_page(self, evnet: ft.ControlEvent):
        if self.active_page != int(evnet.data):
            self.active_page = int(evnet.data)
            self.create_contents()
            self.page.update()

    def create_contents(self):
        self.controls.clear()
        self.controls.append(
            ft.SafeArea(
                ft.Row(
                    [
                        NavigationRail(
                            active_page=self.active_page,
                            change_page=self.change_page,
                        ),
                        ft.VerticalDivider(width=1),
                        self.pages[self.active_page](
                            page=self.page,
                            db=self.db,
                        ),
                    ],
                    expand=True,
                    spacing=0,
                ),
                expand=True,
                right=False
            )
        )

And base View is:

# views/BaseView.py
import os
import sys

import flet as ft
from peewee import SqliteDatabase

# Codes


class BaseView(ft.View):
    """Base View class for all views in application
    """
    page: ft.Page
    db: SqliteDatabase

    def __init__(self, page: ft.Page, db: SqliteDatabase, *args, **kwargs) -> None:
        super().__init__(*args, **kwargs)
        self.padding = 0
        self.expand = True
        self.page = page
        self.db = db

    @classmethod
    def __repr__(cls):
        return str(f'<{cls.name}View route="{cls.route}">')

    @classmethod
    def __str__(cls):
        return str(cls.__class__.__name__)

    @property
    def name(self) -> str:
        return str(self.__class__.__name__[:-4])

    def restart_app(self):
        """Restats application after changing language
        """
        python = sys.executable
        os.execl(python, python, *sys.argv)

Code sample (Chart Codes)

# Pages/Dashboard.py
import flet as ft

from pages.BasePage import BasePage

# Codes


class Dashboard(BasePage):
    def __init__(self, *args, **kwargs):
        super(Dashboard, self).__init__(*args, **kwargs)
        self.set_content()
        self.page.on_resize = self.on_resize
        self.bgcolor = ft.colors.AMBER_50
        self.alignment = ft.alignment.top_right

    def on_resize(self, event: ft.ControlEvent, *args, **kwargs):
        self.page = event.page
        self.set_content()
        self.page.update()

    def set_content(self):
        self.content = ft.Column([
            ft.Row([
                ft.Card(
                    ft.Container(
                        ft.Column([
                            self.chart
                        ],
                            alignment=ft.MainAxisAlignment.START,
                            horizontal_alignment=ft.CrossAxisAlignment.START
                        ),
                        padding=ft.Padding(20, 20, 20, 20),
                    ),
                    width=0.25*self.page.window_width,
                    height=0.25*self.page.window_height,
                ),
                ft.Card(
                    ft.Container(
                        ft.Column([
                            ft.Text("Text")
                        ],
                            alignment=ft.MainAxisAlignment.START,
                            horizontal_alignment=ft.CrossAxisAlignment.START
                        ),
                        padding=ft.Padding(20, 20, 20, 20),
                    ),
                    width=0.25*self.page.window_width,
                    height=0.25*self.page.window_height,
                ),
                ft.Card(
                    ft.Container(
                        ft.Column([
                            ft.Text("Text")
                        ],
                            alignment=ft.MainAxisAlignment.START,
                            horizontal_alignment=ft.CrossAxisAlignment.START
                        ),
                        padding=ft.Padding(20, 20, 20, 20),
                    ),
                    width=0.25*self.page.window_width,
                    height=0.25*self.page.window_height,
                ),
            ],
                expand=True,
                alignment=ft.MainAxisAlignment.SPACE_AROUND,
                vertical_alignment=ft.CrossAxisAlignment.START,
            )
        ],
            expand=True,
        )

    @property
    def chart(self):
        normal_border = ft.BorderSide(
            0, ft.colors.with_opacity(0, ft.colors.WHITE))
        return ft.PieChart(
            sections=[
                ft.PieChartSection(
                    25,
                    color=ft.colors.BLUE,
                    radius=80,
                    border_side=normal_border,
                ),
                ft.PieChartSection(
                    25,
                    color=ft.colors.YELLOW,
                    radius=65,
                    border_side=normal_border,
                ),
                ft.PieChartSection(
                    25,
                    color=ft.colors.PINK,
                    radius=60,
                    border_side=normal_border,
                ),
                ft.PieChartSection(
                    25,
                    color=ft.colors.GREEN,
                    radius=70,
                    border_side=normal_border,
                ),
            ],
            sections_space=1,
            center_space_radius=0,
            on_chart_event=self.on_chart_event,
            expand=True,
        )

    def on_chart_event(self, e: ft.PieChartEvent):
        normal_border = ft.BorderSide(
            0, ft.colors.with_opacity(0, ft.colors.WHITE))
        hovered_border = ft.BorderSide(6, ft.colors.WHITE)

        for idx, section in enumerate(self.chart.sections):
            section.border_side = (
                hovered_border if idx == e.section_index else normal_border
            )
        self.chart.update()

Error message

AssertionError: Control must be added to the page first.

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

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

[bambier]

It was happens when I set char as property in function but when I add it as variable it doesn't happens anymore

By the way I think it's cleaner if we use it as property and not a variable

[ErikEgidoBlanes2223]

@ndonkoHenri Hi bro, I have a same error in my code. For what?

[ndonkoHenri]

Please comeup with some simple reproducible code that can be easily tested.

[ErikEgidoBlanes2223]

https://drive.google.com/drive/folders/1l5y7gZeJltsZZY7znD3wE6uZMe22jXoB?usp=sharing