bug: `animate_opacity` not working

[Creeper19472]

Duplicate Check

• I have searched the opened issues and there are no duplicates

Describe the bug

As the title suggests, animations related to opacity are not working properly; the change in opacity occurs instantly.

Code sample

Code

from flet import AnimationCurve, Page, Container, Button, Row, Column, Slider, Text, Animation
import flet as ft


def main(page: Page):
    page.title = "Flet Animation Demo"

    box = Container(width=120, height=120, bgcolor="#2196F3", border_radius=8, opacity=1.0)

    def animate(duration=500, curve=AnimationCurve.EASE_IN_OUT):
        box.animate = Animation(duration, curve)
        page.update()

    def toggle_size(e):
        if box.width == 120:
            box.width, box.height = 220, 220
        else:
            box.width, box.height = 120, 120
        animate(500)

    def toggle_opacity(e):
        box.opacity = 0.2 if box.opacity == 1 else 1
        animate(1000)

    def toggle_color(e):
        box.bgcolor = "#e91e63" if box.bgcolor == "#2196F3" else "#2196F3"
        animate(600)

    def on_scale_change(e):
        v = e.control.value  # 0.0 .. 1.0
        size = int(80 + 240 * v)
        box.width = box.height = size
        animate(200, AnimationCurve.LINEAR)

    controls = Column(
        [
            Row([Text("Animated box:"), box], alignment=ft.MainAxisAlignment.START),
            Row(
                [
                    Button("Toggle size", on_click=toggle_size),
                    Button("Toggle opacity", on_click=toggle_opacity),
                    Button("Toggle color", on_click=toggle_color),
                ],
                alignment=ft.MainAxisAlignment.SPACE_EVENLY,
            ),
            Text("Scale (slider):"),
            Slider(min=0, max=1, divisions=20, value=0.175, on_change=on_scale_change),
        ],
        tight=True,
    )

    page.add(controls)

if __name__ == "__main__":
    ft.run(main=main)

To reproduce

1. Run the repro code
2. Press "Toggle opacity"
3. See the issue
4. You can try pressing other buttons and find that they still work properly.

Expected behavior

The change in opacity should be a gradual process.

Screenshots / Videos

Captures

[Upload media here]

Operating System

Windows

Operating system details

Windows 25H2 (26200.7462)

Flet version

0.80.0

Regression

No, it isn't

Suggestions

No response

Logs

Logs

[Paste your logs here]

Additional details

No response

[saumyakr1232]

Try animate_opacity property.

Container (AniamtedContainer) animates only values it can interpolate like width, height, padding, color, borderRadius, alignment, etc. Opacity is not one of them

from flet import AnimationCurve, Page, Container, Button, Row, Column, Slider, Text, Animation
import flet as ft


def main(page: Page):
    page.title = "Flet Animation Demo"

    box = Container(width=120, height=120, bgcolor="#2196F3", border_radius=8, opacity=1.0)

    def animate(duration=500, curve=AnimationCurve.EASE_IN_OUT):
        box.animate = Animation(duration, curve)
        page.update()


    def animate_opacity(duration=500, curve=AnimationCurve.EASE_IN_OUT):
        box.animate_opacity = Animation(duration, curve)
        page.update()


    def toggle_size(e):
        if box.width == 120:
            box.width, box.height = 220, 220
        else:
            box.width, box.height = 120, 120
        animate(500)

    def toggle_opacity(e):
        box.opacity = 0.2 if box.opacity == 1 else 1
        animate_opacity(1000)

    def toggle_color(e):
        box.bgcolor = "#e91e63" if box.bgcolor == "#2196F3" else "#2196F3"
        animate(600)

    def on_scale_change(e):
        v = e.control.value  # 0.0 .. 1.0
        size = int(80 + 240 * v)
        box.width = box.height = size
        animate(200, AnimationCurve.LINEAR)

    controls = Column(
        [
            Row([Text("Animated box:"), box], alignment=ft.MainAxisAlignment.START),
            Row(
                [
                    Button("Toggle size", on_click=toggle_size),
                    Button("Toggle opacity", on_click=toggle_opacity),
                    Button("Toggle color", on_click=toggle_color),
                ],
                alignment=ft.MainAxisAlignment.SPACE_EVENLY,
            ),
            Text("Scale (slider):"),
            Slider(min=0, max=1, divisions=20, value=0.175, on_change=on_scale_change),
        ],
        tight=True,
    )

    page.add(controls)

if __name__ == "__main__":
    ft.run(main=main)