How can I display a Matplotlib heatmap using Flet?

Question

I'm working on a project where I need to display a dynamic heatmap using matplotlib, and I want to integrate this into a Flet application. I have a class that generates and updates a heatmap using matplotlib, but I'm not sure how to integrate this with Flet for the user interface.

Here is the relevant code for the class ShowHeatMap:

class ShowHeatMap:
    MatrixSize = (50, 50)

    def __init__(self, Buffer):
    self.BufferList = Buffer
    self.MatrixData = self.ConvertListToMatrix()
    self.Fig, self.Ax = plt.subplots()
    self.Cax = self.Ax.imshow(self.MatrixData, cmap=Cmap, vmin=self.VMin, vmax=self.VMax, interpolation='quadric')
    CBar = self.Fig.colorbar(self.Cax, ax=self.Ax)


      def UpdateHeatMap(self, NewData):
        self.BufferList = NewData
        self.MatrixData = self.ConvertListToMatrix()
        self.Cax.set_data(self.MatrixData)
        self.Fig.canvas.draw()
        self.Fig.canvas.flush_events()
        plt.pause(0.1)

I want to integrate this matplotlib heatmap into a Flet application so that it can be displayed within the Flet user interface. Specifically, I need to:

1. Convert the matplotlib figure to an image or some format that can be displayed in Flet.
2. Update the Flet UI dynamically whenever the heatmap data is updated.

I’m aware that Flet has support for integrating various types of widgets, but I’m unsure of how to handle the conversion of matplotlib plots to Flet-compatible formats and how to handle updates in real time.

Questions:

• How can I convert a matplotlib figure to an image that can be used in a Flet application?
• What are the best practices for updating a Flet UI dynamically with new image data?
• Are there specific Flet widgets or methods that can facilitate this integration?
• Any help or examples would be greatly appreciated!