Implement Banner Ad between Listview items in a flutter. || Ads between listview in a flutter.

If you are looking for a way to monetize your Flutter app, one option you may want to consider is banner ads. Banner ads are relatively unobtrusive and can be placed between listview items in your app without disrupting the user experience too much.

In this tutorial, we’ll learn how to implement banner ads in a Flutter app. We’ll be using the Google AdMob service to load and display the ads.

First, we need to add the required dependencies to our pubspec.yaml file:

dependencies: flutter: sdk: flutter # Add the following line: firebase_admob: 0.9.3+9

Next, we need to create an Ads class that will manage loading and displaying the ads. The Ads class will contain an initState() method that initializes the AdMob service and a dispose() method that disposes of the AdMob service when the widget is removed from the widget tree:

import ‘package:firebase_admob/firebase_admob.dart’; class Ads { // Initialize the AdMob service final _service = FirebaseAdMob.instance; StreamSubscription _event; // Creates a new Ads instance and loads an ad banner Future load() async { _event = _service // Calls event listener onAdLoaded () .onAdLoaded().listen((AdEvent event) { print(‘Banner ad loaded.’); }); await _service..initialize(appId: FirebaseAdMob.testAppId) ..loadBannerAd(BannerAdTargetingInfo( keywords: [‘flutter’], // Non-Keyword targeting info childDirected: false, testDevices: [], ) ); } // Calls event listener onAdFailedToLoad void _onAdFailedToLoad(int errorCode) { print(‘Banner ad failed to load with error code $errorCode’); } // Calls event listener onAdClosed void _onAdClosed() { print(‘Banner ad closed.’); } // Disposes of the AdMob service when the widget is removed from the widget tree void dispose() { _event?.cancel(); } }

In order for our Ads class to work, we need to add some code to our main.dart file. First, we need to import the Ads class:

import ‘package:flutter_tutorial/ads.dart’;