flet-dev · OwenMcDonnell · Jan 22, 2025 · Jan 22, 2025 · Jan 24, 2025 · Jan 27, 2025
diff --git a/docs/controls/ads.md b/docs/controls/ads.md
@@ -6,11 +6,16 @@ sidebar_label: Ads
 Displays ads in your app. Only available for mobile (Android and iOS) platforms.
 
 :::info Packaging
-To build your Flet app that uses ads control add `--include-packages flet_ads` to `flet build` command, for
+To build your Flet app that uses ads control add `flet-ads` to `dependencies` key of the `[project]` section of your `pyproject.toml` file, for
 example:
 
-```
-flet build apk --include-packages flet_ads
+```toml
+[project]
+...
+dependencies = [
+  "flet==0.27.6",
+  "flet-ads==0.1.0",
+]
 ```
 :::
 
@@ -19,83 +24,11 @@ import TabItem from '@theme/TabItem';
 
 ## Examples
 
-<Tabs groupId="language">
-  <TabItem value="python" label="Python" default>
-
-```python
-import flet as ft
-import flet.ads as ads
-
-
-def main(page: ft.Page):
-    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
-
-    id_interstitial = (
-        "ca-app-pub-3940256099942544/1033173712"
-        if page.platform == ft.PagePlatform.ANDROID
-        else "ca-app-pub-3940256099942544/4411468910"
-    )
-
-    id_banner = (
-        "ca-app-pub-3940256099942544/6300978111"
-        if page.platform == ft.PagePlatform.ANDROID
-        else "ca-app-pub-3940256099942544/2934735716"
-    )
-
-    def handle_interstitial_close(e):
-        nonlocal iad
-        print("InterstitialAd closed")
-        page.overlay.remove(e.control)
-        page.overlay.append(iad := get_new_interstitial_ad())
-        page.update()
-
-    def get_new_interstitial_ad():
-        return ads.InterstitialAd(
-            unit_id=id_interstitial,
-            on_load=lambda e: print("InterstitialAd loaded"),
-            on_error=lambda e: print("InterstitialAd error", e.data),
-            on_open=lambda e: print("InterstitialAd opened"),
-            on_close=handle_interstitial_close,
-            on_impression=lambda e: print("InterstitialAd impression"),
-            on_click=lambda e: print("InterstitialAd clicked"),
-        )
-
-    def display_new_banner_ad():
-        page.add(
-            ft.Container(
-                content=ads.BannerAd(
-                    unit_id=id_banner,
-                    on_click=lambda e: print("BannerAd clicked"),
-                    on_load=lambda e: print("BannerAd loaded"),
-                    on_error=lambda e: print("BannerAd error", e.data),
-                    on_open=lambda e: print("BannerAd opened"),
-                    on_close=lambda e: print("BannerAd closed"),
-                    on_impression=lambda e: print("BannerAd impression"),
-                    on_will_dismiss=lambda e: print("BannerAd will dismiss"),
-                ),
-                width=320,
-                height=50,
-                bgcolor=ft.colors.TRANSPARENT,
-            )
-        )
-
-    page.overlay.append(iad := get_new_interstitial_ad())
-    page.appbar = ft.AppBar(
-        adaptive=True,
-        title=ft.Text("Mobile Ads Playground"),
-        bgcolor=ft.colors.LIGHT_BLUE_300,
-    )
-    page.add(
-        ft.OutlinedButton("Show InterstitialAd", on_click=lambda e: iad.show()),
-        ft.OutlinedButton("Show BannerAd", on_click=lambda e: display_new_banner_ad()),
-    )
-
-
-ft.app(main)
+
+```python reference
+https://github.com/flet-dev/examples/blob/example-polishing/python/controls/information-displays/ads/ads-basic-example.py
 ```
 
-  </TabItem>
-</Tabs>
 <img src="/img/docs/controls/ads/ads.gif" className="screenshot-20" />
 
 ## Types
@@ -119,10 +52,16 @@ Remember to replace these values with your own when you're ready to package your
 The following are to be done when packaging an app that makes use of one of the above ad controls.
 
 ### Include Ads package
-Add `--include-packages flet_ads` to the `flet build` command, for example:
+Add `flet-ads` to `dependencies` key of the `[project]` section of your `pyproject.toml` configuration file, for example:
 
