Example polishing

python/controls/animations/animate-button-on-hover.py

@@ -0,0 +1,22 @@
+import flet as ft
+
+
+def main(page: ft.Page):
+    def animate(e):
+        b.rotate = 0.1 if e.data == "true" else 0
+        page.update()
+
+    t = ft.Text()
+    b = ft.ElevatedButton(
+        "Hover over me, I'm animated!",
+        rotate=0,
+        animate_rotation=100,
+        on_hover=animate,
+        on_click=lambda e: page.add(ft.Text("Clicked! Try a long press!")),
+        on_long_press=lambda e: page.add(ft.Text("I knew you could do it!")),
+    )
+
+    page.add(b)
+
+
+ft.app(target=main)

python/controls/animation/animate-container.py → python/controls/animations/animate-container.py

@@ -6,44 +6,44 @@ def main(page: ft.Page):
     g1 = ft.LinearGradient(
         begin=ft.alignment.top_center,
         end=ft.alignment.bottom_center,
-        colors=[ft.colors.GREEN, ft.colors.TRANSPARENT],
+        colors=[ft.Colors.GREEN, ft.Colors.BLUE],
         stops=[0.5, 1.0],
     )
 
     g2 = ft.RadialGradient(
         center=ft.alignment.top_left,
         radius=1.0,
-        colors=[ft.colors.YELLOW, ft.colors.DEEP_ORANGE_900],
+        colors=[ft.Colors.YELLOW, ft.Colors.DEEP_ORANGE_900],
         tile_mode=ft.GradientTileMode.CLAMP,
     )
-
+    t = ft.Text("Animate me!")
     c = ft.Container(
-        ft.Text("Animate me!"),
-        width=200,
-        height=200,
-        bgcolor="red",
+        t,
+        width=250,
+        height=250,
         gradient=g1,
         alignment=ft.alignment.top_left,
         animate=ft.animation.Animation(1000, ft.AnimationCurve.BOUNCE_OUT),
         border=ft.border.all(2, "blue"),
         border_radius=10,
         padding=10,
-        margin=10,
     )
 
     def animate_container(e):
-        c.width = 100 if c.width == 200 else 200
-        c.height = 100 if c.height == 200 else 200
-        c.bgcolor = "blue" if c.bgcolor == "red" else "red"
+        t.value = "Animate me back!" if t.value == "Animate me!" else "Animate me!"
+        c.width = 150 if c.width == 250 else 250
+        c.height = 150 if c.height == 250 else 250
         c.gradient = g2 if c.gradient == g1 else g1
         if c.alignment == ft.alignment.top_left:
             c.alignment = ft.alignment.bottom_right
         else:
             c.alignment = ft.alignment.top_left
         c.border_radius = 30 if c.border_radius == 10 else 10
-        c.border = ft.border.all(4, "black")
-        c.padding = 50
-        c.margin = 50
+        c.border = (
+            ft.border.all(2, "black")
+            if c.border == ft.border.all(2, "blue")
+            else ft.border.all(2, "blue")
+        )
         c.update()
 
     page.add(c, ft.ElevatedButton("Animate container", on_click=animate_container))

python/controls/animations/animate-image-switch-buffered.py

@@ -0,0 +1,70 @@
+import time
+import httpx
+import base64
+
+import flet as ft
+
+
+class BufferingSwitcher(ft.AnimatedSwitcher):
+    image_queue = []
+
+    def __init__(self, image: ft.Image, page: ft.Page):
+        super().__init__(image)
+        self.transition = ft.AnimatedSwitcherTransition.SCALE
+        self.duration = 500
+        self.reverse_duration = 100
+        self.switch_in_curve = ft.AnimationCurve.EASE_IN
+        self.switch_out_curve = ft.AnimationCurve.EASE_OUT
+        self.image_queue.append(image)
+        self.page = page
+
+    def animate(self, e):
+        self.content = ft.Image(
+            src_base64=self.image_queue.pop(),
+            width=200,
+            height=300,
+            gapless_playback=True,
+        )
+        self.update()
+
+    async def fill_queue(self):
+        while len(self.image_queue) < 10:
+
+            self.image_queue.append(
+                await self.image_to_base64(
+                    f"https://picsum.photos/200/300?{time.time()}"
+                )
+            )
+
+    async def image_to_base64(self, url):
+        print("image_to_base64 called")
+        response = await httpx.AsyncClient(follow_redirects=True).get(url)
+        if response.status_code == 200:
+            base64_str = (
+                base64.standard_b64encode(response.content).decode("utf-8").strip()
+            )
+            return base64_str
+        else:
+            print(f"Image request failed with {response.status_code}")
+
+    def before_update(self):
+
+        self.page.run_task(self.fill_queue)
+        print(len(self.image_queue))
+
+
+def main(page: ft.Page):
+
+    i = ft.Image(
+        src=f"https://picsum.photos/200/300?{time.time()}", width=200, height=300
+    )
+
+    sw = BufferingSwitcher(i, page)
+
+    page.add(
+        sw,
+        ft.ElevatedButton("Animate!", on_click=sw.animate),
+    )
+
+
+ft.app(target=main)

