Skip to main content

Container

Container allows to decorate a control with background color and border and position it with padding, margin and alignment.

Examples​

Live example

Clickable container​

import flet as ft

def main(page: ft.Page):
    page.title = "Containers - clickable and not"
    page.vertical_alignment = ft.MainAxisAlignment.CENTER
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER

    page.add(
        ft.Row(
            [
                ft.Container(
                    content=ft.Text("Non clickable"),
                    margin=10,
                    padding=10,
                    alignment=ft.alignment.center,
                    bgcolor=ft.colors.AMBER,
                    width=150,
                    height=150,
                    border_radius=10,
                ),
                ft.Container(
                    content=ft.Text("Clickable without Ink"),
                    margin=10,
                    padding=10,
                    alignment=ft.alignment.center,
                    bgcolor=ft.colors.GREEN_200,
                    width=150,
                    height=150,
                    border_radius=10,
                    on_click=lambda e: print("Clickable without Ink clicked!"),
                ),
                ft.Container(
                    content=ft.Text("Clickable with Ink"),
                    margin=10,
                    padding=10,
                    alignment=ft.alignment.center,
                    bgcolor=ft.colors.CYAN_200,
                    width=150,
                    height=150,
                    border_radius=10,
                    ink=True,
                    on_click=lambda e: print("Clickable with Ink clicked!"),
                ),
                ft.Container(
                    content=ft.Text("Clickable transparent with Ink"),
                    margin=10,
                    padding=10,
                    alignment=ft.alignment.center,
                    width=150,
                    height=150,
                    border_radius=10,
                    ink=True,
                    on_click=lambda e: print("Clickable transparent with Ink clicked!"),
                ),
            ],
            alignment=ft.MainAxisAlignment.CENTER,
        ),
    )

ft.app(target=main)

Properties​

alignment​

Align the child control within the container.

Alignment is an instance of alignment.Alignment class.

animate​

Enables container "implicit" animation that gradually changes its values over a period of time.

The value is of AnimationValue type.

bgcolor​

Defines the background color of the container.

blend_mode​

The blend mode applied to the color or gradient background of the container. Property value is BlendMode enum with MODULATE as default.

blur​

Applies Gaussian blur effect under the container.

The value of this property could be one of the following:

  • a number - specifies the same value for horizontal and vertical sigmas, e.g. 10.
  • a tuple - specifies separate values for horizontal and vertical sigmas, e.g. (10, 1).
  • an instance of Blur

For example:

ft.Stack(
    [
        ft.Container(
            content=ft.Text("Hello"),
            image_src="https://picsum.photos/100/100",
            width=100,
            height=100,
        ),
        ft.Container(
            width=50,
            height=50,
            blur=10,
            bgcolor="#44CCCC00",
        ),
        ft.Container(
            width=50,
            height=50,
            left=10,
            top=60,
            blur=(0, 10),
        ),
        ft.Container(
            top=10,
            left=60,
            blur=ft.Blur(10, 0, ft.BlurTileMode.MIRROR),
            width=50,
            height=50,
            bgcolor="#44CCCCCC",
            border=ft.border.all(2, ft.colors.BLACK),
        ),
    ]
)

border​

A border to draw above the background color. The value is an instance of border.Border class.

border_radius​

If specified, the corners of the container are rounded by this radius. Border radius is an instance of border_radius.BorderRadius class.

clip_behavior​

The content will be clipped (or not) according to this option.

Property value is ClipBehavior enum.

Default is ANTI_ALIAS if border_radius is not None; otherwise HARD_EDGE.

content​

A child Control contained by the container.

gradient​

Configures gradient background. The value must be an instance of one of the following classes:

image_fit​

How to inscribe the image into the space allocated during layout.

The value is ImageFit enum. Default is NONE.

image_opacity​

Sets image opacity when blending with a background: value between 0.0 and 1.0.

image_repeat​

How to paint any portions of the layout bounds not covered by the image.

The value is ImageRepeat enum. Default is NO_REPEAT.

image_src​

Sets an image as a container background. See Image.src for more details.

image_src_base64​

