How to apply linear gradient on a container.

[Haadi-A]

Hi @ndonkoHenri Is there a way to apply a linear gradient to a container, I tried using ft.LinearGradient() but nothing is displayed, here is the code :

import flet as ft


def ProfilePage(page=ft.Page):
    backButton: ft.Control = ft.FilledButton(
        text="back", icon=ft.icons.ARROW_BACK_SHARP)
    page.add(
        ft.Container(content=ft.Column(
            controls=[backButton,
                      ft.Container(
                            height=610, width=700,
                            bgcolor=ft.LinearGradient(
                                colors=[ft.colors.BLUE, ft.colors.CYAN],
                                stops=[100.5, 100.00]
                                ), 
                                border_radius=100,
                                       ),
                                    ],
                                ),                  
            alignment=ft.alignment.center,
         ),
        )

ft.app(target=ProfilePage)

Plus this is what I am trying to achieve :

But here is what is shown:

[ndonkoHenri]

bgcolor takes only strings. You have to use the gradient property of the container. See docs here: https://flet.dev/docs/controls/container#gradient
So, modify your code as follows:

ft.Container(
    height=610, width=700,
    border_radius=100,
    gradient=ft.LinearGradient(
        colors=[ft.colors.BLUE, ft.colors.CYAN],
        stops=[100.5, 100.00]
    )
)

[ndonkoHenri]

To better choose your gradients, I suggest you this -> https://flutils.fly.dev
A simple tool to ease your life as a Flet developer.