Implement App Open Ads in Flutter | Android & iOS | AdMob

AdMob App Open Ads are full-screen ads that appear when the user comes from the background of the app or while switching screens. It provides a better user experience. It loads quickly and shows immediately. Ultimately, it generates high revenue with the full-screen content and seems to be monetizing app start-ups or reopening the app.

In this article, we will see how to implement app-open ads in your Flutter project with a full example. Before we dive into coding implementation, we will see the use of app-open ads in the Flutter app.

 

 

 

Why do we use app-open ads in Flutter?

There are several advantages to using app-open ads in your Flutter project.

1. High Visibility: While the user opens the app, it appears on the screen in full-length starting of the app and becomes more interactive for the user.
2. User Experience: It provides the opportunity to show ads without disrupting the user experience.
3. Smooth Integration: It loads quickly while starting the app. You can show it while loading some components or widgets on the screen.

How do I implement AdMob App Open Ads in Flutter?

To implement admob app open ads into your Flutter app, please follow the step-by-step guide below:

Step 1: Add package to the pubspec.yaml file

Open the pubspec.yaml file. Add the google_mobile_ads package under the dependencies section.

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.6
  google_mobile_ads: 5.1.0

Step 2: Add header file in main.dart file

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';

Step 3: Initialize Google Mobile Ads SDK

MobileAds.instance.initialize();

Step 4: Initialize the _appOpenAd object of the AppOpenAd class

AppOpenAd? _appOpenAd;

Step 5: Load and Show App Open Ads

void loadAd() {
    AppOpenAd.load(
      adUnitId: adUnitId,
      request: AdRequest(),
      adLoadCallback: AppOpenAdLoadCallback(
        onAdLoaded: (ad) {
          print('$ad loaded');
          _appOpenLoadTime = DateTime.now();
          _appOpenAd = ad;
        },
        onAdFailedToLoad: (error) {
          print('AppOpenAd failed to load: $error');
        },
      ),
    );
  }


//Show ads when i open my phone 

  void showAdIfAvailable() {
    if (!isAdAvailable) {
      debugPrint('Tried to show ad before available.');
      loadAd();
      return;
    }
    if (_isShowingAd) {
      debugPrint('Tried to show ad while already showing an ad.');
      return;
    }
    if (DateTime.now().subtract(maxCacheDuration).isAfter(_appOpenLoadTime!)) {
      debugPrint('Maximum cache duration exceeded. Loading another ad.');
      _appOpenAd!.dispose();
      _appOpenAd = null;
      loadAd();
      return;
    }
    // Set the fullScreenContentCallback and show the ad.
    _appOpenAd?.fullScreenContentCallback = FullScreenContentCallback(
      onAdShowedFullScreenContent: (ad) {
        _isShowingAd = true;
        debugPrint('$ad onAdShowedFullScreenContent');
      },
      onAdFailedToShowFullScreenContent: (ad, error) {
        debugPrint('$ad onAdFailedToShowFullScreenContent: $error');
        _isShowingAd = false;
        ad.dispose();
        _appOpenAd = null;
        setState(() {
          _isShowingAd;
        });
      },
      onAdDismissedFullScreenContent: (ad) {
        debugPrint('$ad onAdDismissedFullScreenContent');
        _isShowingAd = false;
        ad.dispose();
        _appOpenAd = null;
        loadAd();
        setState(() {
          _isShowingAd;
        });
      },
    );

    _appOpenAd!.show();
  }

Step 6: Modify AndroidManifest.xml

<manifest> 
          <application> 
                      <meta-data
                               android:name="com.google.android.gms.ads.APPLICATION_ID"
                               android:value="ca-app-pub-3940256099942544~3347511713" />
          </application> 
</manifest>

Step 7: Modify Modify info.plist

<key>GADApplicationIdentifier</key>
<string>ca-app-pub-3940256099942544~1458002511</string>

Step 8: AdMob App Open Ads in Flutter With Example (Full Code)

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  MobileAds.instance.initialize();
  runApp(const AppOpenAdsApp());
}

class AppOpenAdsApp extends StatelessWidget {
  const AppOpenAdsApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'App Open Ads',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      debugShowCheckedModeBanner: false,
      home: const AppOpenAdsPage(title: 'App Open Ads Admob Flutter'),
    );
  }
}

class AppOpenAdsPage extends StatefulWidget {
  const AppOpenAdsPage({super.key, required this.title});

  final String title;

  @override
  State<AppOpenAdsPage> createState() => _AppOpenAdsPageState();
}

class _AppOpenAdsPageState extends State<AppOpenAdsPage>
    with WidgetsBindingObserver {
  //Code for App open Ad
  /// Maximum duration allowed between loading and showing the ad.
  final Duration maxCacheDuration = Duration(hours: 4);

  /// Keep track of load time so we don't show an expired ad.
  DateTime? _appOpenLoadTime;

  AppOpenAd? _appOpenAd;
  bool _isShowingAd = false;

  String adUnitId = Platform.isAndroid
      ? 'ca-app-pub-3940256099942544/9257395921'
      : 'ca-app-pub-3940256099942544/5575463023';

  @override
  void initState() {
    super.initState();
    loadAd();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    super.didChangeAppLifecycleState(state);
    switch (state) {
      case AppLifecycleState.resumed:
        print("app in resumed");
        showAdIfAvailable();
        break;
      case AppLifecycleState.inactive:
        print("app in inactive");
        break;
      case AppLifecycleState.paused:
        print("app in paused");
        break;
      case AppLifecycleState.detached:
        print("app in detached");
        break;
      case AppLifecycleState.hidden:
      // TODO: Handle this case.
    }
  }

  bool get isAdAvailable {
    return _appOpenAd != null;
  }


// Copy and paste loadAd() function from Step 5
  
// Copy and paste showAdIfAvailable() function from Step 5

  

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.deepPurple,
        foregroundColor: Colors.white,
        title: Text(widget.title),
        centerTitle: Platform.isAndroid ? false : true,
      ),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[],
        ),
      ),
    );
  }
}

Step 9: Run the project!

Output for Android device and iPhone 15 simulator

 

 

Conclusion

Implementing App Open Ads in Flutter can help you generate high revenue among the other ad types. It is very easy to integrate into your project. It displays combined interstitial ads and rewarded video ads. It also provides a great user experience while displaying it full screen. Follow these article steps provided with examples.

Frequently Asked Questions(FAQs)