-```bash
-flet build apk --include-packages flet_ads
+```toml
+[project]
+...
+dependencies = [
+  ...
+  "flet-ads==0.1.0",
+  ...
+]
 ```
 
 ### Specify AdMob app ID

diff --git a/docs/controls/alertdialog.md b/docs/controls/alertdialog.md
@@ -20,50 +20,10 @@ import TabItem from '@theme/TabItem';
 
 ### Basic and modal dialogs
 
-<Tabs groupId="language">
-  <TabItem value="python" label="Python" default>
-
-```python
-import flet as ft
-
-
-def main(page: ft.Page):
-    page.title = "AlertDialog examples"
-    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
-
-    dlg = ft.AlertDialog(
-        title=ft.Text("Hi, this is a non-modal dialog!"),
-        on_dismiss=lambda e: page.add(ft.Text("Non-modal dialog dismissed")),
-    )
-
-    def handle_close(e):
-        page.close(dlg_modal)
-        page.add(ft.Text(f"Modal dialog closed with action: {e.control.text}"))
-
-    dlg_modal = ft.AlertDialog(
-        modal=True,
-        title=ft.Text("Please confirm"),
-        content=ft.Text("Do you really want to delete all those files?"),
-        actions=[
-            ft.TextButton("Yes", on_click=handle_close),
-            ft.TextButton("No", on_click=handle_close),
-        ],
-        actions_alignment=ft.MainAxisAlignment.END,
-        on_dismiss=lambda e: page.add(
-            ft.Text("Modal dialog dismissed"),
-        ),
-    )
-
-    page.add(
-        ft.ElevatedButton("Open dialog", on_click=lambda e: page.open(dlg)),
-        ft.ElevatedButton("Open modal dialog", on_click=lambda e: page.open(dlg_modal)),
-    )
-
-
-ft.app(main)
+
+```python reference
+https://github.com/flet-dev/examples/blob/example-polishing/python/controls/dialogs-alerts-panels/alert-dialog/dialogs.py
 ```
-  </TabItem>
-</Tabs>
 
 <img src="/img/docs/controls/alertdialog/alertdialog-with-custom-content.gif" className="screenshot-50" />
 

diff --git a/docs/controls/animatedswitcher.md b/docs/controls/animatedswitcher.md
@@ -16,50 +16,11 @@ import TabItem from '@theme/TabItem';
 
 <img src="/img/docs/controls/animated-switcher/animated-switcher.gif" className="screenshot-20" />
 
-<Tabs groupId="language">
-  <TabItem value="python" label="Python" default>
-
-```python
-import flet as ft
-
-def main(page: ft.Page):
-
-    c1 = ft.Container(
-        ft.Text("Hello!", style=ft.TextThemeStyle.HEADLINE_MEDIUM),
-        alignment=ft.alignment.center,
-        width=200,
-        height=200,
-        bgcolor=ft.Colors.GREEN,
-    )
-    c2 = ft.Container(
-        ft.Text("Bye!", size=50),
-        alignment=ft.alignment.center,
-        width=200,
-        height=200,
-        bgcolor=ft.Colors.YELLOW,
-    )
-    c = ft.AnimatedSwitcher(
-        c1,
-        transition=ft.AnimatedSwitcherTransition.SCALE,
-        duration=500,
-        reverse_duration=100,
-        switch_in_curve=ft.AnimationCurve.BOUNCE_OUT,
-        switch_out_curve=ft.AnimationCurve.BOUNCE_IN,
-    )
-
-    def animate(e):
-        c.content = c2 if c.content == c1 else c1
-        c.update()
-
-    page.add(
-        c,
-        ft.ElevatedButton("Animate!", on_click=animate),
-    )
-
-ft.app(main)
+
+```python reference
+https://github.com/flet-dev/examples/blob/example-polishing/python/controls/animations/animated-switcher.py
 ```
-  </TabItem>
-</Tabs>
+
 
 ## Properties
 

diff --git a/docs/controls/appbar.md b/docs/controls/appbar.md
@@ -14,43 +14,11 @@ import TabItem from '@theme/TabItem';
 
 ### AppBar
 
-<Tabs groupId="language">
-  <TabItem value="python" label="Python" default>
-
-```python
-import flet as ft
-
-def main(page: ft.Page):
-    def check_item_clicked(e):
-        e.control.checked = not e.control.checked
-        page.update()
-
-    page.appbar = ft.AppBar(
-        leading=ft.Icon(ft.Icons.PALETTE),
-        leading_width=40,
-        title=ft.Text("AppBar Example"),
-        center_title=False,
-        bgcolor=ft.Colors.SURFACE_CONTAINER_HIGHEST,
-        actions=[
-            ft.IconButton(ft.Icons.WB_SUNNY_OUTLINED),
-            ft.IconButton(ft.Icons.FILTER_3),
-            ft.PopupMenuButton(
-                items=[
-                    ft.PopupMenuItem(text="Item 1"),
-                    ft.PopupMenuItem(),  # divider
-                    ft.PopupMenuItem(
-                        text="Checked item", checked=False, on_click=check_item_clicked
-                    ),
-                ]
-            ),
-        ],
-    )
-    page.add(ft.Text("Body!"))
-
-ft.app(main)
+
+```python reference
+https://github.com/flet-dev/examples/blob/example-polishing/python/controls/navigation/app-bar/appbar-simple.py
 ```
