Transcripts
1. Course Introduction: Are you a developer looking to integrate AdMob
into Florida lab? Welcome to this exciting
course on optimizing your app's user experience and enhancing its rich
through AdMob. In this course, we will explore how to maximize the potential of your app by integrating AdMob Ads seamlessly
into your app's design. We will start by setting up an ad mobile account and configure it into
a Florida Project. From there we will explore all types of ads such as banner, interstitial, interstitial
video rewarded, native app open. At. By the end of this course, you will have a comprehensive
understanding of how to use AdMob to enhance
your app's visibility, improve user engagement, and increase your app's
overall success. Don't miss out on
this opportunity. I hope you are ready to
take your flutter add allotment skills
to the next level without wasting any more time. Let's get started.
2. Setup AdMob account: Hi, welcome to the very
first video of the course. Go to admob.google.com. You can either sign up for your new account or signing if you already haven't
AdMob account. Just for information. For ads in Android and
iOS, we use AdMob. And for website and YouTube, you have to use AdSense. In simpler words. Admob is used for mobile
applications only. Now. Just suppose you click on sign up and you are new
to add them up. Then you have to sign in
with your Google account. And then you will ask
a couple of things. That is, do you want
customized health and performance are what is your
payment country and T3, then your account
will be reviewed. And after that, you can continue
to go in your dashboard. When you sign in, you will send to your
dashboard like this, that is Google AdMob. And here you can see your
earnings and everything. So obviously if you
have a new account, then you won't see
exactly this screen. You will have some thing
like ready to take off, get started, like this. Okay? So make sure you continue
from here only after you have a Google AdMob account. The next step is to add our app bar that simply go to this app section
and click on Add. We will choose Android since
this is a Windows software, but this is the processes
same for iOS as well. Here platform choose Android. And the next thing is, is that App listed on
a supported App Store. So obviously I don't have that app published
to the Play Store, so I will just write no. Then click on Continue here. Anterior app name,
which can be anything, not necessarily to
enter your name. This is just part of the dashboard purpose
here. I will name it. Monetize this user. My dresses provides you some useful data
that will help you understand aggregated user
behavior in your app. So if you are serious about
making money indefinitely, make this on and simply
click on Add app. You have successfully
added this, okay, click on Done. So as you can see, our Android app is
added successfully. So that's it. In the next video, we will create our
flutter project. Thank you.
3. Setup Flutter Project: So now let's create
our Florida Project. Go to your desired directory and open up a
terminal here, right? Flutter. Create, AdMob. I will just name it the same. Monetize. Flatter. It's up to you. Press Enter. Okay. And now I will go into the folder and
delete this Windows, Linux, mac OS, web. And test. As I don't need
these directories, I'm not building
it for Windows or Linux and I'm also not
doing the testing. And so simply open up this folder in your
desired text editor. I will be using VS Code. Okay, I did dumb mistake. I should go into this folder and
type code and dark. It will open the
file in our VS Code. Okay, So it is looking cleaner as I have removed
all the other files. Now, the first thing
I will do is add that dependency for that. Go to bob dot dev and search
for Google mobile ads. So this is the official
plugin by Google. Copy it. Go to your project that in
your Pub spec dot YAML file. Simply paste it in
the dependencies. And just save. Alright, Florida pub get. Okay. I believe this is the front because I have
deleted boilers and on, but at least above will work. Now we have to make some Android-specific changes or you can say configuration
for the, for this plugin. Go to Android app. Gradle. And insight
default config. Change minimum SDK
version to 19, and add multi decks to true. Next thing we have to do is add the Meta data to
Android manifest file. So go to this source, then main. And you can see this
AndroidManifest.xml. We have to add Application ID and L. To
get these information. Your first let's see what is the Redmi documentation
you can go to add mob. See. You can see all
the prerequisites and all that form setup. Here you have to update
the Android manifest. Copy this Meta data line. Go to your Android manifest. And below here, below this line, I will just simply paste it. Okay. Make sure you basically
inside this application, to get them AdMob App ID, you have to go to
AdMob dashboard. Click on Apps settings. You have this ID. Just copied and paste
the value here. Okay? The next thing we have to do is initialize
the mobile ads SDK. This needs to be done only once, right, before running the app. So go to main dot, dot here. Firstly, rigid. They're binding.
Ensure initialization. Then make it a sink. And right of it. Let's see, we have the
plug-in installed or not. See. You will have the Google
mobile ads, okay? Yeah, We had a very mobile ads. Dot instance, dot initialize. After this. Let's run this application
in debug mode. You can either use an Android emulator or
connect your own real device. So this is my real device. I have connected it via USB. We'll just write
start debugging. Obviously it's the first time. It will take some time. Just wait till then. Also, for more information, you can read this documentation, see it's written how to
initialize the mobile ads. And so if you have any doubt, you can also read this
step-by-step and understand. Let's wait for few minutes. I guess it is taking
some more time. If you didn't get any
air in the terminal, then you have successfully, and for good mobile
apps, mobile ads, SDK. Let's see you in the next video. Thank you.
4. Enabling Test Ads: Hi, As you can see, our app is running successfully. That means there is no
error in the configuration. Let's get started by
enabling test ads. It is important to enable test
ads during development so that you can click on them without charging
Google advertisers. If you click on too many ads
without being in test mode, you risk your account being
flagged for invalid activity. There are two ways
to get test adds. First is use one of
Google's sample adds unit, which is very easy. And secondly, use
your own ad unit and enable test device. That is, makes sure your own device is
configured as test device. And also remember,
Android emulators, NIOS simulators are
automatically considered, are configured as
there's devices. Now the first one that is sample test device,
it's very easy. I will just write AdMob
test ads in Google. And you can see the
first line that is enabling tests that's Android. So here you can see we have the sample ad unit ID
for all types of ads. So you can use this
ID and test in your device so that you make sure that it is
working perfectly. As these ads units are not associated with your
own AdMob account, there is no risk of your account generating
invalid traffic. And also make sure you
replace these ideas with your own idea before
publishing to the App Store. This is a first way. The second way is that if you want to do more
rigorous testing with production looking at, you can configure your own
DALYS as a test device and use ad unit ID is that you have created
in the AdMob dashboard. Or that also you can read here, see how to enable test devices. You can test device
in the AdMob UI. You can use this method, or you can use, you can use this method as well. It is add your test
device programatically. Here. We have to go to the AdMob, then click on Settings,
then there's devices. As you can see, I have
already one test device. You can click on,
Add this device. Mine is my A1 than Android. And how to find that
advertising ID? For that? You have to go to settings. Then Google ads. And you can see your
advertising ID. So simply tag ID. It's the dv by dt. Dad. Clave, BB. Steve, finite slender. The 0, K. And gesture. You can just flick
twice like this. It's an ad inspector
to test ad serving on your test device without
any coding. Just save it. I hope the idea is not wrong. Okay? So this is how you
enable test devices. If you want. You can read
more in this documentation. If you didn't understand, you can go and they have written step-by-step
the same method. So that's it for this video. In the next video, we will create our
first ad unit.
5. Creating AdHelper Class: Hi. So the kind of advertisement presented in your app is
determined by that ad unit. You should create ad
units for each type of ad that you plan
to have in your app. Remember if you just
want to learn and test, then you can also use
this sample test ideas. But if you want, then you
have to create ad units. So go to your AdMob dashboard. On the left-hand
side in the app. Click on monetize flutter app. Then here you have the ad units are in
the app review also, you can see the ATR
first ad unit averages. Click on it. Here you can see
different options. I will choose banner for
now and add unit name. We'll just say my
first banner ad and simply click on Create unit. Now you will be able to
see your ad unit ID. Similarly like this. If you want, you can create ad unit for your
iOS app as well. If you have the iOS
app configured. Also, make sure in order to, in order for your banner ad
unit to work and show ads, you have to add your payment information
in your AdMob account. See in my dashboard, you can see your
account is approved. But if your account
is new and then you might see something like
missing payment information. And then you have to enter
your payment information. And after that, you will see different notification like your account is being verified. It will take 10 h for that to get verified
and then you will be able to use real ads or else you can use that test at
your account is enabled. Again, I will just say go and test ads Android. Now. Let's go to your VS Code. And to hold all the
correct ad unit ID is, I will create a new
file and name it, add helper dot, dot. So that in future if you want
to change any IDEs and all, you can simply make
changes in one file. You don't have to
take stress that your code is
scattered everywhere. Let's create a class. Add helper. Then I will like aesthetic. But my third, so
that we don't have to create an instance
of this class. Banner ad unit ID like this. Then I will check that
platform as well. Suppose you are using iOS, that is why it's better to choose the check their platform. Here, return. Then else, if platform is iOS, then return. And in that platform is unknown, simply true when either
through and supported, either Support then lead form. I will start by using it. Test add for now. Is copy it, paste it here. And for iOS, AdMob. Ios. Simply copied that
desk at for iOS as well. And paste here 0 k. This is the add helper class. In the next video, we will start working on displaying banner ads in
our flutter application. Thank you.
6. Bottom Banner Ad Screen: Hi, welcome back. Now let's work on
the UI a little bit. We will show a home screen. When the user opens the app. In the home screen, we will create buttons
for every type of ads and navigate to the screen
which will implement the add. Inside lib, create a new
folder and name it screens. And inside screen,
create a new file. Home screen, dot dot. Let's Creating Basic, rigid. We'll import material. Then I stayed less rigid. Home screen. Then it will return a scaffold. That app. But I hope you know
these basic soft later. Because our focus will
only be on the ads. I will limit my days. Your App Center title. True? In the body. Let's have a
center rigid than child. Then column. In that children, I will have
all the buttons one-by-one. We'll start by creating
an elevated button. On press will be
nothing right now. And child will be const text. Bottom. Banner ads. The main access alignment to center so that it is in
the center of the screen. Save it. Let's assign this home
screen as the main screen. We'll just, in my app, I will remove this home screen. I don't need it. Then here I would like
const home screen. It, it has imported
our home screen. I will write the name. Okay, monetize and
remove the debug band. Let's restart the app. We have our home screen here. This is the bottom
banner ads button. Now it's finally time
to add our first add. This will be a banner ad, and we will display it at
the bottom of the screen. It will always be
visible to the user even as they're scrolling
through that page. So inside the screens,
create a file, name it, bottom
banner, ad dot, dot. Here. Let's create a
stateful widget. Anyway. Bottom banner, ad screen. Don't just write binary adder like this because
these are already used in that are
in-built packages. First thing we will do is it will first like
the scaffold here. And basic AB bar on text, banner ads. And then centered title to true. Then the body. Body, you can simply
write anything. I will just send the bottom banner ad. Okay, here it should be text cave. Before the user can see the ad, the ad has to be created
and then loaded. So for that, let's
create a variable here, which will hold the
reference to the add. Though it will be late variable, we will initialize it. Banner is import. Google ads. It says when. Bottom banner ad. Okay, this is a type of binary. It is coming from that package. And then we have
a Boolean to just check whether the ad
is loaded or not. Is banner ad. Load a is equal to false. It will repulse at the beginning or at
when the page loads. So to implement banner ad, we have to write a
function to load it. And I guess I will do
that in the next video.
7. Function to load Banner Ad: Hi, let's continue. So now in the bottom banner ad, we have to create a function that will reload
the banner ad for us. So here, simply write
future load banner ad. It will be an async function. Now we will initialize the banner ad bottom
banner ad variable that we have declared with
their banner ad instance. And see this banner ad instance
required some parameters. That is, we have the size. So size means what size
of the banner display. We will simply write ad size. Ad size, dot c. You have
banner, fluid, full banner. I will, I will choose banner. I will also show you
different sizes. Then you have the ad unit. Either you can use that test ad unit
like I will be using. We have the ad unit in
this ad helper class. So simply add, add helper. I will just imported
and helper, okay. And helper that
banner ad unit ID. It's indicting the name. It should be unit. Just a typo. Then we have the listener. So using listener, we can just check after the ad that is what, what is happening to the ad, whether it's loaded with, whether it's failed
to load like this. So it accepts
banner ad listener. And then here I will write
on banner ad loaded. See, it gives us an add on Add loaded. If the ad is loaded
and I will just set the state that is banner ad
loaded is equal to true. Then we have on Add to load. Then it gives us add
and edit as well. I will simply print to load banner ad and output that
either add a message. I will dispose this L 0 k, n in that request. We always have to simply write const add request like this. This should be constant. So these are the properties
which are required. And after the ad is initialized, we simply have to load it with this code bottom add dot load. So this is the function. I will again explain it. We're creating a
banner ad object and initializing the bottom
banner ad variable with it. We are passing in several
arguments to create a binary. Plus we are specifying
this dimensions of power. Banner ad says that by another will return data
and doing different size. As you saw, there are
other options as well. Then for the ad unit ID, we are using the add helper class to get
the binary unit ID. We are using that banner ad
listener to listen to the ads lifecycle events and perform
some logic when they occur. We are listening to
on Add loaded to find out when an ad loads
and when it does, we set our ys banner
loaded variable to true. We're also making sure that
if the ad fails to Lord, we call a disposal method on it to make sure we free
up the resources. Now to display ads, we need to make an ad request. So here we are providing this ad request object
as an argument. To do that. We aren't providing any
other arguments inside it. I also don't think
it's necessary, but if you want the keywords, the content URL,
all these things, then you can send it. And at the very end, we're calling the load method
on the bottom banner ad. This will load the
ad we created. Now, let's go to this body. And below this body, we will use that bottom
navigation bar to show that. First of all, we
will add is banner, ad loaded is true. Then we relate sized box. Then wait, I will
write bottom binary, add dot size, dot
width, and height. Similarly, bottom banner, red dots size that
height to double. So we are just changing
the height and width according to this
advertisement size. And in that child, we have to use this Add rigid, which has given us to Beida. See. This is given as two
dug by this package only. In the ad, we have to
write bottom banner ad. And if it is not loaded, then we will let const linear progress. All right, I guess
I'm doing it wrong. It should be below
the size box here. Linear progress indicator. So here we are finally
adding our add to the page. If you want to have a banner ad that's fixed to
the bottom of the screen. There are two ways to do it. If your app doesn't have
a bottom navigation bar, then you can simply add widget to this bottom navigation bar argument of the scaffold. If you do have a
bottom navigation bar, you can instead as IP
persistent for their buttons, arguments of the scaffold. So there are other ways as well. And always wrap this Add widget, something like a container or a size box to specify
the height and width. If you don't do that, dyad will take up
the entire screen. Now, we have this
load banner ad. We have to now call
it in the init state. Simply call it. And also remember to dispose
the ad that I banner. I think bottom banner ad. Dispose zero to
always dispose that. Add, sorry. Then finally, in the homepage, we have to navigate to the
bottom by Netscape navigator. Dot push that out. Simply material page route. Then context. And simply write bottom banner, ad screen. Save everything. And now let's check
if it's working. If there is some error. There, this linear
progress indicator, c, we have that test add here. This is a 468 into 60 test add. An suppose. You want to use a real ID. Then go to the
monetize ab ad unit, copy that i ne in
the Add Health, but I will change
it to the Real ID. And we start. And let's see what happens
when we're using a real Eddie. See, we have this real ad. Make sure you don't click on this ad because I believe
there is some issue. I have this does do I guess that test device
is not configured properly. So I will use a different
method as well. I have this ID with me. I will go to the main file. Here. Just wait. I will write wait. Mobile ads, dot instance, dot, update request
configuration. Then requests configuration,
does device ID. And I will paste the ID here, which I got in that console. Remember here. Then restart. Let's see. Now see, this is a real ad, but since you have
configured your devices, test device, it is showing
that test banner here. But earlier that does
banner was missing. I believe I have
not mentioned that. Test ID properly in
the AdMob console. But at least you can see how
the bottom banner ad looks. And I believe if you go
back and click again, you can see that. So that's it for this video. In the next video we will work
on the inline banner ads. Thank you.
8. Inline Banner Ad Screen: Hi, In the last video, as you saw that there
was some mistake, I Chegg and I got to nail that. I misspelled the advertising
ID in the AdMob UI. That is why the real
ad was shown to me. That is without the test
banner or this badge. But at least you
understood how we can programatically add or
configured test devices as well. You know, boat dove is. Now in this video, we will work on displaying banner ad
in an inline fashion. That is, what if you don't want to show an ad at the
bottom, navigation only, but also between ListView items or any of your other
widgets in the body. For that incites screen. Simply create a
new file and write inline banner ad, dot-dot. Import material. Great, they stayed full rigid. Name it inline. Banner, ad screen. K in here, return a
scaffold in the AB bar. Simply write it. We would go against
the next in line, banner centered at the true. Okay. Now here, since this screen will have ListView and
list, List View widget. So we have to create
variables, list variables. It is, it will
have type dynamic, sick items, empty list. Then I have, I will
have another list. Banner ad, banner ads. So this is so that we can
dispose it in the end. This is the data which
will be shown to use, including the ad as well
it is in these items, we will also insert that ad. You will understand
it step-by-step. Now similarly like before, let's create a function
which will return a banner ad in a
sized box widget, because earlier we were
just showing one ad. But here in this example
we will use three ads. So this widget has to return a size box with
the width and height. So the return type
will be sized box. Get banner, ad. We will create a new
instance of binary lead. Is it going to have different, different this is similar. Like before. We add size. Not banner. Ad unit will
be the same ad unit. Since it's a banner ad. That is why in that request it will
be const, add request. And in that listener it will
live banner ad listener. Then on Add loaded. If you want, you can blend banner ad loaded successfully. And suppose if the
ad fail to load. Lord, banner ad message. The comma. Then just add dispose here. Then after initializing
the banner ad, banner ad dot load, then I will add this banner
ad in that banner ads, not add banner ad. And then finally
return sized box with a red dot size dot width not to double dot size, dot height. The two double child will we add rigid and add will
be banner ad. Like this. We are returning an ad
with this function. Let's move forward. In that image state, you have to fudge. You have to first batch the data and insert in our item list. We're just creating dummy
data in this example. But you will also get the idea on how to work with
real databases. So here I relate the init state. I will use a for loop to
insert that dummy data. For int I is equal to zero. I less than two n t
I plus plus items, not Add Item number I plus one. That is, it will
start from one, Okay? This will add the item. But now I also want that binary to be inserted into the items
list at random positions. So far then I will
again create a loop. Int I is equal to zero, I less than three. That is, I only want
three ads, I plus, plus. Then I will add int. Random. Position is equal to random. This is coming from this
that Matt directory are, I wouldn't say not directly. It's inbuilt. Dot next int. It gives a random
integer from zero. I want it to the land. That is, it will give from zero. The row 219, that is one minus value is greater
than equal to zero, but less than ten. It will be less than
20, which will be 19. It's okay with me. Then I will get the ad. Banner ad is equal
to get banner ad. I will call this function. It will return the size box. And then I will insert that size box in the items
array using items dot insert, index will be random
position, and position. And element will be binary. So it will be inserted
at random positions. So we have the init state. So I guess the
video is very long. In the next video, I will continue working on this and complete the
inline banner ad. Thank you.
9. Show data in a ListView: Let's continue. We have the init state, we have the items. Now, as you saw that I
have this banner ads here, you might be thinking
why it is necessary if we already have the ads
in these items list, just so that I can
dispose the ads here. Like I will simply
write a for loop. Int I is equal to zero. I less than Banner Ads
dot length I plus, plus. And I will let the position the dispose so that all the three
ads are disposed. And if we're not separating
the ads here, again, it will be difficult to
get that adds items, that is the banner ads
from this item list, then you have to use
some different logics. So I believe it is
much more easier. Now it's time we showed
that banner ad as well as data using a list
view builder in the body. So here in the bill just
like body, then list view. Dot builder. Item count will be items,
array, dot length. Item builder will be
context in the x. Then we have the dynamic
data coming as some are size box and somewhat text index. And I will simply check
if data is sized box. Then return the data. Since it is already
in a size box, I will return a
list style leading. I will just give it a dummy. I can I can I can do and title text data. Just we already know
it's a string just to make sure to avoid
any error in future. So this is the body
and they need state. We already know that
the ad will be there. Now to navigate to the screen, go to Home Screen. And inside children, we
will create another button. It will navigate to
inline banner ad screen. And text will be in
laying banner ads. Remember, here we
are using that. In this inline banner, we are using the
same banner ad unit ID we use for the
previous bottom banner. While this is convenient
in our demo application, this is in the best
practice in production. What you should be doing
instead is creating separate ad units for every placement or
activity in your app. This will allow you to track the performance of
individual ad units. Okay, Let's go. We have this button,
I will click. Now, see, we have this first ad. You have this second and third. And now, if I go back, it was in fifth position. If I go back and again, go and say, See, it is now in the sixth position, it is now in the
11, and it is 15. So these are random positions. And obviously I'm using
this real add if you want, you can use them yet as well. That is for the banner ads. This is our first add. At least we are able
to show those ads. In the next module. We will work on that
interstitial ads. So thank you for
watching till here. See you in the next video.
10. Interstitial Ad Screen: Hi, welcome back. So until now we know how
to implement banner ads. Now it's time. We understand about
interstitial ads. Interstitial ads are
full-screen ads and that typically shown during
natural pauses in your app, such as moving to another page. You definitely don't
want to appear. When a user is in the middle
of an important task. Overuse of ads are
for ad placement can frustrate the user to the point of deleting your app
from your device. Inside screens, create
a new file and name it. Interstitial. Ads, green dot, dot. Okay. Let's create a screen for my daily early. Pull open and then create a state full rigid in the shin. Add screen. Now return a scaffold. And that's having an AB bar, AB. But that title cons text. In interstitial
and centered data. Through. In our implementation, we want to display interstitial ad. When a user taps back button
after completing a quiz, just assume that obviously
it's hypothetical, we're not building
a quiz application, but suppose you have a quiz. That quiz. The quiz is over and the user now is going back
to the homepage. Also to make it interesting, let's create a variable for the score and create a
function to get random value. So let's create a
variable. Then. If Panchen, I'm Chen name, get my score. And this will simply set the state and change the
code to a random value. So we will use a
random dot next int, and it should be 0-50 K. And let's call this function
in the init state. Get my score. Okay? In the body, Let's
create a UI which looks as if the user
has completed the quiz. In the body. Let's have a center
rigid than child. Main axis alignment. When x is alignment
that center children. Then I will have an icon. I can check size. Let's give it 100. Then. The text, glazed. Come blade dead. And that's heavy style. Textile. Bonsai is type D. Then we will show that score. Because our score variable
and right out of 50, Suppose then style, font size. Then let's have is sized
box to give some spacing. And then elevated button, which will simply display. Go back. Hey, save it. In the home screen, create a button so that we
can navigate to that page. Below in line banner ads, creative work done and name it. In. The shell, adds N here is interstitial ad screen. Save it and check out our app. See if we have the button here. If I click it, click on it. Then we go to the
interstitial ads screen and it is looking good. See, late night just
got three on the 50. If I go back, if I
click on this again, now I got 34 out of 50. So this was the UI of the
interstitial ads green. In the next video, we will create ad unit and also the function
to implement ADS. Thank you.
11. Function to load Interstitial Ad: Hi, welcome back. So similarly like banner ads, we can either create ad unit for interstitial ad or use
them more unit adds. Let's create an ad unit. Will go and add unit
than interstitial. My first interstitial, and then create, add unit. And simply click on Done. Now, in the ad helper class, create a new method for
in this tissue ard rich, it turns that
correct ad unit ID. So go to the Add helper here. You can just copy
this and paste. Here. They will
let get in there. The shell. This ad unit ID will be my AD, AD based it here. Also I will copy the test id. The iOS, just in case you have
an iOS device and save it. Now, next is and
interstitial ads clean. We need to create a
variable that will hold a reference to our ad. Here. In this shell, add. It will be null
in the beginning. Obviously it can
be null as well. This will be in a liberal. Next we have to create a
function that will load this and initialize
this variable. Let's go. Let's create different gen load in this dish intos d shell. And then let's start writing the code
interstitial and dark lord, know it accepts
these parameters. So now add unit
will be add helper. Interstitial ad unit ID. Requests will be same. Request. And load callback will be interstitial
ad load callback. And C, we have to specify
these two pedometers. And obviously this is a
full-screen ad that is, that is why there is no size. And I will explain this
code after few minutes, but let's write it first. On. Add load will get that
in this dish here and here. And if it's failed, then we get the editor. And it will simply print. We do load and in this dish, add that message. And I will change the variable to null
since it's an added. And if it's loaded, then I will add dark
screen contact content, full screen content
callback, screen callback. Now, we just said if
on Add dismissed. If the user dismisses, then we will just pop
that window navigate. They're not about this
since we are going back. That is why we are
pumping the context. Here. You can
dispose it as well. Let's see this, Yeah, This post that ad. And suppose if you want, you can again call this function to load
a new ad instance. Suppose you are not popping out the
contexts in that case. And below this full-screen, we'll simply saying this
add to that variable. Obviously this is called
only when the ad is shown and the user
dismisses a dead soy. We'll just print in
this shell and loaded. I will just explain
this code again. You may have already
noticed some differences. One chain is that instead of creating an
interstitial ad object, we're calling this load
directly here. Okay? Something's still look familiar, just like in that banner ad. We're providing the ad unit ID. We have the request parameter. And then we are calling the intestine share add load callback to perform
certain actions. So when an ad loads or
fails to load this, in the instance of
this interstitial add. We can add that stuff full
screen contact callback. That gives a callback for our own ads show
full skin contact. And then on Add dismiss full-screen contact on Add
Folder failed to show. So these are other things
which you can try if you want. Then obviously we're assigning
the add to our variable. And if it's failed to load, then we're just removing it. And remember, we cannot use the same instance
of the ad twice. So obviously, when it is shown, you, you have to dispose it. And then again
call this function to create a new instance and then only you
can use it again. So that's it for this video. In the next video, we will just call this
function and show our ad. Thank you.
12. Use WillPopScope Widget: So let's continue
working on this ad. We already know that ads must be loaded before
they are shown. So let's load this ad by calling this function
in the init state. Let's call it state. I think we already
have done it state. And we'll just call it there. What? We're going to create another
function for showing the interstitial ad only
vendor Back button is pressed. This button. So let's
create their function. Wide. On back. Pressed. If the shell variable
not equal to null, then the ad RLS. Simply, Bob does screen,
navigate the pump. I hope you understand
that if ADH is there, then the Advil shown, that, then the ad
will be displayed. And if the user
clicks that Dismiss, then it will automatically
pop the screen. And if there is no n, Then we will pump
the screen manually. And as always, we have to
dispose our ad, right? Interstitial ad, not
dispose. Can be nodes. That's why. Just remember, this load method keeps ad ready to be displayed
when the light comes, when the right time comes. And this dot show means
that if the ad is ready, then show it to the user. Finally, assign the function to the elevated button
on back. Pressed. Let's restart and go to
the interstitial ads. Let's see when our ad is loaded. I'm confused. Yeah,
interstitial ad loaded. Now, if I click on, go back, then see we
have the add here. If I click on Close, we navigate out of the screen. So this was the
interstitial ads. So it's good because
obviously this is another way of owning other than
the banner ads. Now, obviously our ad is working when we press that
go back elevated button. But what if the user navigates back using the back button
here on the app bar, are the physical
button in his device. Suppose if I click backward
in here, nothing will happen. Handle this kind of situation. Florida gives us a widget
known as we'll pop scope. So let's do that as well. In the scaffold. Let's elaborate with the rigid. It's really cool. And it has, we have done, right, what will happen? It's an, a sink. We'll just print back. But then blessed. And now we will call the unpack press function
and then return true. That is here. You can go back, you
can pop up the screen. So let's restart again and
let's see what happens. Now again, I will
click on screen. We'll wait till
the ad is loaded, our ad is loaded. Now, if I press this button, then see we have the Add here. And if I dismiss it, we navigate our support. If the user goes to the ad and directly click
the back button, the agonist not ready, then he will simply
call this else. That this navigator dot pop, at least in that way
that there will, there is no error in our code. So that's it. This is how we implement
interstitial ads. There is another thing that
is interstitial video ads, which we will discuss
in the next video. Thank you.
13. Implement Interstitial Video Ads: Hi. In this video we will talk
about interstitial video ad. And interstitial video ad is a full-screen video ad that should appear at natural
transition points within an app. These ads can be played automatically or can require
user interaction to start. In this stage shell
video ads are typically longer ads ranging from
5 s onwards in length. So this is just like
normal interstitial ad. Simply here in here on leader
video ads will be shown. So I will just show you how
to implement that quickly. Go to your ad helper. Here. Create another static method. I will name it interstitial
video ad unit. I will use that test ID. See interstitial video ad. Just copy it. Paste it. For iOS. Okay. For parties, we won't be
creating any new screen. We will just
implement that in the old In our previous
interstitial ads screen. Similarly like before. I will create an
interstitial ad. In this dish. It will be video ad. Now we will again,
creative and changes. We will create a
function to load the ad. I will just copy this, this one and paste it. Changed their name to video ad. Here, I will use that
unit, radio ad unit. Then what I will implemented is that this ad will be shown if the user
wants to play again. So I will create a
button to play again. And vendor, user this
switch, this ad. That score will be changed. That is, I will again
call the get my score. So here, I won't pop. I will just call, get my score. Then I will change the interstitial ad to null because I don't want to
show him the ad again. If he goes back, then after this, I will change the interstitial ad to null as well because
it is already shown. Then. In this case, I will again call this video
ads so that the user can, so that the user can
again plate if he wants. That is, again, the ad will be shown and he can he
score will be changed. So here it will be
interstitial video ad, video loaded, shared with you. And this will be variables, so don't confuse it. Here I am making normal
interstitial ad, none because I
don't want to show ad again while going back since he has already press
the Play Again button. This one, because as
signing a new video ad, just in case the
user play again. Hello, Kay, I hope
everything is fine. I will call this
in the init state. I will create another function. Show that interstitial video ad. Only when the play
button is pressed, we will create the
limit and also, but let's say right on. Layer again, breast not equal to null. We will show that ad. And suppose it is null, then we will simply
call that get my score. At least the user can play the game again even
if that is not shown. And then I will
call it a dispose. Several, dispose it below, create another button. I will give some spacing. Elevated button. Icon. I couldn't will be const, I can, I can start
suppose radio. Just dimension that
it's a video ad. Then label. Would it be const
text layer again? And here I will
call on Play again, pressed. And he started. Let's check out. If I click interstitial ads. Then let's see. We have the interstitial
ad loading. I don't know. Interstitial fluid
is there or not. Let's see. I will ligand play again. And see. We have this test ad,
which is a video. If I click on skip and go back, our score has changed. It is 30. And if I click on Play again, again, we will be
shown different ad. Let's see if that's
code changes. No, I guess there
is some mistake. We have the gut my score. Ads on layer again. This too shall video ad. Let's check. If I go here, then is 24. If I click on Play again, it's 34. Okay? That means it's working. And now if I click on go back, the ad won't be shown. Since I already have
shown him that. This is the video ad is there. But if I go to the Add
and click on Go Back, then we will be shown and add. Since as I told here, this ad can be video
as well as normal. So it's up to you
whether you want to implement interstitial
or interstitial video. If you are thinking how to
create ad unit for that, simply go to add unit. Since here you cannot say
interstitial video ads. You can select interstitial. And here, just uncheck text
only make video ad like this. But I have shown you the example
with this dummy ad unit. So that's it for the
interstitial video ads, or you can say interstitial ads. I hope you have learned a lot. Till now. We have
understood how to implement banner and
interstitial ads. In the future videos, we will implement
other types as well. Thank you.
14. Creating Ad Unit: Hi, welcome back. So now we will learn
about rewarded ads. And rewarded ads are
full-screen ads and typically opted into by users in order
to receive the reward. The reward can be anything
such as virtual coin on our extra life in a game that helps the user to
accomplish a task. Most of the steps for
displaying their rewarded ads are identical to the
interstitial ads, except while showing
that rewarded ads, you get a callback. If the user has under reward. And you can update it onscreen or in your
database accordingly. So inside screens,
create a file. Reward. You voted and screen. Now, let's import material. Then. Stateful widget, rewarded and screen scaffold. It will have the AB bar const text ads sanctified through. No. Let's create an ad
unit. Good day. Google Admin, console. Click Add unit,
then click on this, rewarded, not the better
one. This divided. My app. Reward amount will be one. And item I will just write held. Obviously, you understand
you could write coins, lives, whatever you want. Since I will build a UI related to the health or
health of the player, Suppose I have it in health. It will be increased by one. My first rewarded added. We add, create ad unit. Click on Done. Then. Create a video. Sorry, great, is that thick? Return rate? I will write. And unit ID. Then copy that evolved in Id. Paste it here. And as usual for iOS, copy that and paste it. Then. Go to the, well it adds clean. We will create a
variable to hold the reference rewarded ad. And then a Boolean
just to check, is rewarded and loaded
is equal to false. So I guess that's
it for this video. In the next video, we will create a function
to load the devoted. Thank you.
15. Load and Show Rewarded Ads: Hi. So let's continue and
create a function that will load rewarded add an initialize our this is
rewarded add variable. That code will be similar
to interstitial ad. Let's say void,
load rewarded ad. First of all, we'll
set the state two. Is revertant add
loaded to false. I know it's false, but again, just to make sure
divided ad, not load. Okay. So I will let add helper. T word in the ad unit. Request will be
const and request. Any word in the ad, call back. Unloaded, rewarded. And this grain to load. I'm going to give them
added node, add node, load, and then add at a rate that mistake
after the message. And just change the
variable to none. And suppose if ADH is loaded, then we will use a
full-screen dent callback. Here. I will just simply
use on an dismissed. And this means if the word
and is either canceled, our finished, any of them rewarded ad over. And this was really able to null since ad is over. And we will again
call this so that the user can use our
get the reward again. And outside this callback, invited and is able
to add, that is, suppose ed is loaded, set state is reward add
loaded is equal to true. And I will simply print rewarded and loaded
in the debug console. Just for us. Now, let's
work on the body section. Our concept will be
to increase the head. If the user watches and add a state variable to
hold the Health value. In health is equal to one. Suppose the user has only
one held in the body. And I did. Then child column main exists alignment main
access at Mendota center. Children know. What I want is to show the icon depending upon
the number of health. That is, a faculty is one, then only show one I can. For that to work. I will have a row rigid. It's main exercise will be
main exercise that minimum. We have that children. And within the Chilean, I will use a for loop. For int I is equal to zero. I less than health I plus plus. And output icon that is, I can, I can start. Health and safety. This is just an icon. Size 50 colored
colors, dark green. Okay? This will show that I can, with respect to
the Health value. Below this row,
uses sized whelks. High D, just to
give some spacing. Then I will write it text. It will simply show
that health value. And out of three that is maximum healthy can
achieve is three. Then again, having a size
box height, doing D. Then I will check if
head is less than three. If it is less than three, then we have to do something. Okay? Then I will check
if ADH is loaded, then show. And elevated button. Text will be const text. Watch. And doing these health. And our else. If, if ADH is not loaded, simply show a loading indicator. Set cooler. Said you learn
progress indicator. Okay. This is this. Now let's work on the else. If health is, as you can see, greater than three, then
simply write const. Text is at maximum. That is, he cannot
increase his health. Furthermore, I hope you have understood this code is just if else and
conditions, nothing else. This is for the UE. Now let's call the load rewarded
add in the init method. It's my third. Let's have the init state. I will call on channel, you can send my third. We're going to create
another function for showing that divided ad when the
user presses button. Okay, let's do it on. But then breast milk will simply show
rewarded and Dutch show. See. Here you can see something
new on user R&D world. So what will happen if
the user is reward? This is a function. And we get dirty word here. That is, it will be value one since we have
mentioned there one that does date to Harold plus equals, equal to reward dot amount. The two int. Remember, if you are
using dummy test add, the default value is ten. Here we have our
self mentioned one. That is why I'm directly using classical the bottom like this. And after that, simply dispose this pose our ad, an ad, dispose. So now assign this on, but then pressed
the button here, elevated button to watch the ad. And then in the home screen, create a new button. Navigate to the page. I will like anymore than ads. And it will be
rewarded ads screen. Kay? Let's keep our fingers crossed and see if
it's working or not. See we have this one icon here. And then the ad is loaded. It was showing the
progress indicator. Now, if I click on watch
ad to increase health, we can see this ad here. 1 s is there remaining, and C, reward granted. If I click on cross, then I have to ****, that is, my health
has increased. And again, new ad is a fringed. So if I click again, I will see another ad and this is test their demand
but not destined. But since my devices
with this device. And again, if I click on this, see three out of three is there. And now health is at maximum. We cannot watch ad again. So that means our rewarded
ads are working perfectly. And I believe this ad is the most useful for games
or any other stuff. Because here user will be
interested to watch the ad. We don't have to make him and watch ads
using banner and not because those ads can be
disturbing or you can say, the user won't like
the experience. But here they use every
definitely use it. Suppose you are
increasing the bullet. If it's a game, you can increase firing
bullets our lives or whatever. With this rewarded ads. So that's it for this video. In the next video, we will understand the other
types of ads. Thank you.
16. Implement NativeAdFactory API: Hi. In this video, we will
understand about native ads. In native advertisement,
also called, called as customized
sponsored content ads. These are the ads that matches
a application contents. E.g. a. App has a list of items being
displayed to the user. You can insert a native ads similar look as off
your list of items. However, it is not
possible to create a native UI components directly
using Theatre widgets. So we have to implement a native ad factory
for each platform. So that means it's
little bit complicated. I have to say it's not
directly straightforward, but let's start doing it. First step is create
a div add layout. We have to go to
our android folder, then app, then source, than men. Then address here. In this create a new
folder and name it layout. Okay? And inside layout,
create a file list. Native ad dot XML. Okay, Let's dial native. Add external. This is, this will be a basic list layer. Node data layout should match the visual design of
the user experience. For that platform
it's intended to. Now do understand more in you
have to search native ads, add more flutter, and
append these two links. First is this one. Here. You can understand what
a native templates. And this is a small
which we will implement. This. You have a medium
template as well. And here in this website
called ladder developer.com, you will understand each
and everything like this. See, we have created this
list style native ad. So obviously you have to copy
this and paste it there. I already have this. Ready, have this course. I will just copy it. Let's wait. I will just edit with Notepad. Copy all the code,
and paste it here. See, this is the code. If you want. Obviously
I will just, you can pause and check. I will go down slowly. I will show you how
to implement it. But these codes are given to us. As you can see here is
just copy and paste it. We have this for native temperate
implementation in doubt, C, M plate size and I'll only
two templates are there. November. Then after this list
style dot slash add XML, we have to create the list
style native ad factory class. That factory glass
is responsible for creating your view object
for rendering a native ad. So for that, again, we have to go to app, source main, then Kotlin. Then see we have calm example,
monetize flattered here, create a new file
and name it, list. Dial, native ad. But three, gate the Kotlin. Okay. Now. We have to use this code. See here, we have two As, as I told you, you have
to create this file. This is for Java,
but I will go down. See we have this Kotlin. We have this file here. Okay, yeah, let's tell
native Kotlin this one. So just copy and paste it. I have this line
of code as well. Just copy that code. And if you have any
doubt, definitely, I have the source code at
the end of the module. So you can just check it out. Here. We have to change this
to the package name. Our package name is
com dot example dot Monat die is flatter. So just make sure you check this line of
codes with your code. This returns the ad. Now finally, we have
to register them. Listed relative
add factory class. And instance of a
native ad factors should be registered to the Google mobile ads plug-in
before it can be used. So here you have to go to
this main activity here, and I will show you copy, paste it. I have to change the package
name to monetize flutter. See first we override config Flutter engine method
and clean up Flutter engine. Registered that list dilated add factory with a unique string ID. Here we are using list-style. This is the idea which we
will call in the ad as well. And we have to unregister
instance as well. And this code, as
I told you that you will find here as
well, see MainActivity. It is that you have
everything here. So this is not a concept. You can just copy and
paste the code and make sure that
your work is done. Obviously, if you want, you can go and try to understand each and
every line of code, It's up to you. But as I said, this was the only thing these
three changes you have to do in order to make it work. Okay, Next step, let's
create an ad unit. Go. We have this native advance. Select my first native
and create, ADD. And done. Then go to
the Add helper class. Copy, paste it, right? Native ad unit ID. I will first test
with this test ID. Copy paste. Copy paste. Okay, so that's it
for this video. In the next video, we will integrate the native app in our flood application. Thank you.
17. Function to load Native Ads: Let's continue. In
the last video, we have done so many configurations in
the android folder. So I have stopped that debug
mode and restart it again. And the app is
running successfully, so I guess I won't see
any error later on. So finally, we are ready to use the list style native factory class to render
ads on our Android. We will implement
native ad between ListView items at
random positions, just like we did
in Banner section. So inside screens, create
a new file, name it. Native ad, screen, dot dot. Let's create the rigid Dv screen advance ads that they do through. Okay. Now let's
create a function that will return any divide
return type with community, we add it to add. Let's initialize it. More or less. It is asking the same things. But the only new thing. We'll have to mention
his factory ID. And I hope you remember we
write that name is list. Ad unit ID will be
add helper. D, bad. Request will be
const add request. Now listener will be native
ad listener. Incited. We have on Add loaded, and then we have on and
failed to load and added. Now, we have to create some variables as well. Stuffer, list of
dynamic data items, then list of native ads. Our native ads. Then boolean is native
ad loaded, false. Okay? Now here, if it is loaded, then native ad loaded successfully. Then inserted in the native ads. So add as native ad. Okay? Then what I will do is I will
do an if check. If. All native ads dot
length is equal to two, that is 0123, etc. There. Then only said that state is natively load
it to true because we have to show and
only if all the ads are loaded is all that two words
I'm not saying there will be two ads or else it will
throw an error if, suppose one ad is loaded
and that is not loaded. So total will be to add. This is for the onload. Then if it is failed, then we will let brand to load native ad that message. This is the issue where at dispose and I will again
call that get meteorites. Suppose that ad free to loads. Then I will call, I will load this ad and return this n k. So this is the function. Now in the init state. We have to first fetch the data and insert in our items list. And again, it will be a
dummy data obviously. So let's say they need state. And it's taking red bar. Int I is equal to zero. I less than 20, I plus plus items, not add I, I plus one. And then I will insert ads. But int I is equal to zero. I less than two. That is one and only two ads. I plus, plus, I will get that. And then position random
ad for G shin Isabel two and m dot k. Random. Next int items not land. Then I will get
done AT read from the function to get native ad. And then I will insert, then they divide in
that random position. And that element
will be native ad. And as usual, we
have to dispose it. For int I is equal to zero and less than native
ads dot length I plus, plus negative ads
index dot dispose. That's it. It says how we dispose. This is the function
to get them divide. And I hope you understood
this factory list title. This is the only
unique thing here. So that's it in that way. In this video. In the next video
we will show that they are in that
list we builder. Thank you.
18. Show data in a ListView: Hi. So finally, let's show
that native ad as well as data using a list view Builder
widget in the body. So the body, just write List
view dot Builder widget. Then item count
will be items that lend them builder current text index. Let's do the data in a variable. Items index. Now we will just check if data is native ad. Then we have to do
something else. We have to do something else. We will simply return
the list style. Leading guns. I can I can not four TO. These are just dummy data. Text. Data dot two string. This is the else part, but suppose it is the ad. Then we will return. If is native ad loaded is true, then we can simply
return a container. I just gave it 72. And alignment. Alignment, dots and data. And child will add rigid
and add will be data. But suppose that native
ad is not loaded, then we will show a linear
progress indicator. Obviously, I'm showing the
indicator for our own purpose. But in a real lab
you can just show an empty container or resize
box whatever you want. Now, in the home
screen created button, which will navigate to
the native ads screen. Here, this native ads. So let's, let's see if
it is working or not. For Click here. C. And the native ad
is working perfectly. We have that two ads here. Between them. You can list, view
or other data. And it is looking very similar
to the UI of our data. So you might be thinking
why use native ads, even, even if this is more
complex to implement. And series that because
of the user experience, no one likes to be
spammed with banner ads. And often, free
apps will integrate ads to have some passive income to keep the project going. Native ads seemed like the
best way to achieve it. And I believe that earning is more when we use native ads. You can check that in the
official documentation. But at least we know now how
to use native ads as well. And this was a test ID. If you want, you can again use the Real ID and see
the native ads. Obviously it will work. It will work as same as this c. We have that two words here. So that's it for this video. In the next video, we will understand how to implement app up and
adds. Thank you.
19. Create a AdManager file: Welcome back. In this video, we will
understand about app open ads. App open ads are used to display ads when users and data
of our application. App, append adds a design. So adds publisher can monetize
their app loading screens. Or whenever your app is
brought to the foreground. You can display these ads to users who can close
them anytime. This ad will automatically
display small branding area to indicate they are still using
your application. Just e.g. when the user appends the app, that loading screen
displays for a couple of seconds before the app Contents
appears, usually right? So during that time, the user can see
the app open ed, and once they close the ad, they are taken to the
apps main screen. So for that, let's go and
create an ad unit first. Slack app, open my first ad. Okay, we have this. Then in that helper
class, add helper class. Create this thick mattered. I add unit. As US is here. And for iOS, you said dummy. Now your app, append
n needs to be ready before user
enters your app. So we have to implement
a utility class to make ad requests ahead of
when you need to show the ad. So inside lib folder here, create a new dot file,
directly, name it. Ben, ad, manager, dot, dot. Yeah, Let's create a class. And manager. First of all. And we will have an
instance of the ad. Then boolean is showing
AD is equal to false. Boolean is loaded,
is equal to false. Now here, load and often add void load, and this is the function
app up and add load. Okay? So it is asking
for our listing. First one will be add helper, that app open and then this
will be const request. Now orientation, here it will, I will use a pen added orientation portrait
that is straight. And add callback will
be this callback. Here. We get the add here. We simply print and loaded. Then I will assign that and write is loaded
is equal to true. And if it fails, then we get the adder. You can, if you want, you can handle leaded. It's up to you. I will just write to load up and added the message. How care. So that's it for this video. We will continue working on
this file. In the next video.
20. Work on AppOpenAd: Now let's continue working here. We have to create
function to show the ad and a handle full
screen callbacks. So below this, let's
write IF function, which is a getter, is add available and return app open and
not equal to null. That is, it is not equal
to null, it is available. Then we will create a function, show ad if available. If app up when n
is equal to null. Then simply write print. Tried to show ad
before available. Okay? We will call the load
function and return here. And if ADH is already
showing, then relate brand. I do show ad while. And then other ad
is doing. Okay. Again, returned from here. Then if everything is okay, then we will add and
append screen called back, the full screen called back. And below this, I
will call this, I will show that, okay, and obviously after
the ad is shown, then only this
callback is executed. So I will let on Add
showed full screen. This is AD and Roulette is
showing ad is equal to true. Then we have on failed to show. Then we get the editor will just simply showing
add Isabel two files. Add dot dispose. Burnett is equal to null. Okay? And then we will also
write if dismissed, we have that ad is going
to add is equal to false and dispose to another. And this one should this. And we will again load another ad so that it can
be shown again later on. Now, this manager file is done. Let's create a splash
screen thing that screen. Create a file. Last screen dot dot n here. And let's write it down. Important material. Then we have the
stateful widget. This is screen. We have the instance
of app. Okay. Imported manager, Ben, manager is equal
to give it an instance. And here I'm just showing
a loading indicator. If you want, you can
use that package is to show beautiful
loading screens, audio logo, it's up to you. Circular progress indicator. Let's make it a const. This is the splash screen. Now in the init
state of the screen, we have to call the load method. Yeah, I need state. You have to call open-end
manager dot load, and then we have to wait for 4 s. The ad is loaded
and tilled under. Our loading screen will be the circular progress indicator. Const, duration,
millisecond 4,000. Then just add up n minus j
dot show and if available, show the ad and navigate. We now have three gate that
push replacement. The new route. The
new layout will be nothing but my page layout. This will be the home screen. Finally, we have to assign this splash screen is the
main screen in that home. So here I just write
splash screen. Okay. Now desk date. Let's start. Let's see if it's
working or not. Okay, app or pen, it was open. Let's see what happens. I will go to the loading
and make it 5 s. Let's see. See, the ad is now
working perfectly. You will have the ad and they
are continuing to the app. If I click, we go
to the home screen. This is the concept
of app open ads. So it's up to you. You want to use it
in your app or not. But this is another type of
ad which is given by Google. Will again start and see. We have the AB, we have the add. And if I click, we can
see in the next video, I will implement the same ad, but it should be shown if we go back and comes to the app again, that is for flow
from the foreground. If it's from the background, if it again comes
to the foreground, we will show this
app open again. So thank you.
21. Listen to foreground events: Hi, welcome back. Now let's take a step further
and listen to events. That is, whenever our app goes
into background like this, again, comes to foreground, we will show that app open. And again, we have to add the event listener and the
event listener to the screen, which is just after
the splash screen. In our case it is
the home screen. So let's do it. First. We have to make it
a state full rigid. Then we have to add
a mixin that is red. Widgets, binding observer. Okay? And then we have to create two variable versus
app, open ad manager. Obviously we need this
class to call our ad. And then a Boolean is paused, is equal to false. This will be true when the
app goes into background. Next. In that state, first called a load add function from the
ad manager class, this app up and add. Node add. Okay? And then we
have rigid binding. Dot instance, dot
I add observer. And in that bracket we
have to write this, that is this class. We have to observe. Okay? In this pose, we have
to remove the observer. It is rigid. Binding. Dot instance, dot,
remove observer. This. Okay? Now we have to listen to
the app lifecycle events. For that, we will overwrite did change app lifecycle like this. Okay? And here, first of all, we'll check if state
is equal to app. Lifecycle. Paused, okay. Yeah, we will change that if genes the variable is
pause is equal to true. And then we will check
if state is equal to app lifecycle that resumed and is paused is true. Like this. Then we will
just print this view. And now we will call app show manager that
show ad if available. And is paused, is
equal to false. Like this. Now, when we restart the app, let's check whether
it's working or not. Obviously this is the first ad. Now, if I go back and again, resume, then see we have
the app open ad again. So that means this functionality
is working perfectly. I would just like to explain that by calling the widgets binding.in stanza, add observer. We are telling that
binding regions, binding instance to add that
current stateful widget. In this case, this one. As an observer. This means that
whenever an event that the observer is interested
in occurs, just e.g. the app's lifecycle
state changes. The observer will be notified and can take
appropriate actions. In our example, we are using bindings observer to listen for the change app
lifecycle state, which we're using to trigger the display of that
app up and add. Vendor observer is
no longer needed. Really move it by calling the remove observer
in that expose. This did change. App lifecycle state will be called every time the app's
lifecycle state changes. So you should make
sure to only show the app open ad when the app is launched and not on other lifecycle
state changes. That is, only when
it is resumed, we will show the ad. So that means everything
is working perfectly. We have completed our course. I hope you have enjoyed
and learned a lot. In the next video, I will just test all the
working of that application. And that's it. Keep practicing.
22. Working of the Application: Hi, welcome to the final
video of the course. Our application is completed. Right now, I will just test the complete application
for the last time. Let's restart it. So very beginning. We will be shown the
app up an ad like this. And obviously if I
go back and gums, that open ad shows again, that means that that is working. If I click on the
bottom banner ads, which we implemented
the very first. Then see we have the banner ad in that
bottom navigation bar. So this you can use, suppose you have news
and all or any kind of you're going to have
the attain their body. Then you can use this
bottom navigation bar. Then we have the
inland banner ads. It is also looking perfect. If I go back and again, click on the position
is different. This is also working
perfectly. Now. Let's see and deaths,
the interstitial ads. We have the 47 score. And if I click on go back, then we have this ad. Which if I close, then the navigator dot
pop is executed in. If I again click on this digital ads and
wait for the ad to load. Okay? If I clear now, let's code is nine. If I click on Play again, and then over and
then dismiss it, see, the score is changed. If I click again to us too. Now let's see 49 heads, Goodman. And since I have use this Add, now if I go back, we wouldn't be seeing
any other ads. Then next we implemented
was rewarded ads. So what ad to increase health? If I click here, this ad is played 5
s, this is remaining. We have to watch the complete add in
order to get the reward. Your final cross it, see, I have my health increased. And if I click on
watch it again, then we have, okay, we have 15 s left. But let's just imagine
you are building a game using plotter
and flame in that you can use these kind
of reward ads so that users are interested in
watching the ad and getting the rewards so
that they can play the game. Now, all that is we have the Health at maximum and now we cannot
watch the ad again. So why rewarded ads
are also working? Finally, we have
the native advance, and I remembered this required
lots of configurations. And after that only
it was possible. So if you want, please search online about this, add more and more, and you can use the
other templates as well. I've just used the
list template. But suppose you have some kind
of blog or anything else, then you can use that template and show
native advanced sides. So that's it for that
complete course. Now, I just wanted to talk. If you go to the Google
ad more console. Here you can see that
blocking controls option. Here. You can manage something like block ads that
installed another. When a user clicks them, you can configure this setting. You can prevent ads from
individual advice advertisers. That is, if you want to block someone that there's
some company or anything else, then this one is important. See you have manage
sensitive categories. Here. If you don't want dating or anything sensitive
to your audience, then you can allow, or this allowed these kind
of get degrees in your app. Then if you see that now this approval
status requires review, you have to do some more things in order to make it work in
a real-world application. Obviously the add
configurations will be same, but you have to prove that
your app is in the Play Store. These, that these
kind of things. And I'm just hoping that
your account is approved. And you can see this
notification here. Finally, I have attached the whole source
code of this course. Make sure after downloading it, you go to the app source main, AndroidManifest and
change the values here, that is application ID. As well as you have to change the values in the Add
Health per class. After that, you will be able
to display ads in your, in your system using
the source code. So I have enjoyed making
this course and I believe you like
it to do check out my other courses
which are on clutter, Firebase, super base flame, etc. So that's it. Keep practicing.
Have a nice day.