CINXE.COM
Flutter | AI
<!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 | AI </title> <meta name="viewport" content="width=device-width,initial-scale=1" /> <meta name="description" content="Build and deploy intelligent AI-driven features across platforms with Flutter."/> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@flutterdev"> <meta property="og:title" content="Flutter | AI"> <meta property="og:url" content="//flutter.dev/ai/"> <meta property="og:description" content="Build and deploy intelligent AI-driven features across platforms with 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 buildWithAI" 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 id="header" class="hero"> <div class="container"> <div class="mantle"> <div class="text"> <h1>Build with AI</h1> <h2>Build and deploy intelligent AI-driven features across platforms with Flutter and Google's AI capabilities</h2> </div> <div class="media"> <img src="https://storage.googleapis.com/cms-storage-bucket/c327431585396c78e4ca.png" alt="Build with AI"> </div> </div> </div> </section> <section id="notification" class="module"> <div class="notification container"> <div class="notification-message"> <img src="https://storage.googleapis.com/cms-storage-bucket/a40ceb6e5d342207de7b.png" alt="Notification"> <a href="http://ai.google.dev/competition" target="_blank"> Check out the winners of the Gemini API Competition! <i class="fas fa-arrow-right fa-sm"></i> </a> </div> <div class="notification-nav"> <span class="active"><a href="#"></a></span> </div> </div> </section> <section class="module"> <section id="feature-columns" class="module"> <div class="feature-columns container"> <div class="feature-column-container"> <div> <h3>Expand your app's functionality</h3> <p>Add AI-based features like text generation, chat, and more to your Dart or Flutter apps with minimal setup</p> </div> <img src="https://storage.googleapis.com/cms-storage-bucket/21c633b95aa9317323a1.png" alt="Expand functionality Logo"> </div> <div class="feature-column-container"> <div> <h3>Fast AI app development</h3> <p>Focus on your app logic and user experience, let Google SDKs handle the intricacies of interacting with AI models</p> </div> <img src="https://storage.googleapis.com/cms-storage-bucket/0d00a852032559d8ef53.png" alt="Fast AI app development logo"> </div> <div class="feature-column-container"> <div> <h3>The best of Google</h3> <p>Tap into models built on Google's extensive research and development, or explore popular alternatives</p> </div> <img src="https://storage.googleapis.com/cms-storage-bucket/f0f8ee84b3bb41e84626.png" alt="The best of Google logo"> </div> </div> </section> <section id="tabs" class="module" x-data="initSpy(-300)"> <div class="tabs container" x-data="Tabs"> <div class="tabs-header"> <h2>Start building AI-driven features now.</h2> <div class="tabs-menu"> <ul x-ref="tabs"> <li class="btn" @click="selectTab($event, 'a')">Vertex AI in Firebase Dart SDK</li> <li class="btn" @click="selectTab($event, 'b')">Google AI</li> </ul> </div> </div> <div class="tabs-content" x-ref="contents"> <div class="tab-content" x-ref="a"> <div class="media"> <img src="https://storage.googleapis.com/cms-storage-bucket/d6d42c70969a21934d29.png" alt="Vertex AI Logo"> </div> <div class="text"> <h3>Vertex AI in Firebase Dart SDK</h3> <p>Take your generative AI features to production with Google Cloud's Vertex AI platform, including a Gemini API built for scale.</p> <a class="btn" href="https://firebase.google.com/docs/vertex-ai/get-started?platform=flutter" target="_blank">Get Started</a> </div> </div> <div class="tab-content" x-ref="b"> <div class="media"> <img src="https://storage.googleapis.com/cms-storage-bucket/aae2ba2fd6c9106b12b2.png" alt="Gemini AI Logo"> </div> <div class="text"> <h3>Google AI</h3> <p>The fastest way to prototype generative AI features with Gemini models in your Flutter and Dart apps. Try the Vertex AI in Firebase Dart SDK when you're ready to move into production use cases.</p> <a class="btn" href="https://pub.dev/packages/google_generative_ai" target="_blank">Get Started</a> </div> </div> </div> </div> </section> <section id="ai-toolkit"> <div class="features container"> <div class="feature nospy"> <div class="text"> <hgroup> <h4 class="eyebrow">Supercharge your Flutter app with AI</h4> <h3>The Flutter AI Toolkit</h3> </hgroup> <p class="body">Quickly add intelligent chat experiences using the new Flutter AI Toolkit. Easily integrate with Google Gemini AI or Firebase Vertex AI to power multi-turn conversations, streaming responses, speech-to-text input, and more.</p> <div class="btn-wrapper"> <a class="btn" href="https://pub.dev/packages/flutter_ai_toolkit">Get started</a> </div> </div> <div class="media"> <img src="https://storage.googleapis.com/cms-storage-bucket/17b5b13e58df7e2c1c50.png" alt="Flutter AI Toolkit"> </div> </div> </div> </section> <section id="feature-grid" class="module"> <div class="feature-grid container"> <div class="feature-header full"> <hgroup> <h4 class="eyebrow">Learn more about building with Flutter and generative AI</h4> <h2>Learn how to...</h2> </hgroup> </div> <div class="feature-grid-features col-2"> <div> <a href="https://docs.flutter.dev/resources/ai-overview"> <img src="https://storage.googleapis.com/cms-storage-bucket/2bf1bb23691ea31a5915.svg" alt="Go To Icon"> <h3>Get started with Flutter, Dart, and Google AI in documentation <i class="fas fa-arrow-right fa-sm"></i></h3> <p>Documentation and tutorials for getting started with Flutter and Google AI.</p> </a> </div> <div> <a href="https://www.google.com/url?q=https://developers.google.com/learn/pathways/solution-ai-gemini-getting..."> <img src="https://storage.googleapis.com/cms-storage-bucket/2bf1bb23691ea31a5915.svg" alt="Go To Icon"> <h3>Use the Gemini API for Dart and Flutter apps<br>(Coming Soon) <i class="fas fa-arrow-right fa-sm"></i></h3> <p>Follow along in this Solutions Pathway to learn how to use the Google AI Dart SDK to make your first generative AI call using Gemini, build an app using Dart and Flutter, and explore cross-platform sample applications.</p> </a> </div> <div> <a href="https://io.google/2024/explore/f810bf7c-0583-4c22-b4d8-d5c0d0d7c228/"> <img src="https://storage.googleapis.com/cms-storage-bucket/2bf1bb23691ea31a5915.svg" alt="Go To Icon"> <h3>Build practical, AI-Driven apps with Google AI tools <i class="fas fa-arrow-right fa-sm"></i></h3> <p>Build AI-powered features into your apps across platforms from a single code base with the Google AI Dart SDK.</p> </a> </div> <div> <a href="https://io.google/2024/explore/6f1a4481-7b82-45c9-83eb-caa6e2391152/"> <img src="https://storage.googleapis.com/cms-storage-bucket/2bf1bb23691ea31a5915.svg" alt="Go To Icon"> <h3>Build generative AI agents with Vertex AI Agent Builder and Flutter <i class="fas fa-arrow-right fa-sm"></i></h3> <p>Supercharge your generative AI development workflow with Vertex AI and Flutter. Seamlessly integrate with your existing tools and leverage our pre-built components and architectures to accelerate prototyping and deploy production-grade gen AI agents in your apps.</p> </a> </div> </div> </div> </section> <section id="find-inspiration-carousel" class="module carousel-section"> <div class="stacked-header container"> <h4 class="eyebrow">Find Inspiration</h4> <h2>Explore Flutter + AI samples</h2> </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://medium.com/flutter/how-we-built-it-ask-dash-a-generative-ai-flutter-application-79a836ced058" target="_blank"> <div> <img alt="02_222x221.png" height="442" src="https://storage.googleapis.com/cms-storage-bucket/images/02_222x221.width-635.png" width="444"> <div class="text"> <h3>Ask Dash</h3> </div> </div> <span class="btn learn-more-button">Learn More</span> </a> </div> <div class="story-item"> <a href="https://github.com/flutter/samples/tree/main/dynamic_theme" target="_blank"> <div> <img alt="Flutter Logo - Carousel.png" height="221" src="https://storage.googleapis.com/cms-storage-bucket/images/Flutter_Logo_-_Carousel.width-635.png" width="222"> <div class="text"> <h3>Flutter dynamic theme</h3> </div> </div> <span class="btn learn-more-button">Learn More</span> </a> </div> <div class="story-item"> <a href="https://github.com/google-gemini/flutter-draw-it-sample" target="_blank"> <div> <img alt="Flutter Logo - Carousel.png" height="221" src="https://storage.googleapis.com/cms-storage-bucket/images/Flutter_Logo_-_Carousel.width-635.png" width="222"> <div class="text"> <h3>Gemini picture game with Flutter</h3> </div> </div> <span class="btn learn-more-button">Learn More</span> </a> </div> <div class="story-item"> <a href="https://github.com/flutter/samples/tree/main/gemini_tasks" target="_blank"> <div> <img alt="Flutter Logo - Carousel.png" height="221" src="https://storage.googleapis.com/cms-storage-bucket/images/Flutter_Logo_-_Carousel.width-635.png" width="222"> <div class="text"> <h3>Interact with a to-do list using natural language</h3> </div> </div> <span class="btn learn-more-button">Learn More</span> </a> </div> <div class="story-item"> <a href="https://github.com/google-gemini/flutter-tabletop-character-sample" target="_blank"> <div> <img alt="Flutter Logo - Carousel.png" height="221" src="https://storage.googleapis.com/cms-storage-bucket/images/Flutter_Logo_-_Carousel.width-635.png" width="222"> <div class="text"> <h3>Tabletop RPG character creator</h3> </div> </div> <span class="btn learn-more-button">Learn More</span> </a> </div> </div> <div class="carousel-progress container"> <div class="carousel-track"> <div class="carousel-completed" x-ref="progress"></div> </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="cta" class="module"> <div class="insert cta-insert container"> <div class="text"> <h3>Get started</h3> <p>Instant access to the power of the Flutter framework</p> <div> <a href="https://docs.flutter.dev/get-started/install" class="btn"> Install </a> <a href="https://docs.flutter.dev" class="btn quiet"> Read the docs <i class="fas fa-arrow-right fa-sm"></i> </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>