Skip to main content

​
Container

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

​
Properties

​
Content

​
content
Control
The content of this container.

​
Layout

​
padding
PaddingValue
Empty space to inscribe inside a container decoration (background, border). The child control is placed inside this padding.
​
alignment
Alignment
Defines the alignment of the content inside the container.

​
Background

​
bgcolor
ColorValue
Defines the background color of this container.
​
gradient
Gradient
Defines the gradient background of this container.
​
blend_mode
BlendMode
default:"BlendMode.MODULATE"
The blend mode applied to the color or gradient background of the container.
​
image
DecorationImage
An image to paint above the bgcolor or gradient. If shape=BoxShape.CIRCLE then this image is clipped to the circle’s boundary; if border_radius is not None then the image is clipped to the given radii.

​
Border and Shape

​
border
Border
A border to draw above the background color.
​
border_radius
BorderRadiusValue
The border radius of this container.
​
shape
BoxShape
default:"BoxShape.RECTANGLE"
Sets the shape of this container. Options: RECTANGLE, CIRCLE.
​
clip_behavior
ClipBehavior
Defines how the content of this container is clipped. Defaults to ClipBehavior.ANTI_ALIAS if border_radius is not None; otherwise ClipBehavior.NONE.

​
Visual Effects

​
blur
BlurValue
Defines how Gaussian blur effect should be applied under this container.Example:
ft.Stack(
    controls=[
        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),
        ),
    ]
)
​
shadow
BoxShadowValue
The shadow(s) below this container.
​
color_filter
ColorFilter
Applies a color filter to this container.
​
foreground_decoration
BoxDecoration
The foreground decoration of this container.

​
Interaction

​
ink
bool
default:"False"
True to produce ink ripples effect when user clicks this container.
​
ink_color
ColorValue
The splash color of the ink response.
​
url
str | Url
The URL to open when this container is clicked. Additionally, if an on_click callback is provided, it is fired after that.
​
ignore_interactions
bool
default:"False"
Whether to ignore all interactions with this container and its descendants.

​
Animation

​
animate
AnimationValue
Enables container “implicit” animation that gradually changes its values over a period of time.

​
Theme

​
theme
Theme
Allows setting a nested theme for all controls inside this container and down its tree.
​
dark_theme
Theme
Allows setting a nested theme to be used when in dark theme mode for all controls inside the container and down its tree.
​
theme_mode
ThemeMode
default:"ThemeMode.SYSTEM"
“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.

​
Events

​
on_click
ControlEventHandler
Called when a user clicks the container. It will not be called if this container is long pressed.
​
on_tap_down
EventHandler[TapEvent]
Called when a user clicks the container with or without a long press.
​
on_long_press
ControlEventHandler
Called when this container is long-pressed.
​
on_hover
ControlEventHandler
Called when a mouse pointer enters or exists the container area. The data property of the event handler argument is a boolean: True when the cursor enters and False when it exits this container.

​
Example

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.Container(
            content=ft.Text("Hello, World!"),
            padding=20,
            bgcolor=ft.Colors.BLUE_100,
            border_radius=10,
            border=ft.border.all(2, ft.Colors.BLUE_400)
        ),
        ft.Container(
            content=ft.Column([
                ft.Text("Gradient Container"),
                ft.Icon(ft.Icons.STAR, size=50)
            ]),
            gradient=ft.LinearGradient(
                begin=ft.alignment.top_left,
                end=ft.alignment.bottom_right,
                colors=[ft.Colors.BLUE, ft.Colors.PURPLE]
            ),
            width=200,
            height=200,
            border_radius=20,
            padding=20
        ),
        ft.Container(
            content=ft.Text("Click me!"),
            ink=True,
            on_click=lambda e: print("Container clicked!"),
            padding=10,
            border_radius=5,
            border=ft.border.all(1, ft.Colors.GREY)
        ),
        ft.Container(
            content=ft.Text("Circular Container"),
            shape=ft.BoxShape.CIRCLE,
            bgcolor=ft.Colors.AMBER,
            width=100,
            height=100,
            alignment=ft.alignment.center
        )
    )

ft.app(target=main)

Build docs developers (and LLMs) love

Get started for freeTalk to us