How To Determine The Size Of Any Flet Control | Python

Knowing the size of your Controls might at some point be very important…

Photo by Markus Winkler on Unsplash

We are going to explore the simplest way to constantly track the size of our any Flet control.

To do this, we are going to make use of the Canvas.

First, we create our basic class named SizeAwareControl which inherits from the Canvas.

import flet.canvas as cv
from collections import namedtuple


class SizeAwareControl(cv.Canvas):
    def __init__(self, content=None, resize_interval=100, on_resize=None, **kwargs):
        super().__init__(**kwargs)
        self.content = content
        self.resize_interval = resize_interval
        self.resize_callback = on_resize

        self.size = namedtuple("size", field_names=["width", "height"], defaults=[0, 0])
        # self.on_resize = self.__handle_canvas_resize

content here will contain the Control whose size is to be tracked;

resize_interval is the time in milliseconds it should take before the on_resize is called. I defaulted it to 100, but feel free to change it.

on_resize is the callback function to be called each time the tracked control is resized (for example: when resizing the window);

**kwargs here represents any other possible keyword argument (Canvas properties) that could be passed along with the object call.

After initializing these parameters, we now define self.size where the size of our tracked control will be stored. For this, I use a namedtuple which is similar to a normal tuple but permits us to label/name our values.

Let’s now define the __handle_canvas_resize method, which will be called each time the tracked control is resized.

  def __handle_canvas_resize(self, e):
      """
      Called every resize_interval when the canvas is resized.
      If a resize_callback was given, it is called.
      """
      self.size = (int(e.width), int(e.height))
      self.update()
      if self.resize_callback:
          self.resize_callback(e)

This method updates the size of our canvas with the value after the resize. It then checks if an on_resize callback was passed when the object was initialized, and if there is one we call it.

Don’t forget to uncomment the last line in the __init__ method.

That’s it! Below is the full code:

To test this, you can import this class in your file just like in the example below:

In this example we have two different Containers and both are in our newly created SizeAwareControl . When the window is resized, we update the Text controls in the containers to reflect their new sizes.

After running this example, you should see something similar to the below:

Usage example of the SizeAwareControl

I hope you find this control useful while developing your flet applications.

You can find this control and several others in my Custom-Controls repo.

By the way, I started a Youtube channel, please subscribe:

Henri Ndonko — TheEthicalBoy

Thanks for reading!

In Plain English

Thank you for being a part of our community! Before you go:

• Be sure to clap and follow the writer! 👏
• You can find even more content at PlainEnglish.io 🚀
• Sign up for our free weekly newsletter. 🗞️
• Follow us: Twitter(X), LinkedIn, YouTube, Discord.
• Check out our other platforms: Stackademic, CoFeed, Venture.