MatplotlibChart instance cannot be a row/column in ft.Row/ft.Column in ft.UserControl, or MatplotlibChart instance will override build()

[heximing]

Description
MatplotlibChart instance cannot be a row/column in ft.Row or ft.Column in ft.UserControl, or MatplotlibChart instance will override build().

Code example to reproduce the issue:

import matplotlib
import matplotlib.pyplot as plt
import flet as ft
from flet.matplotlib_chart import MatplotlibChart
import tracemalloc
tracemalloc.start()
matplotlib.use("svg")


class GreeterControl(ft.UserControl):
    def build(self):
        data_row = ft.Row(
            controls=[
                ft.Text(value="(Some Live Data here 111)", bgcolor=ft.colors.RED_300, text_align=ft.TextAlign.RIGHT),
                ft.Text(value="(Some Live Data here 222)", bgcolor=ft.colors.RED_300, text_align=ft.TextAlign.RIGHT),
                ft.Text(value="(Some Live Data here 333)", bgcolor=ft.colors.RED_300, text_align=ft.TextAlign.RIGHT),
                ft.Text(value="(Some Live Data here 444)", bgcolor=ft.colors.RED_300, text_align=ft.TextAlign.RIGHT),
            ]
        )

        # plt.close('all')
        fig, ax = plt.subplots()
        fruits = ["apple", "blueberry", "cherry", "orange"]
        counts = [40, 100, 30, 55]
        bar_labels = ["red", "blue", "_red", "orange"]
        bar_colors = ["tab:red", "tab:blue", "tab:red", "tab:orange"]
        ax.bar(fruits, counts, label=bar_labels, color=bar_colors)
        ax.set_ylabel("fruit supply")
        ax.set_title("Fruit supply by kind and color")
        ax.legend(title="Fruit color")

        chart = MatplotlibChart(figure=fig, expand=True, isolated=True, original_size=True)

        return ft.Column(
            controls=[
                data_row,
                data_row,
                chart,
                ft.ElevatedButton(text="Start (does nothing)", disabled=True)
            ],
            alignment=ft.alignment.center, horizontal_alignment=ft.CrossAxisAlignment.CENTER
        )

def main(page: ft.Page):
    page.add(
        ft.Row(controls=[ft.Text(value="(Title) *** (Title)", italic=False, selectable=False,
                                 style=ft.TextThemeStyle.DISPLAY_MEDIUM)], alignment=ft.MainAxisAlignment.CENTER),
        GreeterControl(),
        ft.Row(controls=[ft.Text(value="(Bottom) *** (Bottom)", italic=False, selectable=False,
                                 style=ft.TextThemeStyle.DISPLAY_SMALL)], alignment=ft.MainAxisAlignment.CENTER),
    )

if __name__ == '__main__':
    ft.app(target=main)
    tracemalloc.stop()

Describe the results you received:

Describe the results you expected:

Additional information you deem important (e.g. issue happens only occasionally):
in build(), in return, replacing the line chart, with

ft.Container(content=chart, margin=5, padding=5, border=ft.border.all(1, ft.colors.BLUE_500), alignment=ft.alignment.center, bgcolor=ft.colors.GREEN_300, border_radius=10),

will get the expected result. i.e. need to use a Container to wrap MatplotlibChart instance to work.

It seems like it only have problem when ft.UserControl is a ft.Row or ft.Column. If ft.UserControl is a MatplotlibChart by itself, everything works as expected. For example:

import matplotlib
import matplotlib.pyplot as plt
import flet as ft
from flet.matplotlib_chart import MatplotlibChart
import tracemalloc
tracemalloc.start()
matplotlib.use("svg")

class GreeterControl(ft.UserControl):
    def build(self):
        # plt.close('all')
        fig, ax = plt.subplots()
        fruits = ["apple", "blueberry", "cherry", "orange"]
        counts = [40, 100, 30, 55]
        bar_labels = ["red", "blue", "_red", "orange"]
        bar_colors = ["tab:red", "tab:blue", "tab:red", "tab:orange"]
        ax.bar(fruits, counts, label=bar_labels, color=bar_colors)
        ax.set_ylabel("fruit supply")
        ax.set_title("Fruit supply by kind and color")
        ax.legend(title="Fruit color")

        chart = MatplotlibChart(figure=fig, expand=True, isolated=True, original_size=True)

        return chart

def main(page: ft.Page):
    page.add(
        ft.Row(controls=[ft.Text(value="(Title) *** (Title)", italic=False, selectable=False,
                                 style=ft.TextThemeStyle.DISPLAY_MEDIUM)], alignment=ft.MainAxisAlignment.CENTER),
        GreeterControl(),
        ft.Row(controls=[ft.Text(value="(Bottom) *** (Bottom)", italic=False, selectable=False,
                                 style=ft.TextThemeStyle.DISPLAY_SMALL)], alignment=ft.MainAxisAlignment.CENTER),
    )

# Press the green button in the gutter to run the script.
if __name__ == '__main__':
    ft.app(target=main)
    tracemalloc.stop()
    print("exiting...")

Flet version (pip show flet):
0.74

Operating system:
Windows 10, PyCharm 2023.1.2 (Community Edition), Build #PC-231.9011.38, built on May 16, 2023

[heximing]

