Easily implement ads into a Flutter app

ads

this package will utilize the plugin, firebase_admob, so to quickly and easily implement ads into a flutter app.

easily implement ads by example

in the first example listed below, it takes only three lines of code, to get a banner ad displayed in your app. all that’s required of you is the ‘admob id’ you got when you signed up for an adsense account. the id listed here is a ‘test id’ offered by google and is to be used during development. of course, keep yours confidential, but when using yours during development, supply instead the second parameter, testing, to the init() function. doing so, as you see in the example below, and setting it to true will bring up only ‘test ads.’

admob by google

if you’ve yet to get setup for admob, go to this website, https://firebase.google.com/docs/admob/, after downloading this file. you’ll need your ‘admob id.’ again, test id’s are supplied by the plugin to be used during development since using your own id would violate ‘admob by google’ policy. i mean, you can’t be clicking ads on your own app, don’t you know! that’d be cheating!

for android, modify androidmanifest.xml

a common error you may encounter when trying this package out is google complaining that the admob was not properly initialized. merely follow the directions below to resolve this:

just three lines of code

it’s best practice to call the ‘ads’ init() function in a state object’s inistate() function, and to call its dispose() function in the state object’s corresponding dispose() function. the third function call is showbannerad() and, as the name implies, it does just that.

beta you bet!

again, this ‘ads’ library currently uses the plugin, firebase_admob, which is, as of this writing, still in beta. as such, banner ads can only be positioned at the top or the bottom of the screen, animation is limited, the ads come in a infinite set of sizes. lastly, ‘native ads’ (i.e. ads displayed on ui components native to the platform) are not yet supported.

you’ve got options

anyone who’s read my past articles knows i’m always looking for options. we software developers love options, right? well, of course, using this library, you’ve got options.
you can see, in the second example below, along with the required ‘admob id’, you’ve got nine other settings you can optionally use to describe the kind of ads you may wish to be associated with your app.

ten options to initialize and display an admob banner ad.

‘setter’ your options

so you see, you can supply these options directly in the init() function. however, you could also specify just one or two individually before showing your ads. i’m always looking for options:

there’s getters and setters

of course, as well as setting them, you can readily retrieve the values of these settings if you need to for one reason or another. below, you can see there are just as many getters as there are setters in this ‘ads’ class. and so, you or another developer working on another part of the app have ready access to all the settings currently available by this ‘ads’ class and consequently currently available by the firebase_admob plugin.

it’s all static

as you can deduce by now, this ‘ads’ class is using only static members and methods. this means they can be accessed or changed any time and anywhere in your app. makes it that much easier to deal with ads in your app.

and the number of the counting shall be…three

there are three types of ads currently offered by the firebase_admob plugin. there’s the traditional banner ad, the interstitial or full-screen ad that covers the interface of their host app when opened, and finally, there’s the video ad that also covers the screen when opened and then returns to the app when closed.

it’s an event!

looking inside the plugin, we see it watches for seven separate events when it comes to the banner ad and the full-screen ad. everything from the much-called ‘loaded’ event to the ‘impression’ event. which i think fires each time an individual ad is displayed in your app. i’m not certain however as there’s not much api documentation for this plugin at the time of this writing either.

with video ads, there are eight events made available to watch out for. events are triggered, for example, when the video opens, when the video starts to play, and when the video has completed running. there’s also an event that rewards the user for viewing the video.

listen and earn!

since the plugin supplies a whole bunch of events, i’ve implemented no less than eleven event listeners in this library. look at the example below. the ‘ads.eventlistener’ is the granddaddy of event listeners for this library. with all the events the plugin watches out for, you can use this event listener to catch the ones you’re particular interested in. it applies to the types of events shared by all three types of ads.

listen up!

again, you have three types of ads, and so, instead of using that ‘granddaddy’ listener above, each has its own set of event listeners. there’s the bannerlistener, the screenlistner, and the videolistener. as you know, the banner ad and the fullscreen ad use the same set of ‘mobileadevent’ events while the video ad has its own set under the event type, ‘rewardedvideoadevent’. this means you can break up your event listeners by the type of ad if you want.

let’s get specific

however, you know me, there’s other options. again, that ‘granddaddy’ event listener could get a little messy – what with possibly a very long switch-case statement and all those mobileadevent options. how about not just targeting the type of ad, but instead targeting one particular event? how about assigning any number of event listeners to just one particular event? how about that?
yes, you can assign as many listeners as you want to a particular event. you or someone else can. for example, someone else on your team working on another part of your app may also need to know when an ad is opened. below, we’ve got two listeners that both fire when the banner ad is clicked on and opened, we’ve got another when the user is leaving the app to then view the ad, and the last one when the ad from the banner ad is closed, and the user is now returning to the app. how about that?

as you’ve likely suspected, the full-screen ad also has the same array of event listeners like the banner ad. again, there’s seven separate events you can individually assign an event listener – and as many listeners as you like at that. how about that!

finally, you guessed it, the video ad also has all the event listeners needed to catch each of all the possibly events currently issued to it by the firebase_admob plugin-eight events as of this writing. below, there’s an example of how to ‘reward’ a passed amount when the user has finished viewing a video.

clean up after your ads

display ads do take up resources. this ‘ads’ library therefore provides you the means to clean up after yourself when you may want to close your ads at some point for some reason. also, you’re free to hide and then show them again if you like. you’re able to ‘clear’ any listeners at any point as well – either individually or in one fell swoop!

it’s all in the setup

as you see in the example below, you’ve options galore! you can setup all three types of ads with the one-time call to the init() function or individually because each type has their own ‘set’ function: setbannerad(), setfullscreenad() and setvideoad(). why would you do such a thing? who knows! what am i…a mindreader?! maybe you’ve got different plans for each type of ad. regardless, you’ve got that option.

a flutter example

the pub website offers an example on how to implement the firebase_admob plugin. i’ve included that example in the following gist, admob in flutter example. however, you guessed it, this example instead uses the ‘ads’ library to demonstrate ads in a flutter app. below is the main.dart file found in the example. i’ve highlighted where the ‘ads’ class library is used.

conclusion

this library was offered to you merely to make your life a little easier when it comes to displaying ads in your app. it may have its short-comings, but this simply is my way of contributing to our fledgling flutter community. flutter is the way to go in my opinion, and sharing code is one way to help make this community grow and go forward.