CINXE.COM
Flutter on iOS
<!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 on iOS </title> <meta name="viewport" content="width=device-width,initial-scale=1" /> <meta name="description" content=""/> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@flutterdev"> <meta property="og:title" content="Flutter on iOS"> <meta property="og:url" content="//flutter.dev/multi-platform/ios/"> <meta property="og:description" content=""> <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 multiplatform ios " 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 on iOS</h1> <h3 class="body"> With Flutter, you can create beautiful iOS apps featuring custom designs without sacrificing features, quality or performance. </h3> <a class="btn" href="https://apps.apple.com/us/app/wonderous/id1612491897" >Install Wonderous on iOS</a > </div> <div class="media"> <img src="https://storage.googleapis.com/cms-storage-bucket/d49fc949bf8a06595026.png" alt="Flutter on iOS" /> </div> </div> </div> </section> <section class="content-container" x-data="initSpy(headerOffset, toggleContentActive)" > <section id="tabs" class="ios-tabs"> <div class="tabs container" x-data="Tabs"> <h2 class="tabs-title"> Flutter鈥檚 architecture empowers great user experience </h2> <div class="tabs-header"> <div class="tabs-menu"> <ul x-ref="tabs"> <li class="btn" @click="selectTab($event, 'a')"> Declarative syntax </li> <li class="btn" @click="selectTab($event, 'b')"> Native performance </li> <li class="btn" @click="selectTab($event, 'c')"> Interoperability with Apple </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/e301da0df257423e95b5.png" alt="Declarative Syntax" /> </div> <div class="text"> <h2 class="title">Declarative syntax</h2> <h3 class="body"> With Flutter鈥檚 declarative syntax you simply describe what your user interface should do. For example, use a <text class="mono">Row</text> to layout a <text class="mono">Text</text> and <text class="mono">Icon</text> widget horizontally. It鈥檚 easy to learn and maintain. </h3> <div class="a-wrapper"> <a class="btn" href="https://dartpad.dev/?id=47474595b0b550bbc6f128ccdf400c77" >Try it in DartPad</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/8cfcb825303bdb157be8.png" alt="Native performance" /> </div> <div class="text"> <h2 class="title second-tab">Native performance</h2> <h3 class="body"> Impeller, Flutter鈥檚 rendering engine, talks directly to the Metal graphics API making Flutter apps fast and flexible. No abstractions over system UI components. </h3> <a class="btn" href="https://www.youtube.com/watch?v=vd5NqS01rlA" >Learn more about Impeller</a > </div> </div> <div class="tab-content no-spy" x-ref="c"> <div class="media"> <img src="https://storage.googleapis.com/cms-storage-bucket/b608bad6367a98432290.png" alt="Interoperability with Apple" /> </div> <div class="text"> <h2 class="title third-tab">Interoperability with Apple</h2> <h3 class="body"> When you create a Flutter iOS app, your Flutter code is automatically embedded into a native Runner app. This allows you to talk directly to <a href="https://docs.flutter.dev/platform-integration/ios/apple-frameworks" >Apple鈥檚 APIs</a >, integrate with Apple鈥檚 developer tooling and features, or <a href="https://www.youtube.com/watch?v=IIcrfrTshTs" >add Flutter to an existing iOS app.</a > </h3> </div> </div> </div> <div class="divider" /> </div> </section> <section id="list" class="module"> <div class="container"> <h3>Flutter on iOS</h3> <h2>Design Tools</h2> <p> With Flutter, design can be involved in every step in the development journey. </p> <div class="columns"> <ul> <li> <span> Leverage pre-built components from the <a href="https://docs.flutter.dev/ui/widgets/material" >Material</a > and <a href="https://docs.flutter.dev/ui/widgets/cupertino" >Cupertino</a > (iOS-style) libraries, or create your own custom design systems. </span> </li> <li> <span> Create stunning animations with tools like <a href="https://help.rive.app/runtimes/overview/flutter">Rive</a> and <a href="https://lottiefiles.com/tutorials/how-to-use-lottie-animation-in-flutter-eCX-SzIb8SM" >Lottie</a >. </span> </li> <li> <span> Use <a href="https://docs.flutter.dev/tools/hot-reload">hot reload</a> to see design changes instantly. </span> </li> <li> <span> Prototype ideas directly in the browser with drag-and-drop tools like <a href="https://flutterflow.io/">FlutterFlow</a>, or web-based IDEs like <a href="https://zapp.run/">Zapp.run</a>. </span> </li> <li> <span> Preview UIs in multiple configurations, directly in continuous delivery processes, with <a href="https://www.widgetbook.io/">Widgetbook</a>. </span> </li> </ul> </div> </div> </section> <section id="playlist" class="module carousel-section"> <div class="stacked-header container"> <h4 class="eyebrow">Developer stories</h4> <h2>See how Flutter is helping iOS developers</h2> </div> <div class="carousel" x-data="YouTubePlaylistCarousel('PLjxrf2q8roU2e0u7GDCJaCPQIeiGx79ZA')" 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-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="feature-grid" class="module"> <div class="feature-grid container"> <div class="feature-header full"> <hgroup> <h4 class="eyebrow">Resources</h4> <h2>Start learning about Flutter for iOS</h2> </hgroup> </div> <div class="feature-grid-features col-2"> <div> <a href="https://docs.flutter.dev/get-started/install/macos"> <h3>macOS install / iOS setup</h3> <p> Get started developing iOS apps with Flutter. Follow our guide with code and examples. </p> </a> </div> <div> <a href="https://docs.flutter.dev/get-started/flutter-for/swiftui-devs" > <h3>Learn Flutter as a SwiftUI developer</h3> <p>Learn how concepts in SwiftUI map to concepts in Flutter.</p> </a> </div> <div> <a href="https://apps.apple.com/us/app/wonderous/id1612491897"> <h3>Check out the Wonderous reference app</h3> <p> Install Wonderous on iOS. Inspect or fork the code for your own development. </p> </a> </div> <div class="feature-with-link"> <div> <a href="https://docs.flutter.dev/release/whats-new"> <h3>Learn about the Future of Flutter</h3> <p>Stay up to date on the latest updates to Flutter.</p> </a> </div> <a href="https://docs.flutter.dev/release/whats-new"> <p> See what鈥檚 new with Flutter <i class="fas fa-arrow-right fa-sm" ></i> </p> </a> </div> </div> </div> </section> <section id="case-studies" class="module carousel-section"> <div class="stacked-header container"> <h2>Case studies</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="/showcase/etermax/"> <img alt="Group 9.png" height="472" src="https://storage.googleapis.com/cms-storage-bucket/images/Group_9.width-635.png" width="635"> <div class="text"> <h3>Etermax</h3> <p>Etermax boosts developer efficiency with Flutter</p> </div> </a> </div> <div class="story-item"> <a href="/showcase/supercell/"> <img alt="Group 4.png" height="472" src="https://storage.googleapis.com/cms-storage-bucket/images/Group_4.width-635.png" width="635"> <div class="text"> <h3>Supercell</h3> <p>Flutter helps Supercell reduce Supercell ID core code size by 45%</p> </div> </a> </div> <div class="story-item"> <a href="/showcase/virgin-money/"> <img alt="Group 5.png" height="472" src="https://storage.googleapis.com/cms-storage-bucket/images/Group_5.width-635.png" width="635"> <div class="text"> <h3>Virgin Money</h3> <p>Virgin Money unifies app development with Flutter</p> </div> </a> </div> <div class="story-item"> <a href="/showcase/universal-studios/"> <img alt="Universal_showcase.png" height="472" src="https://storage.googleapis.com/cms-storage-bucket/images/Universal_showcase.width-635.png" width="635"> <div class="text"> <h3>Universal Studios</h3> <p>Universal Studios build next generation experiences with Flutter</p> </div> </a> </div> <div class="story-item"> <a href="/showcase/sozcu/"> <img alt="Flutter_SOZCU Case Study 3@2x.png" height="473" src="https://storage.googleapis.com/cms-storage-bucket/images/Flutter_SOZCU_Case_Study_32x.width-635.png" width="635"> <div class="text"> <h3>S枚zc眉</h3> <p>Estetik Yay谋nc谋l谋k increases ad revenue by 331% with Flutter</p> </div> </a> </div> <div class="story-item"> <a href="/showcase/stage/"> <img alt="Stage Case Study 1@2x.png" height="473" src="https://storage.googleapis.com/cms-storage-bucket/images/Stage_Case_Study_12x.width-635.png" width="635"> <div class="text"> <h3>STAGE</h3> <p>STAGE uses Firebase and Flutter to cut release time in half</p> </div> </a> </div> <div class="story-item"> <a href="/showcase/lucid-motors/"> <img alt="Group 27.png" height="472" src="https://storage.googleapis.com/cms-storage-bucket/images/Group_27.width-635.png" width="635"> <div class="text"> <h3>Lucid Motors</h3> <p>Small team at Lucid Motors quickly launches a multiplatform app from a single codebase with Flutter</p> </div> </a> </div> <div class="story-item"> <a href="/showcase/grupo-soma/"> <img alt="image 4.png" height="472" src="https://storage.googleapis.com/cms-storage-bucket/images/image_4.width-635.png" width="635"> <div class="text"> <h3>Grupo Soma</h3> <p>Grupo Soma increases in-app purchases by 12% with Flutter</p> </div> </a> </div> <div class="story-item"> <a href="/showcase/onrizon-games/"> <img alt="image 5.png" height="472" src="https://storage.googleapis.com/cms-storage-bucket/images/image_5.width-635.png" width="635"> <div class="text"> <h3>Onrizon Social Games</h3> <p>Onrizon doubles earnings and improves app rating with Flutter</p> </div> </a> </div> <div class="story-item"> <a href="/showcase/romwe-fashion-shein/"> <img alt="image 6.png" height="472" src="https://storage.googleapis.com/cms-storage-bucket/images/image_6.width-635.png" width="635"> <div class="text"> <h3>Romwe Fashion</h3> <p>ROMWE improves developer efficiency by 30% with Flutter</p> </div> </a> </div> <div class="story-item"> <a href="/showcase/cz-zorgverzekeringen/"> <img alt="case-study@2x.png" height="472" src="https://storage.googleapis.com/cms-storage-bucket/images/case-study2x.width-635.png" width="635"> <div class="text"> <h3>CZ Zorgverzekeringen</h3> <p>Building reliable, secure digital health insurance access with Flutter</p> </div> </a> </div> <div class="story-item"> <a href="/showcase/betterment/"> <img alt="case-study-02.png" height="472" src="https://storage.googleapis.com/cms-storage-bucket/images/case-study-02.width-635.png" width="635"> <div class="text"> <h3>Betterment</h3> <p>Scaling development at Betterment with Flutter</p> </div> </a> </div> <div class="story-item"> <a href="/showcase/kijiji1/"> <img alt="kijiji-case-study-01.png" height="472" src="https://storage.googleapis.com/cms-storage-bucket/images/kijiji-case-study-01.width-635.png" width="635"> <div class="text"> <h3>Kijiji</h3> <p>Kijiji launches features faster with Flutter</p> </div> </a> </div> <div class="story-item"> <a href="/showcase/anymind/"> <img alt="case-study (1).png" height="472" src="https://storage.googleapis.com/cms-storage-bucket/images/case-study_1.width-635.png" width="635"> <div class="text"> <h3>AnyMind</h3> <p>AnyMind increases developer efficiency with Flutter News Toolkit</p> </div> </a> </div> <div class="story-item"> <a href="/showcase/skandia/"> <img alt="case-study-01.png" height="472" src="https://storage.googleapis.com/cms-storage-bucket/images/case-study-01.width-635.png" width="635"> <div class="text"> <h3>Skandia</h3> <p>Skandia improves their mobile app quality with Flutter</p> </div> </a> </div> <div class="story-item"> <a href="/showcase/dow-jones/"> <img alt="casestudy_Dowjones2.png" height="473" src="https://storage.googleapis.com/cms-storage-bucket/images/casestudy_Dowjones2.width-635.png" width="635"> <div class="text"> <h3>MarketWatch Stock Market Game</h3> <p>MarketWatch launches Virtual Stock Exchange app in 3 months with Flutter</p> </div> </a> </div> <div class="story-item"> <a href="/showcase/pubg-mobile/"> <img alt="PUBG_casestudy.png" height="473" src="https://storage.googleapis.com/cms-storage-bucket/images/PUBG_casestudy.width-635.png" width="635"> <div class="text"> <h3>PUBG MOBILE</h3> <p>Connecting 1 billion players with Flutter</p> </div> </a> </div> <div class="story-item"> <a href="/showcase/google-classroom/"> <img alt="Googleclassroom_casestudy.png" height="473" src="https://storage.googleapis.com/cms-storage-bucket/images/Googleclassroom_casestudy.width-635.png" width="635"> <div class="text"> <h3>Google Classroom</h3> <p>Increasing productivity with Flutter</p> </div> </a> </div> <div class="story-item"> <a href="/showcase/caribou-coffee/"> <img alt="case study part 2_Caribou.png" height="472" src="https://storage.googleapis.com/cms-storage-bucket/images/case_study_part_2_Caribou.width-635.png" width="635"> <div class="text"> <h3>Caribou Coffee</h3> <p>Caribou Coffee migrates their app to a single codebase with Flutter</p> </div> </a> </div> <div class="story-item"> <a href="/showcase/credit-agricole/"> <img alt="CA24_casestudy1_Google Pay copy.png" height="472" src="https://storage.googleapis.com/cms-storage-bucket/images/CA24_casestudy1_Google_Pay_copy.width-635.png" width="635"> <div class="text"> <h3>Cr茅dit Agricole</h3> <p>Cr茅dit Agricole puts customers first with Flutter</p> </div> </a> </div> <div class="story-item"> <a href="/showcase/so-vegan/"> <img alt="Sovegan_casestudy1_MGM Resorts copy 2.png" height="472" src="https://storage.googleapis.com/cms-storage-bucket/images/Sovegan_casestudy1_MGM_Resorts_copy_2.width-635.png" width="635"> <div class="text"> <h3>So Vegan</h3> <p>So Vegan wins Apple鈥檚 App of the Day twice with Flutter</p> </div> </a> </div> <div class="story-item"> <a href="/showcase/reflectionapp/"> <img alt="Journal Dark Mobile + Desktop.png" height="472" src="https://storage.googleapis.com/cms-storage-bucket/images/Journal_Dark_Mobile__Desktop.width-635.png" width="635"> <div class="text"> <h3>Reflection.app</h3> <p>Reflection.app scales their business with Flutter</p> </div> </a> </div> <div class="story-item"> <a href="/showcase/travelstart/"> <img alt="TravelStart_thumbnail.png" height="381" src="https://storage.googleapis.com/cms-storage-bucket/images/TravelStart_thumbnail.width-635.png" width="512"> <div class="text"> <h3>Travelstart</h3> <p>When the pandemic gave Africa鈥檚 leading online travel agency an opportunity to reconsider their tech stack, they turned to Flutter to migrate all their apps to a single codebase.</p> </div> </a> </div> <div class="story-item"> <a href="/showcase/tonal/"> <img alt="case study part 2_Tonal.png" height="472" src="https://storage.googleapis.com/cms-storage-bucket/images/case_study_part_2_Tonal.width-635.png" width="635"> <div class="text"> <h3>Tonal</h3> <p>Ensuring feature parity at Tonal with Flutter</p> </div> </a> </div> <div class="story-item"> <a href="/showcase/tencent/"> <img alt="case study part 2_Tencent.png" height="472" src="https://storage.googleapis.com/cms-storage-bucket/images/case_study_part_2_Tencent.width-635.png" width="635"> <div class="text"> <h3>Tencent</h3> <p>Tencent takes large, strategic bet on Flutter</p> </div> </a> </div> <div class="story-item"> <a href="/showcase/sua-musica/"> <img alt="case study part 2_Sua Musica.png" height="472" src="https://storage.googleapis.com/cms-storage-bucket/images/case_study_part_2_Sua_Musica.width-635.png" width="635"> <div class="text"> <h3>Sua Musica</h3> <p>Supporting 10 million monthly users with Sua Musica</p> </div> </a> </div> <div class="story-item"> <a href="/showcase/us-department-of-veterans-affairs/"> <img alt="case study part 2_STAIR.png" height="472" src="https://storage.googleapis.com/cms-storage-bucket/images/case_study_part_2_STAIR.width-635.png" width="635"> <div class="text"> <h3>US Department of Veterans Affairs</h3> <p>STAIR: Helping veterans acclimate back into civilian life with Flutter</p> </div> </a> </div> <div class="story-item"> <a href="/showcase/reflectly/"> <img alt="case study part 1_Reflectly.png" height="472" src="https://storage.googleapis.com/cms-storage-bucket/images/case_study_part_1_Reflectly.width-635.png" width="635"> <div class="text"> <h3>Reflectly</h3> <p>Reflectly designs unique digital experiences with Flutter</p> </div> </a> </div> <div class="story-item"> <a href="/showcase/quintoandar/"> <img alt="case study part 1_Quinto Andar.png" height="472" src="https://storage.googleapis.com/cms-storage-bucket/images/case_study_part_1_Quinto_Andar.width-635.png" width="635"> <div class="text"> <h3>QuintoAndar</h3> <p>Achieving feature parity at QuintoAndar with Flutter</p> </div> </a> </div> <div class="story-item"> <a href="/showcase/push/"> <img alt="case study part 1_Push.png" height="472" src="https://storage.googleapis.com/cms-storage-bucket/images/case_study_part_1_Push.width-635.png" width="635"> <div class="text"> <h3>Push</h3> <p>Optimizing Athletic Training with Flutter</p> </div> </a> </div> <div class="story-item"> <a href="/showcase/nubank/"> <img alt="case study part 1_Nubank.png" height="472" src="https://storage.googleapis.com/cms-storage-bucket/images/case_study_part_1_Nubank.width-635.png" width="635"> <div class="text"> <h3>Nubank</h3> <p>Scaling with integrity at Nubank with Flutter</p> </div> </a> </div> <div class="story-item"> <a href="/showcase/lotum/"> <img alt="case study part 1_Lotum.png" height="472" src="https://storage.googleapis.com/cms-storage-bucket/images/case_study_part_1_Lotum.width-635.png" width="635"> <div class="text"> <h3>4 Pics 1 Word</h3> <p>Reaching new users at Lotum with Flutter</p> </div> </a> </div> <div class="story-item"> <a href="/showcase/irobot/"> <img alt="case study part 1_iRobot.png" height="472" src="https://storage.googleapis.com/cms-storage-bucket/images/case_study_part_1_iRobot.width-635.png" width="635"> <div class="text"> <h3>iRobot</h3> <p>iRobot Uses Flutter to Expand Access to Coding</p> </div> </a> </div> <div class="story-item"> <a href="/showcase/hamilton/"> <img alt="case study part 1_Hamilton.png" height="472" src="https://storage.googleapis.com/cms-storage-bucket/images/case_study_part_1_Hamilton.width-635.png" width="635"> <div class="text"> <h3>Hamilton</h3> <p>Taking the Hamilton experience beyond the theater with Flutter</p> </div> </a> </div> <div class="story-item"> <a href="/showcase/ebay/"> <img alt="case study part 1_eBay.png" height="472" src="https://storage.googleapis.com/cms-storage-bucket/images/case_study_part_1_eBay.width-635.png" width="635"> <div class="text"> <h3>eBay</h3> <p>Delighting engineers at eBay with Flutter</p> </div> </a> </div> <div class="story-item"> <a href="/showcase/bytedance/"> <img alt="case study part 1_byteDance.png" height="472" src="https://storage.googleapis.com/cms-storage-bucket/images/case_study_part_1_byteDance.width-635.png" width="635"> <div class="text"> <h3>ByteDance</h3> <p>Increasing productivity by 33% at ByteDance with Flutter</p> </div> </a> </div> <div class="story-item"> <a href="/showcase/google-pay/"> <img alt="case study part 1_Google Pay (1).png" height="472" src="https://storage.googleapis.com/cms-storage-bucket/images/case_study_part_1_Google_Pay_1.width-635.png" width="635"> <div class="text"> <h3>Google Pay</h3> <p>Going global at Google Pay with Flutter</p> </div> </a> </div> <div class="story-item"> <a href="/showcase/bmw/"> <img alt="case study part 1_BMW.png" height="472" src="https://storage.googleapis.com/cms-storage-bucket/images/case_study_part_1_BMW.width-635.png" width="635"> <div class="text"> <h3>BMW</h3> <p>Scaling customer-centric product development at BMW Group with Flutter</p> </div> </a> </div> <div class="story-item"> <a href="/showcase/abbey-road-studios/"> <img alt="case study part 1_Abbey Road Studios.png" height="472" src="https://storage.googleapis.com/cms-storage-bucket/images/case_study_part_1_Abbey_Road_Studios.width-635.png" width="635"> <div class="text"> <h3>Abbey Road Studios</h3> <p>Reinventing the songwriting process with Flutter</p> </div> </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>