⭐ If you like Flet, give it a star on GitHub and follow us on Twitter

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

Control gallery live demo

Controls by categories

🗃 Layout
21 items

🗃 Navigation
8 items

🗃 Information Displays
11 items

Convert web pages and HTML files to PDF in your applications with the Pdfcrowd HTML to PDF API Printed with [Link]
 🗃 Buttons
18 items

🗃 Input and Selections

14 items

🗃 Dialogs, Alerts and Panels

13 items

🗃 Charts
5 items

🗃 Animations
2 items

🗃 Utility
18 items

Convert web pages and HTML files to PDF in your applications with the Pdfcrowd HTML to PDF API Printed with [Link]
 Common control properties
Flet controls have the following properties:

adaptive

adaptive property can be specified for a control in the following cases:

A control has matching Cupertino control with similar functionality/presentation and

graphics as expected on iOS/macOS. In this case, if adaptive is True , either Material
or Cupertino control will be created depending on the target platform.

These controls have their Cupertino analogs and adaptive property:

AlertDialog

AppBar
Checkbox
ListTile
NavigationBar

Radio
Slider
Switch

A control has child controls. In this case adaptive property value is passed on to its
children that don't have their adaptive property set.

The following container controls have adaptive property:

Card

Column
Container
Dismissible

ExpansionPanel
FletApp
GestureDetector
GridView

ListView

Convert web pages and HTML files to PDF in your applications with the Pdfcrowd HTML to PDF API Printed with [Link]
 Page

Row
SafeArea
Stack
Tabs

View

bottom

Effective inside Stack only. The distance that the child's bottom edge is inset from the
bottom of the stack.

data

Arbitrary data that can be attached to a control.

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 = [Link](controls=[
[Link](),
[Link]()
])
[Link] = True
[Link](c)

expand

When a child Control is placed into a Column or 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

Convert web pages and HTML files to PDF in your applications with the Pdfcrowd HTML to PDF API Printed with [Link]
 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 .

expand_loose

Effective only if expand is True .

If expand_loose is True , the child control of a Column or a Row will be given the flexibility
to expand to fill the available space in the main axis (e.g., horizontally for a Row or vertically
for a Column), but will not be required to fill the available space.

The default value is False .

Here is the example of Containers placed in Rows with expand_loose = True :

import flet as ft

class Message([Link]):
def __init__(self, author, body):
super().__init__()
[Link] = [Link](
controls=[
[Link](author, weight=[Link]),
[Link](body),
],
)
[Link] = [Link](1, [Link])
self.border_radius = ft.border_radius.all(10)
[Link] = [Link].GREEN_200
[Link] = 10
[Link] = True
self.expand_loose = True

def main(page: [Link]):

chat = [Link](
padding=10,
spacing=10,
controls=[

Convert web pages and HTML files to PDF in your applications with the Pdfcrowd HTML to PDF API Printed with [Link]
 [Link](
alignment=[Link],
controls=[
Message(
author="John",
body="Hi, how are you?",
),
],
),
[Link](
alignment=[Link],
controls=[
Message(
author="Jake",
body="Hi I am good thanks, how about you?",
),
],
),
[Link](
alignment=[Link],
controls=[
Message(
author="John",
body="Lorem Ipsum is simply dummy text of the pr
),
],
),
[Link](
alignment=[Link],
controls=[
Message(
author="Jake",
body="Thank you!",
),
],
),
],
)

page.window_width = 393
page.window_height = 600
page.window_always_on_top = False

[Link](chat)

Convert web pages and HTML files to PDF in your applications with the Pdfcrowd HTML to PDF API Printed with [Link]
 [Link](target=main)

height

Convert web pages and HTML files to PDF in your applications with the Pdfcrowd HTML to PDF API Printed with [Link]
 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.

right

Effective inside Stack only. The distance that the child's right edge is inset from the right of
the stack.

top

Effective inside Stack only. The distance that the child's top edge is inset from the top 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.

width

Imposed Control width in virtual pixels.

Transformations

offset

Applies a translation transformation before painting the control.

The translation is expressed as a [Link] scaled to the control's size. For

example, an Offset with a x of 0.25 will result in a horizontal translation of one quarter the
width of the control.

Convert web pages and HTML files to PDF in your applications with the Pdfcrowd HTML to PDF API Printed with [Link]
 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: [Link]):

[Link](
[Link](
[
[Link](
bgcolor="red",
width=100,
height=100,
left=100,
top=100,
offset=[Link](-1, -1),
)
],
width=1000,
height=1000,
)
)

[Link](target=main)

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.

rotate

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 360° is [Link] * 2 radians, 90°
is pi / 2 , 45° is pi / 4 , etc.

Convert web pages and HTML files to PDF in your applications with the Pdfcrowd HTML to PDF API Printed with [Link]
 [Link] - allows to specify rotation angle as well as alignment - the
location of rotation center.

For example:

[Link](
src="[Link]
width=100,
height=100,
border_radius=5,
rotate=Rotate(angle=0.25 * pi, alignment=[Link].center_left)
)

scale

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 x and y axis, but setting [Link]
property to an instance of [Link] class:

from dataclasses import field

class Scale:
scale: float = field(default=None)
scale_x: float = field(default=None)
scale_y: float = field(default=None)
alignment: Alignment = field(default=None)

Either scale or scale_x and scale_y could be specified, but not all of them, for example:

[Link](
src="[Link]
width=100,
height=100,
border_radius=5,
scale=Scale(scale_x=2, scale_y=0.5)
)

Convert web pages and HTML files to PDF in your applications with the Pdfcrowd HTML to PDF API Printed with [Link]
 Edit this page

Convert web pages and HTML files to PDF in your applications with the Pdfcrowd HTML to PDF API Printed with [Link]