CINXE.COM

<!doctype html> <html lang="en" dir="ltr"> <head> <meta name="google-signin-client-id" content="721724668570-nbkv1cfusk7kk4eni4pjvepaus73b13t.apps.googleusercontent.com"> <meta name="google-signin-scope" content="profile email https://www.googleapis.com/auth/developerprofiles https://www.googleapis.com/auth/developerprofiles.award"> <meta property="og:site_name" content="Google Codelabs"> <meta property="og:type" content="website"><meta name="theme-color" content="#1a73e8"><meta charset="utf-8"> <meta content="IE=Edge" http-equiv="X-UA-Compatible"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="manifest" href="/_pwa/codelabs/manifest.json" crossorigin="use-credentials"> <link rel="preconnect" href="//www.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.googleapis.com" crossorigin> <link rel="preconnect" href="//apis.google.com" crossorigin> <link rel="preconnect" href="//www.google-analytics.com" crossorigin><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"> <link rel="stylesheet" href="//fonts.googleapis.com/css2?family=Material+Icons&family=Material+Symbols+Outlined&display=block"><link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/codelabs/css/app.css"> <link rel="shortcut icon" href="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/codelabs/images/favicon.png"> <link rel="apple-touch-icon" href="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/codelabs/images/touchicon-180.png"><link rel="canonical" href="https://codelabs.developers.google.com/codelabs/admob-ads-in-flutter"><link rel="search" type="application/opensearchdescription+xml" title="Google Codelabs" href="https://codelabs.developers.google.com/s/opensearch.xml"> <link rel="alternate" hreflang="en" href="https://codelabs.developers.google.com/codelabs/admob-ads-in-flutter" /><link rel="alternate" hreflang="x-default" href="https://codelabs.developers.google.com/codelabs/admob-ads-in-flutter" /><link rel="alternate" hreflang="ar" href="https://codelabs.developers.google.com/codelabs/admob-ads-in-flutter?hl=ar" /><link rel="alternate" hreflang="bn" href="https://codelabs.developers.google.com/codelabs/admob-ads-in-flutter?hl=bn" /><link rel="alternate" hreflang="zh-Hans" href="https://codelabs.developers.google.com/codelabs/admob-ads-in-flutter?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant" href="https://codelabs.developers.google.com/codelabs/admob-ads-in-flutter?hl=zh-tw" /><link rel="alternate" hreflang="fa" href="https://codelabs.developers.google.com/codelabs/admob-ads-in-flutter?hl=fa" /><link rel="alternate" hreflang="fr" href="https://codelabs.developers.google.com/codelabs/admob-ads-in-flutter?hl=fr" /><link rel="alternate" hreflang="de" href="https://codelabs.developers.google.com/codelabs/admob-ads-in-flutter?hl=de" /><link rel="alternate" hreflang="he" href="https://codelabs.developers.google.com/codelabs/admob-ads-in-flutter?hl=he" /><link rel="alternate" hreflang="hi" href="https://codelabs.developers.google.com/codelabs/admob-ads-in-flutter?hl=hi" /><link rel="alternate" hreflang="id" href="https://codelabs.developers.google.com/codelabs/admob-ads-in-flutter?hl=id" /><link rel="alternate" hreflang="it" href="https://codelabs.developers.google.com/codelabs/admob-ads-in-flutter?hl=it" /><link rel="alternate" hreflang="ja" href="https://codelabs.developers.google.com/codelabs/admob-ads-in-flutter?hl=ja" /><link rel="alternate" hreflang="ko" href="https://codelabs.developers.google.com/codelabs/admob-ads-in-flutter?hl=ko" /><link rel="alternate" hreflang="pl" href="https://codelabs.developers.google.com/codelabs/admob-ads-in-flutter?hl=pl" /><link rel="alternate" hreflang="pt-BR" href="https://codelabs.developers.google.com/codelabs/admob-ads-in-flutter?hl=pt-br" /><link rel="alternate" hreflang="ru" href="https://codelabs.developers.google.com/codelabs/admob-ads-in-flutter?hl=ru" /><link rel="alternate" hreflang="es-419" href="https://codelabs.developers.google.com/codelabs/admob-ads-in-flutter?hl=es-419" /><link rel="alternate" hreflang="th" href="https://codelabs.developers.google.com/codelabs/admob-ads-in-flutter?hl=th" /><link rel="alternate" hreflang="tr" href="https://codelabs.developers.google.com/codelabs/admob-ads-in-flutter?hl=tr" /><link rel="alternate" hreflang="vi" href="https://codelabs.developers.google.com/codelabs/admob-ads-in-flutter?hl=vi" /><title>Adding AdMob ads to a Flutter app  |  Google Codelabs</title> <meta property="og:title" content="Adding AdMob ads to a Flutter app  |  Google Codelabs"><meta name="description" content="In this codelab, you learn how to add a banner, interstitial and rewarded ads to a Flutter app."> <meta property="og:description" content="In this codelab, you learn how to add a banner, interstitial and rewarded ads to a Flutter app."><meta property="og:url" content="https://codelabs.developers.google.com/codelabs/admob-ads-in-flutter"><meta property="og:locale" content="en"> <link rel="stylesheet" href="/extras.css"></head> <body class="" template="codelab" theme="codelabs-theme" type="codelab" layout="docs" display-toc pending> <devsite-progress type="indeterminate" id="app-progress"></devsite-progress> <a href="#main-content" class="skip-link button"> Skip to main content </a> <section class="devsite-wrapper"> <devsite-cookie-notification-bar></devsite-cookie-notification-bar><devsite-header role="banner"> <div class="devsite-header--inner nocontent"> <div class="devsite-top-logo-row-wrapper-wrapper"> <div class="devsite-top-logo-row-wrapper"> <div class="devsite-top-logo-row"> <button type="button" id="devsite-hamburger-menu" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Navigation menu button" visually-hidden aria-label="Open menu"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="googleCodelabs" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <img src="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/codelabs/images/lockup.svg" class="devsite-site-logo" alt="Google Codelabs"> </picture> </a> </div> <div class="devsite-top-logo-row-middle"> <div class="devsite-header-upper-tabs"> </div> <devsite-search enable-signin enable-search enable-suggestions enable-query-completion tenant-name="Google Codelabs" > <form class="devsite-search-form" action="https://codelabs.developers.google.com/s/results" method="GET"> <div class="devsite-search-container"> <button type="button" search-open class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Open search"></button> <div class="devsite-searchbox"> <input aria-activedescendant="" aria-autocomplete="list" aria-label="Search" aria-expanded="false" aria-haspopup="listbox" autocomplete="off" class="devsite-search-field devsite-search-query" name="q" placeholder="Search" role="combobox" type="text" value="" > <div class="devsite-search-image material-icons" aria-hidden="true"> </div> <div class="devsite-search-shortcut-icon-container" aria-hidden="true"> <kbd class="devsite-search-shortcut-icon">/</kbd> </div> </div> </div> </form> <button type="button" search-close class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Close search"></button> </devsite-search> </div> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es" >Español</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> <devsite-user enable-profiles fp-auth id="devsite-user"> Sign in </devsite-user> </div> </div> </div> </div> </devsite-header> <devsite-book-nav scrollbars hidden> <div class="devsite-book-nav-filter" hidden> <input type="text" placeholder="Filter" aria-label="Type to filter" role="searchbox"> </div> <nav class="devsite-book-nav devsite-nav nocontent" aria-label="Side menu"> <div class="devsite-mobile-header"> <button type="button" id="devsite-close-nav" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Close navigation" aria-label="Close navigation"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="googleCodelabs" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <img src="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/codelabs/images/lockup.svg" class="devsite-site-logo" alt="Google Codelabs"> </picture> </a> </div> </div> <div class="devsite-book-nav-wrapper"> <div class="devsite-mobile-nav-top"> <ul class="devsite-nav-list"> </ul> </div> </div> </nav> </devsite-book-nav> <section id="gc-wrapper"> <main role="main" id="main-content" class="devsite-main-content" has-sidebar > <div class="devsite-sidebar"> <div class="devsite-sidebar-content"> <devsite-toc class="devsite-nav" role="navigation" aria-label="On this page" depth="1" scrollbars ></devsite-toc> <devsite-recommendations-sidebar class="nocontent devsite-nav"> </devsite-recommendations-sidebar> </div> </div> <devsite-content> <article class="devsite-article"><style> body { transition: opacity ease-in 0.2s; } body[unresolved] { opacity: 0; display: block; overflow: hidden; position: relative; } </style> <div class="devsite-article-meta nocontent" role="navigation"> <ul class="devsite-breadcrumb-list" > </ul> </div> <h1 class="devsite-page-title" tabindex="-1"> Adding AdMob ads to a Flutter app </h1> <devsite-toc class="devsite-nav" depth="1" devsite-toc-embedded > </devsite-toc> <div class="devsite-article-body clearfix "> <google-codelab-analytics gaid="UA-49880327-14" ga4id="G-JTFZSJVVVZ"></google-codelab-analytics> <google-codelab codelab-gaid="" codelab-ga4id="" doc-id="1HfsG7fX79kzl4Scww5TDJ3ZI5BglEhvlinGxjTx6SrI" id="admob-ads-in-flutter" title="Adding AdMob ads to a Flutter app" no-tooltip="" environment="web" category="flutter,ads" feedback-link="https://github.com/googlecodelabs/admob-ads-in-flutter/issues" layout="paginated" > <google-codelab-step label="Introduction" duration="0" step="0"> <google-codelab-about codelab-title="Adding AdMob ads to a Flutter app" authors="Taeho Kim" last-updated="2022-08-27T15:08:12Z" duration="40"> </google-codelab-about> <h2 class="step-title" id="0" data-text="Introduction" tabindex="-1"> 1. Introduction </h2> <h2 is-upgraded id="what-youll-build" data-text="What you'll build" tabindex="-1">What you'll build</h2> This codelab guides you through adding a banner, interstitial, and a rewarded ad to an app called Awesome Drawing Quiz, a game that lets players guess the name of the drawing. <table class="vertical-rules"> <tr><td colspan="1" rowspan="1"><img src="/static/codelabs/admob-ads-in-flutter/img/1117efa4ef270d2b.png" srcset="https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/1117efa4ef270d2b_36.png 36w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/1117efa4ef270d2b_48.png 48w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/1117efa4ef270d2b_72.png 72w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/1117efa4ef270d2b_96.png 96w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/1117efa4ef270d2b_480.png 480w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/1117efa4ef270d2b_720.png 720w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/1117efa4ef270d2b_856.png 856w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/1117efa4ef270d2b_960.png 960w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/1117efa4ef270d2b_1440.png 1440w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/1117efa4ef270d2b_1920.png 1920w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/1117efa4ef270d2b_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> </td><td colspan="1" rowspan="1"><img src="/static/codelabs/admob-ads-in-flutter/img/8ca4005fffef3.png" srcset="https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/8ca4005fffef3_36.png 36w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/8ca4005fffef3_48.png 48w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/8ca4005fffef3_72.png 72w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/8ca4005fffef3_96.png 96w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/8ca4005fffef3_480.png 480w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/8ca4005fffef3_720.png 720w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/8ca4005fffef3_856.png 856w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/8ca4005fffef3_960.png 960w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/8ca4005fffef3_1440.png 1440w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/8ca4005fffef3_1920.png 1920w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/8ca4005fffef3_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> </td></tr> </table> If you run into any issues (code bugs, grammatical errors, unclear wording) as you work through this codelab, please report the issue by clicking the Report a mistake link in the lower, left corner of the codelab. <aside class="special">Tip: To learn how to implement a banner and native inline ads, check out the <a href="https://codelabs.developers.google.com/codelabs/admob-inline-ads-in-flutter" target="_blank">Adding an AdMob banner and native inline ads to a Flutter app</a> codelab. </aside> <h2 class="checklist" is-upgraded id="what-youll-learn" data-text="What you'll learn" tabindex="-1">What you'll learn</h2> <ul class="checklist"> <li>How to configure the Google Mobile Ads AdMob plugin</li> <li>How to implement a banner, interstitial and rewarded ads in a Flutter app</li> </ul> <h2 is-upgraded id="what-youll-need" data-text="What you'll need" tabindex="-1">What you'll need</h2> <ul> <li>Android Studio 4.1 or later</li> <li>Xcode 12 or later (for iOS development)</li> </ul> <google-codelab-survey survey-id="admob-ads-in-flutter-1"> <h4 id="how-would-you-rate-your-level-of-experience-with-admob" data-text="How would you rate your level of experience with AdMob?" tabindex="-1">How would you rate your level of experience with AdMob?</h4> <paper-radio-group> <paper-radio-button>Novice</paper-radio-button> <paper-radio-button>Intermediate</paper-radio-button> <paper-radio-button>Proficient</paper-radio-button> </paper-radio-group> </google-codelab-survey> <google-codelab-survey survey-id="admob-ads-in-flutter-2"> <h4 id="how-would-you-rate-your-level-of-experience-with-flutter" data-text="How would you rate your level of experience with Flutter?" tabindex="-1">How would you rate your level of experience with Flutter?</h4> <paper-radio-group> <paper-radio-button>Novice</paper-radio-button> <paper-radio-button>Intermediate</paper-radio-button> <paper-radio-button>Proficient</paper-radio-button> </paper-radio-group> </google-codelab-survey> </google-codelab-step> <google-codelab-step label="Set up your Flutter development environment" duration="10" step="1"> <h2 class="step-title" id="1" data-text="Set up your Flutter development environment" tabindex="-1"> 2. Set up your Flutter development environment </h2> You need two pieces of software to complete this lab—the <a href="https://docs.flutter.dev/get-started/install" target="_blank">Flutter SDK</a> and <a href="https://docs.flutter.dev/get-started/editor" target="_blank">an editor</a>. You can run the codelab using any of these devices: <ul> <li>A physical <a href="https://docs.flutter.dev/get-started/install/macos#android-setup" target="_blank">Android</a> or <a href="https://docs.flutter.dev/get-started/install/macos#deploy-to-ios-devices" target="_blank">iOS</a> device connected to your computer and set to Developer mode.</li> <li>The <a href="https://docs.flutter.dev/get-started/install/macos#set-up-the-ios-simulator" target="_blank"> iOS simulator</a> (requires installing Xcode tools).</li> <li>The <a href="https://docs.flutter.dev/get-started/install/macos#set-up-the-android-emulator" target="_blank">Android Emulator</a> (requires setup in Android Studio).</li> <li>A browser (Chrome is required for debugging).</li> <li>As a <a href="https://docs.flutter.dev/get-started/install/windows#windows-setup" target="_blank">Windows</a>, <a href="https://docs.flutter.dev/get-started/install/linux#linux-setup" target="_blank">Linux</a>, or <a href="https://docs.flutter.dev/get-started/install/macos#macos-setup" target="_blank">macOS</a> desktop application. You must develop on the platform where you plan to deploy. So, if you want to develop a Windows desktop app, you must develop on Windows to access the appropriate build chain. There are operating system-specific requirements that are covered in detail on <a href="https://docs.flutter.dev/desktop" target="_blank">docs.flutter.dev/desktop</a>.</li> </ul> <h2 is-upgraded id="download-the-code" data-text="Download the code" tabindex="-1">Download the code</h2> <a href="https://github.com/googlecodelabs/admob-ads-in-flutter/archive/master.zip" target="_blank"><button class="button button-primary button-with-icon">file_downloadDownload source code</button></a> <a href="https://github.com/googlecodelabs/admob-ads-in-flutter" target="_blank"><button class="button button-primary">View repository on Github</button></a> After you download the zip file, extract its contents. You will have a folder named <code translate="no" dir="ltr">admob-ads-in-flutter-master</code>. Alternatively, you can clone the GitHub repository from the command line: <div></div><devsite-code><pre translate="no" dir="ltr" is-upgraded>$ git clone https://github.com/googlecodelabs/admob-ads-in-flutter </pre></devsite-code> The repository contains two folders: <ul> <li><img alt="android_studio_folder.png" style="width: 20.00px" src="/static/codelabs/admob-ads-in-flutter/img/bb745dc85ae69f6b.png" srcset="https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/bb745dc85ae69f6b_36.png 36w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/bb745dc85ae69f6b_48.png 48w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/bb745dc85ae69f6b_72.png 72w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/bb745dc85ae69f6b_96.png 96w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/bb745dc85ae69f6b_480.png 480w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/bb745dc85ae69f6b_720.png 720w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/bb745dc85ae69f6b_856.png 856w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/bb745dc85ae69f6b_960.png 960w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/bb745dc85ae69f6b_1440.png 1440w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/bb745dc85ae69f6b_1920.png 1920w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/bb745dc85ae69f6b_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px">starter — Starting code that you will build in this codelab.</li> <li><img alt="android_studio_folder.png" style="width: 20.00px" src="/static/codelabs/admob-ads-in-flutter/img/bb745dc85ae69f6b.png" srcset="https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/bb745dc85ae69f6b_36.png 36w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/bb745dc85ae69f6b_48.png 48w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/bb745dc85ae69f6b_72.png 72w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/bb745dc85ae69f6b_96.png 96w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/bb745dc85ae69f6b_480.png 480w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/bb745dc85ae69f6b_720.png 720w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/bb745dc85ae69f6b_856.png 856w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/bb745dc85ae69f6b_960.png 960w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/bb745dc85ae69f6b_1440.png 1440w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/bb745dc85ae69f6b_1920.png 1920w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/bb745dc85ae69f6b_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px">complete — Completed code for this codelab.</li> </ul> </google-codelab-step> <google-codelab-step label="Set up the AdMob app and ad units" duration="5" step="2"> <h2 class="step-title" id="2" data-text="Set up the AdMob app and ad units" tabindex="-1"> 3. Set up the AdMob app and ad units </h2> Because Flutter is a multi-platform SDK, you need to add an app and ad units for both Android and iOS in AdMob. <aside class="special">Note: If you want to follow the codelab instead of creating a new application and ad units on your own, go to the <a href="https://docs.google.com/document/d/1wt3i_wE0TqXNfCZlqKr1qcbfZIyj3ElcjWOEYsWs8lU/edit#heading=h.56ajivlhvvkk" target="_blank">Use the test AdMob app and ad units</a> section. </aside> <h2 is-upgraded id="set-up-for-android" data-text="Set up for Android" tabindex="-1">Set up for Android</h2> To set up for Android, you need to add an Android app and create ad units. <h3 is-upgraded id="add-an-android-app" data-text="Add an Android app" tabindex="-1">Add an Android app</h3> <ol type="1"> <li>In the <a href="https://apps.admob.com" target="_blank">AdMob console</a>, click ADD APP from the Apps menu.</li> <li>When you're asked Have you published your app on Google Play or the App Store?, click NO.</li> <li>Enter <code translate="no" dir="ltr">Awesome Drawing Quiz</code> in the app name field, and select Android as the platform.</li> </ol> <img alt="ddafee37a6f92229.png" style="width: 580.50px" src="/static/codelabs/admob-ads-in-flutter/img/ddafee37a6f92229.png" srcset="https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/ddafee37a6f92229_36.png 36w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/ddafee37a6f92229_48.png 48w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/ddafee37a6f92229_72.png 72w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/ddafee37a6f92229_96.png 96w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/ddafee37a6f92229_480.png 480w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/ddafee37a6f92229_720.png 720w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/ddafee37a6f92229_856.png 856w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/ddafee37a6f92229_960.png 960w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/ddafee37a6f92229_1440.png 1440w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/ddafee37a6f92229_1920.png 1920w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/ddafee37a6f92229_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> <ol type="1" start="4"> <li>Enabling user metrics is not necessary to complete this codelab. However, we recommend that you do because it allows you to understand user behavior in more detail. Click ADD to complete the process.</li> </ol> <img alt="b918bf44362813a9.png" style="width: 561.50px" src="/static/codelabs/admob-ads-in-flutter/img/b918bf44362813a9.png" srcset="https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/b918bf44362813a9_36.png 36w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/b918bf44362813a9_48.png 48w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/b918bf44362813a9_72.png 72w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/b918bf44362813a9_96.png 96w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/b918bf44362813a9_480.png 480w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/b918bf44362813a9_720.png 720w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/b918bf44362813a9_856.png 856w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/b918bf44362813a9_960.png 960w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/b918bf44362813a9_1440.png 1440w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/b918bf44362813a9_1920.png 1920w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/b918bf44362813a9_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> <h3 is-upgraded id="create-ad-units" data-text="Create ad units" tabindex="-1">Create ad units</h3> To start adding ad units to AdMob: <ol type="1"> <li>Select Awesome Drawing Quiz from the Apps menu in the AdMob console.</li> <li>Click the Ad units menu.</li> </ol> Banner <table class="vertical-rules"> <tr><td colspan="1" rowspan="1"><img src="/static/codelabs/admob-ads-in-flutter/img/f8aa0006a80c3269.png" srcset="https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/f8aa0006a80c3269_36.png 36w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/f8aa0006a80c3269_48.png 48w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/f8aa0006a80c3269_72.png 72w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/f8aa0006a80c3269_96.png 96w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/f8aa0006a80c3269_480.png 480w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/f8aa0006a80c3269_720.png 720w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/f8aa0006a80c3269_856.png 856w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/f8aa0006a80c3269_960.png 960w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/f8aa0006a80c3269_1440.png 1440w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/f8aa0006a80c3269_1920.png 1920w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/f8aa0006a80c3269_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> </td><td colspan="1" rowspan="1"><ol type="1" start="1"> <li>Click the ADD AD UNIT button.</li> <li>Select Banner as the format.</li> <li>Enter <code translate="no" dir="ltr">android-adq-banner</code> in the Ad unit name field.</li> <li>Click CREATE AD UNIT to complete the process.</li> </ol> </td></tr> </table> Interstitial <table class="vertical-rules"> <tr><td colspan="1" rowspan="1"><img src="/static/codelabs/admob-ads-in-flutter/img/6bed4a565f6a7d6a.png" srcset="https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/6bed4a565f6a7d6a_36.png 36w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/6bed4a565f6a7d6a_48.png 48w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/6bed4a565f6a7d6a_72.png 72w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/6bed4a565f6a7d6a_96.png 96w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/6bed4a565f6a7d6a_480.png 480w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/6bed4a565f6a7d6a_720.png 720w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/6bed4a565f6a7d6a_856.png 856w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/6bed4a565f6a7d6a_960.png 960w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/6bed4a565f6a7d6a_1440.png 1440w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/6bed4a565f6a7d6a_1920.png 1920w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/6bed4a565f6a7d6a_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> </td><td colspan="1" rowspan="1"><ol type="1" start="1"> <li>Click the ADD AD UNIT button.</li> <li>Select Interstitial as the format.</li> <li>Enter <code translate="no" dir="ltr">android-adq-interstitial</code> in the Ad unit name field.</li> <li>Click CREATE AD UNIT to complete the process.</li> </ol> </td></tr> </table> Rewarded <table class="vertical-rules"> <tr><td colspan="1" rowspan="1"><img src="/static/codelabs/admob-ads-in-flutter/img/2597dbca44c6145d.png" srcset="https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/2597dbca44c6145d_36.png 36w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/2597dbca44c6145d_48.png 48w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/2597dbca44c6145d_72.png 72w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/2597dbca44c6145d_96.png 96w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/2597dbca44c6145d_480.png 480w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/2597dbca44c6145d_720.png 720w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/2597dbca44c6145d_856.png 856w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/2597dbca44c6145d_960.png 960w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/2597dbca44c6145d_1440.png 1440w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/2597dbca44c6145d_1920.png 1920w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/2597dbca44c6145d_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> </td><td colspan="1" rowspan="1"><ol type="1" start="1"> <li>Click the ADD AD UNIT button.</li> <li>Select Rewarded as the format.</li> <li>Enter <code translate="no" dir="ltr">android-adq-rewarded</code> in the Ad unit name field.</li> <li>Leave the default for Reward settings.</li> <li>Click CREATE AD UNIT to complete the process.</li> </ol> </td></tr> </table> <aside class="warning">Important: When building and testing your apps, make sure that you use test ads, rather than live, production ads. Failure to do so can lead to suspension of your account. For more information about how the Mobile Ads SDK's test ads work, see <a href="https://developers.google.com/admob/android/test-ads" target="_blank">Test Ads</a>. </aside> It usually takes a few hours for a new ad unit to be able to serve ads. If you want to test the ad's behavior immediately, then use the test app ID and ad unit IDs listed in the Android app ID/ad unit ID and iOS app ID/ad unit ID tables. <h2 is-upgraded id="set-up-for-ios" data-text="Set up for iOS" tabindex="-1">Set up for iOS</h2> To set up for iOS, you need to add an iOS app and create ad units. <h3 is-upgraded id="add-an-ios-app" data-text="Add an iOS app" tabindex="-1">Add an iOS app</h3> <ol type="1"> <li>In the <a href="https://apps.admob.com" target="_blank">AdMob console</a>, click ADD APP from the Apps menu.</li> <li>When you're asked Have you published your app on Google Play or the App Store?, click NO.</li> <li>Enter <code translate="no" dir="ltr">Awesome Drawing Quiz</code> in the app name field, and select iOS as the platform.</li> </ol> <img alt="93e7f9f114232402.png" style="width: 569.52px" src="/static/codelabs/admob-ads-in-flutter/img/93e7f9f114232402.png" srcset="https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/93e7f9f114232402_36.png 36w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/93e7f9f114232402_48.png 48w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/93e7f9f114232402_72.png 72w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/93e7f9f114232402_96.png 96w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/93e7f9f114232402_480.png 480w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/93e7f9f114232402_720.png 720w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/93e7f9f114232402_856.png 856w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/93e7f9f114232402_960.png 960w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/93e7f9f114232402_1440.png 1440w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/93e7f9f114232402_1920.png 1920w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/93e7f9f114232402_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> <ol type="1" start="4"> <li>Enabling user metrics is not necessary to complete this codelab. However, we recommend that you do because it allows you to understand user behavior in more detail. Click ADD to complete the process.</li> </ol> <img alt="b918bf44362813a9.png" style="width: 561.50px" src="/static/codelabs/admob-ads-in-flutter/img/b918bf44362813a9.png" srcset="https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/b918bf44362813a9_36.png 36w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/b918bf44362813a9_48.png 48w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/b918bf44362813a9_72.png 72w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/b918bf44362813a9_96.png 96w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/b918bf44362813a9_480.png 480w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/b918bf44362813a9_720.png 720w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/b918bf44362813a9_856.png 856w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/b918bf44362813a9_960.png 960w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/b918bf44362813a9_1440.png 1440w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/b918bf44362813a9_1920.png 1920w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/b918bf44362813a9_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> <h3 is-upgraded id="create-ad-units_1" data-text="Create ad units" tabindex="-1">Create ad units</h3> To add ad units: <ol type="1"> <li>Select Awesome Drawing Quiz app from Apps menu in the AdMob console.</li> <li>Click the Ad units menu.</li> </ol> Banner <table class="vertical-rules"> <tr><td colspan="1" rowspan="1"><img src="/static/codelabs/admob-ads-in-flutter/img/f8aa0006a80c3269.png" srcset="https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/f8aa0006a80c3269_36.png 36w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/f8aa0006a80c3269_48.png 48w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/f8aa0006a80c3269_72.png 72w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/f8aa0006a80c3269_96.png 96w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/f8aa0006a80c3269_480.png 480w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/f8aa0006a80c3269_720.png 720w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/f8aa0006a80c3269_856.png 856w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/f8aa0006a80c3269_960.png 960w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/f8aa0006a80c3269_1440.png 1440w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/f8aa0006a80c3269_1920.png 1920w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/f8aa0006a80c3269_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> </td><td colspan="1" rowspan="1"><ol type="1" start="1"> <li>Click the ADD AD UNIT button.</li> <li>Select Banner as the format.</li> <li>Enter <code translate="no" dir="ltr">ios-adq-banner</code> in the Ad unit name field.</li> <li>Click CREATE AD UNIT to complete the process.</li> </ol> </td></tr> </table> Interstitial <table class="vertical-rules"> <tr><td colspan="1" rowspan="1"><img src="/static/codelabs/admob-ads-in-flutter/img/6bed4a565f6a7d6a.png" srcset="https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/6bed4a565f6a7d6a_36.png 36w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/6bed4a565f6a7d6a_48.png 48w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/6bed4a565f6a7d6a_72.png 72w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/6bed4a565f6a7d6a_96.png 96w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/6bed4a565f6a7d6a_480.png 480w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/6bed4a565f6a7d6a_720.png 720w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/6bed4a565f6a7d6a_856.png 856w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/6bed4a565f6a7d6a_960.png 960w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/6bed4a565f6a7d6a_1440.png 1440w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/6bed4a565f6a7d6a_1920.png 1920w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/6bed4a565f6a7d6a_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> </td><td colspan="1" rowspan="1"><ol type="1" start="1"> <li>Click the ADD AD UNIT button.</li> <li>Select Interstitial as the format.</li> <li>Enter <code translate="no" dir="ltr">ios-adq-interstitial</code> in the Ad unit name field.</li> <li>Click CREATE AD UNIT to complete the process.</li> </ol> </td></tr> </table> Rewarded <table class="vertical-rules"> <tr><td colspan="1" rowspan="1"><img src="/static/codelabs/admob-ads-in-flutter/img/2597dbca44c6145d.png" srcset="https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/2597dbca44c6145d_36.png 36w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/2597dbca44c6145d_48.png 48w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/2597dbca44c6145d_72.png 72w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/2597dbca44c6145d_96.png 96w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/2597dbca44c6145d_480.png 480w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/2597dbca44c6145d_720.png 720w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/2597dbca44c6145d_856.png 856w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/2597dbca44c6145d_960.png 960w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/2597dbca44c6145d_1440.png 1440w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/2597dbca44c6145d_1920.png 1920w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/2597dbca44c6145d_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> </td><td colspan="1" rowspan="1"><ol type="1" start="1"> <li>Click the ADD AD UNIT button.</li> <li>Select Rewarded as the format.</li> <li>Enter <code translate="no" dir="ltr">ios-adq-rewarded</code> in the Ad unit name field.</li> <li>Leave the default for Reward settings.</li> <li>Click CREATE AD UNIT to complete the process.</li> </ol> </td></tr> </table> <aside class="warning">Important: When building and testing your apps, make sure that you use test ads, rather than live, production ads. Failure to do so can lead to suspension of your account. For more information about how the Mobile Ads SDK's test ads work, see <a href="https://developers.google.com/admob/ios/test-ads" target="_blank">Test Ads</a>. </aside> It usually takes a few hours for a new ad unit to be able to serve ads. If you want to test the ad's behavior immediately, then use the test app ID and ad unit IDs listed in the following table. <h2 is-upgraded id="optional:-use-the-test-admob-app-and-ad-units" data-text="Optional: Use the test AdMob app and ad units" tabindex="-1">Optional: Use the test AdMob app and ad units</h2> If you want to follow the codelab instead of creating a new application and ad units on your own, you can use the test AdMob app ID and ad unit IDs listed in the following tables. <h3 is-upgraded id="android-app-idad-unit-id" data-text="Android app ID/ad unit ID" tabindex="-1">Android app ID/ad unit ID</h3> <table class="vertical-rules"> <tr><td colspan="1" rowspan="1">Item </td><td colspan="1" rowspan="1">app ID/ad unit ID </td></tr> <tr><td colspan="1" rowspan="1">AdMob app ID </td><td colspan="1" rowspan="1"><code translate="no" dir="ltr">ca-app-pub-3940256099942544~3347511713</code> </td></tr> <tr><td colspan="1" rowspan="1">Banner </td><td colspan="1" rowspan="1"><code translate="no" dir="ltr">ca-app-pub-3940256099942544/6300978111</code> </td></tr> <tr><td colspan="1" rowspan="1">Interstitial </td><td colspan="1" rowspan="1"><code translate="no" dir="ltr">ca-app-pub-3940256099942544/1033173712</code> </td></tr> <tr><td colspan="1" rowspan="1">Rewarded </td><td colspan="1" rowspan="1"><code translate="no" dir="ltr">ca-app-pub-3940256099942544/5224354917</code> </td></tr> </table> <h3 is-upgraded id="ios-app-idad-unit-id" data-text="iOS app ID/ad unit ID" tabindex="-1">iOS app ID/ad unit ID</h3> <table class="vertical-rules"> <tr><td colspan="1" rowspan="1">Item </td><td colspan="1" rowspan="1">app ID/ad unit ID </td></tr> <tr><td colspan="1" rowspan="1">AdMob app ID </td><td colspan="1" rowspan="1"><code translate="no" dir="ltr">ca-app-pub-3940256099942544~1458002511</code> </td></tr> <tr><td colspan="1" rowspan="1">Banner </td><td colspan="1" rowspan="1"><code translate="no" dir="ltr">ca-app-pub-3940256099942544/2934735716</code> </td></tr> <tr><td colspan="1" rowspan="1">Interstitial </td><td colspan="1" rowspan="1"><code translate="no" dir="ltr">ca-app-pub-3940256099942544/4411468910</code> </td></tr> <tr><td colspan="1" rowspan="1">Rewarded </td><td colspan="1" rowspan="1"><code translate="no" dir="ltr">ca-app-pub-3940256099942544/1712485313</code> </td></tr> </table> For more information about the test ads, see the <a href="https://developers.google.com/admob/android/test-ads" target="_blank">Android test ads</a> and the <a href="https://developers.google.com/admob/ios/test-ads" target="_blank">iOS test ads</a> developer documentation. </google-codelab-step> <google-codelab-step label="Add the Google Mobile Ads Flutter plugin" duration="5" step="3"> <h2 class="step-title" id="3" data-text="Add the Google Mobile Ads Flutter plugin" tabindex="-1"> 4. Add the Google Mobile Ads Flutter plugin </h2> Flutter uses plugins to provide access to a wide range of platform-specific services. Plugins enable you to access services and APIs on each platform. The <a href="https://pub.dev/packages/google_mobile_ads" target="_blank">google_mobile_ads</a> plugin supports loading and displaying banner, interstitial, rewarded, and native ads using the AdMob API. Because Flutter is a multi-platform SDK, the google_mobile_ads plugin is applicable for both iOS and Android. So, if you add the plugin to your Flutter app, it's used by both Android and iOS versions of the AdMob inline ads app. <h2 is-upgraded id="add-the-google-mobile-ads-plugin-as-a-dependency" data-text="Add the Google Mobile Ads plugin as a dependency" tabindex="-1">Add the Google Mobile Ads plugin as a dependency</h2> To access the AdMob APIs from the AdMob inline ads project, add <code translate="no" dir="ltr">google_mobile_ads</code> as a dependency to the <code translate="no" dir="ltr">pubspec.yaml</code> file located at the root of the project. <h3 is-upgraded id="pubspec.yaml" data-text="pubspec.yaml" tabindex="-1">pubspec.yaml</h3> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="scdoc"><code translate="no" dir="ltr">... environment: # TODO: Update the minimum sdk version to 2.12.0 to support null safety. sdk: ">=2.17.0 <3.0.0" dependencies: flutter: sdk: flutter google_fonts: ^3.0.1 # TODO: Add google_mobile_ads as a dependency google_mobile_ads: ^1.2.0 ... </code></pre></devsite-code> Click Pub get to install the plugin in the Awesome Drawing Quiz project. <img alt="9ce73858eedbd8fc.png" style="width: 624.00px" src="/static/codelabs/admob-ads-in-flutter/img/9ce73858eedbd8fc.png" srcset="https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/9ce73858eedbd8fc_36.png 36w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/9ce73858eedbd8fc_48.png 48w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/9ce73858eedbd8fc_72.png 72w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/9ce73858eedbd8fc_96.png 96w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/9ce73858eedbd8fc_480.png 480w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/9ce73858eedbd8fc_720.png 720w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/9ce73858eedbd8fc_856.png 856w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/9ce73858eedbd8fc_960.png 960w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/9ce73858eedbd8fc_1440.png 1440w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/9ce73858eedbd8fc_1920.png 1920w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/9ce73858eedbd8fc_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> <h2 is-upgraded id="update-androidmanifest.xml-android" data-text="Update AndroidManifest.xml (Android)" tabindex="-1">Update AndroidManifest.xml (Android)</h2> <ol type="1"> <li>Open the <code translate="no" dir="ltr">android/app/src/main/AndroidManifest.xml</code> file in Android Studio.</li> <li>Add your AdMob app ID by adding a <code translate="no" dir="ltr"><meta-data></code> tag with the name <code translate="no" dir="ltr">com.google.android.gms.ads.APPLICATION_ID</code>. For example, if your AdMob app ID is <code translate="no" dir="ltr">ca-app-pub-3940256099942544~3347511713</code>, then you need to add the following lines to the <code translate="no" dir="ltr">AndroidManifest.xml</code> file.</li> </ol> <h3 is-upgraded id="androidmanifest.xml" data-text="AndroidManifest.xml" tabindex="-1">AndroidManifest.xml</h3> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="scdoc"><code translate="no" dir="ltr"><manifest> ... <application> ... <meta-data android:name="com.google.android.gms.ads.APPLICATION_ID" android:value="ca-app-pub-3940256099942544~3347511713"/> </application> </manifest> </code></pre></devsite-code> <h2 is-upgraded id="update-info.plist-ios" data-text="Update Info.plist (iOS)" tabindex="-1">Update Info.plist (iOS)</h2> <ol type="1"> <li>Open the <code translate="no" dir="ltr">ios/Runner/Info.plist</code> file in Android Studio.</li> <li>Add a <code translate="no" dir="ltr">GADApplicationIdentifier</code> key with the string value of your AdMob app ID. For example, if your AdMob app ID is <code translate="no" dir="ltr">ca-app-pub-3940256099942544~1458002511</code>, then you need to add the following lines to the <code translate="no" dir="ltr">Info.plist</code> file.</li> </ol> <h3 is-upgraded id="iosrunnerinfo.plist" data-text="ios/Runner/Info.plist" tabindex="-1">ios/Runner/Info.plist</h3> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Text only"><code translate="no" dir="ltr">... <key>GADApplicationIdentifier</key> <string>ca-app-pub-3940256099942544~1458002511</string> ... </code></pre></devsite-code> </google-codelab-step> <google-codelab-step label="Add a helper class for ads" duration="2" step="4"> <h2 class="step-title" id="4" data-text="Add a helper class for ads" tabindex="-1"> 5. Add a helper class for ads </h2> Create a new file named <code translate="no" dir="ltr">ad_helper.dart</code> under the <code translate="no" dir="ltr">lib</code> directory. Then, implement the <code translate="no" dir="ltr">AdHelper</code> class, which provides an AdMob app ID and ad unit IDs for Android and iOS. Make sure that you replace the AdMob app ID (<code translate="no" dir="ltr">ca-app-pub-xxxxxx~yyyyy</code>) and the ad unit ID (<code translate="no" dir="ltr">ca-app-pub-xxxxxxx/yyyyyyyy</code>) with the IDs you created in the previous step. <h3 is-upgraded id="libad_helper.dart" data-text="lib/ad_helper.dart" tabindex="-1">lib/ad_helper.dart</h3> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Python"><code translate="no" dir="ltr">import 'dart:io'; class AdHelper { static String get bannerAdUnitId { if (Platform.isAndroid) { return '<YOUR_ANDROID_BANNER_AD_UNIT_ID>'; } else if (Platform.isIOS) { return '<YOUR_IOS_BANNER_AD_UNIT_ID>'; } else { throw UnsupportedError('Unsupported platform'); } } static String get interstitialAdUnitId { if (Platform.isAndroid) { return '<YOUR_ANDROID_INTERSTITIAL_AD_UNIT_ID>'; } else if (Platform.isIOS) { return '<YOUR_IOS_INTERSTITIAL_AD_UNIT_ID>'; } else { throw UnsupportedError('Unsupported platform'); } } static String get rewardedAdUnitId { if (Platform.isAndroid) { return '<YOUR_ANDROID_REWARDED_AD_UNIT_ID>'; } else if (Platform.isIOS) { return '<YOUR_IOS_REWARDED_AD_UNIT_ID>'; } else { throw UnsupportedError('Unsupported platform'); } } } </code></pre></devsite-code> Use the following code snippet if you want to use the test AdMob app ID and test ad unit IDs. lib/ad_helper.dart <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Python"><code translate="no" dir="ltr">import 'dart:io'; class AdHelper { static String get bannerAdUnitId { if (Platform.isAndroid) { return 'ca-app-pub-3940256099942544/6300978111'; } else if (Platform.isIOS) { return 'ca-app-pub-3940256099942544/2934735716'; } else { throw new UnsupportedError('Unsupported platform'); } } static String get interstitialAdUnitId { if (Platform.isAndroid) { return "ca-app-pub-3940256099942544/1033173712"; } else if (Platform.isIOS) { return "ca-app-pub-3940256099942544/4411468910"; } else { throw new UnsupportedError("Unsupported platform"); } } static String get rewardedAdUnitId { if (Platform.isAndroid) { return "ca-app-pub-3940256099942544/5224354917"; } else if (Platform.isIOS) { return "ca-app-pub-3940256099942544/1712485313"; } else { throw new UnsupportedError("Unsupported platform"); } } } </code></pre></devsite-code> </google-codelab-step> <google-codelab-step label="Initialize the Google Mobile Ads SDK" duration="2" step="5"> <h2 class="step-title" id="5" data-text="Initialize the Google Mobile Ads SDK" tabindex="-1"> 6. Initialize the Google Mobile Ads SDK </h2> Before loading ads, you need to initialize the Google Mobile Ads SDK. Open the <code translate="no" dir="ltr">lib/home_route.dart</code> file, and modify <code translate="no" dir="ltr">_initGoogleMobileAds()</code> to initialize the SDK before the home page is loaded. Note that you need to change the return type of the <code translate="no" dir="ltr">_initGoogleMobileAds()</code> method from <code translate="no" dir="ltr">Future<dynamic></code> to <code translate="no" dir="ltr">Future<InitializationStatus></code> to get the SDK initialization result after it completes. <h3 is-upgraded id="home_route.dart" data-text="home_route.dart" tabindex="-1">home_route.dart</h3> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Python"><code translate="no" dir="ltr">// TODO: Import google_mobile_ads.dart import 'package:google_mobile_ads/google_mobile_ads.dart'; import 'package:flutter/material.dart'; ... class HomeRoute extends StatelessWidget { ... Future<InitializationStatus> _initGoogleMobileAds() { // TODO: Initialize Google Mobile Ads SDK return MobileAds.instance.initialize(); } } </code></pre></devsite-code> </google-codelab-step> <google-codelab-step label="Add a banner ad" duration="5" step="6"> <h2 class="step-title" id="6" data-text="Add a banner ad" tabindex="-1"> 7. Add a banner ad </h2> In this section, you display a banner ad at the top of the game screen, as shown in the following screenshot. <img alt="276b4cfa283ea6c7.png" style="width: 401.49px" src="/static/codelabs/admob-ads-in-flutter/img/276b4cfa283ea6c7.png" srcset="https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/276b4cfa283ea6c7_36.png 36w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/276b4cfa283ea6c7_48.png 48w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/276b4cfa283ea6c7_72.png 72w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/276b4cfa283ea6c7_96.png 96w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/276b4cfa283ea6c7_480.png 480w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/276b4cfa283ea6c7_720.png 720w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/276b4cfa283ea6c7_856.png 856w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/276b4cfa283ea6c7_960.png 960w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/276b4cfa283ea6c7_1440.png 1440w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/276b4cfa283ea6c7_1920.png 1920w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/276b4cfa283ea6c7_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> <ol type="1"> <li>Open the <code translate="no" dir="ltr">lib/game_route.dart</code> file, and import <code translate="no" dir="ltr">ad_manager.dart</code></li> <li>Import the <code translate="no" dir="ltr">ad_helper.dart</code> and <code translate="no" dir="ltr">google_mobile_ads.dart</code> by adding the following lines:</li> </ol> <h3 is-upgraded id="libgame_route.dart" data-text="lib/game_route.dart" tabindex="-1">lib/game_route.dart</h3> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Python"><code translate="no" dir="ltr">... // TODO: Import ad_helper.dart import 'package:awesome_drawing_quiz/ad_helper.dart'; // TODO: Import google_mobile_ads.dart import 'package:google_mobile_ads/google_mobile_ads.dart'; class GameRoute extends StatefulWidget { ... } </code></pre></devsite-code> <ol type="1" start="3"> <li>In the <code translate="no" dir="ltr">_GameRouteState</code> class, add the following members for a banner ad.</li> </ol> <h3 is-upgraded id="libgame_route.dart_1" data-text="lib/game_route.dart" tabindex="-1">lib/game_route.dart</h3> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="GDScript"><code translate="no" dir="ltr">class _GameRouteState extends State<GameRoute> implements QuizEventListener { ... // TODO: Add _bannerAd BannerAd? _bannerAd; ... } </code></pre></devsite-code> <ol type="1" start="4"> <li>In the <code translate="no" dir="ltr">initState()</code> method, create and load a <code translate="no" dir="ltr">BannerAd</code> for the 320x50 banner (<code translate="no" dir="ltr">AdSize.banner</code>). Note that an ad event listener is configured to update the UI (<code translate="no" dir="ltr">setState()</code>) when an ad is loaded .</li> </ol> <h3 is-upgraded id="libgame_route.dart_2" data-text="lib/game_route.dart" tabindex="-1">lib/game_route.dart</h3> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="GDScript"><code translate="no" dir="ltr">@override void initState() { ... // TODO: Load a banner ad BannerAd( adUnitId: AdHelper.bannerAdUnitId, request: AdRequest(), size: AdSize.banner, listener: BannerAdListener( onAdLoaded: (ad) { setState(() { _bannerAd = ad as BannerAd; }); }, onAdFailedToLoad: (ad, err) { print('Failed to load a banner ad: ${err.message}'); ad.dispose(); }, ), ).load(); } </code></pre></devsite-code> <ol type="1" start="5"> <li>Modify the <code translate="no" dir="ltr">build()</code> method to display a banner ad when available.</li> </ol> <h3 is-upgraded id="libgame_route.dart_3" data-text="lib/game_route.dart" tabindex="-1">lib/game_route.dart</h3> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Transact-SQL"><code translate="no" dir="ltr">@override Widget build(BuildContext context) { return Scaffold( ... body: SafeArea( child: Stack( children: [ Center( ... ), // TODO: Display a banner when ready if (_bannerAd != null) Align( alignment: Alignment.topCenter, child: Container( width: _bannerAd!.size.width.toDouble(), height: _bannerAd!.size.height.toDouble(), child: AdWidget(ad: _bannerAd!), ), ), ], ), ), ... ); } </code></pre></devsite-code> <ol type="1" start="6"> <li>Release the resource associated with the <code translate="no" dir="ltr">BannerAd</code> object by calling the <code translate="no" dir="ltr">BannerAd.dispose()</code> method in the <code translate="no" dir="ltr">dispose()</code> callback method.</li> </ol> <h3 is-upgraded id="libgame_route.dart_4" data-text="lib/game_route.dart" tabindex="-1">lib/game_route.dart</h3> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Transact-SQL"><code translate="no" dir="ltr">@override void dispose() { // TODO: Dispose a BannerAd object _bannerAd?.dispose(); ... super.dispose(); } </code></pre></devsite-code> That's it! Run the project, and start a new game. After an ad is loaded, you'll see a banner ad at the top of the screen. <img alt="276b4cfa283ea6c7.png" style="width: 401.49px" src="/static/codelabs/admob-ads-in-flutter/img/276b4cfa283ea6c7.png" srcset="https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/276b4cfa283ea6c7_36.png 36w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/276b4cfa283ea6c7_48.png 48w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/276b4cfa283ea6c7_72.png 72w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/276b4cfa283ea6c7_96.png 96w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/276b4cfa283ea6c7_480.png 480w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/276b4cfa283ea6c7_720.png 720w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/276b4cfa283ea6c7_856.png 856w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/276b4cfa283ea6c7_960.png 960w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/276b4cfa283ea6c7_1440.png 1440w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/276b4cfa283ea6c7_1920.png 1920w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/276b4cfa283ea6c7_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> </google-codelab-step> <google-codelab-step label="Add an interstitial ad" duration="5" step="7"> <h2 class="step-title" id="7" data-text="Add an interstitial ad" tabindex="-1"> 8. Add an interstitial ad </h2> In this section, you display an interstitial ad after the game (5 levels in total) finishes. <ol type="1"> <li>Open the <code translate="no" dir="ltr">lib/game_route.dart</code> file</li> <li>In the <code translate="no" dir="ltr">_GameRouteState</code> class, add the following members and methods for an interstitial ad.</li> </ol> Note that an ad event listener is configured to check whether the ad is ready (<code translate="no" dir="ltr">onAdLoaded()</code> and <code translate="no" dir="ltr">onAdFailedToLoad()</code>) and to display the app's home screen when the ad is closed (<code translate="no" dir="ltr">onAdDismissedFullScreenContent()</code>) <h3 is-upgraded id="libgame_route.dart_5" data-text="lib/game_route.dart" tabindex="-1">lib/game_route.dart</h3> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="GDScript"><code translate="no" dir="ltr">class _GameRouteState extends State<GameRoute> implements QuizEventListener { ... // TODO: Add _interstitialAd InterstitialAd? _interstitialAd; // TODO: Implement _loadInterstitialAd() void _loadInterstitialAd() { InterstitialAd.load( adUnitId: AdHelper.interstitialAdUnitId, request: AdRequest(), adLoadCallback: InterstitialAdLoadCallback( onAdLoaded: (ad) { ad.fullScreenContentCallback = FullScreenContentCallback( onAdDismissedFullScreenContent: (ad) { _moveToHome(); }, ); setState(() { _interstitialAd = ad; }); }, onAdFailedToLoad: (err) { print('Failed to load an interstitial ad: ${err.message}'); }, ), ); } ... } </code></pre></devsite-code> <ol type="1" start="3"> <li>In this codelab, an interstitial ad is displayed after a user completes 5 levels. To minimize unnecessary ad requests, request an ad when a user reaches level 3.</li> </ol> In the <code translate="no" dir="ltr">onNewLevel()</code> method, add the following lines. <h3 is-upgraded id="libgame_route.dart_6" data-text="lib/game_route.dart" tabindex="-1">lib/game_route.dart</h3> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="GDScript"><code translate="no" dir="ltr">@override void onNewLevel(int level, Drawing drawing, String clue) { ... // TODO: Load an Interstitial Ad if (level >= 3 && _interstitialAd == null) { _loadInterstitialAd(); } } </code></pre></devsite-code> <ol type="1" start="4"> <li>When a game finishes, the game score dialog is displayed. When a user closes the dialog, it routes a user to the home screen of the Awesome Drawing Quiz.</li> </ol> Because interstitial ads should be displayed between screen transitions, we show the interstitial ad when a user clicks the CLOSE button. Modify the <code translate="no" dir="ltr">onGameOver()</code> method as follows. <h3 is-upgraded id="libgame_route.dart_7" data-text="lib/game_route.dart" tabindex="-1">lib/game_route.dart</h3> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Transact-SQL"><code translate="no" dir="ltr">@override void onGameOver(int correctAnswers) { showDialog( context: _scaffoldKey.currentContext, builder: (context) { return AlertDialog( title: Text('Game over!'), content: Text('Score: $correctAnswers/5'), actions: [ FlatButton( child: Text('close'.toUpperCase()), onPressed: () { // TODO: Display an Interstitial Ad if (_interstitialAd != null) { _interstitialAd?.show(); } else { _moveToHome(); } }, ), ], ); }, ); } </code></pre></devsite-code> <ol type="1" start="5"> <li>Release the resource associated with the <code translate="no" dir="ltr">InterstitialAd</code> object by calling the <code translate="no" dir="ltr">InterstitialAd.dispose()</code> method in the <code translate="no" dir="ltr">dispose()</code> callback method.</li> </ol> <h3 is-upgraded id="libgame_route.dart_8" data-text="lib/game_route.dart" tabindex="-1">lib/game_route.dart</h3> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Transact-SQL"><code translate="no" dir="ltr">@override void dispose() { ... // TODO: Dispose an InterstitialAd object _interstitialAd?.dispose(); ... super.dispose(); } </code></pre></devsite-code> That's it! Run the project and complete the game. If an interstitial ad is loaded, you'll see an interstitial ad once you click CLOSE button from the score dialog. <img alt="c546e438c405e941.gif" style="width: 324.82px" src="/static/codelabs/admob-ads-in-flutter/img/c546e438c405e941.gif"> </google-codelab-step> <google-codelab-step label="Add a rewarded ad" duration="6" step="8"> <h2 class="step-title" id="8" data-text="Add a rewarded ad" tabindex="-1"> 9. Add a rewarded ad </h2> In this section, you add a rewarded ad which gives a user an additional hint as a reward. <ol type="1"> <li>Open the <code translate="no" dir="ltr">lib/game_route.dart</code> file</li> <li>In the <code translate="no" dir="ltr">_GameRouteState</code> class, add members for a rewarded ad, and implement <code translate="no" dir="ltr">_loadRewardedAd()</code> method. Note that it loads another rewarded ad when the ad is closed (<code translate="no" dir="ltr">onAdDismissedFullScreenContent</code>) to cache the ad as early as possible.</li> </ol> <h3 is-upgraded id="libgame_route.dart_9" data-text="lib/game_route.dart" tabindex="-1">lib/game_route.dart</h3> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="GDScript"><code translate="no" dir="ltr">class _GameRouteState extends State<GameRoute> implements QuizEventListener { ... // TODO: Add _rewardedAd RewardedAd? _rewardedAd; // TODO: Implement _loadRewardedAd() void _loadRewardedAd() { RewardedAd.load( adUnitId: AdHelper.rewardedAdUnitId, request: AdRequest(), rewardedAdLoadCallback: RewardedAdLoadCallback( onAdLoaded: (ad) { ad.fullScreenContentCallback = FullScreenContentCallback( onAdDismissedFullScreenContent: (ad) { setState(() { ad.dispose(); _rewardedAd = null; }); _loadRewardedAd(); }, ); setState(() { _rewardedAd = ad; }); }, onAdFailedToLoad: (err) { print('Failed to load a rewarded ad: ${err.message}'); }, ), ); } ... } </code></pre></devsite-code> <ol type="1" start="3"> <li>Call <code translate="no" dir="ltr">_loadRewardedAd()</code> from <code translate="no" dir="ltr">initState()</code> method to request a rewarded ad when the game starts.</li> </ol> <h3 is-upgraded id="libgame_route.dart_10" data-text="lib/game_route.dart" tabindex="-1">lib/game_route.dart</h3> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="GDScript"><code translate="no" dir="ltr">class _GameRouteState extends State<GameRoute> implements QuizEventListener { ... @override void initState() { ... // COMPLETE: Load a Rewarded Ad _loadRewardedAd(); } ... } </code></pre></devsite-code> <ol type="1" start="4"> <li>Allow users to watch a rewarded ad by clicking the floating action button. The button shows only if a user hasn't used a hint at the current level and a rewarded ad is loaded.</li> </ol> Modify the <code translate="no" dir="ltr">_buildFloatingActionButton()</code> method, as follows, to display the floating action button. Note that returning <code translate="no" dir="ltr">null</code> hides the button from the screen. Note that <code translate="no" dir="ltr">onUserEarnedReward</code> is the most important ad event in a rewarded ad. It's triggered when a user becomes eligible to receive a reward (for example., finished watching a video). In this codelab, the <code translate="no" dir="ltr">QuizManager.instance.useHint()</code> method is called from the callback, which reveals one more character in the hint string. The app reloads a rewarded ad in the <code translate="no" dir="ltr">onAdClosed</code> callback to make sure the ad is ready as early as possible. <h3 is-upgraded id="libgame_route.dart_11" data-text="lib/game_route.dart" tabindex="-1">lib/game_route.dart</h3> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="CSS+Lasso"><code translate="no" dir="ltr">Widget? _buildFloatingActionButton() { // TODO: Return a FloatingActionButton if a rewarded ad is available return (!QuizManager.instance.isHintUsed && _rewardedAd != null) ? FloatingActionButton.extended( onPressed: () { showDialog( context: context, builder: (context) { return AlertDialog( title: Text('Need a hint?'), content: Text('Watch an Ad to get a hint!'), actions: [ TextButton( child: Text('cancel'.toUpperCase()), onPressed: () { Navigator.pop(context); }, ), TextButton( child: Text('ok'.toUpperCase()), onPressed: () { Navigator.pop(context); _rewardedAd?.show( onUserEarnedReward: (_, reward) { QuizManager.instance.useHint(); }, ); }, ), ], ); }, ); }, label: Text('Hint'), icon: Icon(Icons.card_giftcard), ) : null; } </code></pre></devsite-code> <ol type="1" start="5"> <li>Release the resource associated with the <code translate="no" dir="ltr">RewardedAd</code> object by calling the <code translate="no" dir="ltr">RewardedAd.dispose()</code> method in the <code translate="no" dir="ltr">dispose()</code> callback method.</li> </ol> <h3 is-upgraded id="libgame_route.dart_12" data-text="lib/game_route.dart" tabindex="-1">lib/game_route.dart</h3> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Transact-SQL"><code translate="no" dir="ltr">@override void dispose() { ... // TODO: Dispose a RewardedAd object _rewardedAd?.dispose(); ... super.dispose(); } </code></pre></devsite-code> That's it! Run the project and play the game. Once a rewarded ad is loaded, you'll see a hint button at the bottom of the screen. Click Hint button to get an additional hint. <img alt="4a114d243ae3e71d.gif" style="width: 339.09px" src="/static/codelabs/admob-ads-in-flutter/img/4a114d243ae3e71d.gif"> </google-codelab-step> <google-codelab-step label="All done!" duration="0" step="9"> <h2 class="step-title" id="9" data-text="All done!" tabindex="-1"> 10. All done! </h2> You have completed the codelab. You can find the completed code for this codelab in the <img alt="android_studio_folder.png" style="width: 20.00px" src="/static/codelabs/admob-ads-in-flutter/img/bb745dc85ae69f6b.png" srcset="https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/bb745dc85ae69f6b_36.png 36w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/bb745dc85ae69f6b_48.png 48w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/bb745dc85ae69f6b_72.png 72w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/bb745dc85ae69f6b_96.png 96w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/bb745dc85ae69f6b_480.png 480w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/bb745dc85ae69f6b_720.png 720w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/bb745dc85ae69f6b_856.png 856w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/bb745dc85ae69f6b_960.png 960w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/bb745dc85ae69f6b_1440.png 1440w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/bb745dc85ae69f6b_1920.png 1920w,https://codelabs.developers.google.com/static/codelabs/admob-ads-in-flutter/img/bb745dc85ae69f6b_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px">complete folder. To learn how to implement a banner and native inline ads, check out the <a href="https://codelabs.developers.google.com/codelabs/admob-inline-ads-in-flutter" target="_blank">Adding an AdMob banner and native inline ads to a Flutter app</a> codelab. To learn more, try the other <a href="https://flutter.dev/docs/codelabs" target="_blank">Flutter codelabs</a>. </google-codelab-step> </google-codelab> </div> <div class="devsite-floating-action-buttons"> </div> </article> <devsite-content-footer class="nocontent"> Except as otherwise noted, the content of this page is licensed under the <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 License</a>, and code samples are licensed under the <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache 2.0 License</a>. For details, see the <a href="https://developers.google.com/site-policies">Google Developers Site Policies</a>. Java is a registered trademark of Oracle and/or its affiliates. </devsite-content-footer> <devsite-notification > </devsite-notification> <div class="devsite-content-data"> <template class="devsite-content-data-template"> [[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],[],[],[]] </template> </div> </devsite-content> </main> <devsite-footer-promos class="devsite-footer"> </devsite-footer-promos> <devsite-footer-linkboxes class="devsite-footer"> <nav class="devsite-footer-linkboxes nocontent" aria-label="Footer links"> <ul class="devsite-footer-linkboxes-list"> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Connect</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="//googledevelopers.blogspot.com" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Blog </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//www.facebook.com/Google-Developers-967415219957038" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Facebook </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//medium.com/google-developers" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Medium </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//twitter.com/googledevs" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > Twitter </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//www.youtube.com/user/GoogleDevelopers" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 5)" > YouTube </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Programs</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="//www.womentechmakers.com" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Women Techmakers </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//developers.google.com/community/gdg" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Google Developer Groups </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//developers.google.com/community/experts" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Google Developer Experts </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//developers.google.com/community/accelerators" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > Accelerators </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Developer consoles</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="//console.developers.google.com" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Google API Console </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//console.cloud.google.com" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Google Cloud Platform Console </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//play.google.com/apps/publish" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Google Play Console </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//console.firebase.google.com" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > Firebase Console </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//console.actions.google.com" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 5)" > Actions on Google Console </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//cast.google.com/publish" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 6)" > Cast SDK Developer Console </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//chrome.google.com/webstore/developer/dashboard" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 7)" > Chrome Web Store Dashboard </a> </li> </ul> </li> </ul> </nav> </devsite-footer-linkboxes> <devsite-footer-utility class="devsite-footer"> <div class="devsite-footer-utility nocontent"> <nav class="devsite-footer-sites" aria-label="Other Google Developers websites"> <a href="https://developers.google.com/" class="devsite-footer-sites-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Google Developers Link"> <picture> <img class="devsite-footer-sites-logo" src="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/codelabs/images/lockup-google-for-developers.svg" loading="lazy" alt="Google Developers"> </picture> </a> <ul class="devsite-footer-sites-list"> <li class="devsite-footer-sites-item"> <a href="//developer.android.com" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Android Link" > Android </a> </li> <li class="devsite-footer-sites-item"> <a href="//developer.chrome.com/home" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Chrome Link" > Chrome </a> </li> <li class="devsite-footer-sites-item"> <a href="//firebase.google.com" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Firebase Link" > Firebase </a> </li> <li class="devsite-footer-sites-item"> <a href="//cloud.google.com" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Google Cloud Platform Link" > Google Cloud Platform </a> </li> <li class="devsite-footer-sites-item"> <a href="//developers.google.com/products" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer All products Link" > All products </a> </li> </ul> </nav> <nav class="devsite-footer-utility-links" aria-label="Utility links"> <ul class="devsite-footer-utility-list"> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//developers.google.com/terms/site-terms" data-category="Site-Wide Custom Events" data-label="Footer Terms link" > Terms </a> </li> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/privacy" data-category="Site-Wide Custom Events" data-label="Footer Privacy link" > Privacy </a> </li> <li class="devsite-footer-utility-item glue-cookie-notification-bar-control"> <a class="devsite-footer-utility-link gc-analytics-event" href="#" data-category="Site-Wide Custom Events" data-label="Footer Manage cookies link" aria-hidden="true" > Manage cookies </a> </li> <li class="devsite-footer-utility-item devsite-footer-utility-button"> Sign up for the Google Developers newsletter <a class="devsite-footer-utility-link gc-analytics-event" href="//services.google.com/fb/forms/googledevelopersnewsletter/?utm_medium=referral&utm_source=google-products&utm_team=googledevs&utm_campaign=201611-newsletter-launch" data-category="Site-Wide Custom Events" data-label="Footer Subscribe link" > Subscribe </a> </li> </ul> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es" >Español</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> </nav> </div> </devsite-footer-utility> <devsite-panel></devsite-panel> </section></section> <devsite-sitemask></devsite-sitemask> <devsite-snackbar></devsite-snackbar> <devsite-tooltip ></devsite-tooltip> <devsite-heading-link></devsite-heading-link> <devsite-analytics> <script type="application/json" analytics>[]</script> <script type="application/json" tag-management>{"at": "True", "ga4": [], "ga4p": [], "gtm": [], "parameters": {"internalUser": "False", "language": {"machineTranslated": "False", "requested": "en", "served": "en"}, "pageType": "codelab", "projectName": null, "signedIn": "False", "tenant": "codelabs", "recommendations": {"sourcePage": "", "sourceType": 0, "sourceRank": 0, "sourceIdenticalDescriptions": 0, "sourceTitleWords": 0, "sourceDescriptionWords": 0, "experiment": ""}, "experiment": {"ids": ""}}}</script> </devsite-analytics> <devsite-badger></devsite-badger> <script nonce="Y7OKQnaQW9I5BtcHHpE+DvCjMZNS3d"> (function(d,e,v,s,i,t,E){d['GoogleDevelopersObject']=i; t=e.createElement(v);t.async=1;t.src=s;E=e.getElementsByTagName(v)[0]; E.parentNode.insertBefore(t,E);})(window, document, 'script', 'https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/codelabs/js/app_loader.js', '[17,"en",null,"/js/devsite_app_module.js","https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f","https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/codelabs","https://codelabs-dot-devsite-v2-prod.appspot.com",1,null,["/_pwa/codelabs/manifest.json","https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/images/video-placeholder.svg","https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/codelabs/images/favicon.png","https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/codelabs/images/lockup.svg","https://fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"],1,null,[1,6,8,12,14,17,21,25,50,52,63,70,75,76,80,87,91,92,93,97,98,100,101,102,103,104,105,107,108,109,110,112,113,116,117,118,120,122,124,125,126,127,129,130,131,132,133,134,135,136,138,140,141,147,148,149,151,152,156,157,158,159,161,163,164,168,169,170,179,180,182,183,186,191,193,196],"AIzaSyAP-jjEJBzmIyKR4F-3XITp8yM9T1gEEI8","AIzaSyB6xiKGDR5O3Ak2okS4rLkauxGUG7XP0hg","codelabs.developers.google.com","AIzaSyAQk0fBONSGUqCNznf6Krs82Ap1-NV6J4o","AIzaSyCCxcqdrZ_7QMeLCRY20bh_SXdAYqy70KY",null,null,null,["MiscFeatureFlags__enable_project_variables","DevPro__enable_cloud_innovators_plus","Search__enable_ai_eligibility_checks","Profiles__enable_release_notes_notifications","Profiles__enable_completequiz_endpoint","Cloud__enable_cloudx_ping","Cloud__enable_cloud_shell_fte_user_flow","Analytics__enable_clearcut_logging","EngEduTelemetry__enable_engedu_telemetry","MiscFeatureFlags__developers_footer_image","MiscFeatureFlags__enable_view_transitions","Profiles__enable_awarding_url","Cloud__enable_cloud_facet_chat","TpcFeatures__enable_mirror_tenant_redirects","Profiles__enable_complete_playlist_endpoint","MiscFeatureFlags__enable_explain_this_code","Profiles__enable_completecodelab_endpoint","BookNav__enable_tenant_cache_key","Profiles__enable_dashboard_curated_recommendations","CloudShell__cloud_shell_button","Cloud__enable_cloudx_experiment_ids","Cloud__enable_llm_concierge_chat","Profiles__enable_public_developer_profiles","Cloud__enable_cloud_dlp_service","DevPro__enable_developer_subscriptions","Profiles__require_profile_eligibility_for_signin","Cloud__enable_legacy_calculator_redirect","Profiles__enable_profile_collections","MiscFeatureFlags__developers_footer_dark_image","Profiles__enable_recognition_badges","MiscFeatureFlags__enable_firebase_utm","Search__enable_dynamic_content_confidential_banner","TpcFeatures__enable_unmirrored_page_left_nav","Profiles__enable_stripe_subscription_management","Cloud__enable_free_trial_server_call","Concierge__enable_pushui","Search__enable_suggestions_from_borg","Experiments__reqs_query_experiments","Search__enable_page_map","Profiles__enable_developer_profiles_callout","Profiles__enable_page_saving","MiscFeatureFlags__enable_variable_operator","Profiles__enable_join_program_group_endpoint","MiscFeatureFlags__emergency_css","Cloud__enable_cloud_shell","CloudShell__cloud_code_overflow_menu"],null,null,"AIzaSyBLEMok-5suZ67qRPzx0qUtbnLmyT_kCVE","https://developerscontentserving-pa.clients6.google.com","AIzaSyCM4QpTRSqP5qI4Dvjt4OAScIN8sOUlO-k","https://developerscontentsearch-pa.clients6.google.com",1,4,null,"https://developerprofiles-pa.clients6.google.com",[17,"codelabs","Google Codelabs","codelabs.developers.google.com",null,"codelabs-dot-devsite-v2-prod.appspot.com",null,null,[null,1,null,null,null,null,null,null,null,null,null,[1],null,null,null,null,null,null,[1],null,null,null,null,[1]],null,[33,null,null,null,null,null,"/images/lockup.svg",null,null,null,null,1,1,null,null,null,null,null,null,null,null,1,null,null,null,null,[]],[],null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,[6,1,14,15,20,22,23,29,32,36],null,[[],[1,1]],[[null,null,null,null,null,null,null,null,null,null,null,null,1]],null,4],null,"pk_live_5170syrHvgGVmSx9sBrnWtA5luvk9BwnVcvIi7HizpwauFG96WedXsuXh790rtij9AmGllqPtMLfhe2RSwD6Pn38V00uBCydV4m",1]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>