python/controls/animation/animate-image-switch.py → python/controls/animations/animate-image-switch.py

@@ -28,4 +28,4 @@ def animate(e):
     )
 
 
-ft.app(target=main)
+ft.app(main)

python/controls/animation/animate-offset.py → python/controls/animations/animate-offset.py

@@ -21,4 +21,4 @@ def animate(e):
     )
 
 
-ft.app(target=main)
+ft.app(main)

python/controls/animation/animate-opacity.py → python/controls/animations/animate-opacity.py

@@ -18,4 +18,4 @@ def animate_opacity(e):
     )
 
 
-ft.app(target=main)
+ft.app(main)

python/controls/animation/animate-rotation.py → python/controls/animations/animate-rotation.py

@@ -29,9 +29,9 @@ def animate(e):
         page.update()
 
     page.add(
-        ft.Stack([c1, c2], width=600, height=600),
+        ft.Stack([c1, c2], width=500, height=300),
         ft.ElevatedButton("Animate!", on_click=animate),
     )
 
 
-ft.app(target=main)
+ft.app(main)

python/controls/animation/animate-scale-docs.py → python/controls/animations/animate-scale-docs.py

@@ -8,13 +8,12 @@ def main(page: ft.Page):
         height=100,
         bgcolor="blue",
         border_radius=5,
-        scale=ft.transform.Scale(scale=1),
+        scale=1,
         animate_scale=ft.animation.Animation(600, ft.AnimationCurve.BOUNCE_OUT),
     )
 
     def animate(e):
-        # c1.rotate = 1
-        c.scale = 2
+        c.scale = 2 if c.scale == 1 else 1
         page.update()
 
     page.vertical_alignment = ft.MainAxisAlignment.CENTER

python/controls/animation/animate-scale.py → python/controls/animations/animate-scale.py

@@ -4,7 +4,7 @@
 def main(page: ft.Page):
 
     c1 = ft.ShaderMask(
-        ft.Image(
+        content=ft.Image(
             src="https://picsum.photos/140/100?1",
             width=140,
             height=100,
@@ -14,7 +14,7 @@ def main(page: ft.Page):
         shader=ft.RadialGradient(
             center=ft.alignment.top_left,
             radius=1.0,
-            colors=[ft.colors.YELLOW, ft.colors.DEEP_ORANGE_900],
+            colors=[ft.Colors.YELLOW, ft.Colors.DEEP_ORANGE_900],
             tile_mode=ft.GradientTileMode.CLAMP,
         ),
         border_radius=5,
@@ -28,7 +28,7 @@ def animate(e):
         page.update()
 
     page.add(
-        ft.Stack([c1], width=600, height=600),
+        ft.Stack([c1], width=500, height=300),
         ft.ElevatedButton("Animate!", on_click=animate),
     )
 

python/controls/animation/animate-single-container.py → python/controls/animations/animate-single-container.py

@@ -19,4 +19,4 @@ def animate_container(e):
     page.add(c, ft.ElevatedButton("Animate container", on_click=animate_container))
 
 
-ft.app(target=main)
+ft.app(main)

python/controls/animation/animated-left-menu.py → python/controls/animations/animated-left-menu.py

@@ -14,7 +14,7 @@ def hide_menu(e):
         content=ft.Column(
             [
                 ft.Row(
-                    [ft.IconButton(icon=ft.icons.CLOSE, on_click=hide_menu)],
+                    [ft.IconButton(icon=ft.Icons.CLOSE, on_click=hide_menu)],
                     alignment=ft.MainAxisAlignment.END,
                 ),
                 ft.ListTile(
@@ -31,7 +31,7 @@ def hide_menu(e):
         top=10,
         width=200,
         height=300,
-        bgcolor=ft.colors.SURFACE_VARIANT,
+        bgcolor=ft.Colors.SURFACE_CONTAINER_HIGHEST,
         border_radius=5,
         offset=ft.transform.Offset(-2, 0),
         animate_offset=ft.animation.Animation(300, ft.AnimationCurve.EASE_IN),
@@ -43,4 +43,4 @@ def hide_menu(e):
     )
 
 
-ft.app(target=main)
+ft.app(main)