-  </TabItem>
-</Tabs>
+
 
 <img src="/img/docs/controls/app-bar/app-bar.gif" className="screenshot-40"/>
 

diff --git a/docs/controls/audio.md b/docs/controls/audio.md
@@ -25,101 +25,22 @@ import TabItem from '@theme/TabItem';
 
 ### Autoplay audio
 
-<Tabs groupId="language">
-  <TabItem value="python" label="Python" default>
 
 :::note
 Autoplay works in desktop, mobile apps and Safari browser, but doesn't work in Chrome/Edge.
 :::
 
-```python
-import flet as ft
-
-def main(page: ft.Page):
-    audio1 = ft.Audio(
-        src="https://luan.xyz/files/audio/ambient_c_motion.mp3", autoplay=True
-    )
-    page.overlay.append(audio1)
-    page.add(
-        ft.Text("This is an app with background audio."),
-        ft.ElevatedButton("Stop playing", on_click=lambda _: audio1.pause()),
-    )
-
-ft.app(main)
+```python reference
+https://github.com/flet-dev/examples/blob/example-polishing/python/controls/audio/audio-autoplay.py
 ```
-  </TabItem>
-</Tabs>
 
 ### Audio with playback controls
 
-<Tabs groupId="language">
-  <TabItem value="python" label="Python" default>
-
-```python
-import flet as ft
-
-url = "https://github.com/mdn/webaudio-examples/blob/main/audio-analyser/viper.mp3?raw=true"
-
-def main(page: ft.Page):
-    def volume_down(_):
-        audio1.volume -= 0.1
-        audio1.update()
-
-    def volume_up(_):
-        audio1.volume += 0.1
-        audio1.update()
-
-    def balance_left(_):
-        audio1.balance -= 0.1
-        audio1.update()
-
-    def balance_right(_):
-        audio1.balance += 0.1
-        audio1.update()
-
-    audio1 = ft.Audio(
-        src=url,
-        autoplay=False,
-        volume=1,
-        balance=0,
-        on_loaded=lambda _: print("Loaded"),
-        on_duration_changed=lambda e: print("Duration changed:", e.data),
-        on_position_changed=lambda e: print("Position changed:", e.data),
-        on_state_changed=lambda e: print("State changed:", e.data),
-        on_seek_complete=lambda _: print("Seek complete"),
-    )
-    page.overlay.append(audio1)
-    page.add(
-        ft.ElevatedButton("Play", on_click=lambda _: audio1.play()),
-        ft.ElevatedButton("Pause", on_click=lambda _: audio1.pause()),
-        ft.ElevatedButton("Resume", on_click=lambda _: audio1.resume()),
-        ft.ElevatedButton("Release", on_click=lambda _: audio1.release()),
-        ft.ElevatedButton("Seek 2s", on_click=lambda _: audio1.seek(2000)),
-        ft.Row(
-            [
-                ft.ElevatedButton("Volume down", on_click=volume_down),
-                ft.ElevatedButton("Volume up", on_click=volume_up),
-            ]
-        ),
-        ft.Row(
-            [
-                ft.ElevatedButton("Balance left", on_click=balance_left),
-                ft.ElevatedButton("Balance right", on_click=balance_right),
-            ]
-        ),
-        ft.ElevatedButton(
-            "Get duration", on_click=lambda _: print("Duration:", audio1.get_duration())
-        ),
-        ft.ElevatedButton(
-            "Get current position",
-            on_click=lambda _: print("Current position:", audio1.get_current_position()),
-        ),
-    )
-
-ft.app(main)
+
+```python reference
+https://github.com/flet-dev/examples/blob/example-polishing/python/controls/utility/audio/audio-player.py
 ```
-  </TabItem>
-</Tabs>
+
 
 ## Properties