Flet UI is built of controls. Controls are organized into hierarchy, or a tree, where each control has a parent (except Page) and container controls like Column, Dropdown can contain child controls, for example:
│ ├─ Option
│ └─ Option
Controls by categories
🗃️ Information Displays
🗃️ Input and Selections
🗃️ Dialogs, Alerts and Panels
Common control properties
Flet controls have the following properties:
Stack only. The distance that the child's bottom edge is inset from the bottom of the stack.
Arbitrary data that can be attached to a control.
Every control has
disabled property which is
False by default - control and all its children are enabled.
disabled property is mostly used with data entry controls like
disabled could be set to a parent control and its value will be propagated down to all children recursively.
For example, if you have a form with multiple entry controls you can disable them all together by disabling container:
c = ft.Column(controls=[
c.disabled = True
When a child Control is placed into a
Row you can "expand" it to fill the available space.
expand property could be a boolean value (
True - expand control to fill all available space) or an integer - an "expand factor" specifying how to divide a free space with other expanded child controls.
Imposed Control height in virtual pixels.
Stack only. The distance that the child's left edge is inset from the left of the stack.
Stack only. The distance that the child's right edge is inset from the right of the stack.
Stack only. The distance that the child's top edge is inset from the top of the stack.
Every control has
visible property which is
True by default - control is rendered on the page. Setting
False completely prevents control (and all its children if any) from rendering on a page canvas. Hidden controls cannot be focused or selected with a keyboard or mouse and they do not emit any events.
Imposed Control width in virtual pixels.
Applies a translation transformation before painting the control.
The translation is expressed as a
transform.Offset scaled to the control's size. For example, an
Offset with a
0.25 will result in a horizontal translation of one quarter the width of the control.
The following example displays container at
0, 0 top left corner of a stack as transform applies
-1 * 100, -1 * 100 (
offset * control_size) horizontal and vertical translations to the control:
import flet as ft
def main(page: ft.Page):
Makes a control partially transparent.
0.0 - control is completely transparent, not painted at all.
1.0 (default) - a control is fully painted without any transparency.
Transforms control using a rotation around the center.
The value of
rotate property could be one of the following types:
number- a rotation in clockwise radians. Full circle
math.pi * 2radians,
pi / 2,
pi / 4, etc.
transform.Rotate- allows to specify rotation
angleas well as
alignment- the location of rotation center.
rotate=Rotate(angle=0.25 * pi, alignment=ft.alignment.center_left)
Scale control along the 2D plane. Default scale factor is
1.0 - control is not scaled.
0.5 - the control is twice smaller,
2.0 - the control is twice larger.
Different scale multipliers can be specified for
y axis, but setting
Control.scale property to an instance of
from dataclasses import field
scale: float = field(default=None)
scale_x: float = field(default=None)
scale_y: float = field(default=None)
alignment: Alignment = field(default=None)
scale_y could be specified, but not all of them, for example: