CINXE.COM
Flutter Casual Games Toolkit
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="https://storage.googleapis.com/cms-storage-bucket/4fd0db61df0567c0f352.png" /> <link rel="apple-touch-icon" href="https://storage.googleapis.com/cms-storage-bucket/4fd0db61df0567c0f352.png" /> <title> Flutter Casual Games Toolkit </title> <meta name="viewport" content="width=device-width,initial-scale=1" /> <meta name="description" content="Free & open source multiplatform 2D game development in Flutter"/> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@flutterdev"> <meta property="og:title" content="Flutter Casual Games Toolkit"> <meta property="og:url" content="//flutter.dev/games/"> <meta property="og:description" content="Free & open source multiplatform 2D game development in Flutter"> <meta property="og:image" content="https://storage.googleapis.com/cms-storage-bucket/70760bf1e88b184bb1bc.png"> <meta name="google-site-verification" content="HFqxhSbf9YA_0rBglNLzDiWnrHiK_w4cqDh2YD2GEY4" /> <script> (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-ND4LWWZ'); </script> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-67589403-1', 'auto'); ga('send', 'pageview'); </script> <link href="https://fonts.googleapis.com/css?family=Google+Sans:400,500,700" rel="stylesheet" media="all"> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" media="all"> <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet"> <link href="https://www.gstatic.com/glue/cookienotificationbar/cookienotificationbar.min.css" rel="stylesheet"> <link href="https://storage.googleapis.com/cms-storage-bucket/main.abd603ab7472199617c4.css" rel="stylesheet" media="all"> <style> [x-cloak] { display: none !important; } </style> <script async defer src="https://use.fontawesome.com/releases/v6.4.2/js/all.js" data-auto-replace-svg="nest"></script> </head> <body class="interior games" x-data="ScrollSpy" x-on:scroll.window="onScroll" x-bind:class="{ 'in-content': $store.spy.inContent }"> <header role="banner" x-data="Header()" class="page-header" x-bind:class="{ 'hide': !navOpen && $store.spy.inHomeHero, 'mobile': isMobile, 'mobile-nav-open': navOpen, 'searching': searchActive, 'header-dark': window.location.href.includes('games'), 'header-light': window.location.href.indexOf('games') === -1, }" x-on:resize.window.debounce.200="onResize" > <a class='event-bar' href='https://io.google/2025/register?utm_source=flutter&utm_medium=embedded_marketing&utm_campaign=svd&utm_content=' target='_blank' id='event-bar' > Flutter is back at Google I/O on May 20-21! <i class="fas fa-arrow-right fa-sm"></i> </a> <div class="content" x-data="{ darkMode: window.location.href.includes('games') }"> <div> <div class="logo logo-white"> <a href="/"> <img src="https://storage.googleapis.com/cms-storage-bucket/ec64036b4eacc9f3fd73.svg" alt="Flutter" /> </a> </div> <div class="logo logo-normal"> <a href="/"> <img src="https://storage.googleapis.com/cms-storage-bucket/6a07d8a62f4308d2b854.svg" alt="Flutter" x-cloak x-show="!darkMode"/> <img src="https://storage.googleapis.com/cms-storage-bucket/1870bdaf4a9523a10d5b.svg" alt="Flutter" x-cloak x-show="darkMode"/> </a> </div> </div> <div class="tray"> <nav role="navigation"> <ul> <li> <a href="/multi-platform" class="btn top-level" @click="handleMobileClick($event)" > Multi-Platform <i class="fas fa-caret-down"></i> </a> <div class="dd-connector"></div> <div class="dd"> <ul> <li class="mobile-only"> <a class="btn" href="/multi-platform">Overview</a> </li> <li> <a class="btn" href="/multi-platform/mobile">Mobile</a> <ul> <li> <a class="btn subMenu" href="/multi-platform/ios">Flutter on iOS</a> </li> </ul> </li> <li><a class="btn" href="/multi-platform/web">Web</a></li> <li> <a class="btn" href="/multi-platform/desktop">Desktop</a> </li> <li> <a class="btn" href="/multi-platform/embedded">Embedded</a> </li> </ul> </div> </li> <li> <a href="/development" class="btn top-level" @click="handleMobileClick($event)" > Development <i class="fas fa-caret-down"></i> </a> <div class="dd-connector"></div> <div class="dd"> <ul> <li class="mobile-only"> <a class="btn" href="/development">Overview</a> </li> <li><a class="btn" href="/learn">Learn</a></li> <li> <a class="btn" href="https://docs.flutter.dev/development/packages-and-plugins/favorites" target="_blank" >Flutter Favorites</a > </li> <li> <a class="btn" href="https://pub.dev" target="_blank" >Packages</a > </li> <li> <a class="btn" href="/ai"> AI </a> </li> <li><a class="btn" href="/google-integrations">Google Integrations</a></li> <li><a class="btn" href="/monetization">Monetization</a></li> <li><a class="btn" href="/games">Games</a></li> <li><a class="btn" href="/news">News</a></li> </ul> </div> </li> <li> <a href="/ecosystem" class="btn top-level" @click="handleMobileClick($event)" > Ecosystem <i class="fas fa-caret-down"></i> </a> <div class="dd-connector"></div> <div class="dd"> <ul> <li class="mobile-only"> <a class="btn" href="/ecosystem">Overview</a> </li> <li><a class="btn" href="/community">Community</a></li> <li><a class="btn" href="/events">Events</a></li> <li><a class="btn" href="/culture">Culture</a></li> <li><a class="btn" href="/consultants">Consultants</a></li> </ul> </div> </li> <li> <a href="/showcase" class="btn top-level"> Showcase </a> </li> <li> <a href="https://docs.flutter.dev" class="btn top-level" @click="handleMobileClick($event)" > Docs <i class="fas fa-caret-down"></i> </a> <div class="dd-connector"></div> <div class="dd dd-double"> <ul> <li class="mobile-only"> <a class="btn" href="https://docs.flutter.dev">Overview</a> </li> <li> <a class="btn" href="https://docs.flutter.dev/whats-new">What's new</a> </li> <li> <a class="btn" href="https://docs.flutter.dev/get-started/editor" >Editor support</a > </li> <li> <a class="btn" href="https://docs.flutter.dev/development/tools/hot-reload" >Hot reload</a > </li> <li> <a class="btn" href="https://docs.flutter.dev/perf/ui-performance" >Profiling</a > </li> </ul> <ul> <li> <a class="btn" href="https://docs.flutter.dev/get-started/install" >Install Flutter</a > </li> <li> <a class="btn" href="https://docs.flutter.dev/development/tools/devtools/overview" >DevTools</a > </li> <li> <a class="btn" href="https://docs.flutter.dev/cookbook">Cookbook</a> </li> <li> <a class="btn" href="https://docs.flutter.dev/reference/tutorials" >Tutorials</a > </li> </ul> </div> </li> </ul> </nav> <div class="icon-btn search" x-bind:class="{ 'active': searchActive || navOpen }" > <i class="fas fa-search search-icon" @click="toggleSearch($event)" x-show="!darkMode"> </i> <i class="fas fa-search search-icon" style="color: #f8f9fa;" @click="toggleSearch($event)" x-show="darkMode"> </i> <form action="https://docs.flutter.dev/search"> <input type="search" placeholder="Search..." aria-label="Search" name="q" id="q" autocomplete="off" /> </form> <i class="fas fa-times" @click="toggleSearch($event)" x-show="searchActive" > </i> </div> <a href="https://docs.flutter.dev/get-started/install" id="get-started__header" class="btn" >Get started</a > <div class="icon-btn hamburger" x-show="!navOpen" @click="toggleMobileNav" > <i class="fas fa-bars fa-lg" aria-hidden="true" x-show="!darkMode"></i> <i class="fas fa-bars fa-lg" style="color: #f8f9fa;" aria-hidden="true" x-show="darkMode"></i> </div> <div class="icon-btn close" x-show="navOpen" @click="toggleMobileNav"> <i class="fas fa-times fa-lg"></i> </div> </div> </div> </header> <main> <section class="hero"> <div class="container"> <div class="mantle"> <div class="text"> <h1>Flutter Casual Games Toolkit</h1> <h2>Free & open source multiplatform 2D game development in Flutter</h2> </div> <div id="header-img-container" class="media"></div> </div> </div> </section> <script> const isUnderDesktop = window.innerWidth < 1024; const videoParentElement = document.getElementById('header-img-container'); if (isUnderDesktop) { videoParentElement.classList.remove('gif-container'); videoParentElement.classList.add('img-container'); videoParentElement.innerHTML = ` <img src="https://storage.googleapis.com/cms-storage-bucket/ae03ba00f1d0fee257d6.png" alt="Games Header Landover"> <img src="https://storage.googleapis.com/cms-storage-bucket/cfd41f9132df1caddd9a.png" alt="Trivia Crack"> <img src="https://storage.googleapis.com/cms-storage-bucket/3d6cd15d81bd4f03415c.png" alt="Debertz"> `; } else { videoParentElement.classList.remove('img-container'); videoParentElement.classList.add('gif-container'); videoParentElement.innerHTML = ` <img src="https://storage.googleapis.com/cms-storage-bucket/c4f8854260239fa30680.gif" alt="Games Header Gif"> `; } </script> <section class="content-container" x-data="initSpy(headerOffset, toggleContentActive)"> <section id="feature-columns" class="module"> <div class="feature-columns container"> <div class="feature-wrapper"> <div class="text"> <h3>Free & Open Source</h3> <p class="body">No seat charges or usage fees; use under BSD license for access to every line of code - no black boxes</p> </div> <img src="https://storage.googleapis.com/cms-storage-bucket/4a4d654979fdbfa3df9e.png" alt="Free & open source"> </div> <div class="feature-wrapper"> <div class="text"> <h3>Multiplatform Games</h3> <p class="body">Write your game once and deploy on Android, iOS, Web, and Desktop devices to reach more users from day one</p> </div> <img src="https://storage.googleapis.com/cms-storage-bucket/bc5e048cc3da15b070b9.png" alt="Multiplatform games"> </div> <div class="feature-wrapper"> <div class="text"> <h3>Packages & Integrations</h3> <p class="body">Speed up development with pre-built integrations for services like Ads, IAP, Firebase, Google Play, and Game Center</p> </div> <img src="https://storage.googleapis.com/cms-storage-bucket/9e16544e02c158492997.png" alt="Packages & Integrations"> </div> </div> </section> <section id="tabs" class="games-tabs"> <div class="tabs container" x-data="Tabs"> <h2 class="tabs-title"> From card games to platformers and casual 2D games. Start building your first game in minutes with templates to get started fast. </h2> <div class="tabs-header"> <div class="tabs-menu"> <ul class="tabs-wrapper" x-ref="tabs"> <li class="btn" @click="selectTab($event, 'a')"> Endless Runner </li> <li class="btn" @click="selectTab($event, 'b')"> Basic Template </li> <li class="btn" @click="selectTab($event, 'c')"> Card Game </li> </ul> </div> </div> <div class="tabs-content" x-ref="contents"> <div class="tab-content no-spy" x-ref="a"> <div class="media"> <img src="https://storage.googleapis.com/cms-storage-bucket/25716f5e4e2a03aba0a5.gif" alt="Endless Runner" /> </div> <div class="text"> <h2 class="title first-tab">Endless Runner</h2> <p class="body"> A side-scrolling infinite loop game that uses the Flame Game Engine to animate a character that avoids obstacles while running through the map. </p> <div class="a-wrapper"> <a class="btn white-btn" href="https://github.com/flutter/games/tree/main/templates/endless_runner" > Get Started </a> </div> </div> </div> <div class="tab-content no-spy" x-ref="b"> <div class="media"> <img src="https://storage.googleapis.com/cms-storage-bucket/0ce280f8fa27692da77a.gif" alt="Basic Template" /> </div> <div class="text"> <h2 class="title second-tab">Basic Template</h2> <p class="body"> A simple template to get started with your first Flutter game including start and end screens, audio integrations and game settings pages. </p> <div class="a-wrapper"> <a class="btn white-btn" href="https://github.com/flutter/games/tree/main/templates/basic" > Get Started </a> </div> </div> </div> <div class="tab-content no-spy" x-ref="c"> <div class="media"> <img src="https://storage.googleapis.com/cms-storage-bucket/947a6c0d685ff7e754ab.gif" alt="Card Game" /> </div> <div class="text"> <h2 class="title third-tab">Card Game</h2> <p class="body"> Drag and drop cards in a simple UI for a card game built from the Basic Template, ready for multiplayer integration and more </p> <div class="a-wrapper"> <a class="btn white-btn" href="https://github.com/flutter/games/tree/main/templates/card" >Get Started</a > </div> </div> </div> </div> <div class="divider" /> </div> </section> <section id="dash-demo"> <div class="features container"> <div class="feature nospy"> <div class="text"> <hgroup> <h4 class="eyebrow">Play Now</h4> <h3>Super Dash Demo Game</h3> </hgroup> <p class="body">Try the new open source Super Dash demo on your desktop to experience a Flutter browser game built with the Flame Game Engine or download on mobile for iOS and Android. Avoid the bugs, collect points, and see how far you can go!</p> <div class="btn-wrapper"> <a class="btn" href="https://superdash.flutter.dev/">Play Now</a> <a class="btn quiet" href="https://github.com/flutter/super_dash"> Get the code <i class="fas fa-arrow-right fa-sm"></i> </a> </div> </div> <div class="media"> <img src="https://storage.googleapis.com/cms-storage-bucket/e0c1e776f571e5ee6d11.gif" alt="Dash Demo Game"> </div> </div> </div> </section> <section id="flame"> <div class="features container"> <div class="feature nospy"> <div class="text"> <hgroup> <h4 class="eyebrow">Flame</h4> <h3>2D Flutter Game Engine</h3> </hgroup> <p class="body">Flame is a community built open source game engine built in Flutter that extends Flutter鈥檚 game development capabilities for games that require a game loop, collision, and maps. It takes advantage of the powerful infrastructure provided by Flutter, but simplifies the code you need to build your game.</p> <a class="btn" href="https://flame-engine.org/">Learn more</a> </div> <div class="media"> <img src="https://storage.googleapis.com/cms-storage-bucket/1e32341162e45fcf94a3.png" alt="Flame Flutter Game"> </div> </div> </div> </section> <section id="stories" class="module"> <div class="story-grid container"> <div class="story-grid-header"> <h4 class="eyebrow">Enhancements</h4> <h3>Flutter Game Integrations</h3> </div> <div class="story-grid-items"> <div class="story-item"> <a href="https://docs.flutter.dev/cookbook/plugins/google-mobile-ads" target="_blank"> <div class="event_image_container"> <img alt="Games Ads_377x281.png" height="281" src="https://storage.googleapis.com/cms-storage-bucket/images/Games_Ads_377x281.width-635.png" width="377"> </div> <div class="text"> <h3>Ads with Google</h3> <p>Reach a wider audience and maximize ad revenue with Flutter</p> </div> </a> </div> <div class="story-item"> <a href="https://codelabs.developers.google.com/codelabs/flutter-in-app-purchases#0" target="_blank"> <div class="event_image_container"> <img alt="In-App Purchase.png" height="281" src="https://storage.googleapis.com/cms-storage-bucket/images/In-App_Purchase.width-635.png" width="377"> </div> <div class="text"> <h3>In-App Purchase</h3> <p>Build in-app revenue with Google Play and Apple App Store support for Flutter</p> </div> </a> </div> <div class="story-item"> <a href="https://docs.flutter.dev/cookbook/games/achievements-leaderboard" target="_blank"> <div class="event_image_container"> <img alt="Leaderboards & Badges.png" height="281" src="https://storage.googleapis.com/cms-storage-bucket/images/Leaderboards__Badges.width-635.png" width="377"> </div> <div class="text"> <h3>Leaderboards & Badges</h3> <p>Increase user engagement with a leaderboard and achievements</p> </div> </a> </div> <div class="story-item"> <a href="https://firebase.google.com/codelabs/firebase-auth-in-flutter-apps#0" target="_blank"> <div class="event_image_container"> <img alt="User Authentication.png" height="281" src="https://storage.googleapis.com/cms-storage-bucket/images/User_Authentication.width-635.png" width="377"> </div> <div class="text"> <h3>User Authentication</h3> <p>Securely save user data and personalize user experiencing with Firebase Auth</p> </div> </a> </div> <div class="story-item"> <a href="https://firebase.flutter.dev/docs/crashlytics/overview/" target="_blank"> <div class="event_image_container"> <img alt="Crash Reporting.png" height="281" src="https://storage.googleapis.com/cms-storage-bucket/images/Crash_Reporting.width-635.png" width="377"> </div> <div class="text"> <h3>Crash Reporting</h3> <p>Get clear and actionable insights into game issues with Crash Reporting</p> </div> </a> </div> <div class="story-item"> <a href="https://docs.flutter.dev/cookbook/games/firestore-multiplayer" target="_blank"> <div class="event_image_container"> <img alt="Multiplayer Support.png" height="281" src="https://storage.googleapis.com/cms-storage-bucket/images/Multiplayer_Support.width-635.png" width="377"> </div> <div class="text"> <h3>Multiplayer Support</h3> <p>Implement multiplayer capabilities in your game via Cloud Firestore</p> </div> </a> </div> </div> </div> </section> <section id="resources"> <div class="feature-grid container"> <div class="feature-header container"> <hgroup> <h4 class="eyebrow">Get Started</h4> <h2>Learn More About Building Games in Flutter</h2> </hgroup> </div> <div class="feature-grid-features col-3"> <div> <a target="_blank" href="https://youtu.be/oi6zk7cVHUw?si=z1i7xAxRRbs3tQUI"> <img src="https://storage.googleapis.com/cms-storage-bucket/67e824683c83c575e913.png" alt="Watch Video"> <h3>Watch the Video</h3> <p>Learn why Flutter is a great choice for game developers with an introduction to the Flutter Casual Games Toolkit.</p> </a> </div> <div> <a target="_blank" href="https://docs.flutter.dev/resources/games-toolkit"> <img src="https://storage.googleapis.com/cms-storage-bucket/46c0b0b76010ac2c59a2.png" alt="Get Started"> <h3>Get Started in Docs</h3> <p>Documentation and tutorials for getting started with the Flutter Casual Games Toolkit.</p> </a> </div> <div> <a target="_blank" href="https://discord.com/invite/pxrBmy4"> <img src="https://storage.googleapis.com/cms-storage-bucket/ee785a57316c4c929b2e.png" alt="Join Community"> <h3>Join the Community</h3> <p>Meet other game developers building in Flutter in the Flame Community Discord Server</p> </a> </div> </div> </div> </section> <section id="featured-games" class="module carousel-section"> <div class="stacked-header container"> <hgroup> <h4 class="eyebrow">Flutter Games</h4> <h2>Case studies</h2> </hgroup> </div> <div class="carousel" x-data="Carousel" x-on:resize.window.debounce.300="onResize"> <div class="carousel-slider" x-ref="slider" x-on:scroll="onScroll"> <div class="story-item"> <a href="https://flutter.dev/flip" target="_blank"> <img alt="5D67Y2maYj9ijQK.png" height="632" src="https://storage.googleapis.com/cms-storage-bucket/images/5D67Y2maYj9ijQK.width-635.png" width="635"> <div class="text"> <h3>Google I/O Flip</h3> </div> </a> </div> <div class="story-item"> <a href="https://flutter.dev/showcase/pubg-mobile" target="_blank"> <img alt="PUBG.jpg" height="320" src="https://storage.googleapis.com/cms-storage-bucket/images/PUBG.width-635.jpg" width="320"> <div class="text"> <h3>PUBG Mobile</h3> </div> </a> </div> <div class="story-item"> <a href="https://medium.com/flutter/i-o-pinball-powered-by-flutter-and-firebase-d22423f3f5d" target="_blank"> <img alt="io_pinball_Thumnail_512x512.png" height="512" src="https://storage.googleapis.com/cms-storage-bucket/images/io_pinball_Thumnail_512x512.width-635.png" width="512"> <div class="text"> <h3>Google I/O Pinball</h3> </div> </a> </div> <div class="story-item"> <a href="https://www.youtube.com/watch?v=zGgeBNiRy-8" target="_blank"> <img alt="tictactoe_image (1).png" height="634" src="https://storage.googleapis.com/cms-storage-bucket/images/tictactoe_image_1.width-635.png" width="635"> <div class="text"> <h3>Super TicTacToe</h3> </div> </a> </div> <div class="story-item"> <a href="https://flutter.dev/showcase/wallace-gromit-ar" target="_blank"> <img alt="wallace.jpg" height="512" src="https://storage.googleapis.com/cms-storage-bucket/images/512x512bb.width-635.jpg" width="512"> <div class="text"> <h3>Wallace & Gromit AR</h3> </div> </a> </div> <div class="story-item"> <a href="https://flutter.dev/showcase/lotum" target="_blank"> <img alt="512x512_appicon_EN (1).png" height="634" src="https://storage.googleapis.com/cms-storage-bucket/images/512x512_appicon_EN_1.width-635.png" width="635"> <div class="text"> <h3>4 Pics 1 Word</h3> </div> </a> </div> <div class="story-item"> <a href="https://codelabs.developers.google.com/codelabs/flutter-flame-game#0" target="_blank"> <img alt="ede04fdfe074f471.gif" height="653" src="https://storage.googleapis.com/cms-storage-bucket/images/ede04fdfe074f471.width-635.png" width="635"> <div class="text"> <h3>Doodle Dash</h3> </div> </a> </div> </div> <div class="carousel-progress container"> <div class="carousel-completed" x-ref="progress"></div> <div class="carousel-nav"> <a href="#" class="disabled" x-ref="prevBtn" @click.prevent="navigate($event, 'bwd')"> <i class="far fa-arrow-alt-circle-left fa-2x"></i> </a> <a href="#" class="disabled" x-ref="nextBtn" @click.prevent="navigate($event, 'fwd')"> <i class="far fa-arrow-alt-circle-right fa-2x"></i> </a> </div> </div> </div> </section> <section id="playlist" class="module carousel-section"> <div class="stacked-header container flutter-resources"> <div> <p>YouTube Learning</p> <h2>Flutter Games Resources</h2> </div> <a class="btn white-btn" href="https://www.youtube.com/playlist?list=PLjxrf2q8roU20X0-JrLJ_zODME0sjnelZ"> View all </a> </div> <div class="carousel" x-data="YouTubePlaylistCarousel('PLjxrf2q8roU20X0-JrLJ_zODME0sjnelZ')" x-on:resize.window.debounce.300="onResize"> <div class="carousel-slider" x-ref="slider" x-on:scroll="onScroll"> </div> <div class="carousel-progress container"> <div class="carousel-completed" x-ref="progress"></div> <div class="carousel-nav"> <a href="#" class="disabled" x-ref="prevBtn" @click.prevent="navigate($event, 'bwd')"> <i class="far fa-arrow-alt-circle-left fa-2x"></i> </a> <a href="#" class="disabled" x-ref="nextBtn" @click.prevent="navigate($event, 'fwd')"> <i class="far fa-arrow-alt-circle-right fa-2x"></i> </a> </div> </div> </div> </section> <section id="developer-stories"> <div class="insert container"> <div class="text"> <h4 class="eyebrow">Developer Story</h4> <h3>Learn how PUBG launched 80% faster adding Flutter to their existing game.</h3> <a href="https://flutter.dev/showcase/pubg-mobile" class="btn quiet"> Read story <i class="fas fa-arrow-right fa-sm"></i> </a> </div> <div class="media"> <img src="https://storage.googleapis.com/cms-storage-bucket/4266591b5778ebe87b63.gif" alt="Google Play"> </div> </div> </section> <section id="level-up" class="module"> <div class="container"> <div class="stacked-header"> <hgroup> <h4 class="eyebrow">Google Services</h4> <h2>Level up your Flutter game</h2> <p>Enhance your game with up to $900 in offers from Google (terms and conditions apply)</p> </hgroup> </div> <div class="feature-compare"> <div> <div class="media"> <img src="https://storage.googleapis.com/cms-storage-bucket/199a66d28068d464f7a0.png" alt="Google Ads"> </div> <div class="text"> <h3>Google Ads</h3> <p>Receive $500 in ad credit when you spend $500 with Google Ads.</p> <p class="subtitle"> Terms and conditions apply. <a href="https://www.google.com/intl/en/ads/coupons/terms/flutter/">Click here</a> to check your region's elibility. </p> <a class="btn white" href="https://ads.google.com/intl/en_us/home/" target="_blank">Get started</a> </div> </div> <div> <div class="media"> <img src="https://storage.googleapis.com/cms-storage-bucket/2329657b9b79c108f37c.png" alt="Cloud + Firebase"> </div> <div class="text"> <h3>Cloud Platform + Firebase</h3> <p>Receive up to $400 across your choice of back-end services.</p> <p class="subtitle"> *You must connect your Firebase and GCP accounts to use credits for Firebase services </p> <a class="btn white" href="https://cloud.google.com/free?utm_source=flutter&utm_medium=display&utm_campaign=FY22-Q2-flutter-games_get-started&utm_content=-&utm_term=-" target="_blank">Get started</a> </div> </div> </div> </div> </section> <section id="cta" class="module"> <div class="insert cta-insert container"> <div class="text"> <h3>Start building</h3> <p>Get started with your first Flutter Game</p> <div> <a href="https://docs.flutter.dev/resources/games-toolkit" class="btn"> View docs </a> </div> </div> <div class="media"> <img src="https://storage.googleapis.com/cms-storage-bucket/72521e62275b24d3c37d.png" alt="Powered by Dart"> </div> </div> </section> </section> </main> <footer x-data="{ darkMode: window.location.href.includes('games') }" :class="window.location.href.includes('games') ? 'footer-dark' : 'footer-light'"> <div class="content footer-main"> <div class="logo"> <a href="/"> <img x-show="!darkMode" src="https://storage.googleapis.com/cms-storage-bucket/6a07d8a62f4308d2b854.svg" width="154" alt="Flutter" /> <img x-show="darkMode" src="https://storage.googleapis.com/cms-storage-bucket/1870bdaf4a9523a10d5b.svg" width="154" alt="Flutter" /> </a> </div> <div class="footer-links"> <ul> <li>About Flutter</li> <li> <a href="https://docs.flutter.dev/jobs" target="_blank">Careers</a> </li> <li><a href="https://medium.com/flutter" target="_blank">News</a></li> <li><a href="/brand">Brand</a></li> <li><a href="/culture">Culture</a></li> </ul> <ul> <li>Learn Flutter</li> <li><a href="/learn" target="_blank">Learning Journey</a></li> <li><a href="https://docs.flutter.dev/codelabs" target="_blank">Codelabs</a></li> <li> <a href="https://flutter.github.io/samples" target="_blank" >Samples</a > </li> <li><a href="https://docs.flutter.dev/cookbook" target="_blank">Cookbook</a></li> </ul> <ul> <li>Multi-Platform</li> <li><a href="/multi-platform/mobile">Mobile</a></li> <li><a href="/multi-platform/web">Web</a></li> <li><a href="/multi-platform/desktop">Desktop</a></li> <li><a href="/multi-platform/embedded">Embedded</a></li> <li><a href="/multi-platform/ios">iOS</a></li> </ul> </div> </div> <div class="content footer-social"> <div> <a href="https://www.youtube.com/flutterdev" target="_blank" aria-label="Flutter YouTube" > <i class="fab fa-youtube fa-lg" x-show="!darkMode"></i> <i class="fa-brands fa-youtube fa-lg" style="color: #e8eaed;" x-show="darkMode"></i> </a> <a href="https://twitter.com/flutterdev" target="_blank" aria-label="Flutter Twittter" > <i class="fab fa-x-twitter fa-lg" x-show="!darkMode"></i> <i class="fa-brands fa-x-twitter fa-lg" style="color: #e8eaed;" x-show="darkMode"></i> </a> <a href="https://github.com/flutter" target="_blank" aria-label="Flutter Github" > <i class="fab fa-github fa-lg" x-show="!darkMode"></i> <i class="fa-brands fa-github fa-lg" style="color: #e8eaed;" x-show="darkMode"></i> </a> <a href="https://medium.com/flutter" target="_blank" aria-label="Flutter Medium" > <i class="fab fa-medium fa-lg" x-show="!darkMode"></i> <i class="fa-brands fa-medium fa-lg" style="color: #e8eaed;" x-show="darkMode"></i> </a> <a href="https://www.meetup.com/pro/flutter/" target="_blank" aria-label="Flutter Meetup" > <i class="fab fa-meetup fa-lg" x-show="!darkMode"></i> <i class="fa-brands fa-meetup fa-lg" style="color: #e8eaed;" x-show="darkMode"></i> </a> <a href="https://www.linkedin.com/showcase/flutterdevofficial/" target="_blank" aria-label="Flutter LinkedIn" > <i class="fab fa-linkedin fa-lg" x-show="!darkMode"></i> <i class="fa-brands fa-linkedin fa-lg" style="color: #e8eaed;" x-show="darkMode"></i> </a> </div> </div> <div class="content footer-tray"> <div> Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the BSD License. </div> <div> <ul> <li><a href="https://docs.flutter.dev/tos">Terms</a></li> <li> <a href="https://policies.google.com/privacy?hl=en" target="_blank" >Privacy</a > </li> <li><a href="https://docs.flutter.dev/security">Security</a></li> </ul> </div> </div> </footer> <script src="https://www.gstatic.com/glue/cookienotificationbar/cookienotificationbar.min.js" data-glue-cookie-notification-bar-category="2A" data-glue-cookie-notification-bar-site-id="flutter.dev" ></script> <section class="cookie-snack" x-data="Snack" x-bind:class="{ 'show': !agreed && window.location.href.includes('consultants') }"> <div class="container"> <p>NOTICE: Flutter hopes this directory is useful for customers seeking consultants with Flutter experience; however, Flutter makes no representation to you or anyone else that the listed consultants are Flutter or Google partners, and Flutter does not represent or warrant their qualifications or the quality of services you may receive. Your relationship is strictly between you and the consultants.</p> <button @click.prevent="dismiss" class="solid">Okay</button> </div> </section> <script src="https://storage.googleapis.com/cms-storage-bucket/main.9a862e2d420586ef99e8.js"></script> </body> </html>