python flet Container

Question

I'm trying to make a menu in flet using a container, it should be semi-transparent, but the items in it are not. I tried to assign my opacity=1 to the elements, but without success - they are as transparent as the container

appreciate any help

my code:

nickname = ft.TextField(
label="xxx",
hint_text="xxx"
)
column = ft.Column(
controls=[nickname],
alignment=ft.MainAxisAlignment.CENTER,
horizontal_alignment=ft.CrossAxisAlignment.CENTER,
)
container = ft.Container(
content=column,
padding=10,
bgcolor=ft.colors.BLACK,
border_radius=ft.border_radius.all(15))

Answer 1

Why it's not working:

The problem occurs because when you set the opacity of a container, it applies to the entire container including its contents. In your current code, you haven't specified any opacity, so the container and its contents are fully opaque.

How to fix it:

To achieve the desired container with its content, you need to use the opacity property for the container and set a solid background color for the TextField. Here's how you should solve this problem:

import flet as ft


nickname = ft.TextField(
    label="xxx",
    hint_text="xxx",
    bgcolor=ft.colors.WHITE,  # Set a solid background color
    border_color=ft.colors.BLACK,
)

column = ft.Column(
    controls=[nickname],
    alignment=ft.MainAxisAlignment.CENTER,
    horizontal_alignment=ft.CrossAxisAlignment.CENTER,
)

container = ft.Container(
    content=column,
    padding=10,
    bgcolor=ft.colors.with_opacity(0.5, ft.colors.BLACK),  # Semi-transparent background
    border_radius=ft.border_radius.all(15)
)