Controls reference
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:
Page
├─ TextField
├─ Dropdown
│ ├─ Option
│ └─ Option
└─ Row
├─ ElevatedButton
└─ ElevatedButton
Controls by categories
🗃️ Layout
13 items
🗃️ Navigation
2 items
🗃️ Information Displays
6 items
🗃️ Buttons
8 items
🗃️ Input and Selections
6 items
🗃️ Dialogs, Alerts and Panels
3 items
🗃️ Utility
2 items
Common control properties
Flet controls have the following properties:
width
Imposed Control width in virtual pixels.
height
Imposed Control height in virtual pixels.
left
Effective inside Stack
only. The distance that the child's left edge is inset from the left of the stack.
top
Effective inside Stack
only. The distance that the child's top edge is inset from the top of the stack.
right
Effective inside Stack
only. The distance that the child's right edge is inset from the right of the stack.
bottom
Effective inside Stack
only. The distance that the child's bottom edge is inset from the bottom of the stack.
visible
Every control has visible
property which is True
by default - control is rendered on the page. Setting visible
to 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.
disabled
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 TextField
, Dropdown
, Checkbox
, buttons.
However, 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 = Column(controls=[
TextField(),
TextField()
])
c.disabled = True
page.add(c)
expand
When a child Control is placed into a Column
or 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.
For more information and examples about expand
property see "Expanding children" sections in Column
or Row
.
opacity
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.
data
Arbitrary data that can be attached to a control.