Sets an image encoded as Base-64 string as a container background. See Image.src_base64 for more details.

ink​

True to produce ink ripples effect when user clicks the container. Default is False.

ink_color​

The splash color of the ink response.

margin​

Empty space to surround the decoration and child control.

The value is an instance of margin.Margin class or a number.

padding​

Empty space to inscribe inside a container decoration (background, border). The child control is placed inside this padding.

The value is an instance of padding.Padding class or a number.

rtl​

True to set text direction to right-to-left. Default is False.

shadow​

A list of shadows cast by the container.

The value of this property is a single instance or a list of BoxShadow class instances.

shape​

Sets the shape of the container. The value is BoxShape enum.

The default value is RECTANGLE.

theme_mode​

The value is ThemeMode enum. Default is SYSTEM.

Setting theme_mode "resets" parent theme and creates a new, unique scheme for all controls inside the container. Otherwise the styles defined in container's theme property override corresponding styles from the parent, inherited theme.

theme​

The value is an instance of Theme class.

Allows setting a nested theme for all controls inside the container and down the tree, for example:

import flet as ft

def main(page: ft.Page):
    # Yellow page theme with SYSTEM (default) mode
    page.theme = ft.Theme(
        color_scheme_seed=ft.colors.YELLOW,
    )

    page.add(
        # Page theme
        ft.Container(
            content=ft.ElevatedButton("Page theme button"),
            bgcolor=ft.colors.SURFACE_VARIANT,
            padding=20,
            width=300,
        ),

        # Inherited theme with primary color overridden
        ft.Container(
            theme=ft.Theme(color_scheme=ft.ColorScheme(primary=ft.colors.PINK)),
            content=ft.ElevatedButton("Inherited theme button"),
            bgcolor=ft.colors.SURFACE_VARIANT,
            padding=20,
            width=300,
        ),
        
        # Unique always DARK theme
        ft.Container(
            theme=ft.Theme(color_scheme_seed=ft.colors.INDIGO),
            theme_mode=ft.ThemeMode.DARK,
            content=ft.ElevatedButton("Unique theme button"),
            bgcolor=ft.colors.SURFACE_VARIANT,
            padding=20,
            width=300,
        ),
    )

ft.app(main)

url​

The URL to open when the container is clicked. If registered, on_click event is fired after that.

url_target​

Where to open URL in the web mode. Value is of UrlTarget enum. Default is BLANK.

Events​

on_click​

Fires when a user clicks the container. Event object e is an instance of ContainerTapEvent class:

class ft.ContainerTapEvent():
    local_x: float
    local_y: float
    global_x: float
    global_y: float
info

If ink is True, e will be plain ControlEvent with empty data instead of ContainerTapEvent.

A simple usage example:

import flet as ft

def main(page: ft.Page):
    page.vertical_alignment = ft.MainAxisAlignment.CENTER
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER

    t = ft.Text()

    def container_click(e: ft.ContainerTapEvent):
        t.value = f"local_x: {e.local_x}\nlocal_y: {e.local_y}\nglobal_x: {e.global_x}\nglobal_y: {e.global_y}"
        t.update()

    page.add(
        ft.Column(
            [
                ft.Container(
                    content=ft.Text("Clickable inside container"),
                    alignment=ft.alignment.center,
                    bgcolor=ft.colors.GREEN_200,
                    width=200,
                    height=200,
                    border_radius=10,
                    on_click=container_click,
                ),
                t,
            ],
            horizontal_alignment=ft.CrossAxisAlignment.CENTER,
        ),
    )

ft.app(target=main)

on_hover​

Fires when a mouse pointer enters or exists the container area. data property of event object contains true (string) when cursor enters and false when it exits.

A simple example of a container changing its background color on mouse hover:

import flet as ft

def main(page: ft.Page):
    def on_hover(e):
        e.control.bgcolor = "blue" if e.data == "true" else "red"
        e.control.update()

    page.add(
        ft.Container(width=100, height=100, bgcolor="red", ink=False, on_hover=on_hover)
    )

ft.app(target=main)

on_long_press​

Fires when the container is long-pressed.