Earning with Ad using Flutter | BannerAd

i'm quite sure that you want to know how to earn that extra money with your flutter application stay tuned in this video as i'm going to show you the admob integration on both android and ios platform in less than 10 minutes hi my name is abzul and welcome back to channel codex in this particular video i will show you how to use banner ad so let's get started let's create our brand new flutter application and initially as i always do i'm going to get rid of all the comments and then i will move this home page to other files so that we can bifurcate what is the main method and what is the home page all right so meanwhile i'm doing this all setup stuff you can go ahead and give this video a like and if you haven't subscribed hit the subscribe button right now all right so so far we did the setup now it's time to integrate the plugin and the plugin which we are going to use is google mobile ads which is now in stable release 1.00 right and you can just copy paste this command and it's going to get you the latest version of google mobile ads perfect right now the package is added it's time to initialize now we will go to the main.dart file and you can find the method main over here just write these two lines of code where we say that make sure that flutter framework has initialized properly and then initialize the mobile ads sdk and if you have missed the auto import this is the place from where mobile ads dot instance dot initialize come from and to your surprise we have already completed 10 of the ad setup and now what we're gonna do inside our home page state i'm going to create instance of our banner ad because we are working with banner ad i will just create one instance i'm just declaring it i'm not even initializing over here and we need one helper who's going to tell us whether the ad has loaded or not and for that purpose i'm creating one boolean so once the ad has loaded we're gonna display on the interface otherwise we'll be just uh showing some dummy or like we will not be even displaying that widget right okay so let's go ahead and do the initialization part so for that i'm going to override the init state and this is the most important part of the video like 40 of the video is how you initialize your ad do you remember the banner ad we created on top yes now we are going to initialize with some value so we are going to assign a banner add instance over here and now it requires some parameter so there is a different type of size you can display in banner ad like full banner large banner and there's other types as well so i'm going to choose a normal standard banner over here then what is going to be the add unit id so this is the id which you generate on your admob account but for the testing purpose you can use test ids which is inbuilt like this is a sample application given by google so you can use that and then there's a listener which will give you different events and then there's a request like if you want a certain kind of ad you want to ignore certain kind of ads those information you can provide inside request now you're already aware that listener is what is going to give you all the different events of the ad like when the ad got initialized is there any error happen when initializing is the uh like user has clicked on that ad so all those event you're gonna get over here and what we are concerned about is on loaded method so when the ad gets loaded that time we will capture the event and also if there's any error happened while loading the advertisement because of like uh maybe your id has expired or some some other reason if it got uh you know failed to load so we're gonna get that response back the ad and the error details perfect so we talked about the listener which is the most important part here now let's go ahead and change the flag once the ad has loaded so here i'm going to write is add loaded true of course it will be inside set state so that we can update the user interface with the advertisement so we have initialized the banner ad now banner ad is ready with us we just have to call one method which is the load method so once your object is initialized you're going to call the load method and this will start the engine of mobile ads and you're gonna get the events inside the listener and let me tell you that we have completed 50 of this video now we're going to just put the add widget somewhere in the hierarchy either you can put inside your page or at the bottom of the screen or maybe below the app bar but there's a guideline where you should be displaying your banner ad so i'm going to put inside the bottom navigation bar which is like the most uh you know clickable area so that user can tap on it and at the same time it doesn't distract user like they can read the content on top and it doesn't distract in between the content so the simple thing we are gonna do a check whether the ad has loaded or not and if it is loaded then we gonna display the banner ad inside a container and there's a reason behind using a container wrapped with the add widget because the add widget doesn't know what is the size gonna be that information is there inside a banner ad because you have you may have a specified full banner or normal banner stuff like that right so we're going to use the add widget which is like the core widget of this tutorial and we're gonna define what ad we are going to show which is banner ad and that's pretty much it we are done with you can say like uh 70 of the tutorial where we are we we are done with the flutter side i can say now we'll be just doing the admin setup and you know platform setup thing so you have to go to the google admob site and create a new application if you don't have any and inside that it's very simple setup you just have to provide the platform which you are creating for whether this is hosted on play store or app store or not and then specify a name for your application it's that simple and once you create application you have to create add unit and now this ad unit depends on what type of ad you can display because we are working with banner so i will choose banner specify a name and bam this is your information secret information so make sure you don't share with others the first one which you see is your app id and the second one is your ad unit id which we have used the test version inside our application so we have the setup ready for android let's go ahead in the android folder and first i'll be going inside the app and within the app there's a build.gradle so in this build.gradle there's information like what is the minimum sdk what is the compile sdk so you have to make sure that your minimum is set to at least 19 or above and compile sdk whatever latest you have at the time of recording 31 is the latest so i'm going to keep that and then after that we are going to the manifest file which is inside app inside source you will find android manifest at the end where application tag is closing just before that you can add another metadata and you have to specify here the application id which is the first id when you created your ad unit one last thing we have to do inside android that you have to change your kotlin version because the version of compile sdk and the google mob sdk which we are using it's not compatible with the older version of kotlin so just tweak it with the version it works with you and we are all done with the android side let's go ahead and give it a run and see how does it work so i'm giving it run let's see the finger crossed whether it's running or not still compiling hopefully it will run soon all right so here we have still loading and perfect the ad has loaded a big round of applause for you guys now if you are ios hater you can leave the video right now because i'm going to show how easy it is to set up for ios similar way we're gonna create application we're gonna create ad unit this time we are creating for ios of course and you're gonna copy this information which is your app id and add unit id now you have to go to the ios folder okay go inside runner and then you have to visit this info.plist which is kind of a manifest for ios and you just have to put this dictionary like this key value pairs inside dictionary and that is it literally that is it and you can just give this application a run on ios platform and let's see how does it look on iphone or i should say iphone simulator jokes apart let's see how does it look okay it's so easy to integrate banner ad inside your application you just have to do a little bit of configuration on the admob side and then on the platform for android and ios and it's done let me know in the comment section below if you would like to see a video on other type of ad and for other videos on flutter topic you can check these two videos right here hit the like button and subscribe the channel if you haven't already i will see you guys in the next one

Channel: CodeX

Views: 4,158

Keywords: flutter, tutorial, how to, android, ios, ui, admob, banner ads, flutter ad, google_mobile_ads, latest package, mobile ads, flutter tutorial, ad tutorial, android banner, ios banner ads, ads flutter, large banner, interstitial ad, video ad, mobile ad, codex, flutter admob

Id: WIp5ATit_d0

Length: 9min 51sec (591 seconds)

Published: Wed Dec 01 2021