Anzeigenintegration für Flutter-Apps: Maximiere die Benutzerbindung mit Admob | Rahul Agarwal | Skillshare
Search

Playback Speed


1.0x


  • 0.5x
  • 0.75x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

Ad Integration for Flutter Apps: Maximize User Engagement with Admob

teacher avatar Rahul Agarwal, Flutter Developer & Trainer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

    • 1.

      Course Introduction

      0:52

    • 2.

      Setup AdMob account

      3:43

    • 3.

      Setup Flutter Project

      9:29

    • 4.

      Enabling Test Ads

      5:58

    • 5.

      Creating AdHelper Class

      5:53

    • 6.

      Bottom Banner Ad Screen

      7:43

    • 7.

      Function to load Banner Ad

      13:49

    • 8.

      Inline Banner Ad Screen

      11:19

    • 9.

      Show data in a ListView

      5:13

    • 10.

      Interstitial Ad Screen

      8:02

    • 11.

      Function to load Interstitial Ad

      8:59

    • 12.

      Use WillPopScope Widget

      6:29

    • 13.

      Implement Interstitial Video Ads

      11:11

    • 14.

      Creating Ad Unit

      5:07

    • 15.

      Load and Show Rewarded Ads

      14:42

    • 16.

      Implement NativeAdFactory API

      9:43

    • 17.

      Function to load Native Ads

      11:28

    • 18.

      Show data in a ListView

      5:25

    • 19.

      Create a AdManager file

      6:20

    • 20.

      Work on AppOpenAd

      10:16

    • 21.

      Listen to foreground events

      6:49

    • 22.

      Working of the Application

      7:39

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

13

Students

--

Projects

About This Class

Mobile app development is an exciting and rapidly growing field, with millions of users worldwide downloading apps every day. Developing an app is half the battle, you should also know how to integrate Admob in your application.

Welcome to this exciting course on optimizing your app's user experience and enhancing its reach 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'll start by setting up an AdMob account and configure it into a Flutter project. From there, we'll explore all types of ads such as banner, interstitial, interstitial video, rewarded, native, and app open ads.

AdMob offers a variety of ad formats to choose from, including banner ads, interstitial ads, native ads, rewarded ads and app open ads. Banner ads are small, rectangular ads that appear at the top or bottom of your app's screen. Interstitial ads are full-screen ads that appear between screens or activities in your app. Native ads blend in with your app's design and feel more like content than traditional ads. Rewarded ads offer users a reward for watching an ad, such as extra lives.

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're ready to take your Flutter app development skills to the next level.

Meet Your Teacher

Teacher Profile Image

Rahul Agarwal

Flutter Developer & Trainer

Teacher

Hello, I'm Rahul. I am skilled in building cross platform application using Flutter. I am freelance developer as well as conduct workshops to share my knowledge with the community.

See full profile

Level: Beginner

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

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.