By the way, I found this problem when testing potential memory leak when using matplotlib in Flet.
I found:
① If I put MatplotlibChart in the top most page, if I remove it (page.controls.pop()), Flet will do garbage collection. However, if I put MatplotlibChart in a Class and in a ft.Container, removing MatplotlibChart instance (by popping ft.Row or ft.Column controls list) will not clear the matplotlib.figure. I need to explicitly call matplotlib.pyplot.close(), which I later found this note on Matplotlib's documentation:
https://matplotlib.org/stable/api/_as_gen/matplotlib.pyplot.figure.html#:~:text=If%20you%20are%20creating%20many%20figures%2C%20make%20sure%20you%20explicitly%20call%20pyplot.close%20on%20the%20figures%20you%20are%20not%20using%2C%20because%20this%20will%20enable%20pyplot%20to%20properly%20clean%20up%20the%20memory

② I am trying to remove and re-build pages again and again. If I use the below code to test memory leak, I found that flet_core\control.py has a lot of counts.

import time
import matplotlib
import matplotlib.pyplot as plt
import flet as ft
from flet.matplotlib_chart import MatplotlibChart
import tracemalloc
tracemalloc.start()
matplotlib.use("svg")

class GreeterControl(ft.UserControl):
    def __init__(self):
        super().__init__()
        self.button1 = ft.ElevatedButton(text="Start Test", on_click=self.start_clicked, disabled=False)

    def build(self):
        data_row = ft.Row(
            controls=[
                ft.Text(value="(Some Live Data here 111)", bgcolor=ft.colors.RED_300, text_align=ft.TextAlign.RIGHT),
                ft.Text(value="(Some Live Data here 222)", bgcolor=ft.colors.RED_300, text_align=ft.TextAlign.RIGHT),
                ft.Text(value="(Some Live Data here 333)", bgcolor=ft.colors.RED_300, text_align=ft.TextAlign.RIGHT),
                ft.Text(value="(Some Live Data here 444)", bgcolor=ft.colors.RED_300, text_align=ft.TextAlign.RIGHT),
            ]
        )

        plt.close('all')
        fig, ax = plt.subplots()
        fruits = ["apple", "blueberry", "cherry", "orange"]
        counts = [40, 100, 30, 55]
        bar_labels = ["red", "blue", "_red", "orange"]
        bar_colors = ["tab:red", "tab:blue", "tab:red", "tab:orange"]
        ax.bar(fruits, counts, label=bar_labels, color=bar_colors)
        ax.set_ylabel("fruit supply")
        ax.set_title("Fruit supply by kind and color")
        ax.legend(title="Fruit color")

        chart = MatplotlibChart(figure=fig, expand=True, isolated=True, original_size=True)

        return ft.Column(
            controls=[
                data_row,
                ft.Container(content=chart, margin=5, padding=5, border=ft.border.all(1, ft.colors.BLUE_500),
                             alignment=ft.alignment.center, bgcolor=ft.colors.GREEN_300, border_radius=10),
                self.button1,
            ],
            alignment=ft.alignment.center, horizontal_alignment=ft.CrossAxisAlignment.CENTER
        )

    def start_clicked(self, e):
        self.button1.disabled = True
        counter_1 = 10
        counter_2 = 1000
        f = open(time.strftime("Flet_memory/%Y_%m_%d.txt", time.localtime()), "a", encoding="utf-8")
        f.write("\nRemove/re-build {} each for {} times:\n".format(counter_2, counter_1))
        f.close()
        for i in range(0, counter_1, 1):  # repeat the Flet memory leak test for X times; each time save to a txt file.
            for i in range(0, counter_2, 1):
                # self.controls[0].controls.pop()
                # self.controls[0].controls.pop()
                # self.controls[0].controls.pop()
                self.controls.pop()  # same as self.controls = []
                self.update()
                self.controls.append(self.build())
                self.update()
            self.write_txt()
        self.button1.disabled = False
        self.update()

    def write_txt(self):
        f = open(time.strftime("Flet_memory/%Y_%m_%d.txt", time.localtime()), "a", encoding="utf-8")
        snapshot = tracemalloc.take_snapshot()
        top_stats = snapshot.statistics('lineno')
        f.write("[ Top 10 ]\n")
        for stat in top_stats[:10]:
            f.write(str(stat)+"\n")
        current, peak = tracemalloc.get_traced_memory()
        print('Current and peak memory usage: {} {}'.format(current, peak))
        f.write('Current and peak memory usage: {} {}\n'.format(current, peak))
        f.write("↑↑↑" + time.strftime("%a, %d %b %Y %H:%M:%S", time.localtime()) + "↑↑↑\n\n")
        f.close()

def main(page: ft.Page):
    page.title = "Flet Memory"
    page.vertical_alignment = ft.MainAxisAlignment.CENTER
    page.scroll = "always"
    page.window_width = 777
    page.window_height = 666
    page.bgcolor = "#FFFFF8E1"
    page.add(
        ft.Row(controls=[ft.Text(value="(Title) *** (Title)", italic=False, selectable=False,
                                 style=ft.TextThemeStyle.DISPLAY_MEDIUM)], alignment=ft.MainAxisAlignment.CENTER),
        GreeterControl(),
        ft.Row(controls=[ft.Text(value="(Bottom) *** (Bottom)", italic=False, selectable=False,
                                 style=ft.TextThemeStyle.DISPLAY_SMALL)], alignment=ft.MainAxisAlignment.CENTER),
    )

if __name__ == '__main__':
    ft.app(target=main)
    tracemalloc.stop()
    print("exiting...")