Display Admob ads in your Flutter Android or iOS app
Tags: flutter
Published: 2023-01-19 22:57:15

**For Android (for iOS, see at the bottom)**

-0. Sign up to Admob & docs [here](https://developers.google.com/admob/flutter/quick-start).

-1. Install the Flutter google_mobile_ads [package](https://pub.dev/packages/google_mobile_ads) and follow the few instructions [here](https://pub.dev/packages/google_mobile_ads/install). 

-2. Initialise the library, like so:

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

  runApp(const MyApp());
}
```

-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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nsugvhi4o01btbcqfj8r.png)

Let's follow the instructions [here](https://developers.google.com/admob/android/quick-start#import_the_mobile_ads_sdk). Even better, follow them in the Flutter [section](https://developers.google.com/admob/flutter/quick-start#banner) 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"/>
```

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](https://developers.google.com/admob/flutter/banner/get-started). 

-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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c091ka8hfyxta7zxo8kr.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2kvw49ervt80tjkye04m.png)

-8. Google offers test **ad units** (not app ids..) for test, see [here](https://developers.google.com/admob/android/test-ads#sample_ad_units).

-9. Do not build in Chrome, it will only work on Android or iOS (see issue [here](https://github.com/googleads/googleads-mobile-flutter/issues/746)).

-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',
      ),
```

**For iOS**

-0. Sign up to Admob & docs [here](https://developers.google.com/admob/flutter/quick-start).

-1. Install the Flutter google_mobile_ads [package](https://pub.dev/packages/google_mobile_ads) and follow the few instructions [here](https://pub.dev/packages/google_mobile_ads/install).

-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>
```
^ this id is a test one, which can be found [here](https://developers.google.com/admob/ios/test-ads) among others.