Skip to content

LayoutControl

Inherits: Control

Properties

Events

Properties#

align class-attribute instance-attribute #

align: Alignment | None = None

Alignment of the control within its parent.

animate_align class-attribute instance-attribute #

animate_align: AnimationValue | None = None

Enables implicit animation of the align property.

More information here.

animate_margin class-attribute instance-attribute #

animate_margin: AnimationValue | None = None

Enables implicit animation of the margin property.

More information here.

animate_offset class-attribute instance-attribute #

animate_offset: AnimationValue | None = None

Enables implicit animation of the offset property.

More information here.

animate_opacity class-attribute instance-attribute #

animate_opacity: AnimationValue | None = None

Enables implicit animation of the opacity property.

More information here.

animate_position class-attribute instance-attribute #

animate_position: AnimationValue | None = None

Enables implicit animation of the positioning properties (left, right, top and bottom).

More information here.

animate_rotation class-attribute instance-attribute #

animate_rotation: AnimationValue | None = None

Enables implicit animation of the rotate property.

More information here.

animate_scale class-attribute instance-attribute #

animate_scale: AnimationValue | None = None

Enables implicit animation of the scale property.

More information here.

animate_size class-attribute instance-attribute #

animate_size: AnimationValue | None = None

TBD

aspect_ratio class-attribute instance-attribute #

aspect_ratio: Number | None = None

The aspect ratio of the control. It is defined as the ratio of the width to the height.

bottom class-attribute instance-attribute #

bottom: Number | None = None

The distance that the child's bottom edge is inset from the bottom of the stack.

Note

Effective only if this control is a descendant of one of the following: Stack control, Page.overlay list.

height class-attribute instance-attribute #

height: Number | None = None

Imposed Control height in virtual pixels.

left class-attribute instance-attribute #

left: Number | None = None

The distance that the child's left edge is inset from the left of the stack.

Note

Effective only if this control is a descendant of one of the following: Stack control, Page.overlay list.

margin class-attribute instance-attribute #

margin: MarginValue | None = None

Sets the margin of the control.

offset class-attribute instance-attribute #

offset: OffsetValue | None = None

Applies a translation transformation before painting the control.

The translation is expressed as an Offset scaled to the control's size. So, Offset(x=0.25, y=0), for example, will result in a horizontal translation of one quarter the width of this control.

Example

The following example displays container at 0, 0 top left corner of a stack as transform applies -1 * 100, -1 * 100 (offset * control's size) horizontal and vertical translations to the control:

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.Stack(
            width=1000,
            height=1000,
            controls=[
                ft.Container(
                    bgcolor="red",
                    width=100,
                    height=100,
                    left=100,
                    top=100,
                    offset=ft.Offset(-1, -1),
                )
            ],
        )
    )

ft.run(main)

right class-attribute instance-attribute #

right: Number | None = None

The distance that the child's right edge is inset from the right of the stack.

Note

Effective only if this control is a descendant of one of the following: Stack control, Page.overlay list.

rotate class-attribute instance-attribute #

rotate: RotateValue | None = None

Transforms this control using a rotation around its center.

The value of rotate property could be one of the following types:

  • number - a rotation in clockwise radians. Full circle 360° is math.pi * 2 radians, 90° is pi / 2, 45° is pi / 4, etc.
  • Rotate - allows to specify rotation angle as well as alignment - the location of rotation center.
Example

For example: 

ft.Image(
    src="https://picsum.photos/100/100",
    width=100,
    height=100,
    border_radius=5,
    rotate=Rotate(angle=0.25 * pi, alignment=ft.Alignment.CENTER_LEFT)
)

scale class-attribute instance-attribute #

scale: ScaleValue | None = None

Scales this control along the 2D plane. Default scale factor is 1.0, meaning no-scale.

Setting this property to 0.5, for example, makes this control twice smaller, while 2.0 makes it twice larger.

Different scale multipliers can be specified for x and y axis, by setting Control.scale property to an instance of Scale class. Either scale or scale_x and scale_y could be specified, but not all of them.

Example 
ft.Image(
    src="https://picsum.photos/100/100",
    width=100,
    height=100,
    border_radius=5,
    scale=ft.Scale(scale_x=2, scale_y=0.5)
)

top class-attribute instance-attribute #

top: Number | None = None

The distance that the child's top edge is inset from the top of the stack.

Note

Effective only if this control is a descendant of one of the following: Stack control, Page.overlay list.

width class-attribute instance-attribute #

width: Number | None = None

Imposed Control width in virtual pixels.

Events#

on_animation_end class-attribute instance-attribute #

on_animation_end: (
    ControlEventHandler[LayoutControl] | None
) = None

Called when animation completes.

Can be used to chain multiple animations.

The data property of the event handler argument contains the name of the animation.

More information here.