Skip to content

Ads#

Displaying Google Ads in Flet apps.

Based on the google_mobile_ads Flutter package.

Platform Support#

Platform Windows macOS Linux iOS Android Web
Supported ❌ ❌ ❌ ✅ ✅ ❌

Usage#

To use ads controls add flet-ads package to your project dependencies:

uv add flet-ads

pip install flet-ads  # (1)!
  1. After this, you will have to manually add this package to your requirements.txt or pyproject.toml.

Example#

import flet_ads as fta

import flet as ft


def main(page: ft.Page):
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
    page.appbar = ft.AppBar(
        adaptive=True,
        title="Mobile Ads Playground",
        bgcolor=ft.Colors.LIGHT_BLUE_300,
    )

    # Test ad unit IDs
    ids = {
        ft.PagePlatform.ANDROID: {
            "banner": "ca-app-pub-3940256099942544/6300978111",
            "interstitial": "ca-app-pub-3940256099942544/1033173712",
        },
        ft.PagePlatform.IOS: {
            "banner": "ca-app-pub-3940256099942544/2934735716",
            "interstitial": "ca-app-pub-3940256099942544/4411468910",
        },
    }

    def handle_interstitial_ad_close(e: ft.Event[fta.InterstitialAd]):
        nonlocal iad
        print("Closing InterstitialAd")
        page.overlay.remove(e.control)
        page.overlay.append(iad := get_new_interstitial_ad())
        page.update()

    async def handle_interstitial_ad_display(e: ft.Event[ft.OutlinedButton]):
        nonlocal iad
        print("Showing InterstitialAd")
        await iad.show()

    def get_new_interstitial_ad():
        return fta.InterstitialAd(
            unit_id=ids.get(page.platform, {}).get("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_ad_close,
            on_impression=lambda e: print("InterstitialAd impression"),
            on_click=lambda e: print("InterstitialAd clicked"),
        )

    def get_new_banner_ad() -> ft.Container:
        return ft.Container(
            width=320,
            height=50,
            bgcolor=ft.Colors.TRANSPARENT,
            content=fta.BannerAd(
                unit_id=ids.get(page.platform, {}).get("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"),
            ),
        )

    page.overlay.append(iad := get_new_interstitial_ad())

    page.add(
        ft.OutlinedButton(
            content="Show InterstitialAd",
            on_click=handle_interstitial_ad_display,
        ),
        ft.OutlinedButton(
            content="Show BannerAd",
            on_click=lambda e: page.add(get_new_banner_ad()),
        ),
    )


ft.run(main)

example_1

Packaging#

The following are to be done when packaging an app that uses the flet-ads package.

Specify AdMob app ID#

Specify your AdMob app ID, without which your application might crash on launch.

You can specify the app ID in two ways:

  • In your pyproject.toml file:
# for Android
[tool.flet.android.meta_data]
"com.google.android.gms.ads.APPLICATION_ID" = "ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"

# for iOS
[tool.flet.ios.info]
GADApplicationIdentifier = "ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"
  • In your build command from the terminal:
# for Android
flet build apk ... --android-meta-data com.google.android.gms.ads.APPLICATION_ID=ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy

# for iOS
flet build ipa ... --info-plist GADApplicationIdentifier=ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy

Test Values

AdMob provides app and ad unit IDs for testing purposes:

  • AdMob app ID: "ca-app-pub-3940256099942544~3347511713"
  • BannerAd.unit_id on Android: "ca-app-pub-3940256099942544/9214589741"
  • BannerAd.unit_id on iOS: "ca-app-pub-3940256099942544/2435281174"
  • InterstitialAd.unit_id on Android: "ca-app-pub-3940256099942544/1033173712"
  • InterstitialAd.unit_id on iOS: "ca-app-pub-3940256099942544/4411468910"

Remember to replace these values with your own when you're ready to package your app.