DEV Community

Pere Sola
Pere Sola

Posted on • Edited on

Display Admob ads in your Flutter Android or iOS app

For Android (for iOS, see at the bottom)

-0. Sign up to Admob & docs here.

-1. Install the Flutter google_mobile_ads package and follow the few instructions here.

-2. Initialise the library, like so:

void main() {
  WidgetsFlutterBinding.ensureInitialized(); // this line
  MobileAds.instance.initialize(); // and this line

  runApp(const MyApp());
}
Enter fullscreen mode Exit fullscreen mode

-3. When you run the app (flutter run), you will probably be asked to bump the minSdkVersion to 19 (as of 19/01/2023). Do so in android\app\build.gradle.

-4. When you run the app again, you will probably get a warning about Google Mobile Ads SDK initialized incorrectly:

Image description

Let's follow the instructions here. Even better, follow them in the Flutter section of their docs.

-5. A little gotcha is that

<meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"/>
Enter fullscreen mode Exit fullscreen mode

goes inside <application></application>tags, I got the location wrong the first time because there are other meta-data tags inside <activity />.

-6. Follow the implementation instructions for the app unit you want, in my case Banner.

-7. The ad unit needs to be created from you Admob dashboard - each one of them seems to have an id. You need to add it to the instantiated BannerAd:

Image description

Image description

-8. Google offers test ad units (not app ids..) for test, see here.

-9. Do not build in Chrome, it will only work on Android or iOS (see issue here).

-10. You may not want to write your app id in the manifest file because you are committing the file to source control. In that case, you can pass env-variables at build time and write come code so they can be used in your code at run time. More instructions here: https://medium.com/flutter-community/how-to-setup-dart-define-for-keys-and-secrets-on-android-and-ios-in-flutter-apps-4f28a10c4b6c The env variables are passed at build time like so: flutter build --dart-define SUPER_SECRET_API_KEY={ADD_THE_API_KEY_HERE} --dart-define SOME_OTHER_STUFF={THE_WHATEVER_YOU_NEED_HERE}. Same for flutter run. If you need to access a variable in your dart code, you access it with:

const String.fromEnvironment(
        'NAME_OF_ENV_VARIABLE',
        defaultValue: 'whatever_is_the_default_value_if_it_fails_somehow',
      ),
Enter fullscreen mode Exit fullscreen mode

For iOS

-0. Sign up to Admob & docs here.

-1. Install the Flutter google_mobile_ads package and follow the few instructions here.

-2. Open ios\Runner\Info.plist file and add the id of your AdMob app in the file like so:

<key>GADApplicationIdentifier</key>
<string>ca-app-pub-3940256099942544~1458002511</string>
Enter fullscreen mode Exit fullscreen mode

^ this id is a test one, which can be found here among others.

Top comments (0)