CINXE.COM
Creating a multiplayer crossword with Gemini, Flutter, and Firebase | Solutions for Developers | Google for Developers
<!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 for Developers"> <meta property="og:type" content="website"><meta name="theme-color" content="#fff"><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/developers/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/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/css/app.css"> <link rel="shortcut icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/images/favicon-new.png"> <link rel="apple-touch-icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/images/touchicon-180-new.png"><link rel="canonical" href="https://developers.google.com/learn/pathways/solution-crossword"><link rel="search" type="application/opensearchdescription+xml" title="Google for Developers" href="https://developers.google.com/s/opensearch.xml"> <link rel="alternate" hreflang="en" href="https://developers.google.com/learn/pathways/solution-crossword" /><link rel="alternate" hreflang="x-default" href="https://developers.google.com/learn/pathways/solution-crossword" /><title>Creating a multiplayer crossword with Gemini, Flutter, and Firebase | Solutions for Developers | Google for Developers</title> <meta property="og:title" content="Creating a multiplayer crossword with Gemini, Flutter, and Firebase | Solutions for Developers | Google for Developers"><meta name="description" content="Learn how the Google engineering teams created a multiplayer crossword using Gemini, Flutter, and Firebase."> <meta property="og:description" content="Learn how the Google engineering teams created a multiplayer crossword using Gemini, Flutter, and Firebase."><meta property="og:url" content="https://developers.google.com/learn/pathways/solution-crossword"><meta property="og:image" content="https://developers.google.com/profile/badges/playlists/solutions/ai-gemini-101/badge.svg"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="675"><meta property="og:locale" content="en"><meta name="twitter:card" content="summary_large_image"><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "Solutions", "item": "https://developers.google.com/solutions" },{ "@type": "ListItem", "position": 2, "name": "Creating a multiplayer crossword with Gemini, Flutter, and Firebase", "item": "https://developers.google.com/learn/pathways/solution-crossword" }] } </script> <link rel="stylesheet" href="/extras.css"></head> <body class="" template="playlist" theme="white" type="playlist" layout="full" concierge='hide' pending> <devsite-progress type="indeterminate" id="app-progress"></devsite-progress> <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="googleForDevelopers" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <img src="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/images/lockup-new.svg" class="devsite-site-logo" alt="Google for Developers"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> <div class="devsite-top-logo-row-middle"> <div class="devsite-header-upper-tabs"> <devsite-tabs class="upper-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Upper tabs"> <tab class="devsite-dropdown devsite-dropdown-full "> <a href="https://developers.google.com/products" track-metadata-eventdetail="https://developers.google.com/products" class="devsite-tabs-content gc-analytics-event products-dropdown-tab" track-type="nav" track-metadata-position="nav - products" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Products" track-name="products" > Products </a> <a href="#" role="button" aria-haspopup="true" aria-expanded="false" aria-label="Dropdown menu for Products" track-type="nav" track-metadata-eventdetail="https://developers.google.com/products" track-metadata-position="nav - products" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Products" track-name="products" class="devsite-tabs-dropdown-toggle devsite-icon devsite-icon-arrow-drop-down"></a> <div class="devsite-tabs-dropdown" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column products-dropdown"> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-item"> <a href="https://developers.google.com/products/developer-platforms-and-os?category=DevsiteMarketingPlatformsAndOperatingSystems" class="devsite-products-category" track-type="nav" track-metadata-eventdetail="https://developers.google.com/products/developer-platforms-and-os?category=DevsiteMarketingPlatformsAndOperatingSystems" track-metadata-position="nav - products" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Platforms and Operating Systems </div> </a> </li> <li class="devsite-nav-item"> <a href="//developer.android.com" track-type="nav" track-metadata-eventdetail="//developer.android.com" track-metadata-position="nav - products" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-icon-container" size="medium" > <picture> <img class="devsite-nav-item-icon" alt="" src="//developer.android.com/static/images/android-logo.svg" srcset=" //developer.android.com/static/images/android-logo.svg" sizes="100vw" loading="lazy" > </picture> </div> <div class="devsite-nav-item-title"> Android → </div> </a> </li> <li class="devsite-nav-item"> <a href="//ai.google.dev/" track-type="nav" track-metadata-eventdetail="//ai.google.dev/" track-metadata-position="nav - products" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-icon-container" size="medium" > <picture> <img class="devsite-nav-item-icon" alt="" src="https://developers.google.com/static/site-assets/logo-google-g.svg" srcset=" /static/site-assets/logo-google-g.svg" sizes="100vw" loading="lazy" > </picture> </div> <div class="devsite-nav-item-title"> Google AI → </div> </a> </li> <li class="devsite-nav-item"> <a href="//developer.chrome.com" track-type="nav" track-metadata-eventdetail="//developer.chrome.com" track-metadata-position="nav - products" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-icon-container" size="medium" > <picture> <img class="devsite-nav-item-icon" alt="" src="https://developers.google.com/static/homepage-assets/images/chromeos-logo.svg" srcset=" /static/homepage-assets/images/chromeos-logo.svg" sizes="100vw" loading="lazy" > </picture> </div> <div class="devsite-nav-item-title"> Chrome → </div> </a> </li> <li class="devsite-nav-item"> <a href="//cloud.google.com/developers" track-type="nav" track-metadata-eventdetail="//cloud.google.com/developers" track-metadata-position="nav - products" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-icon-container" size="medium" > <picture> <img class="devsite-nav-item-icon" alt="" src="//gstatic.com/images/branding/product/2x/google_cloud_64dp.png" srcset=" //gstatic.com/images/branding/product/2x/google_cloud_64dp.png" sizes="100vw" loading="lazy" > </picture> </div> <div class="devsite-nav-item-title"> Google Cloud → </div> </a> </li> <li class="devsite-nav-item"> <a href="//firebase.google.com" track-type="nav" track-metadata-eventdetail="//firebase.google.com" track-metadata-position="nav - products" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-icon-container" size="medium" > <picture> <img class="devsite-nav-item-icon" alt="" src="https://developers.google.com/_static/firebase/images/icon.svg" srcset=" /_static/firebase/images/icon.svg" sizes="100vw" loading="lazy" > </picture> </div> <div class="devsite-nav-item-title"> Firebase → </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column products-dropdown"> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-item"> <a href="https://developers.google.com/products/frameworks-ides-and-sdks?category=DevsiteMarketingIdesFrameworksAndSdks" class="devsite-products-category" track-type="nav" track-metadata-eventdetail="https://developers.google.com/products/frameworks-ides-and-sdks?category=DevsiteMarketingIdesFrameworksAndSdks" track-metadata-position="nav - products" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Frameworks, IDEs, and SDKs </div> </a> </li> <li class="devsite-nav-item"> <a href="//developer.android.com/jetpack" track-type="nav" track-metadata-eventdetail="//developer.android.com/jetpack" track-metadata-position="nav - products" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-icon-container" size="medium" > <picture> <img class="devsite-nav-item-icon" alt="" src="//developer.android.com/static/images/spot-icons/jetpack-compose.svg" srcset=" //developer.android.com/static/images/spot-icons/jetpack-compose.svg" sizes="100vw" loading="lazy" > </picture> </div> <div class="devsite-nav-item-title"> Jetpack Compose → </div> </a> </li> <li class="devsite-nav-item"> <a href="//developer.android.com/studio" track-type="nav" track-metadata-eventdetail="//developer.android.com/studio" track-metadata-position="nav - products" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-icon-container" size="medium" > <picture> <img class="devsite-nav-item-icon" alt="" src="//developer.android.com/static/images/android-logo.svg" srcset=" //developer.android.com/static/images/android-logo.svg" sizes="100vw" loading="lazy" > </picture> </div> <div class="devsite-nav-item-title"> Android Studio → </div> </a> </li> <li class="devsite-nav-item"> <a href="//flutter.dev" track-type="nav" track-metadata-eventdetail="//flutter.dev" track-metadata-position="nav - products" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-icon-container" size="medium" > <picture> <img class="devsite-nav-item-icon" alt="" src="https://developers.google.com/static/site-assets/logo-flutter.svg" srcset=" /static/site-assets/logo-flutter.svg" sizes="100vw" loading="lazy" > </picture> </div> <div class="devsite-nav-item-title"> Flutter → </div> </a> </li> <li class="devsite-nav-item"> <a href="//idx.dev/" track-type="nav" track-metadata-eventdetail="//idx.dev/" track-metadata-position="nav - products" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-icon-container" size="medium" > <picture> <img class="devsite-nav-item-icon" alt="" src="https://developers.google.com/static/products/images/project-idx.png" srcset="https://developers.google.com/static/products/images/project-idx_36.png 36w, https://developers.google.com/static/products/images/project-idx_48.png 48w, https://developers.google.com/static/products/images/project-idx_72.png 72w, https://developers.google.com/static/products/images/project-idx_96.png 96w, https://developers.google.com/static/products/images/project-idx_480.png 480w, https://developers.google.com/static/products/images/project-idx_720.png 720w, https://developers.google.com/static/products/images/project-idx_856.png 856w, https://developers.google.com/static/products/images/project-idx_960.png 960w, https://developers.google.com/static/products/images/project-idx_1440.png 1440w, https://developers.google.com/static/products/images/project-idx_1920.png 1920w, https://developers.google.com/static/products/images/project-idx_2880.png 2880w" sizes="100vw" loading="lazy" > </picture> </div> <div class="devsite-nav-item-title"> Project IDX → </div> </a> </li> <li class="devsite-nav-item"> <a href="//makersuite.google.com/" track-type="nav" track-metadata-eventdetail="//makersuite.google.com/" track-metadata-position="nav - products" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-icon-container" size="medium" > <picture> <img class="devsite-nav-item-icon" alt="" src="https://developers.google.com/static/focus/images/ai-studio-icon.png" srcset="https://developers.google.com/static/focus/images/ai-studio-icon_36.png 36w, https://developers.google.com/static/focus/images/ai-studio-icon_48.png 48w, https://developers.google.com/static/focus/images/ai-studio-icon_72.png 72w, https://developers.google.com/static/focus/images/ai-studio-icon_96.png 96w, https://developers.google.com/static/focus/images/ai-studio-icon_480.png 480w, https://developers.google.com/static/focus/images/ai-studio-icon_720.png 720w, https://developers.google.com/static/focus/images/ai-studio-icon_856.png 856w, https://developers.google.com/static/focus/images/ai-studio-icon_960.png 960w, https://developers.google.com/static/focus/images/ai-studio-icon_1440.png 1440w, https://developers.google.com/static/focus/images/ai-studio-icon_1920.png 1920w, https://developers.google.com/static/focus/images/ai-studio-icon_2880.png 2880w" sizes="100vw" loading="lazy" > </picture> </div> <div class="devsite-nav-item-title"> Google AI Studio → </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column products-dropdown"> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-item"> <a href="https://developers.google.com/products/services-and-integrations?category=DevsiteMarketingServicesAndIntegrations" class="devsite-products-category" track-type="nav" track-metadata-eventdetail="https://developers.google.com/products/services-and-integrations?category=DevsiteMarketingServicesAndIntegrations" track-metadata-position="nav - products" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Services and Integrations </div> </a> </li> <li class="devsite-nav-item"> <a href="//ai.google.dev/gemini-api/docs" track-type="nav" track-metadata-eventdetail="//ai.google.dev/gemini-api/docs" track-metadata-position="nav - products" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-icon-container" size="medium" > <picture> <img class="devsite-nav-item-icon" alt="" src="https://developers.google.com/static/focus/images/gemini-icon.png" srcset="https://developers.google.com/static/focus/images/gemini-icon_36.png 36w, https://developers.google.com/static/focus/images/gemini-icon_48.png 48w, https://developers.google.com/static/focus/images/gemini-icon_72.png 72w, https://developers.google.com/static/focus/images/gemini-icon_96.png 96w, https://developers.google.com/static/focus/images/gemini-icon_480.png 480w, https://developers.google.com/static/focus/images/gemini-icon_720.png 720w, https://developers.google.com/static/focus/images/gemini-icon_856.png 856w, https://developers.google.com/static/focus/images/gemini-icon_960.png 960w, https://developers.google.com/static/focus/images/gemini-icon_1440.png 1440w, https://developers.google.com/static/focus/images/gemini-icon_1920.png 1920w, https://developers.google.com/static/focus/images/gemini-icon_2880.png 2880w" sizes="100vw" loading="lazy" > </picture> </div> <div class="devsite-nav-item-title"> Gemini API → </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/privacy-sandbox" track-type="nav" track-metadata-eventdetail="https://developers.google.com/privacy-sandbox" track-metadata-position="nav - products" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-icon-container" size="medium" > <picture> <img class="devsite-nav-item-icon" alt="" src="https://developers.google.com/static/privacy-sandbox/assets/images/privacy-sandbox-logo.svg" srcset=" /static/privacy-sandbox/assets/images/privacy-sandbox-logo.svg" sizes="100vw" loading="lazy" > </picture> </div> <div class="devsite-nav-item-title"> Privacy Sandbox → </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/identity" track-type="nav" track-metadata-eventdetail="https://developers.google.com/identity" track-metadata-position="nav - products" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-icon-container" size="medium" > <picture> <img class="devsite-nav-item-icon" alt="" src="https://developers.google.com/static/site-assets/logo-google-g.svg" srcset=" /static/site-assets/logo-google-g.svg" sizes="100vw" loading="lazy" > </picture> </div> <div class="devsite-nav-item-title"> Identity </div> </a> </li> <li class="devsite-nav-item"> <a href="//checks.google.com/" track-type="nav" track-metadata-eventdetail="//checks.google.com/" track-metadata-position="nav - products" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-icon-container" size="medium" > <picture> <img class="devsite-nav-item-icon" alt="" src="https://developers.google.com/static/checks/images/Checks_Icon.png" srcset="https://developers.google.com/static/checks/images/Checks_Icon_36.png 36w, https://developers.google.com/static/checks/images/Checks_Icon_48.png 48w, https://developers.google.com/static/checks/images/Checks_Icon_72.png 72w, https://developers.google.com/static/checks/images/Checks_Icon_96.png 96w, https://developers.google.com/static/checks/images/Checks_Icon_480.png 480w, https://developers.google.com/static/checks/images/Checks_Icon_720.png 720w, https://developers.google.com/static/checks/images/Checks_Icon_856.png 856w, https://developers.google.com/static/checks/images/Checks_Icon_960.png 960w, https://developers.google.com/static/checks/images/Checks_Icon_1440.png 1440w, https://developers.google.com/static/checks/images/Checks_Icon_1920.png 1920w, https://developers.google.com/static/checks/images/Checks_Icon_2880.png 2880w" sizes="100vw" loading="lazy" > </picture> </div> <div class="devsite-nav-item-title"> Checks → </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/workspace" track-type="nav" track-metadata-eventdetail="https://developers.google.com/workspace" track-metadata-position="nav - products" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-icon-container" size="medium" > <picture> <img class="devsite-nav-item-icon" alt="" src="https://developers.google.com/static/site-assets/logo-google-g.svg" srcset=" /static/site-assets/logo-google-g.svg" sizes="100vw" loading="lazy" > </picture> </div> <div class="devsite-nav-item-title"> Google Workspace </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column products-dropdown"> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-item"> <a href="https://developers.google.com/products/growth-and-monetization?category=DevsiteMarketingGrowthAndMonetization" class="devsite-products-category" track-type="nav" track-metadata-eventdetail="https://developers.google.com/products/growth-and-monetization?category=DevsiteMarketingGrowthAndMonetization" track-metadata-position="nav - products" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Growth and Monetization </div> </a> </li> <li class="devsite-nav-item"> <a href="//developer.android.com/distribute/" track-type="nav" track-metadata-eventdetail="//developer.android.com/distribute/" track-metadata-position="nav - products" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-icon-container" size="medium" > <picture> <img class="devsite-nav-item-icon" alt="" src="//gstatic.com/images/branding/product/2x/play_prism_64dp.png" srcset=" //gstatic.com/images/branding/product/2x/play_prism_64dp.png" sizes="100vw" loading="lazy" > </picture> </div> <div class="devsite-nav-item-title"> Google Play → </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/admob" track-type="nav" track-metadata-eventdetail="https://developers.google.com/admob" track-metadata-position="nav - products" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-icon-container" size="medium" > <picture> <img class="devsite-nav-item-icon" alt="" src="//gstatic.com/images/branding/product/2x/admob_36dp.png" srcset=" //gstatic.com/images/branding/product/2x/admob_36dp.png" sizes="100vw" loading="lazy" > </picture> </div> <div class="devsite-nav-item-title"> Google AdMob </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/google-ads" track-type="nav" track-metadata-eventdetail="https://developers.google.com/google-ads" track-metadata-position="nav - products" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-icon-container" size="medium" > <picture> <img class="devsite-nav-item-icon" alt="" src="https://developers.google.com/static/homepage-assets/images/google-ads.svg" srcset=" /static/homepage-assets/images/google-ads.svg" sizes="100vw" loading="lazy" > </picture> </div> <div class="devsite-nav-item-title"> Google Ads </div> </a> </li> <li class="devsite-nav-item"> <a href="//developer.chrome.com/docs/extensions" track-type="nav" track-metadata-eventdetail="//developer.chrome.com/docs/extensions" track-metadata-position="nav - products" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-icon-container" size="medium" > <picture> <img class="devsite-nav-item-icon" alt="" src="https://developers.google.com/static/homepage-assets/images/chromeos-logo.svg" srcset=" /static/homepage-assets/images/chromeos-logo.svg" sizes="100vw" loading="lazy" > </picture> </div> <div class="devsite-nav-item-title"> Chrome Extensions → </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/search" track-type="nav" track-metadata-eventdetail="https://developers.google.com/search" track-metadata-position="nav - products" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-icon-container" size="medium" > <picture> <img class="devsite-nav-item-icon" alt="" src="https://developers.google.com/static/search/images/google-search-central-logo.svg" srcset=" /static/search/images/google-search-central-logo.svg" sizes="100vw" loading="lazy" > </picture> </div> <div class="devsite-nav-item-title"> Google Search Central </div> </a> </li> </ul> </div> </div> </div> </tab> <tab > <a href="https://developers.google.com/solutions/catalog" track-metadata-eventdetail="https://developers.google.com/solutions/catalog" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - solutions" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Solutions" track-name="solutions" > Solutions </a> </tab> <tab > <a href="https://developers.google.com/events" track-metadata-eventdetail="https://developers.google.com/events" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - events" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Events" track-name="events" > Events </a> </tab> <tab > <a href="https://developers.google.com/learn" track-metadata-eventdetail="https://developers.google.com/learn" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - learn" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Learn" track-name="learn" aria-label="Learning Catalog" > Learn </a> </tab> <tab class="devsite-dropdown "> <a href="https://developers.google.com/community" track-metadata-eventdetail="https://developers.google.com/community" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - community" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Community" track-name="community" > Community </a> <a href="#" role="button" aria-haspopup="true" aria-expanded="false" aria-label="Dropdown menu for Community" track-type="nav" track-metadata-eventdetail="https://developers.google.com/community" track-metadata-position="nav - community" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Community" track-name="community" class="devsite-tabs-dropdown-toggle devsite-icon devsite-icon-arrow-drop-down"></a> <div class="devsite-tabs-dropdown" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-title" role="heading" tooltip>Communities</li> <li class="devsite-nav-item"> <a href="https://developers.google.com/community/gdg" track-type="nav" track-metadata-eventdetail="https://developers.google.com/community/gdg" track-metadata-position="nav - community" track-metadata-module="tertiary nav" track-metadata-module_headline="communities" tooltip > <div class="devsite-nav-item-title"> Google Developer Groups </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/community/gdsc" track-type="nav" track-metadata-eventdetail="https://developers.google.com/community/gdsc" track-metadata-position="nav - community" track-metadata-module="tertiary nav" track-metadata-module_headline="communities" tooltip > <div class="devsite-nav-item-title"> Google Developer Student Clubs </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/womentechmakers" track-type="nav" track-metadata-eventdetail="https://developers.google.com/womentechmakers" track-metadata-position="nav - community" track-metadata-module="tertiary nav" track-metadata-module_headline="communities" tooltip > <div class="devsite-nav-item-title"> Women Techmakers </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-title" role="heading" tooltip>Programs</li> <li class="devsite-nav-item"> <a href="https://developers.google.com/community/accelerators" track-type="nav" track-metadata-eventdetail="https://developers.google.com/community/accelerators" track-metadata-position="nav - community" track-metadata-module="tertiary nav" track-metadata-module_headline="programs" tooltip > <div class="devsite-nav-item-title"> Accelerator </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/community/experts" track-type="nav" track-metadata-eventdetail="https://developers.google.com/community/experts" track-metadata-position="nav - community" track-metadata-module="tertiary nav" track-metadata-module_headline="programs" tooltip > <div class="devsite-nav-item-title"> Google Developer Experts </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/community/tec" track-type="nav" track-metadata-eventdetail="https://developers.google.com/community/tec" track-metadata-position="nav - community" track-metadata-module="tertiary nav" track-metadata-module_headline="programs" tooltip > <div class="devsite-nav-item-title"> Tech Equity Collective </div> </a> </li> </ul> </div> </div> </div> </tab> <tab > <a href="https://developers.google.com/profile/u/me/dashboard" track-metadata-eventdetail="https://developers.google.com/profile/u/me/dashboard" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - developer program" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Developer Program" track-name="developer program" > Developer Program </a> </tab> <tab > <a href="https://developers.googleblog.com" track-metadata-eventdetail="https://developers.googleblog.com" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - blog" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Blog" track-name="blog" > Blog </a> </tab> </nav> </devsite-tabs> </div> <devsite-search enable-signin enable-search enable-suggestions enable-query-completion project-name="Solutions for Developers" tenant-name="Google for Developers" project-scope="/solutions" url-scoped="https://developers.google.com/s/results/solutions" > <form class="devsite-search-form" action="https://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="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</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"> <span class="button devsite-top-button" aria-hidden="true" visually-hidden>Sign in</span> </devsite-user> </div> </div> </div> <div class="devsite-collapsible-section devsite-header-no-lower-tabs "> <div class="devsite-header-background"> </div> </div> </div> </devsite-header> <devsite-book-nav scrollbars hidden> <div class="devsite-book-nav-filter" hidden> <span class="filter-list-icon material-icons" aria-hidden="true"></span> <input type="text" placeholder="Filter" aria-label="Type to filter" role="searchbox"> <span class="filter-clear-button hidden" data-title="Clear filter" aria-label="Clear filter" role="button" tabindex="0"></span> </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="googleForDevelopers" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <img src="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/images/lockup-new.svg" class="devsite-site-logo" alt="Google for Developers"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> </div> <div class="devsite-book-nav-wrapper"> <div class="devsite-mobile-nav-top"> <ul class="devsite-nav-list"> <li class="devsite-nav-item"> <a href="/products" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Products" track-name="products" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Products" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Products </span> </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu "> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Products" track-name="products" > <span class="devsite-nav-text" tooltip menu="Products"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Products"> </span> </span> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/solutions/catalog" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Solutions" track-name="solutions" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Solutions" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Solutions </span> </a> </li> <li class="devsite-nav-item"> <a href="/events" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Events" track-name="events" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Events" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Events </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Learn" track-name="learn" aria-label="Learning Catalog" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn </span> </a> </li> <li class="devsite-nav-item"> <a href="/community" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Community" track-name="community" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Community" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Community </span> </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu "> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Community" track-name="community" > <span class="devsite-nav-text" tooltip menu="Community"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Community"> </span> </span> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/profile/u/me/dashboard" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Developer Program" track-name="developer program" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Developer Program" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Developer Program </span> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.googleblog.com" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Blog" track-name="blog" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Blog" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Blog </span> </a> </li> </ul> </div> <div class="devsite-mobile-nav-bottom"> <ul class="devsite-nav-list" menu="Products" aria-label="Side menu" hidden> <li class="devsite-nav-item"> <a href="/products/developer-platforms-and-os?category=DevsiteMarketingPlatformsAndOperatingSystems" class="devsite-products-category" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Platforms and Operating Systems" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Platforms and Operating Systems </span> </a> </li> <li class="devsite-nav-item"> <a href="//developer.android.com" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Android →" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Android → </span> </a> </li> <li class="devsite-nav-item"> <a href="//ai.google.dev/" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google AI →" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google AI → </span> </a> </li> <li class="devsite-nav-item"> <a href="//developer.chrome.com" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Chrome →" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Chrome → </span> </a> </li> <li class="devsite-nav-item"> <a href="//cloud.google.com/developers" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google Cloud →" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google Cloud → </span> </a> </li> <li class="devsite-nav-item"> <a href="//firebase.google.com" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Firebase →" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Firebase → </span> </a> </li> <li class="devsite-nav-item"> <a href="/products/frameworks-ides-and-sdks?category=DevsiteMarketingIdesFrameworksAndSdks" class="devsite-products-category" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Frameworks, IDEs, and SDKs" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Frameworks, IDEs, and SDKs </span> </a> </li> <li class="devsite-nav-item"> <a href="//developer.android.com/jetpack" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Jetpack Compose →" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Jetpack Compose → </span> </a> </li> <li class="devsite-nav-item"> <a href="//developer.android.com/studio" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Android Studio →" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Android Studio → </span> </a> </li> <li class="devsite-nav-item"> <a href="//flutter.dev" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Flutter →" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Flutter → </span> </a> </li> <li class="devsite-nav-item"> <a href="//idx.dev/" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Project IDX →" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Project IDX → </span> </a> </li> <li class="devsite-nav-item"> <a href="//makersuite.google.com/" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google AI Studio →" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google AI Studio → </span> </a> </li> <li class="devsite-nav-item"> <a href="/products/services-and-integrations?category=DevsiteMarketingServicesAndIntegrations" class="devsite-products-category" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Services and Integrations" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Services and Integrations </span> </a> </li> <li class="devsite-nav-item"> <a href="//ai.google.dev/gemini-api/docs" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Gemini API →" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Gemini API → </span> </a> </li> <li class="devsite-nav-item"> <a href="/privacy-sandbox" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Privacy Sandbox →" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Privacy Sandbox → </span> </a> </li> <li class="devsite-nav-item"> <a href="/identity" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Identity" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Identity </span> </a> </li> <li class="devsite-nav-item"> <a href="//checks.google.com/" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Checks →" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Checks → </span> </a> </li> <li class="devsite-nav-item"> <a href="/workspace" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google Workspace" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google Workspace </span> </a> </li> <li class="devsite-nav-item"> <a href="/products/growth-and-monetization?category=DevsiteMarketingGrowthAndMonetization" class="devsite-products-category" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Growth and Monetization" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Growth and Monetization </span> </a> </li> <li class="devsite-nav-item"> <a href="//developer.android.com/distribute/" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google Play →" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google Play → </span> </a> </li> <li class="devsite-nav-item"> <a href="/admob" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google AdMob" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google AdMob </span> </a> </li> <li class="devsite-nav-item"> <a href="/google-ads" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google Ads" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google Ads </span> </a> </li> <li class="devsite-nav-item"> <a href="//developer.chrome.com/docs/extensions" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Chrome Extensions →" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Chrome Extensions → </span> </a> </li> <li class="devsite-nav-item"> <a href="/search" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google Search Central" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google Search Central </span> </a> </li> </ul> <ul class="devsite-nav-list" menu="Community" aria-label="Side menu" hidden> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Communities </span> </span> </li> <li class="devsite-nav-item"> <a href="/community/gdg" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google Developer Groups" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google Developer Groups </span> </a> </li> <li class="devsite-nav-item"> <a href="/community/gdsc" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google Developer Student Clubs" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google Developer Student Clubs </span> </a> </li> <li class="devsite-nav-item"> <a href="/womentechmakers" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Women Techmakers" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Women Techmakers </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Programs </span> </span> </li> <li class="devsite-nav-item"> <a href="/community/accelerators" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Accelerator" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Accelerator </span> </a> </li> <li class="devsite-nav-item"> <a href="/community/experts" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google Developer Experts" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google Developer Experts </span> </a> </li> <li class="devsite-nav-item"> <a href="/community/tec" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Tech Equity Collective" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Tech Equity Collective </span> </a> </li> </ul> </div> </div> </nav> </devsite-book-nav> <section id="gc-wrapper"> <main role="main" class="devsite-main-content" > <devsite-content> <article class="devsite-article"> <div class="devsite-banner devsite-banner-announcement nocontent" > <div class="devsite-banner-message"> <div class="devsite-banner-message-text"> <style> .devsite-banner-announcement { background: #1a73e8; color: white; font-size: 16px; font-weight: 500; } .devsite-banner-announcement a { color: white !important; font-weight: 700; } .devsite-banner-announcement a:link:not(.button), .devsite-banner-announcement a:visited:not(.button) { background: 0; } .devsite-banner-announcement a:hover, .devsite-banner-announcement a:focus { text-decoration: none; } .devsite-banner-announcement .devsite-banner-message-text { margin: 0 auto; } </style> <span class="nocontent">Build with Gemini, our largest and most capable AI model. <a href="https://aistudio.google.com/app/prompts/new_chat/?utm_source=gfd&utm_medium=referral&utm_campaign=top_bar&utm_content=" class="gc-analytics-event nocontent" data-category="Announcement" data-label="Gemini promotion">Get an API key.</a> </span> </div> </div> </div> <div class="devsite-article-meta nocontent" role="navigation"> <ul class="devsite-breadcrumb-list" aria-label="Breadcrumb"> <li class="devsite-breadcrumb-item "> <a href="https://developers.google.com/" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="" > Home </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developers.google.com/solutions" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="2" track-type="globalNav" track-name="breadcrumb" track-metadata-position="2" track-metadata-eventdetail="Solutions for Developers" > Solutions </a> </li> </ul> </div> <devsite-feature-tooltip ack-key="AckCollectionsBookmarkTooltipDismiss" analytics-category="Site-Wide Custom Events" analytics-action-show="Callout Profile displayed" analytics-action-close="Callout Profile dismissed" analytics-label="Create Collection Callout" class="devsite-page-bookmark-tooltip nocontent" dismiss-button="true" id="devsite-collections-dropdown" dismiss-button-text="Dismiss" close-button-text="Got it"> <devsite-bookmark></devsite-bookmark> <span slot="popout-heading"> Stay organized with collections </span> <span slot="popout-contents"> Save and categorize content based on your preferences. </span> </devsite-feature-tooltip> <devsite-toc class="devsite-nav" depth="2" devsite-toc-embedded disabled> </devsite-toc> <div class="devsite-article-body clearfix "> <devsite-playlist> <div class="devsite-playlist--header"> <div class="devsite-playlist--inner"> <div class="devsite-playlist--header-details"> <div class="devsite-playlist--header-details-info"> <h1 class="devsite-playlist-title">Creating a multiplayer crossword with Gemini, Flutter, and Firebase</h1> <div class="devsite-playlist-details"></div> <p> Learn how the Google engineering teams created a multiplayer crossword using Gemini, Flutter, and Firebase.<br> <a class="button devsite-playlist-return-button gc-analytics-event" data-category="devsite-playlist: go back button" hidden> Go back </a> </p> <div class="devsite-playlist-summary"> <div> </div> <div class="devsite-playlist-summary-details"> </div> <div> </div> </div> </div> <div class="devsite-playlist--header-badge-info"> </div> </div> </div> </div> <div class="devsite-playlist--sections"> <div class="devsite-playlist--section" type="video" id="video-GINQdxoWWws" video-id="GINQdxoWWws" path="https://www.youtube.com/watch?v=GINQdxoWWws" > <div class="devsite-playlist--inner"> <div class="devsite-playlist--item-top"> <div class="devsite-playlist--item-top-index"> <span class="num"></span> <i class="material-icons" aria-hidden="true">check_circle</i> <devsite-spinner size="30" single-color="#aecbfa"></devsite-spinner> </div> <div class="devsite-playlist--item-top-title"> <h2> Overview: Creating a multiplayer crossword with Gemini, Flutter, and Firebase </h2> </div> <div class="devsite-playlist--item-top-controls"> <button class="toggle gc-analytics-event" data-category="devsite-playlist: toggle button"> <i class="material-icons arrow--down" aria-label="Show more details.">keyboard_arrow_down</i> <i class="material-icons arrow--up" aria-label="Show fewer details.">keyboard_arrow_up</i> </button> </div> </div> <div class="devsite-playlist--item--meta"> <i class="material-icons" aria-hidden="true">ondemand_video</i> Video </div> <div class="devsite-playlist--item--content"> <p> For Google I/O this year we built a multiplayer crossword puzzle using a combination of Google technologies including Gemini, Google Cloud, Flutter, Firebase and more. By completing this solution, you'll learn about the project itself - a crossword puzzle that anyone in the world can solve collaboratively via a web game interface - and what was necessary for us to create this experience using Gen AI. After trying the game and reading through the blog posts, you will complete two codelabs that focus on the Flutter UI needed to render the crossword and how Firebase Genkit - the technology behind the generative AI hints system - works. Finally to earn the developer badge associated with this solution you will complete the quiz at the end. </p> </div> <div class="devsite-playlist--item--actions"> </div> </div> </div> <div class="devsite-playlist--section" type="sample" id="sample-https://aistudio.google.com/app/apikey" path="https://aistudio.google.com/app/apikey" > <div class="devsite-playlist--inner"> <div class="devsite-playlist--item-top"> <div class="devsite-playlist--item-top-index"> <span class="num"></span> <i class="material-icons" aria-hidden="true">check_circle</i> <devsite-spinner size="30" single-color="#aecbfa"></devsite-spinner> </div> <div class="devsite-playlist--item-top-title"> <h2> Google AI Studio: Get your Gemini API Key </h2> </div> <div class="devsite-playlist--item-top-controls"> <button class="toggle gc-analytics-event" data-category="devsite-playlist: toggle button"> <i class="material-icons arrow--down" aria-label="Show more details.">keyboard_arrow_down</i> <i class="material-icons arrow--up" aria-label="Show fewer details.">keyboard_arrow_up</i> </button> </div> </div> <div class="devsite-playlist--item--meta"> <i class="material-icons" aria-hidden="true">code</i> Code sample </div> <div class="devsite-playlist--item--content"> <p> To access the Gemini API you will need an API key. Visit Google AI Studio to create and manage your API keys for Gemini. </p> </div> <div class="devsite-playlist--item--actions"> <a href="https://aistudio.google.com/app/apikey" target="_blank" class="button button-primary playlist-article gc-analytics-event" data-category="devsite-playlist: view code sample button" data-label="path: https://aistudio.google.com/app/apikey"> View code sample </a> </div> </div> </div> <div class="devsite-playlist--section" type="blog" id="article-https://developers.googleblog.com/en/how-we-built-the-io-crossword" path="https://developers.googleblog.com/en/how-we-built-the-io-crossword" > <div class="devsite-playlist--inner"> <div class="devsite-playlist--item-top"> <div class="devsite-playlist--item-top-index"> <span class="num"></span> <i class="material-icons" aria-hidden="true">check_circle</i> <devsite-spinner size="30" single-color="#aecbfa"></devsite-spinner> </div> <div class="devsite-playlist--item-top-title"> <h2> I/O Crossword: How we built it </h2> </div> <div class="devsite-playlist--item-top-controls"> <button class="toggle gc-analytics-event" data-category="devsite-playlist: toggle button"> <i class="material-icons arrow--down" aria-label="Show more details.">keyboard_arrow_down</i> <i class="material-icons arrow--up" aria-label="Show fewer details.">keyboard_arrow_up</i> </button> </div> </div> <div class="devsite-playlist--item--meta"> <i class="material-icons" aria-hidden="true">subject</i> Article </div> <div class="devsite-playlist--item--content"> <p> Learn how we broke down the challenge of creating a multiplayer crossword powered by generative AI and chose which Google technologies we would use to solve the problem. </p> </div> <div class="devsite-playlist--item--actions"> <a href="https://developers.googleblog.com/en/how-we-built-the-io-crossword" target="_blank" class="button button-primary button-returnto playlist-article gc-analytics-event" data-category="devsite-playlist: read article button" data-label="path: https://developers.googleblog.com/en/how-we-built-the-io-crossword"> Read article </a> </div> </div> </div> <div class="devsite-playlist--section" type="blog" id="article-https://medium.com/flutter/how-we-built-it-creating-the-i-o-crossword-puzzle-powered-by-ai-2210e39b04b9" path="https://medium.com/flutter/how-we-built-it-creating-the-i-o-crossword-puzzle-powered-by-ai-2210e39b04b9" > <div class="devsite-playlist--inner"> <div class="devsite-playlist--item-top"> <div class="devsite-playlist--item-top-index"> <span class="num"></span> <i class="material-icons" aria-hidden="true">check_circle</i> <devsite-spinner size="30" single-color="#aecbfa"></devsite-spinner> </div> <div class="devsite-playlist--item-top-title"> <h2> Creating a digital crossword puzzle, powered by AI </h2> </div> <div class="devsite-playlist--item-top-controls"> <button class="toggle gc-analytics-event" data-category="devsite-playlist: toggle button"> <i class="material-icons arrow--down" aria-label="Show more details.">keyboard_arrow_down</i> <i class="material-icons arrow--up" aria-label="Show fewer details.">keyboard_arrow_up</i> </button> </div> </div> <div class="devsite-playlist--item--meta"> <i class="material-icons" aria-hidden="true">subject</i> Article </div> <div class="devsite-playlist--item--content"> <p> Discover how we laid out the overall architecture, decided where to place the generative AI features and how to use them optimally in the experience. You'll learn why we chose Genkit to power the AI for the in-game clue hinting and why Flutter was a great choice for the rendering of the UI without going as far as adopting the dedicated Flame game engine. </p> </div> <div class="devsite-playlist--item--actions"> <a href="https://medium.com/flutter/how-we-built-it-creating-the-i-o-crossword-puzzle-powered-by-ai-2210e39b04b9" target="_blank" class="button button-primary button-returnto playlist-article gc-analytics-event" data-category="devsite-playlist: read article button" data-label="path: https://medium.com/flutter/how-we-built-it-creating-the-i-o-crossword-puzzle-powered-by-ai-2210e39b04b9"> Read article </a> </div> </div> </div> <div class="devsite-playlist--section" type="blog" id="article-https://firebase.blog/posts/2024/06/ai-powered-crossword-genkit" path="https://firebase.blog/posts/2024/06/ai-powered-crossword-genkit" > <div class="devsite-playlist--inner"> <div class="devsite-playlist--item-top"> <div class="devsite-playlist--item-top-index"> <span class="num"></span> <i class="material-icons" aria-hidden="true">check_circle</i> <devsite-spinner size="30" single-color="#aecbfa"></devsite-spinner> </div> <div class="devsite-playlist--item-top-title"> <h2> Developing AI-powered hints for the I/O Crossword with Genkit </h2> </div> <div class="devsite-playlist--item-top-controls"> <button class="toggle gc-analytics-event" data-category="devsite-playlist: toggle button"> <i class="material-icons arrow--down" aria-label="Show more details.">keyboard_arrow_down</i> <i class="material-icons arrow--up" aria-label="Show fewer details.">keyboard_arrow_up</i> </button> </div> </div> <div class="devsite-playlist--item--meta"> <i class="material-icons" aria-hidden="true">subject</i> Article </div> <div class="devsite-playlist--item--content"> <p> In this blogpost you will gain a deeper understanding of how Genkit was used to power the in-game clue system by exploring how to create a JSON prompt template in Genkit and best practices for passing parameters into your prompts at runtime. </p> </div> <div class="devsite-playlist--item--actions"> <a href="https://firebase.blog/posts/2024/06/ai-powered-crossword-genkit" target="_blank" class="button button-primary button-returnto playlist-article gc-analytics-event" data-category="devsite-playlist: read article button" data-label="path: https://firebase.blog/posts/2024/06/ai-powered-crossword-genkit"> Read article </a> </div> </div> </div> <div class="devsite-playlist--section" type="codelab" id="codelab-https://codelabs.developers.google.com/codelabs/flutter-word-puzzle" path="https://codelabs.developers.google.com/codelabs/flutter-word-puzzle" > <div class="devsite-playlist--inner"> <div class="devsite-playlist--item-top"> <div class="devsite-playlist--item-top-index"> <span class="num"></span> <i class="material-icons" aria-hidden="true">check_circle</i> <devsite-spinner size="30" single-color="#aecbfa"></devsite-spinner> </div> <div class="devsite-playlist--item-top-title"> <h2> Build a word puzzle with Flutter </h2> </div> <div class="devsite-playlist--item-top-controls"> <button class="toggle gc-analytics-event" data-category="devsite-playlist: toggle button"> <i class="material-icons arrow--down" aria-label="Show more details.">keyboard_arrow_down</i> <i class="material-icons arrow--up" aria-label="Show fewer details.">keyboard_arrow_up</i> </button> </div> </div> <div class="devsite-playlist--item--meta"> <i class="material-icons" aria-hidden="true">emoji_objects</i> Codelab </div> <div class="devsite-playlist--item--content"> <p> Rendering the UI of the I/O Crossword experience requires a frontend SDK with high performance. In this codelab, you will learn how to build a compute-intensive Flutter app and still maintain Flutter's fluid interactivity for this purpose. </p> </div> <div class="devsite-playlist--item--actions"> <a href="https://codelabs.developers.google.com/codelabs/flutter-word-puzzle" class="button button-primary button-returnto gc-analytics-event" data-category="devsite-playlist: take codelab button" data-label="path: https://codelabs.developers.google.com/codelabs/flutter-word-puzzle"> Take codelab </a> </div> </div> </div> <div class="devsite-playlist--section" type="codelab" id="codelab-https://firebase.google.com/codelabs/ai-genkit-rag" path="https://firebase.google.com/codelabs/ai-genkit-rag" > <div class="devsite-playlist--inner"> <div class="devsite-playlist--item-top"> <div class="devsite-playlist--item-top-index"> <span class="num"></span> <i class="material-icons" aria-hidden="true">check_circle</i> <devsite-spinner size="30" single-color="#aecbfa"></devsite-spinner> </div> <div class="devsite-playlist--item-top-title"> <h2> I/O Crossword and Firebase Extensions with the Gemini API </h2> </div> <div class="devsite-playlist--item-top-controls"> <button class="toggle gc-analytics-event" data-category="devsite-playlist: toggle button"> <i class="material-icons arrow--down" aria-label="Show more details.">keyboard_arrow_down</i> <i class="material-icons arrow--up" aria-label="Show fewer details.">keyboard_arrow_up</i> </button> </div> </div> <div class="devsite-playlist--item--meta"> <i class="material-icons" aria-hidden="true">emoji_objects</i> Codelab </div> <div class="devsite-playlist--item--content"> <p> Genkit is a new Firebase feature we leveraged in the crossword to power the AI of the clue hinting experience. In this codelab, you will learn how to use Firebase Extensions with the Gemini API to build a web app with AI-powered features, like personalized recommendations. This is a great introduction to Genkit that can help familiarize you with the product before exploring the crossword codebase further. </p> </div> <div class="devsite-playlist--item--actions"> <a href="https://firebase.google.com/codelabs/ai-genkit-rag" class="button button-primary button-returnto gc-analytics-event" data-category="devsite-playlist: take codelab button" data-label="path: https://firebase.google.com/codelabs/ai-genkit-rag"> Take codelab </a> </div> </div> </div> <div class="devsite-playlist--section" type="quiz" id="quiz-/learn/pathways/quizzes/solution-crossword" path="/learn/pathways/quizzes/solution-crossword" > <div class="devsite-playlist--inner"> <div class="devsite-playlist--section-quiz"> <h2>Quiz</h2> <p>Test your knowledge and earn your multiplayer crossword badge.</p> <div class="devsite-playlist--item--actions"> <a href="/learn/pathways/quizzes/solution-crossword" class="button button-primary button-returnto gc-analytics-event" data-category="devsite-playlist: take the quiz button" data-label="path: /learn/pathways/quizzes/solution-crossword"> Take the quiz </a> </div> </div> </div> </div> </div> <div class="devsite-playlist--footer"> <devsite-thumb-rating position="main" disable-categories></devsite-thumb-rating> </div> </devsite-playlist> <devsite-hats-survey class="nocontent" hats-id="Zx37A37wF0iQ84LPiVd0TgDWwow1" listnr-id="5123748"></devsite-hats-survey> </div> <div class="devsite-floating-action-buttons"> </div> </article> <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="https://www.instagram.com/googlefordevs/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Instagram </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://www.linkedin.com/showcase/googledevelopers/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > LinkedIn </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)" > X (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="/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="/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="/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> <li class="devsite-footer-linkbox-item"> <a href="/community/gdsc" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 5)" > Google Developer Student Clubs </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> <li class="devsite-footer-linkbox-item"> <a href="//console.home.google.com" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 8)" > Google Home Developer Console </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/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/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="//ai.google.dev/" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Google AI Link" > Google AI </a> </li> <li class="devsite-footer-sites-item"> <a href="/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="/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"> <span class="devsite-footer-utility-description">Sign up for the Google for Developers newsletter</span> <a class="devsite-footer-utility-link gc-analytics-event" href="/newsletter/subscribe" 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="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</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> <devsite-concierge data-info-panel data-ai-panel data-api-explorer-panel > </devsite-concierge> </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>[{"dimensions": {"dimension6": "en", "dimension1": "Signed out", "dimension3": false, "dimension5": "en", "dimension4": "Solutions for Developers", "dimension11": false}, "gaid": "UA-24532603-1", "metrics": {"ratings_count": "metric2", "ratings_value": "metric1"}, "purpose": 1}]</script> <script type="application/json" tag-management>{"at": "True", "ga4": [{"id": "G-272J68FCRF", "purpose": 1}], "ga4p": [{"id": "G-272J68FCRF", "purpose": 1}], "gtm": [], "parameters": {"internalUser": "False", "language": {"machineTranslated": "False", "requested": "en", "served": "en"}, "pageType": "playlist", "projectName": "Solutions for Developers", "signedIn": "False", "tenant": "developers", "recommendations": {"sourcePage": "", "sourceType": 0, "sourceRank": 0, "sourceIdenticalDescriptions": 0, "sourceTitleWords": 0, "sourceDescriptionWords": 0, "experiment": ""}, "experiment": {"ids": ""}}}</script> </devsite-analytics> <devsite-badger></devsite-badger> <script nonce="iskhQDatm+zUm2qbIxSsgM4YPzLUP3"> (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/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/js/app_loader.js', '[1,"en",null,"/js/devsite_app_module.js","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers","https://developers-dot-devsite-v2-prod.appspot.com",1,null,["/_pwa/developers/manifest.json","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/images/video-placeholder.svg","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/images/favicon-new.png","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/images/lockup-new.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","developers.google.com","AIzaSyAQk0fBONSGUqCNznf6Krs82Ap1-NV6J4o","AIzaSyCCxcqdrZ_7QMeLCRY20bh_SXdAYqy70KY",null,null,null,["Profiles__enable_release_notes_notifications","Search__enable_ai_search_summaries_restricted","DevPro__enable_developer_subscriptions","Concierge__enable_pushui","Profiles__enable_dashboard_curated_recommendations","Profiles__enable_page_saving","Profiles__enable_developer_profiles_callout","Cloud__enable_free_trial_server_call","Cloud__enable_cloud_dlp_service","Search__enable_dynamic_content_confidential_banner","MiscFeatureFlags__enable_project_variables","TpcFeatures__enable_mirror_tenant_redirects","Cloud__enable_cloud_facet_chat","Profiles__enable_complete_playlist_endpoint","Cloud__enable_cloudx_experiment_ids","MiscFeatureFlags__enable_variable_operator","DevPro__enable_cloud_innovators_plus","Cloud__enable_legacy_calculator_redirect","BookNav__enable_tenant_cache_key","Search__enable_page_map","MiscFeatureFlags__developers_footer_dark_image","EngEduTelemetry__enable_engedu_telemetry","Profiles__enable_public_developer_profiles","MiscFeatureFlags__enable_firebase_utm","CloudShell__cloud_code_overflow_menu","Cloud__enable_cloud_shell","TpcFeatures__enable_required_headers","Significatio__enable_by_tenant","Cloud__enable_llm_concierge_chat","MiscFeatureFlags__emergency_css","Profiles__require_profile_eligibility_for_signin","Concierge__enable_concierge_restricted","Concierge__enable_concierge","CloudShell__cloud_shell_button","Experiments__reqs_query_experiments","MiscFeatureFlags__enable_explain_this_code","Search__enable_ai_search_summaries","MiscFeatureFlags__enable_view_transitions","Profiles__enable_completecodelab_endpoint","Cloud__enable_cloud_shell_fte_user_flow","Search__enable_ai_eligibility_checks","Profiles__enable_awarding_url","Analytics__enable_clearcut_logging","Profiles__enable_profile_collections","Cloud__enable_cloudx_ping","Search__enable_suggestions_from_borg","Profiles__enable_recognition_badges","MiscFeatureFlags__developers_footer_image"],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",[1,"developers","Google for Developers","developers.google.com",null,"developers-dot-devsite-v2-prod.appspot.com",null,null,[1,1,[1],null,null,null,null,null,null,null,null,[1],null,null,null,null,null,null,[1],[1,null,null,[1,20],"/recommendations/information"],null,null,null,[1,1,1],[1,1,null,1,1]],null,[null,null,null,null,null,null,"/images/lockup-new.svg","/images/touchicon-180-new.png",null,null,null,null,1,null,null,null,null,null,null,null,null,1,null,null,null,"/images/lockup-dark-theme-new.svg",[]],[],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,[[null,null,null,[3,7,10,2,39,17,4,32,24,11,12,13,34,15,25],null,null,[1,[["docType","Choose a content type",[["Tutorial",null,null,null,null,null,null,null,null,"Tutorial"],["Guide",null,null,null,null,null,null,null,null,"Guide"],["Sample",null,null,null,null,null,null,null,null,"Sample"]]],["product","Choose a product",[["Android",null,null,null,null,null,null,null,null,"Android"],["ARCore",null,null,null,null,null,null,null,null,"ARCore"],["ChromeOS",null,null,null,null,null,null,null,null,"ChromeOS"],["Firebase",null,null,null,null,null,null,null,null,"Firebase"],["Flutter",null,null,null,null,null,null,null,null,"Flutter"],["Assistant",null,null,null,null,null,null,null,null,"Google Assistant"],["GoogleCloud",null,null,null,null,null,null,null,null,"Google Cloud"],["GoogleMapsPlatform",null,null,null,null,null,null,null,null,"Google Maps Platform"],["GooglePay",null,null,null,null,null,null,null,null,"Google Pay & Google Wallet"],["GooglePlay",null,null,null,null,null,null,null,null,"Google Play"],["Tensorflow",null,null,null,null,null,null,null,null,"TensorFlow"]]],["category","Choose a topic",[["AiAndMachineLearning",null,null,null,null,null,null,null,null,"AI and Machine Learning"],["Data",null,null,null,null,null,null,null,null,"Data"],["Enterprise",null,null,null,null,null,null,null,null,"Enterprise"],["Gaming",null,null,null,null,null,null,null,null,"Gaming"],["Mobile",null,null,null,null,null,null,null,null,"Mobile"],["Web",null,null,null,null,null,null,null,null,"Web"]]]]]],[1,1],null,1],[[["UA-24532603-1"],["UA-22084204-5"],null,null,["UA-24532603-5"],null,null,[["G-272J68FCRF"],null,null,[["G-272J68FCRF",2]]],[["UA-24532603-1",2]],null,[["UA-24532603-5",2]],null,1],[[15,12],[6,5],[14,11],[16,13],[12,9],[3,2],[13,10],[1,1],[4,3],[11,8],[5,4]],[[1,1],[2,2]]],null,4,null,null,null,null,null,null,null,null,null,null,null,null,null,"developers.devsite.google"],null,"pk_live_5170syrHvgGVmSx9sBrnWtA5luvk9BwnVcvIi7HizpwauFG96WedXsuXh790rtij9AmGllqPtMLfhe2RSwD6Pn38V00uBCydV4m"]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>