AdBanner

The AdBanner widget is used to show an advertisement banner inside your app. The AdBanner widget may display texts, images, and other rich media such as video ads. Our AdBanner widget uses Admob which is an Ad network from Google.

AdBanner

Prerequisites

Before you start adding the AddBanner widget, you'll need to add the API keys.

Adding AdBanner to your project

Showing AdBanner From AdMob comprises of following steps:

1. Adding AdBanner widget

2. Assigning Ad Unit ID

3. Enabling test ads

4. Testing ads

1. Adding AdBanner widget

To add the AdBanner widget to your project:

1. Add the Column widget from the widget tree or from the canvas area.

2. Drag the AdBanner widget from the Base Elements tab (in the Widget Panel) or add it directly from the widget tree.

3. Move to the property editor and scroll down to the Ad Banner Dimensions section and adjust the Width and Height property.

If you leave the Width property empty, AdBanner will take the full width of the screen.

Adding AdBanner widget

2. Assigning Ad Unit ID

The Ad Unit ID is the unique identifier given to every ad on Admob. You can get this by creating a new ad unit from your Admob account.

To assign the ad unit Id:

1. Go to the Admob account dashboard, click Apps on the left side menu and select your app.

2. Select Ad units and then click on the Add add unit.

3. Select the Banner Ad.

4. Enter the Ad unit name.

5. Click Create ad unit.

6. Copy the ad unit ID (the second one) and then click Done.

7. Paste it into the Android Ad Unit ID input box.

8. Similarly, create, copy and paste Ad unit for the iOS app as well.

Assigning Ad Unit ID

3. Enabling test ads

To prevent the risk of your AdMob account ban, it is best to enable the test ads while you are still developing the app.

To enable the test ads:

1. Select the AdBanner Widget from the widget tree or from the canvas area.

2. Move to property editor and scroll down to the Ad properties section.

3. Checkmark the Show Test Ads. Uncheck it only when you are about to publish the app.

Enabling test ads

4. Testing ads

You can't test Ads in Run Mode, It can be only tested on a real device or emulator. For that, you will need to download the code and run it in your IDE.

Here are the instructions for setting up your machine to test the downloaded code on a real device or emulator.

To test Ads:

1. Open and Run the app from your preferred IDE.

2. See the Banner ads appearing on the screen.

Testing ads

Changing the properties

The Properties Panel can be used to customize the behavior of your AdBanner widget.

Add padding

Here are the instructions on how to add padding.

Adjust the alignment

Here are the instructions on adjusting the alignment.

Show/Hide AdBanner

Please find the instructions to show/hide the widget here