Gradient Border

[Flory-1]

Support gradient borders for all controles with a border like a container.
its insane waht you have to do to create a gradient border.

Here is a "short" example of a gradient border.
With this example its not possible to add a border radius thats the next problem.

import flet as ft

class GradientBorder(ft.Container):
    def __init__(self, text: ft.Text, height: float | int = 160, width: float | int = 200, border_width: float | int = 1, border_height: float | int = 1, on_click = None) -> None:
        super().__init__(
            ft.Row(
                [
                    # INFO Left border.
                    ft.Container(
                        width=border_width,
                        height=height,
                        padding=0,
                        gradient=ft.LinearGradient(
                            begin=ft.Alignment(-1, -0.7),
                            end=ft.Alignment(-1, 1),
                            colors=["#000000", "#13aacf"]
                        )
                    ),
                    ft.Container(
                        ft.Column(
                            [
                                # INFO Top border.
                                ft.Container(
                                    height=border_height,
                                    width=width,
                                    padding=0,
                                    bgcolor=ft.colors.with_opacity(0.3, "#000000")
                                ),
                                # INFO Main Content.
                                ft.Container(
                                    text,
                                    width=width,
                                    height=height-border_height-border_height,
                                    padding=0,
                                    bgcolor=ft.colors.with_opacity(0.3, "#000000"),
                                    alignment=ft.alignment.center
                                ),
                                # INFO Bottom border.
                                ft.Container(
                                    height=border_height,
                                    width=width,
                                    padding=0,
                                    bgcolor="#13aacf"
                                )
                            ],
                            spacing=0
                        ),
                        width=width,
                        height=height,
                        padding=0
                    ),
                    # INFO Right border.
                    ft.Container(
                        width=border_width,
                        height=height,
                        padding=0,
                        gradient=ft.LinearGradient(
                            begin=ft.Alignment(-1, -0.7),
                            end=ft.Alignment(-1, 1),
                            colors=["#000000", "#13aacf"]
                        )
                    )
                ],
                spacing=0
            ),
            width=width,
            height=height,
            padding=0,
            on_click=on_click
        )

[FeodorFitsner]

Oh, and there is a package for that: https://pub.dev/packages/gradient_borders 🤩

[Wanna-Pizza]

https://github.com/Wanna-Pizza/flet-animated-border

2025-04-20.06-55-50.mp4

[Wanna-Pizza]

But yeah, I have not updated for V1, so be patient guys 😁

[Flory-1]

@FeodorFitsner Thanks for the link but how can i implement this into a python project?
I did some research on the flet webpage but i colud not find anything with a clear documentation only the example with spinkit but that documentaion is very strange.

[Benitmulindwa]

@Flory-1 check this: https://github.com/benitmulindwa/flet_gradient_borders