P l e a s e   w a i t . . .   P o u r i n g   C r e a t i v i t y
App Monetization: How To Add Google Ads In Flutter App | Iqonic Design  App Monetization: How To Add Google Ads In Flutter App admob

App Monetization: How To Add Google Ads In Flutter App

The framework of Flutter mobile app development is fiercely flourishing in the development community with its mark as one of the leading cross-platform app development tools of this age. As more and more companies and development communities are choosing to use Flutter to create their mobile apps, you will be seeing a rapid rise in those apps in the market.

App monetization is the concept that was coined up as the demand for creating mobile apps peaked. In this piece of article, we will take you through steps for integrating and monetizing your Flutter app with Google Ads and various major Ad formats, using which you can optimize the Ad revenue. 

Google Ads Integrated in Flutter

Google Mobile Ads integrating into a flutter app, the first step towards displaying Admob ads and earning revenue. As the integration is complete, you can choose an Ad format to follow the detailed implementation steps.

SetUp

  1. Firstly, in the pubspec.yaml of your flutter app, add the below mentioned dependency:
App Monetization: How To Add Google Ads In Flutter App Add Dependencies1 1024x427

2. Before loading your Google Ads, ensure that your app initializes the Mobile Ads SDK by calling this –

App Monetization: How To Add Google Ads In Flutter App Mobile Ads SDK1 1024x951

Platform Specific Setup

iOS

Update the Info.plist file to add the 2 keys and value.

  1. Start by adding the GADApplicationIdentifier key with a string value of your Google Admob’s app id in the info.plist file.
  2. Follow the next step by adding the SKAdNetworkItems key with Google’s SKAdNetworkIdentifier value of cstr6suwn9.skad network
  3. Open the info.plist file.

<key>GADApplicationIdentifier</key>

<string>Add your google admob App Id</string>

<key>SKAdNetworkItems</key>

  <array>

    <dict>

      <key>SKAdNetworkIdentifier</key>

      <string>cstr6suwn9.skadnetwork</string>

    </dict>  </array>

Android

  1. Open the Andoridmanifest.xml file.
  2. Add this line.

<manifest>

    <application>

        <meta-data

            android:name=”com.google.android.gms.ads.APPLICATION_ID”

            android:value=”Add your google admob app ID”/>

    </application>

</manifest>

Type of Ads Format

  • Banner Ads
  • Interstitial Ads, 
  • Native Ads 
  • Rewarded Ads

1. Banner Ads

Banner Ads are those rectangular ads that you see at the top or bottom of your smartphone screen. Banner ads remain on screen while your app users interact with the app. You can then refresh automatically after a while. 

Instantiate a Banner Ad

a. Banner Ads requires the adUnitId, an AdSize, an AdRequest, and a BannerAdListener.

Baner Ad | Iqonic Design  App Monetization: How To Add Google Ads In Flutter App Banner Ad1 1024x458

Banner Ad Events

App Monetization: How To Add Google Ads In Flutter App Banner Ad event1 1024x1012

Load Banner Ad

App Monetization: How To Add Google Ads In Flutter App Load Banner Ad1 1024x304

Display Banner Ad

Display banner Ad | Iqonic Design  App Monetization: How To Add Google Ads In Flutter App Display Banner Ad1 1024x304

 2. Interstitial Ads

Interstitial Ads are full-screen Ads that cover the entire interface of an app until closed by the user for a full display of Ads. 

Load an Interstitial Ad

Load an Interestial Ad | Iqonic Design  App Monetization: How To Add Google Ads In Flutter App Load an Interestial Ad1 1024x643

Interstitial Ad events

Interstitial Ad events | Iqonic Design  App Monetization: How To Add Google Ads In Flutter App Interstitial Ad events1 1024x766

Display Interstitial Ads

Display Interstitial Ads | Iqonic Design  App Monetization: How To Add Google Ads In Flutter App Display Interstitial Ads1 1024x304

3. Native Ads

Native Ads are typically those customizable ads that you can match with the look and feel of your Flutter app.

Add Listener

Add Listener | Iqonic Design  App Monetization: How To Add Google Ads In Flutter App Add Listener1 1024x971

Load Native Ad

Load Native Ad | Iqonic Design  App Monetization: How To Add Google Ads In Flutter App Load Native Ad1

Display Native Ad

Display Native Ad | Iqonic Design  App Monetization: How To Add Google Ads In Flutter App Display Native Ad1 1024x600

Rewarded Ads

Rewarded Ads are those Ads that reward users for watching them. They are usually short videos and interact with playable ads, polls, and surveys. 

Loaded Rewarded Ads

Loaded Rewarded Ads | Iqonic Design  App Monetization: How To Add Google Ads In Flutter App Loaded Rewarded Ads1 1024x648

Rewarded Ad Events

Rewarded Ad Events | Iqonic Design  App Monetization: How To Add Google Ads In Flutter App Rewarded Ad Events1 1024x575

Display a RewardedAd

Display a RewardedAd | Iqonic Design  App Monetization: How To Add Google Ads In Flutter App Display a RewardedAd1 1024x311

Reference :- google_mobile_ads 0.13.4 

Summary

There is no better way to monetize your mobile app than Google’s AdMob. Besides being the easiest way to monetize your app, the Flutter framework can let you integrate Google AdMob into your app’s development ecosystem. We are sure now you can integrate Google Ads properly on the screen. The main aim of this guide was to show how you can configure AdMob in your Flutter app project and then display various Banner Ads.