Flutter Google Ads

hello everyone and welcome to coding orbit in this video i will show you how to implement a banner ad inline banner ad and interstitial ad as well as a rewarded video ad i'm not sure you can hear him but he's talking okay so let's get started so i have created the skeleton project for this tutorial currently we have text here add will be placed here this will be replaced by a banner ad then we have show interstitial ad and then show rewarded video ad and then we will implement an inline banner ad inside this list of view this is a list of unit builder it has this style an icon and text here so first things first we need to add a library to our project so let's go to pub.dev and inside here search for google mobile ads and then click the first one and then go to installing and copy the dependency and go to android studio again go to pubspec.tml and add the dependency inside the dependencies here click pub.get and now close popspace.tml and wait for it to finish okay so second thing we need to do is we need to go to this link i will keep this link in the description box and we need to scroll a little bit then we need to add this metadata inside our manifest file for android so let's go to android and open this app open src open the main and open android manifest and add it down here now we need to replace this value with a real value but because we are testing the ads now we wouldn't put a real value we would put a sample value so we will copy this value from here also we will copy the sample id and paste it here so after we do that we need to go and do the same step for ios so click on ios here and copy this or you can click from here to copy so we will go to the ios folder expand it expand the runner and then open info.plist and add this now we need also to replace this value so let's go to the android again and copy it from here and paste it here now we will continue implementing that so let's start implementing our apps first thing i want to do is we need to initialize the library we have to say mobile and dot instance dot initialize and after that we need to specify maximum amount of attempts so we have to make a constant and max attempts is equal to three now inside the state class we will create our ads first let's create a late banner add and let's call it static add and then create also a late banner ad and this one in line add and let's create a function to initialize these two so first let's create a void load static banner add inside the function we would say static add is equal to banner and inside here we need to specify a couple of things first we have to specify add unit id and since we are using test add we have to say banner add that test unit add and we have to specify a size so we say add size dot banner and then we have to specify a request so the request we have to specify an ad request so let's create an ad request above so we create it for all our ads so inside here i would say static const add request and call it request is equal to add request sorry and request okay inside the add request we can specify something like keyword keyword actually are what are the user doing here so you can specify a list of strings inside here and then you can specify a content url if you have a website or something for your app you can specify the url so google and ads would know what your app is all about and finally you can specify non-personalized ad you can specify this to true or false it's basically personalize it for the user or not so we can say for example false or true here and don't forget a semicolon here and all of these are none required you can comment them and we have many properties inside here also so let's give our banner add a request here so we would use this request and then finally we have to specify a listener and we would say banner add listener inside here we have on add loaded and this takes an add and inside here what we need to do is we need to set the state and let me just to create a bool and say static add loaded is equal to false and i will create another bool for this one also and call it inline add load it so inside the unloaded ad here we need to say static add loaded is equal to true and then we would have unfailed also an ad failed this takes an ad and it takes an error as well so here we can say add the dispose and then we can for example print the error message we are having we can say add failed to load error the message and close this and down here i'm having an error i forgot a semicolon here okay so after that we say static add dot load and that's it that's how we load a banner ad so let's create another function so we load the inline banner ad so i will copy this and paste it down here and instead of saying load static banner ad i would say load inline banner add and change this to inline add and change this to inline and and instead here let's change it as well inline and loaded so now let's implement this in our widget first i have a single child scrolling view then inside it i have a column and the first widget of the column is the container and i'm saying text ad will be placed here so i need to change this text to an add widget and widget inside here we can specify the add so this add would be the static add and then we have to specify a width if we want to so the width would be static add dot size dot width the to double and the height as well static add the size dot height dot dotable and let's also implement the inline ad so here i have two buttons we will implement it in the wide and then we have a list of you that builder inside the list of view we have a list tile returning a text and an icon so first i want to check something what i want to check i want to check if inline and loaded and and let's say index is equal for example 2 5 and inside here what we need to do okay we need to have two equals equals okay so inside here what we need to do actually is we need to return an add widget but if we return an ad widget here and the index is equal to five so the index five will never appear so here we will return a coulomb inside the column will have children and inside the children i will copy the above container so we don't write it twice okay so inside the container instead of add widget static ad this time what we will use is inline add and change this as well okay we can if we want to we can not specify alignment and after the container we have to return also the style but before we return our style let's add a size box as well and give it a height of maybe 20 and add the list tile okay so and don't forget a semicolon here and else here and put this inside the else okay now if we run it it will show up but before we run it let's add another if here for static and loaded if a static ad loaded we will have this container so if we run our application now hopefully everything will work fine and it doesn't our app doesn't work so you may wonder why because we forgot to call these functions before in the init state so let's call them load static banner add and load inline banner add as well now we run our application and let's see if it works hopefully okay they do so now our static banner ad appears at the top and the inline banner ad appear as well so but as you can see this space doesn't match with this space so let's get rid of the size box we added between these two items and save it and okay it looks better now so let's start implementing the interstitial ad so let's go up and let's create an interstitial ad and make this nullable and let's call it enter station and let's create an integer call it max or enter special attempt is equal to zero and i will show you in a while why we are creating this integer like the max attempt and interstitial attempt so let's create a function for the for the interstitial under these let's create void create enter station add and it's different than creating a banner ad so here we would say enter special add dot load and inside the load would just an ad unit and since we are using a test ad so we will use interstitial test ad unit and we have to specify a request so we will specify the same request we used for the banner ad and after the request we have to specify callback and this callback takes interstitial ad callback it takes one ad loaded inside it and an ad failed to load so the on add load it takes an add and inside here we would say this time interstitial our local variable is equal to this add and then we would say interstitial attempts is equal to zero and in the field this time it doesn't take an add and an error it just takes the error so we would say interstitial attempts we would increase them and would print the error failed to load and let's say error dot message and close it and we have to say enter special add is equal to null and then after all these we have to make an if statement let's say if this interstitial attempt is equal or less than the max attempts sorry attempts what we will do we will actually recall this function otherwise we wouldn't call it so let's add a semicolon here and a semicolon so actually this function will get called by the entity state but when we click on the button show interstitial ad we will create another function that handles this botonic lick so here we'll create void show enter studio add and inside here what we will do is first we need to check if this interstitial is not null so if it's null what we will do will print something let's say trying to show before loading and then return otherwise if it's not null we definitely know that this interstitial ad is not null so we can first unwrap it so we can say this interstitial ad dot and full screen content call back is equal to full screen content pullback inside it we have different methods we have undismissed an add failed on edgewood so in add short this takes an ad so we can for example print add showed and we can say this ad and we have on dismiss so let's add it as well and add dismiss and this takes ad as well so what we need to do here we need to say add dispose okay before continuing i notice an error we have to replace this with comma instead of semicolon and we have to put brackets here and we have to take this inside then after add the dispose we would call create add again and after the dismiss we would have on failed so this takes an add and it takes an error so inside it would say add the dispose as well and we can print failed to show the ad and this ad and then we would call create interstitial ad again okay so and add a semicolon here now what we need to do we need to say interstitial add and first envelope it that show and after it would say interstitial add is equal to null why we're setting it to null here because after we show it we are creating a new instance of it in the dismiss function and also if it's foiled to show we are creating a new instance of it so definitely we have to set it to null now what we need to do first we have to call this in the init state and then we will go down to the button which is show interstitial ad and inside the under press of it we just have to say show interstitial ad and rerun our application now to see how it appears so hopefully it will run okay the banner ads run but let's wait a little bit for it to load and then click on show interstitial ad and finally you are seeing the interstitial ad so last thing we have to do is we have to show the rewarded video ad so let's implement the rewarded video ad let's go up and create an instance for it under the interstitial add let's create reward did add and make this nullable as well and say rewarded add and then let's create another integer for rewarded and attempt is equal to zero as well now rewarded add and i think we have a d here okay rewarded add and interstitial are pretty much the same so i will copy this function and this as well so i will copy this this function and paste them here and instead of create interstitial i will type create rewarded okay so instead of interstitial here again we will say rewarded add and we would change this as well and here would say rewarded and load callback and here would say rewarded add load callback and just change a couple of things here we would say rewarded add and here say rewarded attempts and change this as well and change this as well and change this as well and change this as well okay so instead also of creating interstitial here would say create rewarded that and that's it for the create method so let's go to the show method and would here rewarded and check for the rewarded here instead of interstitial rewarded ad and also rewarded rewarded add okay so basically also this change it to create rewarded ad and this to create rewarded ad and this rewarded ad okay now this the show is different from the previous detail here we have different thing here we have to specify the ad and the reward so inside here for example we can say print reward video and say uh reward sorry we were that we have amount and we have type so let's paste them reward that type this time sorry type and say rewarded is equal to null and forget a semicolon here now what we need to do is to take this function and call it on the button show rewarded ad so inside here we'll just paste it and put semicolon and now we run our application and hopefully it will work as well so let's wait for it a little bit to load the ads okay so let's clear this console and click on show interstitial and it show it to us and let's see if we can see the rewarded video ad let's say click on show rewarded video ad let's go back to the console trying to show before loading and let's try it again trying to show before loading let's try it one more time show rewarded video trying to show before reloading let me check if we called it in the init state and we didn't create rewarded add and rerun the application now and hopefully it will appear this time so let's wait a little bit to load the banner ad first and then i think the interstitial ad would work okay it does and let's see if the rewarded video ad now works or not and it does one more thing guys before we finish this video after we finish implementing our ads we don't want to publish the app with test ads we use test ads to test if they are working or not but after we finish implementing them and we want to publish the app we have to go to admob google admob and we have to create an account there then we will come to the apps and add a new app now you must select the platform if it's android or ios then if it's listed in the app stores or no our app currently is not listed so we continue then we provide the package name app name we can call it testing flutter ads and click add app now after we finish creating the application in admob we have to add ad units first if we go here as you can see in in rewarded video ad and interstitial and banner ads we used to say in the ad unit here rewarded video ad the test ad unit id now when we want to publish we don't use that we have to create a unit id for it and we have to specify the unit id for this ad for all of the ads not only the rewarded the video ad we have to specify all the unit id for all the ads so after we finish creating the application we'll click on done then we would add an ad unit so click on add unit choose if it's banner or rewarded you can choose whatever you want for example let's select a banner and enter a name flatter banner for example and click on create ad unit and this is the application id so you have to copy this id with the c definitely and this id we have to change it in both ios and the info p list and in the also an android in the manifest folder so you go to the manifest folder manifest file and paste it here instead of the sample one so after we do that we have to create an ad unit for each and every one so this is the banner id now uh for the banner i think uh it's here so instead of using this test unit id for the banner we use our unit id actually and for also the static banner we do the same here instead of using the test id we use the this one so you create another test unit for the interstitial and for the rewarded then you click done or create another whatever you want so this was all and thank you guys for watching and if you liked the video don't forget to subscribe and like and comment down below

Channel: Coding Orbit

Views: 489

Keywords: flutter, flutter tutorial, flutter ads, flutter admob ads, admob ads, flutter google ads, flutter google admob ads, flutter admob, how to use ads in flutter, flutter banner ad, flutter interstitial ad, flutter rewarded ad, flutter admob banner ad, flutter admob interstitial ad, flutter admob rewarded ad, flutter rewarded video ad, flutter admob rewarded video ad, how to implement ads in flutter, flutter monetization, flutter admob tutorial, flutter mobile ads

Id: 4oLBxuBjGfI

Length: 27min 15sec (1635 seconds)

Published: Sat Nov 20 2021