DEV Community

Pere Sola
Pere Sola

Posted on • Edited on

5 1

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.

Sentry growth stunted Image

If you are wasting time trying to track down the cause of a crash, it’s time for a better solution. Get your crash rates to zero (or close to zero as possible) with less time and effort.

Try Sentry for more visibility into crashes, better workflow tools, and customizable alerts and reporting.

Switch Tools

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay