A Card in Flet is a material design panel with slightly rounded corners and an elevation shadow. It is commonly used to group related content in a visually appealing way, enhancing user experience by providing structured and well-organized layouts.

Features and Benefits

  • Offers a clean and modern design with elevation shadows.

  • Supports customization, including background color, shadow, and shape.

  • Provides a flexible container for structuring content inside.

  • Allows nesting of multiple elements, such as text, images, buttons, and lists.

Example Usage

The following example demonstrates how to create a Card in Flet containing a ListTile and action buttons.

Python Code:

import flet as ft

def main(page):
    page.title = "Card Example"
    page.add(
        ft.Card(
            content=ft.Container(
                content=ft.Column(
                    [
                        ft.ListTile(
                            leading=ft.Icon(ft.Icons.ALBUM),
                            title=ft.Text("The Enchanted Nightingale"),
                            subtitle=ft.Text(
                                "Music by Julie Gable. Lyrics by Sidney Stein."
                            ),
                        ),
                        ft.Row(
                            [ft.TextButton("Buy tickets"), ft.TextButton("Listen")],
                            alignment=ft.MainAxisAlignment.END,
                        ),
                    ]
                ),
                width=400,
                padding=10,
            )
        )
    )

ft.app(main)

Explanation:

  • A Card is created using ft.Card().

  • Inside the card, a Container is used to hold the content.

  • A ListTile is added with an icon, title, and subtitle.

  • Two TextButtons are placed in a horizontal row at the end.

Key Properties

1. clip_behavior

Determines how the content inside the card is clipped. Defaults to ClipBehavior.NONE.

2. color

Defines the background color of the card.

3. content

Specifies the control displayed inside the card. Can be a Row, Column, or Stack to accommodate multiple elements.

4. elevation

Controls the size of the shadow below the card. Default is 1.0.

5. is_semantic_container

Defines whether the card is treated as a single semantic container. Default is True.

6. margin

Sets the empty space surrounding the card. Accepts int, float, or Margin values.

7. shadow_color

Specifies the color of the shadow beneath the card.

8. shape

Determines the shape of the card. Default is RoundedRectangleBorder(radius=4.0).

9. show_border_on_foreground

Controls whether the border is painted in front of or behind the content. Default is True.

10. surface_tint_color

Adds a color overlay to indicate elevation. If None, no overlay is applied.

11. variant

Defines the style variant of the card. Default is CardVariant.ELEVATED.

Conclusion

The Card component in Flet is a powerful UI element for organizing content with a professional look and feel. It provides customization options to match various design needs, making it a versatile choice for building beautiful and structured applications. By leveraging its properties and customization, developers can create visually appealing and functional layouts in their applications.

Copyright notice: Unless otherwise stated, all articles are original to this website. Please cite the source when sharing.

Article link: http://pybeginners.com/python-flet/understanding-card-in-flet/