How to Create a Container in Flet

The Container in Flet is a powerful tool that allows for flexible decoration and positioning of UI controls. It enables the addition of borders, background colors, margins, padding, alignments, and much more.

This article will cover the key concepts and properties of the Container, along with practical examples to aid understanding.

What is a Container?

A Container is a control that allows you to:

Decorate an element with background colors, borders, or gradients.
Position the element using alignment, margins, and padding.
Add interactivity, such as clicks, visual effects, and events.

Container Properties

Here are some key properties of the Container:

content: Defines the content inside the container, such as text, buttons, etc.
bgcolor: Sets the background color.
border: Adds a border around the container.
border_radius: Rounds the corners of the container.
padding and margin: Internal and external spacing, respectively.
alignment: Aligns content within the container.
on_click: Defines an action when the container is clicked.
ink: Adds a visual effect when clicked.

Practical Example: Clickable Containers

In the following example, we explore clickable and non-clickable containers:

import flet as ft

def main(page: ft.Page):
    page.title = "Example of Clickable Containers"
    page.vertical_alignment = ft.MainAxisAlignment.CENTER
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER

    page.add(
        ft.Row(
            [
                # Non-clickable container
                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,
                ),
                # Clickable container without ink effect
                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!"),
                ),
                # Clickable container with ink effect
                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!"),
                ),
                # Transparent clickable container with Ink
                ft.Container(
                    content=ft.Text("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("Transparent with Ink clicked!"),
                ),
            ],
            alignment=ft.MainAxisAlignment.CENTER,
        ),
    )

ft.app(main)

What’s Happening?

Non-clickable: Only displays text and does not respond to clicks.
Clickable without Ink: Responds to clicks but without visual effects.
Clickable with Ink: Responds to clicks with an ink effect.
Transparent with Ink: The container is transparent but has an ink effect when clicked.

Advanced Customization

The Container supports many other properties. For example, adding a blur effect to the background:

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.Stack(
            [
                ft.Container(
                    content=ft.Text("Text on top"),
                    bgcolor=ft.Colors.WHITE,
                    width=200,
                    height=200,
                ),
                ft.Container(
                    width=200,
                    height=200,
                    blur=10,
                    bgcolor="#44CCCC00",
                ),
            ]
        )
    )

ft.app(main)

In this example, the second container applies a blur effect to the background, creating an interesting visual effect.

Interaction Events

Containers can respond to different events:

on_hover: When the mouse hovers over the container.
on_click: When clicked.
on_long_press: When the click is held down.

Example: Changing Color on 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(main)

Conclusion

The Container is an essential feature for creating attractive and interactive interfaces in Flet. It allows a high degree of customization, from aesthetics to functionality. Experiment with its properties and create amazing designs!

If you enjoyed this article, share it and explore more about Flet!

Copyright Statement: Unless stated otherwise, all articles are original to this site, please credit the source when sharing.

Article link:http://pybeginners.com/python-flet/how-to-create-a-container-in-flet/

License Agreement:Attribution-NonCommercial 4.0 International License