CINXE.COM

<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Add a Flutter screen | Flutter</title><link rel="icon" href="/assets/images/branding/flutter/icon/64.png" eleventy:ignore><link rel="apple-touch-icon" href="/assets/images/branding/flutter/logo/flutter-logomark-320px.png" eleventy:ignore><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="theme-color" content="#ffffff"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><meta name="google-site-verification" content="HFqxhSbf9YA_0rBglNLzDiWnrHiK_w4cqDh2YD2GEY4"><script>!function(e,t,a,n){e[n]=e[n]||[],e[n].push({"gtm.start":(new Date).getTime(),event:"gtm.js"});var g=t.getElementsByTagName(a)[0],m=t.createElement(a);m.async=!0,m.src="https://www.googletagmanager.com/gtm.js?id=GTM-ND4LWWZ",g.parentNode.insertBefore(m,g)}(window,document,"script","dataLayer")</script><script>!function(e,a,t,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=a.createElement(t),s=a.getElementsByTagName(t)[0],o.async=1,o.src="//www.google-analytics.com/analytics.js",s.parentNode.insertBefore(o,s)}(window,document,"script",0,"ga"),ga("create","UA-67589403-1","auto"),ga("send","pageview")</script><meta name="description" content="Learn how to add a single Flutter screen to your existing Android app."><meta name="twitter:card" content="summary_large_image"><meta name="twitter:site" content="@flutterdev"><meta property="og:title" content="Add a Flutter screen to an Android app"><meta property="og:url" content="https://docs.flutter.dev/add-to-app/android/add-flutter-screen"><meta property="og:description" content="Learn how to add a single Flutter screen to your existing Android app."><meta property="og:image" content="https://docs.flutter.dev/assets/images/flutter-logo-sharing.png" eleventy:ignore><link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Google+Sans+Text:wght@400;500;700&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Google+Sans+Mono:wght@400;500;700&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" rel="stylesheet"><script>window.__CALLBACKS=[]</script><link rel="stylesheet" href="/assets/css/main.css?v=4"></head><body><section id="cookie-notice"><div class="container"><p>docs.flutter.dev uses cookies from Google to deliver and enhance the quality of its services and to analyze traffic. <a href="https://policies.google.com/technologies/cookies" target="_blank" rel="noopener">Learn more</a>.</p><button id="cookie-consent" class="filled-button">OK, got it</button></div></section><noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-ND4LWWZ" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><div id="site-banner" role="alert"><p>Flutter 3.29 is here with a bouquet of performance and fidelity improvements for your apps! <a href="https://medium.com/flutter/whats-new-in-flutter-3-29-f90c380c2317">Learn more</a><br></p></div><header class="site-header"><a href="#document-title" id="skip-to-main" class="filled-button" tabindex="1">Skip to main content</a><nav class="navbar"><div id="site-switcher" class="dropdown"><button class="dropdown-button site-wordmark" aria-expanded="false" aria-controls="site-switcher-menu" aria-label="Switch between Flutter and Dart sites"><img src="/assets/images/branding/flutter/logo/default.svg" alt="Flutter logo" width="28"> <span>Flutter</span> <span class="subtype">Docs</span> <span class="material-symbols" aria-hidden="true">unfold_more</span></button><div class="dropdown-content" id="site-switcher-menu"><nav class="dropdown-menu" role="menu"><ul><li role="presentation"><a href="https://flutter.dev" class="site-wordmark" role="menuitem" title="Flutter homepage" aria-label="Go to the Flutter homepage"><img src="/assets/images/branding/flutter/logo/default.svg" alt="Flutter logo" width="28"> <span>Flutter</span></a></li><li role="presentation"><a href="https://docs.flutter.dev" class="site-wordmark current-site" role="menuitem" aria-current="true" title="Flutter docs homepage" aria-label="Go to the Flutter docs homepage"><img src="/assets/images/branding/flutter/logo/default.svg" alt="Flutter logo" width="28"> <span>Flutter</span> <span class="subtype">Docs</span></a></li><li role="presentation"><a href="https://api.flutter.dev" class="site-wordmark" role="menuitem" title="Flutter API reference" aria-label="Go to the Flutter API reference"><img src="/assets/images/branding/flutter/logo/default.svg" alt="Flutter logo" width="28"> <span>Flutter</span> <span class="subtype">API</span></a></li><li aria-hidden="true" class="dropdown-divider" role="separator"></li><li role="presentation"><a href="https://dart.dev" class="site-wordmark" role="menuitem" title="Dart homepage" aria-label="Go to the Dart homepage"><img src="/assets/images/branding/dart/logo.svg" alt="Dart logo" width="28" height="28"> <span>Dart</span></a></li><li role="presentation"><a href="https://dartpad.dev" class="site-wordmark" role="menuitem" title="DartPad playground" aria-label="Go to the DartPad playground"><img src="/assets/images/branding/dart/logo.svg" alt="Dart logo" width="28" height="28"> <span>DartPad</span></a></li><li role="presentation"><a href="https://pub.dev" class="site-wordmark" role="menuitem" title="pub.dev homepage" aria-label="Go to the pub.dev homepage"><img src="/assets/images/branding/dart/logo.svg" alt="Dart logo" width="28" height="28"> <span>pub.dev</span></a></li></ul></nav></div></div><div class="navbar-contents"><ul class="navbar-nav"><li class="nav-item"><a class="nav-link" href="https://flutter.dev">Homepage</a></li><li class="nav-item"><a class="nav-link" href="https://flutter.dev/community">Community</a></li><li class="nav-item"><a class="nav-link" href="https://pub.dev">Packages</a></li><li class="nav-item"><a class="nav-link" href="https://api.flutter.dev">API reference</a></li></ul><form action="/search/" class="site-header__search"><input class="site-header__searchfield search-field" type="search" name="q" id="q" autocomplete="off" placeholder="Search" aria-label="Search"></form><a href="/search" id="fallback-search-button" class="icon-button" aria-label="Navigate to the docs search page." title="Navigate to the docs search page."><span class="material-symbols" aria-hidden="true">search</span> </a><a id="call-to-action" class="filled-button" href="/get-started/install/">Get started</a> <button id="menu-toggle" class="icon-button" type="button" aria-controls="sidenav" aria-label="Toggle navigation" title="Toggle navigation"><span class="material-symbols" aria-hidden="true">menu</span></button></div></nav></header><div id="site-below-header"><div id="site-main-row"><div id="sidenav" class="site-sidebar"><nav><ul><li class="nav-header">Get started</li><li class="nav-item"><a class="nav-link" href="/get-started/install"><div><span>Set up Flutter</span></div></a></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-3" role="button" aria-expanded="false" aria-controls="sidenav-3"><span>Learn Flutter</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-3"><li class="nav-item"><a class="nav-link" href="/get-started/learn-flutter"><div><span>Introduction</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/codelab"><div><span>Write your first app</span></div></a></li><li class="nav-item"><button class="nav-link collapsible" data-toggle="collapse" data-target="#sidenav-3-3" role="button" aria-expanded="true" aria-controls="sidenav-3-3"><span>Learn the fundamentals</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse show" id="sidenav-3-3"><li class="nav-item"><a class="nav-link" href="/get-started/fundamentals"><div><span>Introduction</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/fundamentals/dart"><div><span>Intro to Dart</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/fundamentals/widgets"><div><span>Widgets</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/fundamentals/layout"><div><span>Layout</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/fundamentals/state-management"><div><span>State management</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/fundamentals/user-input"><div><span>Handling user input</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/fundamentals/networking"><div><span>Networking and data</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/fundamentals/local-caching"><div><span>Local data and caching</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-3-4" role="button" aria-expanded="false" aria-controls="sidenav-3-4"><span>From another platform?</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-3-4"><li class="nav-item"><a class="nav-link" href="/get-started/flutter-for/android-devs"><div><span>Flutter for Android devs</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/flutter-for/compose-devs"><div><span>Flutter for Jetpack Compose devs</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/flutter-for/swiftui-devs"><div><span>Flutter for SwiftUI devs</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/flutter-for/uikit-devs"><div><span>Flutter for UIKit devs</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/flutter-for/react-native-devs"><div><span>Flutter for React Native devs</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/flutter-for/web-devs"><div><span>Flutter for web devs</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/flutter-for/xamarin-forms-devs"><div><span>Flutter for Xamarin.Forms devs</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/flutter-for/declarative"><div><span>Introduction to declarative UI</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/flutter-for/dart-swift-concurrency"><div><span>Flutter versus Swift concurrency</span></div></a></li></ul></li><div class="sidenav-divider"></div><li class="nav-item"><a class="nav-link" href="/codelabs"><div><span>Codelabs</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook"><div><span>Cookbook</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://github.com/flutter/samples" target="_blank" rel="noopener"><div><span>Demos and samples</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-4" role="button" aria-expanded="false" aria-controls="sidenav-4"><span>Stay up to date</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-4"><li class="nav-item"><a class="nav-link" href="/release/upgrade"><div><span>Upgrade</span></div></a></li><li class="nav-item"><a class="nav-link" href="/release/archive"><div><span>SDK archive</span></div></a></li><div class="sidenav-divider"></div><li class="nav-item"><a class="nav-link" href="/release/whats-new"><div><span>What's new</span></div></a></li><li class="nav-item"><a class="nav-link" href="/release/release-notes"><div><span>Release notes</span></div></a></li><li class="nav-item"><a class="nav-link" href="/release/breaking-changes"><div><span>Breaking changes</span></div></a></li><li class="nav-item"><a class="nav-link" href="/release/compatibility-policy"><div><span>Compatibility policy</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-5" role="button" aria-expanded="false" aria-controls="sidenav-5"><span>App solutions</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-5"><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-5-1" role="button" aria-expanded="false" aria-controls="sidenav-5-1"><span>AI</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-5-1"><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-5-1-1" role="button" aria-expanded="false" aria-controls="sidenav-5-1-1"><span>AI Toolkit guide</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-5-1-1"><li class="nav-item"><a class="nav-link" href="/ai-toolkit"><div><span>Overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ai-toolkit/user-experience"><div><span>User experience</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ai-toolkit/feature-integration"><div><span>Feature integration</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ai-toolkit/custom-llm-providers"><div><span>Custom LLM providers</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ai-toolkit/chat-client-sample"><div><span>Chat client sample</span></div></a></li></ul></li><li class="nav-item"><a class="nav-link" href="https://www.youtube.com/watch?v=1AuzJEiHjO4" target="_blank" rel="noopener"><div><span>Build with Google AI Dart SDK (video)</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-5-2" role="button" aria-expanded="false" aria-controls="sidenav-5-2"><span>Firebase & Firestore</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-5-2"><li class="nav-item"><a class="nav-link" href="/data-and-backend/firebase"><div><span>Overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://firebase.google.com/docs/flutter" target="_blank" rel="noopener"><div><span>Discover Firebase for Flutter</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://www.youtube.com/watch?v=wUSkeTaBonA" target="_blank" rel="noopener"><div><span>Get to know Firebase for Flutter</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://firebase.google.com/codelabs/firebase-auth-in-flutter-apps" target="_blank" rel="noopener"><div><span>Add a user authentication flow to a Flutter app using FirebaseUI</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://firebase.google.com/codelabs/firebase-get-to-know-web" target="_blank" rel="noopener"><div><span>Get to know Firebase for web</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-5-3" role="button" aria-expanded="false" aria-controls="sidenav-5-3"><span>Games</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-5-3"><li class="nav-item"><a class="nav-link" href="/resources/games-toolkit"><div><span>Overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/games/achievements-leaderboard"><div><span>Add achievements and leaderboards</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://firebase.google.com/codelabs/build-leaderboards-with-firestore#0" target="_blank" rel="noopener"><div><span>Build leaderboards with Firestore</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/plugins/google-mobile-ads"><div><span>Add advertising</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/games/firestore-multiplayer"><div><span>Add multiplayer support</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://codelabs.developers.google.com/codelabs/flutter-in-app-purchases" target="_blank" rel="noopener"><div><span>Add in-app purchases</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://firebase.google.com/codelabs/firebase-auth-in-flutter-apps" target="_blank" rel="noopener"><div><span>Add user authentication</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://firebase.google.com/docs/crashlytics/get-started?platform=flutter" target="_blank" rel="noopener"><div><span>Debug using Crashlytics</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://codelabs.developers.google.com/codelabs/flutter-flame-brick-breaker" target="_blank" rel="noopener"><div><span>Intro to Flame with Flutter</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-5-4" role="button" aria-expanded="false" aria-controls="sidenav-5-4"><span>Monetization</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-5-4"><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-5-4-1" role="button" aria-expanded="false" aria-controls="sidenav-5-4-1"><span>Advertising</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-5-4-1"><li class="nav-item"><a class="nav-link" href="/resources/ads-overview"><div><span>Ads overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/plugins/google-mobile-ads"><div><span>Add advertising</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://codelabs.developers.google.com/codelabs/admob-ads-in-flutter" target="_blank" rel="noopener"><div><span>Add AdMob ads to your Flutter app</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://codelabs.developers.google.com/codelabs/admob-inline-ads-in-flutter" target="_blank" rel="noopener"><div><span>Add an AdMob banner and native inline ads</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://developers.google.com/admob/flutter/mediation" target="_blank" rel="noopener"><div><span>Google AdMob mediation</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://pub.dev/packages/interactive_media_ads" target="_blank" rel="noopener"><div><span>Interactive Media Ads SDK</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-5-4-2" role="button" aria-expanded="false" aria-controls="sidenav-5-4-2"><span>In-app purchases</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-5-4-2"><li class="nav-item"><a class="nav-link" href="/resources/in-app-purchases-overview"><div><span>In-app purchases overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://codelabs.developers.google.com/codelabs/flutter-in-app-purchases" target="_blank" rel="noopener"><div><span>Add in-app purchases</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-5-4-3" role="button" aria-expanded="false" aria-controls="sidenav-5-4-3"><span>Payments</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-5-4-3"><li class="nav-item"><a class="nav-link" href="/resources/payments-overview"><div><span>Payments overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://pub.dev/packages/pay" target="_blank" rel="noopener"><div><span>Google pay package</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li></ul></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-5-5" role="button" aria-expanded="false" aria-controls="sidenav-5-5"><span>Maps</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-5-5"><li class="nav-item"><a class="nav-link" href="https://codelabs.developers.google.com/codelabs/google-maps-in-flutter" target="_blank" rel="noopener"><div><span>Add Google maps to a Flutter app</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://developers.google.com/maps/flutter-package" target="_blank" rel="noopener"><div><span>Google Maps package</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-5-6" role="button" aria-expanded="false" aria-controls="sidenav-5-6"><span>News</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-5-6"><li class="nav-item"><a class="nav-link" href="/resources/news-toolkit"><div><span>Build a news app</span></div></a></li></ul></li></ul></li><li aria-hidden="true"><div class="sidenav-divider"></div></li><li class="nav-header">User interface</li><li class="nav-item"><a class="nav-link" href="/ui"><div><span>Introduction</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/widgets"><div><span>Widget catalog</span></div></a></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-10" role="button" aria-expanded="false" aria-controls="sidenav-10"><span>Layout</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-10"><li class="nav-item"><a class="nav-link" href="/ui/layout"><div><span>Introduction</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/layout/tutorial"><div><span>Build a layout</span></div></a></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-10-3" role="button" aria-expanded="false" aria-controls="sidenav-10-3"><span>Lists & grids</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-10-3"><li class="nav-item"><a class="nav-link" href="/cookbook/lists/basic-list"><div><span>Create and use lists</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/lists/horizontal-list"><div><span>Create a horizontal list</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/lists/grid-lists"><div><span>Create a grid view</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/lists/mixed-list"><div><span>Create lists with different types of items</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/lists/spaced-items"><div><span>Create lists with spaced items</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/lists/long-lists"><div><span>Work with long lists</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-10-4" role="button" aria-expanded="false" aria-controls="sidenav-10-4"><span>Scrolling</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-10-4"><li class="nav-item"><a class="nav-link" href="/ui/layout/scrolling"><div><span>Overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/layout/scrolling/slivers"><div><span>Use slivers to achieve fancy scrolling</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/lists/floating-app-bar"><div><span>Place a floating app bar above a list</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/effects/parallax-scrolling"><div><span>Create a scrolling parallax effect</span></div></a></li></ul></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-11" role="button" aria-expanded="false" aria-controls="sidenav-11"><span>Adaptive & responsive design</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-11"><li class="nav-item"><a class="nav-link" href="/ui/adaptive-responsive"><div><span>Overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/adaptive-responsive/general"><div><span>General approach</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/adaptive-responsive/safearea-mediaquery"><div><span>SafeArea & MediaQuery</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/adaptive-responsive/large-screens"><div><span>Large screens & foldables</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/adaptive-responsive/input"><div><span>User input & accessibility</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/adaptive-responsive/capabilities"><div><span>Capabilities & policies</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/adaptive-responsive/platform-adaptations"><div><span>Automatic platform adaptations</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/adaptive-responsive/best-practices"><div><span>Best practices</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/adaptive-responsive/more-info"><div><span>Additional resources</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-12" role="button" aria-expanded="false" aria-controls="sidenav-12"><span>Design & theming</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-12"><li class="nav-item"><a class="nav-link" href="/cookbook/design/themes"><div><span>Share styles with themes</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/design/material"><div><span>Material design</span></div></a></li><li class="nav-item"><a class="nav-link" href="/release/breaking-changes/material-3-migration"><div><span>Migrate to Material 3</span></div></a></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-12-4" role="button" aria-expanded="false" aria-controls="sidenav-12-4"><span>Text</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-12-4"><li class="nav-item"><a class="nav-link" href="/ui/design/text/typography"><div><span>Fonts & typography</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/design/fonts"><div><span>Use a custom font</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/design/package-fonts"><div><span>Export fonts from a package</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://pub.dev/packages/google_fonts" target="_blank" rel="noopener"><div><span>Google Fonts package</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-12-5" role="button" aria-expanded="false" aria-controls="sidenav-12-5"><span>Custom graphics</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-12-5"><li class="nav-item"><a class="nav-link" href="/ui/design/graphics/fragment-shaders"><div><span>Use custom fragment shaders</span></div></a></li></ul></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-13" role="button" aria-expanded="false" aria-controls="sidenav-13"><span>Interactivity</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-13"><li class="nav-item"><a class="nav-link" href="/ui/interactivity"><div><span>Add interactivity to your app</span></div></a></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-13-2" role="button" aria-expanded="false" aria-controls="sidenav-13-2"><span>Gestures</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-13-2"><li class="nav-item"><a class="nav-link" href="/ui/interactivity/gestures"><div><span>Introduction</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/gestures/handling-taps"><div><span>Handle taps</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/interactivity/gestures/drag-outside"><div><span>Drag an object outside an app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/effects/drag-a-widget"><div><span>Drag a UI element within an app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/gestures/ripples"><div><span>Add Material touch ripples</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/gestures/dismissible"><div><span>Implement swipe to dismiss</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-13-3" role="button" aria-expanded="false" aria-controls="sidenav-13-3"><span>Input & forms</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-13-3"><li class="nav-item"><a class="nav-link" href="/cookbook/forms/text-input"><div><span>Create and style a text field</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/forms/retrieve-input"><div><span>Retrieve the value of a text field</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/forms/text-field-changes"><div><span>Handle changes to a text field</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/forms/focus"><div><span>Manage focus in text fields</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/forms/validation"><div><span>Build a form with validation</span></div></a></li></ul></li><li class="nav-item"><a class="nav-link" href="/cookbook/design/snackbars"><div><span>Display a snackbar</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/interactivity/actions-and-shortcuts"><div><span>Implement actions & shortcuts</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/interactivity/focus"><div><span>Manage keyboard focus</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-14" role="button" aria-expanded="false" aria-controls="sidenav-14"><span>Assets & media</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-14"><li class="nav-item"><a class="nav-link" href="/ui/assets/assets-and-images"><div><span>Add assets and images</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/images/network-image"><div><span>Display images from the internet</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/images/fading-in-images"><div><span>Fade in images with a placeholder</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/plugins/play-video"><div><span>Play and pause a video</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/assets/asset-transformation"><div><span>Transform assets at build time</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-15" role="button" aria-expanded="false" aria-controls="sidenav-15"><span>Navigation & routing</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-15"><li class="nav-item"><a class="nav-link" href="/ui/navigation"><div><span>Overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/design/tabs"><div><span>Add tabs to your app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/navigation/navigation-basics"><div><span>Navigate to a new screen and back</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/navigation/passing-data"><div><span>Send data to a new screen</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/navigation/returning-data"><div><span>Return data from a screen</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/design/drawer"><div><span>Add a drawer to a screen</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/navigation/deep-linking"><div><span>Set up deep linking</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/navigation/set-up-app-links"><div><span>Set up app links for Android</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/navigation/set-up-universal-links"><div><span>Set up universal links for iOS</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/navigation/url-strategies"><div><span>Configure web URL strategies</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-16" role="button" aria-expanded="false" aria-controls="sidenav-16"><span>Animations & transitions</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-16"><li class="nav-item"><a class="nav-link" href="/ui/animations"><div><span>Introduction</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/animations/tutorial"><div><span>Tutorial</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/animations/implicit-animations"><div><span>Implicit animations</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/animation/animated-container"><div><span>Animate the properties of a container</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/animation/opacity-animation"><div><span>Fade a widget in and out</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/animations/hero-animations"><div><span>Hero animations</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/animation/page-route-animation"><div><span>Animate a page route transition</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/animation/physics-simulation"><div><span>Animate using a physics simulation</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/animations/staggered-animations"><div><span>Staggered animations</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/effects/staggered-menu-animation"><div><span>Create a staggered menu animation</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/animations/overview"><div><span>API overview</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-17" role="button" aria-expanded="false" aria-controls="sidenav-17"><span>Accessibility & internationalization</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-17"><li class="nav-item"><a class="nav-link" href="/ui/accessibility-and-internationalization/accessibility"><div><span>Accessibility</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/accessibility-and-internationalization/internationalization"><div><span>Internationalization</span></div></a></li></ul></li><li aria-hidden="true"><div class="sidenav-divider"></div></li><li class="nav-header">Beyond UI</li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-20" role="button" aria-expanded="false" aria-controls="sidenav-20"><span>Data & backend</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-20"><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-20-1" role="button" aria-expanded="false" aria-controls="sidenav-20-1"><span>State management</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-20-1"><li class="nav-item"><a class="nav-link" href="/data-and-backend/state-mgmt/intro"><div><span>Introduction</span></div></a></li><li class="nav-item"><a class="nav-link" href="/data-and-backend/state-mgmt/declarative"><div><span>Think declaratively</span></div></a></li><li class="nav-item"><a class="nav-link" href="/data-and-backend/state-mgmt/ephemeral-vs-app"><div><span>Ephemeral vs app state</span></div></a></li><li class="nav-item"><a class="nav-link" href="/data-and-backend/state-mgmt/simple"><div><span>Simple app state management</span></div></a></li><li class="nav-item"><a class="nav-link" href="/data-and-backend/state-mgmt/options"><div><span>Options</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-20-2" role="button" aria-expanded="false" aria-controls="sidenav-20-2"><span>Networking & http</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-20-2"><li class="nav-item"><a class="nav-link" href="/data-and-backend/networking"><div><span>Overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/networking/fetch-data"><div><span>Fetch data from the internet</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/networking/authenticated-requests"><div><span>Make authenticated requests</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/networking/send-data"><div><span>Send data to the internet</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/networking/update-data"><div><span>Update data over the internet</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/networking/delete-data"><div><span>Delete data on the internet</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/networking/web-sockets"><div><span>Communicate with WebSockets</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-20-3" role="button" aria-expanded="false" aria-controls="sidenav-20-3"><span>Serialization</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-20-3"><li class="nav-item"><a class="nav-link" href="/data-and-backend/serialization/json"><div><span>JSON serialization</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/networking/background-parsing"><div><span>Parse JSON in the background</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-20-4" role="button" aria-expanded="false" aria-controls="sidenav-20-4"><span>Persistence</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-20-4"><li class="nav-item"><a class="nav-link" href="/cookbook/persistence/key-value"><div><span>Store key-value data on disk</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/persistence/reading-writing-files"><div><span>Read and write files</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/persistence/sqlite"><div><span>Persist data with SQLite</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-20-5" role="button" aria-expanded="false" aria-controls="sidenav-20-5"><span>Firebase</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-20-5"><li class="nav-item"><a class="nav-link" href="/data-and-backend/firebase"><div><span>Overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://firebase.google.com/docs/flutter/setup" target="_blank" rel="noopener"><div><span>Add Firebase to your Flutter app</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li></ul></li><li class="nav-item"><a class="nav-link" href="/data-and-backend/google-apis"><div><span>Google APIs</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-21" role="button" aria-expanded="false" aria-controls="sidenav-21"><span>App architecture</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-21"><li class="nav-item"><a class="nav-link" href="/app-architecture"><div><span>Introduction</span></div></a></li><li class="nav-item"><a class="nav-link" href="/app-architecture/concepts"><div><span>Architecture concepts</span></div></a></li><li class="nav-item"><a class="nav-link" href="/app-architecture/guide"><div><span>Guide to app architecture</span></div></a></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-21-4" role="button" aria-expanded="false" aria-controls="sidenav-21-4"><span>Architecture case study</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-21-4"><li class="nav-item"><a class="nav-link" href="/app-architecture/case-study"><div><span>Overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="/app-architecture/case-study/ui-layer"><div><span>UI layer</span></div></a></li><li class="nav-item"><a class="nav-link" href="/app-architecture/case-study/data-layer"><div><span>Data layer</span></div></a></li><li class="nav-item"><a class="nav-link" href="/app-architecture/case-study/dependency-injection"><div><span>Dependency injection</span></div></a></li><li class="nav-item"><a class="nav-link" href="/app-architecture/case-study/testing"><div><span>Testing each layer</span></div></a></li></ul></li><li class="nav-item"><a class="nav-link" href="/app-architecture/recommendations"><div><span>Recommendations</span></div></a></li><li class="nav-item"><a class="nav-link" href="/app-architecture/design-patterns"><div><span>Design patterns</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-22" role="button" aria-expanded="false" aria-controls="sidenav-22"><span>Platform integration</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-22"><li class="nav-item"><a class="nav-link" href="/reference/supported-platforms"><div><span>Supported platforms</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/desktop"><div><span>Build desktop apps with Flutter</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/platform-channels"><div><span>Write platform-specific code</span></div></a></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-22-4" role="button" aria-expanded="false" aria-controls="sidenav-22-4"><span>Android</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-22-4"><li class="nav-item"><a class="nav-link" href="/platform-integration/android/install-android"><div><span>Add Android as build target</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/android/splash-screen"><div><span>Add a splash screen</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/android/predictive-back"><div><span>Add predictive back</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/android/c-interop"><div><span>Bind to native code</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/android/platform-views"><div><span>Host a native Android view</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/android/call-jetpack-apis"><div><span>Calling JetPack APIs</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/android/compose-activity"><div><span>Launch a Jetpack Compose activity</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/android/restore-state-android"><div><span>Restore state on Android</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/android/chromeos"><div><span>Target ChromeOS with Android</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-22-5" role="button" aria-expanded="false" aria-controls="sidenav-22-5"><span>iOS</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-22-5"><li class="nav-item"><a class="nav-link" href="/platform-integration/ios/install-ios"><div><span>Add iOS as build target</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/ios/ios-latest"><div><span>Flutter on latest iOS</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/ios/apple-frameworks"><div><span>Leverage Apple's system libraries</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/ios/launch-screen"><div><span>Add a launch screen</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/ios/ios-app-clip"><div><span>Add iOS App Clip support</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/ios/app-extensions"><div><span>Add iOS app extensions</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/ios/c-interop"><div><span>Bind to native code</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/ios/platform-views"><div><span>Host a native iOS view</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/ios/ios-debugging"><div><span>Enable debugging on iOS</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/ios/restore-state-ios"><div><span>Restore state on iOS</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-22-6" role="button" aria-expanded="false" aria-controls="sidenav-22-6"><span>Linux</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-22-6"><li class="nav-item"><a class="nav-link" href="/platform-integration/linux/install-linux"><div><span>Add Linux as build target</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/linux/building"><div><span>Build a Linux app</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-22-7" role="button" aria-expanded="false" aria-controls="sidenav-22-7"><span>macOS</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-22-7"><li class="nav-item"><a class="nav-link" href="/platform-integration/macos/install-macos"><div><span>Add macOS as build target</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/macos/building"><div><span>Build a macOS app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/macos/c-interop"><div><span>Bind to native code</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/macos/platform-views"><div><span>Host a native macOS view</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-22-8" role="button" aria-expanded="false" aria-controls="sidenav-22-8"><span>Web</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-22-8"><li class="nav-item"><a class="nav-link" href="/platform-integration/web"><div><span>Web support in Flutter</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/web/install-web"><div><span>Add web as build target</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/web/building"><div><span>Build a web app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/web/wasm"><div><span>Compile to WebAssembly</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/web/initialization"><div><span>Customize app initialization</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/web/embedding-flutter-web"><div><span>Add Flutter to any web app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/web/web-content-in-flutter"><div><span>Web content in Flutter</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/web/renderers"><div><span>Web renderers</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/web/web-images"><div><span>Display images on the web</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/web/faq"><div><span>Web FAQ</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-22-9" role="button" aria-expanded="false" aria-controls="sidenav-22-9"><span>Windows</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-22-9"><li class="nav-item"><a class="nav-link" href="/platform-integration/windows/install-windows"><div><span>Add Windows as build target</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/windows/building"><div><span>Build a Windows app</span></div></a></li></ul></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-23" role="button" aria-expanded="false" aria-controls="sidenav-23"><span>Packages & plugins</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-23"><li class="nav-item"><a class="nav-link" href="/packages-and-plugins/using-packages"><div><span>Use packages & plugins</span></div></a></li><li class="nav-item"><a class="nav-link" href="/packages-and-plugins/developing-packages"><div><span>Develop packages & plugins</span></div></a></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-23-3" role="button" aria-expanded="false" aria-controls="sidenav-23-3"><span>Swift Package Manager</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-23-3"><li class="nav-item"><a class="nav-link" href="/packages-and-plugins/swift-package-manager/for-app-developers"><div><span>For app developers</span></div></a></li><li class="nav-item"><a class="nav-link" href="/packages-and-plugins/swift-package-manager/for-plugin-authors"><div><span>For plugin authors</span></div></a></li></ul></li><div class="sidenav-divider"></div><li class="nav-item"><a class="nav-link" href="/packages-and-plugins/favorites"><div><span>Flutter Favorites</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://pub.dev/flutter" target="_blank" rel="noopener"><div><span>Package repository</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-24" role="button" aria-expanded="false" aria-controls="sidenav-24"><span>Testing & debugging</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-24"><li class="nav-header">Testing</li><li class="nav-item"><a class="nav-link" href="/testing/overview"><div><span>Overview</span></div></a></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-24-3" role="button" aria-expanded="false" aria-controls="sidenav-24-3"><span>Unit testing</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-24-3"><li class="nav-item"><a class="nav-link" href="/cookbook/testing/unit/introduction"><div><span>Introduction</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/testing/unit/mocking"><div><span>Mock dependencies</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-24-4" role="button" aria-expanded="false" aria-controls="sidenav-24-4"><span>Widget testing</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-24-4"><li class="nav-item"><a class="nav-link" href="/cookbook/testing/widget/introduction"><div><span>Introduction</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/testing/widget/finders"><div><span>Find widgets</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/testing/widget/scrolling"><div><span>Simulate scrolling</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/testing/widget/tap-drag"><div><span>Simulate user interaction</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-24-5" role="button" aria-expanded="false" aria-controls="sidenav-24-5"><span>Integration testing</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-24-5"><li class="nav-item"><a class="nav-link" href="/cookbook/testing/integration/introduction"><div><span>Introduction</span></div></a></li><li class="nav-item"><a class="nav-link" href="/testing/integration-tests"><div><span>Write and run an integration test</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/testing/integration/profiling"><div><span>Profile an integration test</span></div></a></li></ul></li><li class="nav-item"><a class="nav-link" href="/testing/testing-plugins"><div><span>Test a plugin</span></div></a></li><li class="nav-item"><a class="nav-link" href="/testing/plugins-in-tests"><div><span>Handle plugin code in tests</span></div></a></li><li class="nav-header">Debugging</li><li class="nav-item"><a class="nav-link" href="/testing/debugging"><div><span>Debugging tools</span></div></a></li><li class="nav-item"><a class="nav-link" href="/testing/code-debugging"><div><span>Debug your app programmatically</span></div></a></li><li class="nav-item"><a class="nav-link" href="/testing/native-debugging"><div><span>Use a native language debugger</span></div></a></li><li class="nav-item"><a class="nav-link" href="/testing/common-errors"><div><span>Common Flutter errors</span></div></a></li><li class="nav-item"><a class="nav-link" href="/testing/errors"><div><span>Handle errors</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/maintenance/error-reporting"><div><span>Report errors to a service</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-25" role="button" aria-expanded="false" aria-controls="sidenav-25"><span>Performance & optimization</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-25"><li class="nav-item"><a class="nav-link" href="/perf"><div><span>Overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/impeller"><div><span>Impeller</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/best-practices"><div><span>Performance best practices</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/app-size"><div><span>App size</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/deferred-components"><div><span>Deferred components</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/rendering-performance"><div><span>Rendering performance</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/ui-performance"><div><span>Performance profiling</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/web-performance"><div><span>Performance profiling for web</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/metrics"><div><span>Performance metrics</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/isolates"><div><span>Concurrency and isolates</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/faq"><div><span>Performance FAQ</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/appendix"><div><span>Appendix</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-26" role="button" aria-expanded="false" aria-controls="sidenav-26"><span>Deployment</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-26"><li class="nav-item"><a class="nav-link" href="/deployment/obfuscate"><div><span>Obfuscate Dart code</span></div></a></li><li class="nav-item"><a class="nav-link" href="/deployment/flavors"><div><span>Create app flavors for Android</span></div></a></li><li class="nav-item"><a class="nav-link" href="/deployment/flavors-ios"><div><span>Create app flavors for iOS and macOS</span></div></a></li><li class="nav-item"><a class="nav-link" href="/deployment/android"><div><span>Build and release an Android app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/deployment/ios"><div><span>Build and release an iOS app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/deployment/macos"><div><span>Build and release a macOS app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/deployment/linux"><div><span>Build and release a Linux app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/deployment/windows"><div><span>Build and release a Windows app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/deployment/web"><div><span>Build and release a web app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/deployment/cd"><div><span>Set up continuous deployment</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link active collapsible" data-toggle="collapse" data-target="#sidenav-27" role="button" aria-expanded="true" aria-controls="sidenav-27"><span>Add to an existing app</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse show" id="sidenav-27"><li class="nav-item"><a class="nav-link" href="/add-to-app"><div><span>Introduction</span></div></a></li><li class="nav-item"><button class="nav-link active collapsible" data-toggle="collapse" data-target="#sidenav-27-2" role="button" aria-expanded="true" aria-controls="sidenav-27-2"><span>Add to an Android app</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse show" id="sidenav-27-2"><li class="nav-item"><a class="nav-link" href="/add-to-app/android/project-setup"><div><span>Set up Android project</span></div></a></li><li class="nav-item"><a class="nav-link active" href="/add-to-app/android/add-flutter-screen"><div><span>Add a single Flutter screen</span></div></a></li><li class="nav-item"><a class="nav-link" href="/add-to-app/android/add-flutter-fragment"><div><span>Add a Flutter Fragment</span></div></a></li><li class="nav-item"><a class="nav-link" href="/add-to-app/android/add-flutter-view"><div><span>Add a Flutter View</span></div></a></li><li class="nav-item"><a class="nav-link" href="/add-to-app/android/plugin-setup"><div><span>Use a Flutter plugin</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-27-3" role="button" aria-expanded="false" aria-controls="sidenav-27-3"><span>Add to an iOS app</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-27-3"><li class="nav-item"><a class="nav-link" href="/add-to-app/ios/project-setup"><div><span>Set up iOS project</span></div></a></li><li class="nav-item"><a class="nav-link" href="/add-to-app/ios/add-flutter-screen"><div><span>Add a single Flutter screen</span></div></a></li></ul></li><li class="nav-item"><a class="nav-link" href="/platform-integration/web/embedding-flutter-web"><div><span>Add to a web app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/add-to-app/debugging"><div><span>Debug embedded Flutter module</span></div></a></li><li class="nav-item"><a class="nav-link" href="/add-to-app/multiple-flutters"><div><span>Add multiple Flutter instances</span></div></a></li><li class="nav-item"><a class="nav-link" href="/add-to-app/performance"><div><span>Loading sequence and performance</span></div></a></li></ul></li><li aria-hidden="true"><div class="sidenav-divider"></div></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-29" role="button" aria-expanded="false" aria-controls="sidenav-29"><span>Tools & editors</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-29"><li class="nav-item"><a class="nav-link" href="/tools/android-studio"><div><span>Android Studio & IntelliJ</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/vs-code"><div><span>Visual Studio Code</span></div></a></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-29-3" role="button" aria-expanded="false" aria-controls="sidenav-29-3"><span>DevTools</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-29-3"><li class="nav-item"><a class="nav-link" href="/tools/devtools"><div><span>Overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/android-studio"><div><span>Run from Android Studio & IntelliJ</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/vscode"><div><span>Run from VS Code</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/cli"><div><span>Run from command line</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/inspector"><div><span>Flutter inspector</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/legacy-inspector"><div><span>Legacy Flutter inspector</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/performance"><div><span>Performance view</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/cpu-profiler"><div><span>CPU Profiler view</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/memory"><div><span>Memory view</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/console"><div><span>Debug console view</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/network"><div><span>Network view</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/debugger"><div><span>Debugger</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/logging"><div><span>Logging view</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/app-size"><div><span>App size tool</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/extensions"><div><span>DevTools extensions</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/deep-links"><div><span>Validate deep links</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/release-notes"><div><span>Release notes</span></div></a></li></ul></li><li class="nav-item"><a class="nav-link" href="/tools/sdk"><div><span>SDK overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/pubspec"><div><span>Flutter's pubspec options</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/flutter-fix"><div><span>Automated fixes</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/formatting"><div><span>Code formatting</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-30" role="button" aria-expanded="false" aria-controls="sidenav-30"><span>Flutter concepts</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-30"><li class="nav-item"><a class="nav-link" href="/resources/architectural-overview"><div><span>Architectural overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="/resources/inside-flutter"><div><span>Inside Flutter</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/layout/constraints"><div><span>Understanding constraints</span></div></a></li><li class="nav-item"><a class="nav-link" href="/testing/build-modes"><div><span>Flutter's build modes</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/hot-reload"><div><span>Hot reload</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-31" role="button" aria-expanded="false" aria-controls="sidenav-31"><span>Resources</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-31"><li class="nav-item"><a class="nav-link" href="/resources/faq"><div><span>FAQ</span></div></a></li><li class="nav-item"><a class="nav-link" href="/resources/books"><div><span>Books</span></div></a></li><li class="nav-item"><a class="nav-link" href="/resources/videos"><div><span>Videos</span></div></a></li><li class="nav-item"><a class="nav-link" href="/resources/courses"><div><span>Courses</span></div></a></li><li class="nav-item"><a class="nav-link" href="/resources/bootstrap-into-dart"><div><span>Learn Dart</span></div></a></li><li class="nav-item"><a class="nav-link" href="/resources/support"><div><span>Get support</span></div></a></li><div class="sidenav-divider"></div><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-31-8" role="button" aria-expanded="false" aria-controls="sidenav-31-8"><span>Contribute</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-31-8"><li class="nav-item"><a class="nav-link" href="/resources/bug-reports"><div><span>Create useful bug reports</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://github.com/flutter/flutter/blob/main/CONTRIBUTING.md" target="_blank" rel="noopener"><div><span>Contribute to Flutter</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" href="/resources/design-docs"><div><span>Discover proposed features</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-31-9" role="button" aria-expanded="false" aria-controls="sidenav-31-9"><span>Reference</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-31-9"><li class="nav-item"><a class="nav-link" href="/dash"><div><span>Who is Dash?</span></div></a></li><li class="nav-item"><a class="nav-link" href="/reference/widgets"><div><span>Widget index</span></div></a></li><li class="nav-item"><a class="nav-link" href="/reference/flutter-cli"><div><span>flutter CLI</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://api.flutter.dev" target="_blank" rel="noopener"><div><span>API docs</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li></ul></li></ul></li></ul></nav></div><main class="site-content"><div id="site-toc--side" class="site-toc"><header class="site-toc__title">Contents</header><ul class="section-nav"><li class="toc-entry nav-item"><a class="nav-link" href="#add-a-normal-flutter-screen">Add a normal Flutter screen</a><ul class="nav"><li class="toc-entry nav-item"><a class="nav-link" href="#step-1-add-flutteractivity-to-androidmanifest-xml">Step 1: Add FlutterActivity to AndroidManifest.xml</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#step-2-launch-flutteractivity">Step 2: Launch FlutterActivity</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#step-3-optional-use-a-cached-flutterengine">Step 3: (Optional) Use a cached FlutterEngine</a></li></ul></li><li class="toc-entry nav-item"><a class="nav-link" href="#add-a-translucent-flutter-screen">Add a translucent Flutter screen</a><ul class="nav"><li class="toc-entry nav-item"><a class="nav-link" href="#step-1-use-a-theme-with-translucency">Step 1: Use a theme with translucency</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#step-2-start-flutteractivity-with-transparency">Step 2: Start FlutterActivity with transparency</a></li></ul></li></ul></div><article><header class="site-content__title"><h1 id="document-title">Add a Flutter screen to an Android app</h1><nav class="breadcrumbs" aria-label="breadcrumb"><ol vocab="https://schema.org/" typeof="BreadcrumbList"><li class="breadcrumb-item" property="itemListElement" typeof="ListItem"><a href="/add-to-app" property="item" typeof="WebPage"><span property="name">Add to app</span></a><meta property="position" content="0"><span class="material-symbols child-icon" aria-hidden="true">chevron_right</span></li><li class="breadcrumb-item" property="itemListElement" typeof="ListItem"><a href="/add-to-app/android" property="item" typeof="WebPage"><span property="name">Add Flutter to Android</span></a><meta property="position" content="1"><span class="material-symbols child-icon" aria-hidden="true">chevron_right</span></li><li class="breadcrumb-item active" property="itemListElement" typeof="ListItem" aria-current="page"><a href="/add-to-app/android/add-flutter-screen" property="item" typeof="WebPage"><span property="name">Add a Flutter screen</span></a><meta property="position" content="2"></li></ol></nav></header><div id="site-toc--inline" class="site-toc"><header class="site-toc__title">Contents</header><ul class="section-nav"><li class="toc-entry"><a href="#add-a-normal-flutter-screen">Add a normal Flutter screen</a><ul><li class="toc-entry"><a href="#step-1-add-flutteractivity-to-androidmanifest-xml">Step 1: Add FlutterActivity to AndroidManifest.xml</a></li><li class="toc-entry"><a href="#step-2-launch-flutteractivity">Step 2: Launch FlutterActivity</a></li><li class="toc-entry"><a href="#step-3-optional-use-a-cached-flutterengine">Step 3: (Optional) Use a cached FlutterEngine</a></li></ul></li><li class="toc-entry"><a href="#add-a-translucent-flutter-screen">Add a translucent Flutter screen</a><ul><li class="toc-entry"><a href="#step-1-use-a-theme-with-translucency">Step 1: Use a theme with translucency</a></li><li class="toc-entry"><a href="#step-2-start-flutteractivity-with-transparency">Step 2: Start FlutterActivity with transparency</a></li></ul></li></ul></div><p>This guide describes how to add a single Flutter screen to an existing Android app. A Flutter screen can be added as a normal, opaque screen, or as a see-through, translucent screen. Both options are described in this guide.</p><div class="header-wrapper"><h2 id="add-a-normal-flutter-screen">Add a normal Flutter screen</h2><a class="heading-link" href="#add-a-normal-flutter-screen" aria-label="Link to 'Add a normal Flutter screen' section">#</a></div><img src="/assets/images/docs/development/add-to-app/android/add-flutter-screen/add-single-flutter-screen_header.png" alt="Add Flutter Screen Header"><div class="header-wrapper"><h3 id="step-1-add-flutteractivity-to-androidmanifest-xml">Step 1: Add FlutterActivity to AndroidManifest.xml</h3><a class="heading-link" href="#step-1-add-flutteractivity-to-androidmanifest-xml" aria-label="Link to 'Step 1: Add FlutterActivity to AndroidManifest.xml' section">#</a></div><p>Flutter provides <a href="https://api.flutter.dev/javadoc/io/flutter/embedding/android/FlutterActivity.html"><code>FlutterActivity</code></a> to display a Flutter experience within an Android app. Like any other <a href="https://developer.android.com/reference/android/app/Activity"><code>Activity</code></a>, <code>FlutterActivity</code> must be registered in your <code>AndroidManifest.xml</code>. Add the following XML to your <code>AndroidManifest.xml</code> file under your <code>application</code> tag:</p><div class="code-block-wrapper language-xml"><div class="code-block-body"><span class="code-block-language" title="Language xml">xml</span><pre class="shiki dash-light" tabindex="0"><code><span class="line"><span style="color:#222222"><</span><span style="color:#0468D7">activity</span></span> <span class="line"><span style="color:#6200EE"> android</span><span style="color:#222222">:</span><span style="color:#6200EE">name</span><span style="color:#222222">=</span><span style="color:#0C7064">"io.flutter.embedding.android.FlutterActivity"</span></span> <span class="line"><span style="color:#6200EE"> android</span><span style="color:#222222">:</span><span style="color:#6200EE">theme</span><span style="color:#222222">=</span><span style="color:#0C7064">"@style/LaunchTheme"</span></span> <span class="line"><span style="color:#6200EE"> android</span><span style="color:#222222">:</span><span style="color:#6200EE">configChanges</span><span style="color:#222222">=</span><span style="color:#0C7064">"orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"</span></span> <span class="line"><span style="color:#6200EE"> android</span><span style="color:#222222">:</span><span style="color:#6200EE">hardwareAccelerated</span><span style="color:#222222">=</span><span style="color:#0C7064">"true"</span></span> <span class="line"><span style="color:#6200EE"> android</span><span style="color:#222222">:</span><span style="color:#6200EE">windowSoftInputMode</span><span style="color:#222222">=</span><span style="color:#0C7064">"adjustResize"</span></span> <span class="line"><span style="color:#222222"> /></span></span></code></pre></div></div><p>The reference to <code>@style/LaunchTheme</code> can be replaced by any Android theme that want to apply to your <code>FlutterActivity</code>. The choice of theme dictates the colors applied to Android's system chrome, like Android's navigation bar, and to the background color of the <code>FlutterActivity</code> just before the Flutter UI renders itself for the first time.</p><div class="header-wrapper"><h3 id="step-2-launch-flutteractivity">Step 2: Launch FlutterActivity</h3><a class="heading-link" href="#step-2-launch-flutteractivity" aria-label="Link to 'Step 2: Launch FlutterActivity' section">#</a></div><p>With <code>FlutterActivity</code> registered in your manifest file, add code to launch <code>FlutterActivity</code> from whatever point in your app that you'd like. The following example shows <code>FlutterActivity</code> being launched from an <code>OnClickListener</code>.</p><aside class="alert alert-info"><div class="alert-header"><i class="material-symbols" aria-hidden="true">info</i> <span>Note</span></div><div class="alert-content"><p>Make sure to use the following import:</p><div class="code-block-wrapper language-java"><div class="code-block-body"><span class="code-block-language" title="Language java">java</span><pre class="shiki dash-light" tabindex="0"><code><span class="line"><span style="color:#BD2314">import</span><span style="color:#BD2314"> io</span><span style="color:#222222">.</span><span style="color:#BD2314">flutter</span><span style="color:#222222">.</span><span style="color:#BD2314">embedding</span><span style="color:#222222">.</span><span style="color:#BD2314">android</span><span style="color:#222222">.</span><span style="color:#BD2314">FlutterActivity</span><span style="color:#222222">;</span></span></code></pre></div></div></div></aside><div class="tabs-wrapper" data-tab-save-key="android-language"><ul class="nav nav-tabs" role="tablist"><li class="nav-item"><a class="nav-link active" data-tab-save-id="jetpack-compose" id="49-tab" href="#49-tab-panel" role="tab" aria-controls="49-tab-panel" aria-selected="true">Jetpack Compose</a></li><li class="nav-item"><a class="nav-link" data-tab-save-id="kotlin" id="50-tab" href="#50-tab-panel" role="tab" aria-controls="50-tab-panel" aria-selected="false">Kotlin</a></li><li class="nav-item"><a class="nav-link" data-tab-save-id="java" id="51-tab" href="#51-tab-panel" role="tab" aria-controls="51-tab-panel" aria-selected="false">Java</a></li></ul><div class="tab-content"><div class="tab-pane active" id="49-tab-panel" role="tabpanel" aria-labelledby="49-tab"><div class="code-block-wrapper language-kotlin"><div class="code-block-header">ExistingActivity.kt</div><div class="code-block-body"><span class="code-block-language" title="Language kotlin">kotlin</span><pre class="shiki dash-light" tabindex="0"><code><span class="line"><span style="color:#6200EE">MyButton</span><span style="color:#222222">(onClick = {</span></span> <span class="line"><span style="color:#6200EE"> startActivity</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> FlutterActivity.</span><span style="color:#6200EE">createDefaultIntent</span><span style="color:#222222">(</span><span style="color:#BD2314">this</span><span style="color:#222222">)</span></span> <span class="line"><span style="color:#222222"> )</span></span> <span class="line"><span style="color:#222222">})</span></span> <span class="line"></span> <span class="line"><span style="color:#0468D7">@Composable</span></span> <span class="line"><span style="color:#BD2314">fun</span><span style="color:#6200EE"> MyButton</span><span style="color:#222222">(onClick: () </span><span style="color:#BD2314">-></span><span style="color:#222222"> Unit) {</span></span> <span class="line"><span style="color:#6200EE"> Button</span><span style="color:#222222">(onClick = onClick) {</span></span> <span class="line"><span style="color:#6200EE"> Text</span><span style="color:#222222">(</span><span style="color:#0C7064">"Launch Flutter!"</span><span style="color:#222222">)</span></span> <span class="line"><span style="color:#222222"> }</span></span> <span class="line"><span style="color:#222222">}</span></span></code></pre></div></div></div><div class="tab-pane" id="50-tab-panel" role="tabpanel" aria-labelledby="50-tab"><div class="code-block-wrapper language-kotlin"><div class="code-block-header">ExistingActivity.kt</div><div class="code-block-body"><span class="code-block-language" title="Language kotlin">kotlin</span><pre class="shiki dash-light" tabindex="0"><code><span class="line"><span style="color:#222222">myButton.</span><span style="color:#6200EE">setOnClickListener</span><span style="color:#222222"> {</span></span> <span class="line"><span style="color:#6200EE"> startActivity</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> FlutterActivity.</span><span style="color:#6200EE">createDefaultIntent</span><span style="color:#222222">(</span><span style="color:#BD2314">this</span><span style="color:#222222">)</span></span> <span class="line"><span style="color:#222222"> )</span></span> <span class="line"><span style="color:#222222">}</span></span></code></pre></div></div></div><div class="tab-pane" id="51-tab-panel" role="tabpanel" aria-labelledby="51-tab"><div class="code-block-wrapper language-java"><div class="code-block-header">ExistingActivity.java</div><div class="code-block-body"><span class="code-block-language" title="Language java">java</span><pre class="shiki dash-light" tabindex="0"><code><span class="line"><span style="color:#222222">myButton.</span><span style="color:#6200EE">setOnClickListener</span><span style="color:#222222">(</span><span style="color:#BD2314">new</span><span style="color:#6200EE"> OnClickListener</span><span style="color:#222222">() {</span></span> <span class="line"><span style="color:#222222"> @</span><span style="color:#BD2314">Override</span></span> <span class="line"><span style="color:#BD2314"> public</span><span style="color:#BD2314"> void</span><span style="color:#6200EE"> onClick</span><span style="color:#222222">(</span><span style="color:#BD2314">View</span><span style="color:#222222"> v) {</span></span> <span class="line"><span style="color:#6200EE"> startActivity</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> FlutterActivity.</span><span style="color:#6200EE">createDefaultIntent</span><span style="color:#222222">(currentActivity)</span></span> <span class="line"><span style="color:#222222"> );</span></span> <span class="line"><span style="color:#222222"> }</span></span> <span class="line"><span style="color:#222222">});</span></span></code></pre></div></div></div></div></div><p>The previous example assumes that your Dart entrypoint is called <code>main()</code>, and your initial Flutter route is '/'. The Dart entrypoint can't be changed using <code>Intent</code>, but the initial route can be changed using <code>Intent</code>. The following example demonstrates how to launch a <code>FlutterActivity</code> that initially renders a custom route in Flutter.</p><div class="tabs-wrapper" data-tab-save-key="android-language"><ul class="nav nav-tabs" role="tablist"><li class="nav-item"><a class="nav-link active" data-tab-save-id="jetpack-compose" id="52-tab" href="#52-tab-panel" role="tab" aria-controls="52-tab-panel" aria-selected="true">Jetpack Compose</a></li><li class="nav-item"><a class="nav-link" data-tab-save-id="kotlin" id="53-tab" href="#53-tab-panel" role="tab" aria-controls="53-tab-panel" aria-selected="false">Kotlin</a></li><li class="nav-item"><a class="nav-link" data-tab-save-id="java" id="54-tab" href="#54-tab-panel" role="tab" aria-controls="54-tab-panel" aria-selected="false">Java</a></li></ul><div class="tab-content"><div class="tab-pane active" id="52-tab-panel" role="tabpanel" aria-labelledby="52-tab"><div class="code-block-wrapper language-kotlin"><div class="code-block-header">ExistingActivity.kt</div><div class="code-block-body"><span class="code-block-language" title="Language kotlin">kotlin</span><pre class="shiki dash-light" tabindex="0"><code><span class="line"><span style="color:#6200EE">MyButton</span><span style="color:#222222">(onClick = {</span></span> <span class="line"><span style="color:#6200EE"> startActivity</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> FlutterActivity</span></span> <span class="line"><span style="color:#222222"> .</span><span style="color:#6200EE">withNewEngine</span><span style="color:#222222">()</span></span> <span class="line"><span style="color:#222222"> .</span><span style="color:#6200EE">initialRoute</span><span style="color:#222222">(</span><span style="color:#0C7064">"/my_route"</span><span style="color:#222222">)</span></span> <span class="line"><span style="color:#222222"> .</span><span style="color:#6200EE">build</span><span style="color:#222222">(</span><span style="color:#BD2314">this</span><span style="color:#222222">)</span></span> <span class="line"><span style="color:#222222"> )</span></span> <span class="line"><span style="color:#222222">})</span></span> <span class="line"></span> <span class="line"><span style="color:#0468D7">@Composable</span></span> <span class="line"><span style="color:#BD2314">fun</span><span style="color:#6200EE"> MyButton</span><span style="color:#222222">(onClick: () </span><span style="color:#BD2314">-></span><span style="color:#222222"> Unit) {</span></span> <span class="line"><span style="color:#6200EE"> Button</span><span style="color:#222222">(onClick = onClick) {</span></span> <span class="line"><span style="color:#6200EE"> Text</span><span style="color:#222222">(</span><span style="color:#0C7064">"Launch Flutter!"</span><span style="color:#222222">)</span></span> <span class="line"><span style="color:#222222"> }</span></span> <span class="line"><span style="color:#222222">}</span></span></code></pre></div></div></div><div class="tab-pane" id="53-tab-panel" role="tabpanel" aria-labelledby="53-tab"><div class="code-block-wrapper language-kotlin"><div class="code-block-header">ExistingActivity.kt</div><div class="code-block-body"><span class="code-block-language" title="Language kotlin">kotlin</span><pre class="shiki dash-light" tabindex="0"><code><span class="line"><span style="color:#222222">myButton.</span><span style="color:#6200EE">setOnClickListener</span><span style="color:#222222"> {</span></span> <span class="line"><span style="color:#6200EE"> startActivity</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> FlutterActivity</span></span> <span class="line"><span style="color:#222222"> .</span><span style="color:#6200EE">withNewEngine</span><span style="color:#222222">()</span></span> <span class="line"><span style="color:#222222"> .</span><span style="color:#6200EE">initialRoute</span><span style="color:#222222">(</span><span style="color:#0C7064">"/my_route"</span><span style="color:#222222">)</span></span> <span class="line"><span style="color:#222222"> .</span><span style="color:#6200EE">build</span><span style="color:#222222">(</span><span style="color:#BD2314">this</span><span style="color:#222222">)</span></span> <span class="line"><span style="color:#222222"> )</span></span> <span class="line"><span style="color:#222222">}</span></span></code></pre></div></div></div><div class="tab-pane" id="54-tab-panel" role="tabpanel" aria-labelledby="54-tab"><div class="code-block-wrapper language-java"><div class="code-block-header">ExistingActivity.java</div><div class="code-block-body"><span class="code-block-language" title="Language java">java</span><pre class="shiki dash-light" tabindex="0"><code><span class="line"><span style="color:#222222">myButton.</span><span style="color:#6200EE">addOnClickListener</span><span style="color:#222222">(</span><span style="color:#BD2314">new</span><span style="color:#6200EE"> OnClickListener</span><span style="color:#222222">() {</span></span> <span class="line"><span style="color:#222222"> @</span><span style="color:#BD2314">Override</span></span> <span class="line"><span style="color:#BD2314"> public</span><span style="color:#BD2314"> void</span><span style="color:#6200EE"> onClick</span><span style="color:#222222">(</span><span style="color:#BD2314">View</span><span style="color:#222222"> v) {</span></span> <span class="line"><span style="color:#6200EE"> startActivity</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#BD2314"> FlutterActivity</span></span> <span class="line"><span style="color:#222222"> .</span><span style="color:#6200EE">withNewEngine</span><span style="color:#222222">()</span></span> <span class="line"><span style="color:#222222"> .</span><span style="color:#6200EE">initialRoute</span><span style="color:#222222">(</span><span style="color:#0C7064">"/my_route"</span><span style="color:#222222">)</span></span> <span class="line"><span style="color:#222222"> .</span><span style="color:#6200EE">build</span><span style="color:#222222">(currentActivity)</span></span> <span class="line"><span style="color:#222222"> );</span></span> <span class="line"><span style="color:#222222"> }</span></span> <span class="line"><span style="color:#222222">});</span></span></code></pre></div></div></div></div></div><p>Replace <code>"/my_route"</code> with your desired initial route.</p><p>The use of the <code>withNewEngine()</code> factory method configures a <code>FlutterActivity</code> that internally create its own <a href="https://api.flutter.dev/javadoc/io/flutter/embedding/engine/FlutterEngine.html"><code>FlutterEngine</code></a> instance. This comes with a non-trivial initialization time. The alternative approach is to instruct <code>FlutterActivity</code> to use a pre-warmed, cached <code>FlutterEngine</code>, which minimizes Flutter's initialization time. That approach is discussed next.</p><div class="header-wrapper"><h3 id="step-3-optional-use-a-cached-flutterengine">Step 3: (Optional) Use a cached FlutterEngine</h3><a class="heading-link" href="#step-3-optional-use-a-cached-flutterengine" aria-label="Link to 'Step 3: (Optional) Use a cached FlutterEngine' section">#</a></div><p>Every <code>FlutterActivity</code> creates its own <code>FlutterEngine</code> by default. Each <code>FlutterEngine</code> has a non-trivial warm-up time. This means that launching a standard <code>FlutterActivity</code> comes with a brief delay before your Flutter experience becomes visible. To minimize this delay, you can warm up a <code>FlutterEngine</code> before arriving at your <code>FlutterActivity</code>, and then you can use your pre-warmed <code>FlutterEngine</code> instead.</p><p>To pre-warm a <code>FlutterEngine</code>, find a reasonable location in your app to instantiate a <code>FlutterEngine</code>. The following example arbitrarily pre-warms a <code>FlutterEngine</code> in the <code>Application</code> class:</p><div class="tabs-wrapper" data-tab-save-key="android-language"><ul class="nav nav-tabs" role="tablist"><li class="nav-item"><a class="nav-link active" data-tab-save-id="kotlin" id="55-tab" href="#55-tab-panel" role="tab" aria-controls="55-tab-panel" aria-selected="true">Kotlin</a></li><li class="nav-item"><a class="nav-link" data-tab-save-id="java" id="56-tab" href="#56-tab-panel" role="tab" aria-controls="56-tab-panel" aria-selected="false">Java</a></li></ul><div class="tab-content"><div class="tab-pane active" id="55-tab-panel" role="tabpanel" aria-labelledby="55-tab"><div class="code-block-wrapper language-kotlin"><div class="code-block-header">MyApplication.kt</div><div class="code-block-body"><span class="code-block-language" title="Language kotlin">kotlin</span><pre class="shiki dash-light" tabindex="0"><code><span class="line"><span style="color:#BD2314">class</span><span style="color:#0468D7"> MyApplication</span><span style="color:#222222"> : </span><span style="color:#0468D7">Application</span><span style="color:#222222">() {</span></span> <span class="line"><span style="color:#BD2314"> lateinit</span><span style="color:#BD2314"> var</span><span style="color:#222222"> flutterEngine : </span><span style="color:#0468D7">FlutterEngine</span></span> <span class="line"></span> <span class="line"><span style="color:#BD2314"> override</span><span style="color:#BD2314"> fun</span><span style="color:#6200EE"> onCreate</span><span style="color:#222222">() {</span></span> <span class="line"><span style="color:#BD2314"> super</span><span style="color:#222222">.</span><span style="color:#6200EE">onCreate</span><span style="color:#222222">()</span></span> <span class="line"></span> <span class="line"><span style="color:#6E6E70"> // Instantiate a FlutterEngine.</span></span> <span class="line"><span style="color:#222222"> flutterEngine = </span><span style="color:#6200EE">FlutterEngine</span><span style="color:#222222">(</span><span style="color:#BD2314">this</span><span style="color:#222222">)</span></span> <span class="line"></span> <span class="line"><span style="color:#6E6E70"> // Start executing Dart code to pre-warm the FlutterEngine.</span></span> <span class="line"><span style="color:#222222"> flutterEngine.dartExecutor.</span><span style="color:#6200EE">executeDartEntrypoint</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> DartExecutor.DartEntrypoint.</span><span style="color:#6200EE">createDefault</span><span style="color:#222222">()</span></span> <span class="line"><span style="color:#222222"> )</span></span> <span class="line"></span> <span class="line"><span style="color:#6E6E70"> // Cache the FlutterEngine to be used by FlutterActivity.</span></span> <span class="line"><span style="color:#222222"> FlutterEngineCache</span></span> <span class="line"><span style="color:#222222"> .</span><span style="color:#6200EE">getInstance</span><span style="color:#222222">()</span></span> <span class="line"><span style="color:#222222"> .</span><span style="color:#6200EE">put</span><span style="color:#222222">(</span><span style="color:#0C7064">"my_engine_id"</span><span style="color:#222222">, flutterEngine)</span></span> <span class="line"><span style="color:#222222"> }</span></span> <span class="line"><span style="color:#222222">}</span></span></code></pre></div></div></div><div class="tab-pane" id="56-tab-panel" role="tabpanel" aria-labelledby="56-tab"><div class="code-block-wrapper language-java"><div class="code-block-header">MyApplication.java</div><div class="code-block-body"><span class="code-block-language" title="Language java">java</span><pre class="shiki dash-light" tabindex="0"><code><span class="line"><span style="color:#BD2314">public</span><span style="color:#BD2314"> class</span><span style="color:#0468D7"> MyApplication</span><span style="color:#BD2314"> extends</span><span style="color:#222222"> Application {</span></span> <span class="line"><span style="color:#BD2314"> public</span><span style="color:#BD2314"> FlutterEngine</span><span style="color:#222222"> flutterEngine;</span></span> <span class="line"><span style="color:#222222"> </span></span> <span class="line"><span style="color:#222222"> @</span><span style="color:#BD2314">Override</span></span> <span class="line"><span style="color:#BD2314"> public</span><span style="color:#BD2314"> void</span><span style="color:#6200EE"> onCreate</span><span style="color:#222222">() {</span></span> <span class="line"><span style="color:#BD2314"> super</span><span style="color:#222222">.</span><span style="color:#6200EE">onCreate</span><span style="color:#222222">();</span></span> <span class="line"><span style="color:#6E6E70"> // Instantiate a FlutterEngine.</span></span> <span class="line"><span style="color:#222222"> flutterEngine = </span><span style="color:#BD2314">new</span><span style="color:#6200EE"> FlutterEngine</span><span style="color:#222222">(</span><span style="color:#BD2314">this</span><span style="color:#222222">);</span></span> <span class="line"></span> <span class="line"><span style="color:#6E6E70"> // Start executing Dart code to pre-warm the FlutterEngine.</span></span> <span class="line"><span style="color:#222222"> flutterEngine.</span><span style="color:#6200EE">getDartExecutor</span><span style="color:#222222">().</span><span style="color:#6200EE">executeDartEntrypoint</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> DartEntrypoint.</span><span style="color:#6200EE">createDefault</span><span style="color:#222222">()</span></span> <span class="line"><span style="color:#222222"> );</span></span> <span class="line"></span> <span class="line"><span style="color:#6E6E70"> // Cache the FlutterEngine to be used by FlutterActivity.</span></span> <span class="line"><span style="color:#BD2314"> FlutterEngineCache</span></span> <span class="line"><span style="color:#222222"> .</span><span style="color:#6200EE">getInstance</span><span style="color:#222222">()</span></span> <span class="line"><span style="color:#222222"> .</span><span style="color:#6200EE">put</span><span style="color:#222222">(</span><span style="color:#0C7064">"my_engine_id"</span><span style="color:#222222">, flutterEngine);</span></span> <span class="line"><span style="color:#222222"> }</span></span> <span class="line"><span style="color:#222222">}</span></span></code></pre></div></div></div></div></div><p>The ID passed to the <a href="https://api.flutter.dev/javadoc/io/flutter/embedding/engine/FlutterEngineCache.html"><code>FlutterEngineCache</code></a> can be whatever you want. Make sure that you pass the same ID to any <code>FlutterActivity</code> or <a href="https://api.flutter.dev/javadoc/io/flutter/embedding/android/FlutterFragment.html"><code>FlutterFragment</code></a> that should use the cached <code>FlutterEngine</code>. Using <code>FlutterActivity</code> with a cached <code>FlutterEngine</code> is discussed next.</p><aside class="alert alert-info"><div class="alert-header"><i class="material-symbols" aria-hidden="true">info</i> <span>Note</span></div><div class="alert-content"><p>To warm up a <code>FlutterEngine</code>, you must execute a Dart entrypoint. Keep in mind that the moment <code>executeDartEntrypoint()</code> is invoked, your Dart entrypoint method begins executing. If your Dart entrypoint invokes <code>runApp()</code> to run a Flutter app, then your Flutter app behaves as if it were running in a window of zero size until this <code>FlutterEngine</code> is attached to a <code>FlutterActivity</code>, <code>FlutterFragment</code>, or <code>FlutterView</code>. Make sure that your app behaves appropriately between the time you warm it up and the time you display Flutter content.</p></div></aside><p>With a pre-warmed, cached <code>FlutterEngine</code>, you now need to instruct your <code>FlutterActivity</code> to use the cached <code>FlutterEngine</code> instead of creating a new one. To accomplish this, use <code>FlutterActivity</code>'s <code>withCachedEngine()</code> builder:</p><div class="tabs-wrapper" data-tab-save-key="android-language"><ul class="nav nav-tabs" role="tablist"><li class="nav-item"><a class="nav-link active" data-tab-save-id="kotlin" id="57-tab" href="#57-tab-panel" role="tab" aria-controls="57-tab-panel" aria-selected="true">Kotlin</a></li><li class="nav-item"><a class="nav-link" data-tab-save-id="java" id="58-tab" href="#58-tab-panel" role="tab" aria-controls="58-tab-panel" aria-selected="false">Java</a></li></ul><div class="tab-content"><div class="tab-pane active" id="57-tab-panel" role="tabpanel" aria-labelledby="57-tab"><div class="code-block-wrapper language-kotlin"><div class="code-block-header">ExistingActivity.kt</div><div class="code-block-body"><span class="code-block-language" title="Language kotlin">kotlin</span><pre class="shiki dash-light" tabindex="0"><code><span class="line"><span style="color:#222222">myButton.</span><span style="color:#6200EE">setOnClickListener</span><span style="color:#222222"> {</span></span> <span class="line"><span style="color:#6200EE"> startActivity</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> FlutterActivity</span></span> <span class="line"><span style="color:#222222"> .</span><span style="color:#6200EE">withCachedEngine</span><span style="color:#222222">(</span><span style="color:#0C7064">"my_engine_id"</span><span style="color:#222222">)</span></span> <span class="line"><span style="color:#222222"> .</span><span style="color:#6200EE">build</span><span style="color:#222222">(</span><span style="color:#BD2314">this</span><span style="color:#222222">)</span></span> <span class="line"><span style="color:#222222"> )</span></span> <span class="line"><span style="color:#222222">}</span></span></code></pre></div></div></div><div class="tab-pane" id="58-tab-panel" role="tabpanel" aria-labelledby="58-tab"><div class="code-block-wrapper language-java"><div class="code-block-header">ExistingActivity.java</div><div class="code-block-body"><span class="code-block-language" title="Language java">java</span><pre class="shiki dash-light" tabindex="0"><code><span class="line"><span style="color:#222222">myButton.</span><span style="color:#6200EE">addOnClickListener</span><span style="color:#222222">(</span><span style="color:#BD2314">new</span><span style="color:#6200EE"> OnClickListener</span><span style="color:#222222">() {</span></span> <span class="line"><span style="color:#222222"> @</span><span style="color:#BD2314">Override</span></span> <span class="line"><span style="color:#BD2314"> public</span><span style="color:#BD2314"> void</span><span style="color:#6200EE"> onClick</span><span style="color:#222222">(</span><span style="color:#BD2314">View</span><span style="color:#222222"> v) {</span></span> <span class="line"><span style="color:#6200EE"> startActivity</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#BD2314"> FlutterActivity</span></span> <span class="line"><span style="color:#222222"> .</span><span style="color:#6200EE">withCachedEngine</span><span style="color:#222222">(</span><span style="color:#0C7064">"my_engine_id"</span><span style="color:#222222">)</span></span> <span class="line"><span style="color:#222222"> .</span><span style="color:#6200EE">build</span><span style="color:#222222">(currentActivity)</span></span> <span class="line"><span style="color:#222222"> );</span></span> <span class="line"><span style="color:#222222"> }</span></span> <span class="line"><span style="color:#222222">});</span></span></code></pre></div></div></div></div></div><p>When using the <code>withCachedEngine()</code> factory method, pass the same ID that you used when caching the desired <code>FlutterEngine</code>.</p><p>Now, when you launch <code>FlutterActivity</code>, there is significantly less delay in the display of Flutter content.</p><aside class="alert alert-info"><div class="alert-header"><i class="material-symbols" aria-hidden="true">info</i> <span>Note</span></div><div class="alert-content"><p>When using a cached <code>FlutterEngine</code>, that <code>FlutterEngine</code> outlives any <code>FlutterActivity</code> or <code>FlutterFragment</code> that displays it. Keep in mind that Dart code begins executing as soon as you pre-warm the <code>FlutterEngine</code>, and continues executing after the destruction of your <code>FlutterActivity</code>/<code>FlutterFragment</code>. To stop executing and clear resources, obtain your <code>FlutterEngine</code> from the <code>FlutterEngineCache</code> and destroy the <code>FlutterEngine</code> with <code>FlutterEngine.destroy()</code>.</p></div></aside><aside class="alert alert-info"><div class="alert-header"><i class="material-symbols" aria-hidden="true">info</i> <span>Note</span></div><div class="alert-content"><p>Runtime performance isn't the only reason that you might pre-warm and cache a <code>FlutterEngine</code>. A pre-warmed <code>FlutterEngine</code> executes Dart code independent from a <code>FlutterActivity</code>, which allows such a <code>FlutterEngine</code> to be used to execute arbitrary Dart code at any moment. Non-UI application logic can be executed in a <code>FlutterEngine</code>, like networking and data caching, and in background behavior within a <code>Service</code> or elsewhere. When using a <code>FlutterEngine</code> to execute behavior in the background, be sure to adhere to all Android restrictions on background execution.</p></div></aside><aside class="alert alert-info"><div class="alert-header"><i class="material-symbols" aria-hidden="true">info</i> <span>Note</span></div><div class="alert-content"><p>Flutter's debug/release builds have drastically different performance characteristics. To evaluate the performance of Flutter, use a release build.</p></div></aside><div class="header-wrapper"><h4 id="initial-route-with-a-cached-engine">Initial route with a cached engine</h4><a class="heading-link" href="#initial-route-with-a-cached-engine" aria-label="Link to 'Initial route with a cached engine' section">#</a></div><p>The concept of an initial route is available when configuring a <code>FlutterActivity</code> or a <code>FlutterFragment</code> with a new <code>FlutterEngine</code>. However, <code>FlutterActivity</code> and <code>FlutterFragment</code> don't offer the concept of an initial route when using a cached engine. This is because a cached engine is expected to already be running Dart code, which means it's too late to configure the initial route.</p><p>Developers that would like their cached engine to begin with a custom initial route can configure their cached <code>FlutterEngine</code> to use a custom initial route just before executing the Dart entrypoint. The following example demonstrates the use of an initial route with a cached engine:</p><div class="tabs-wrapper" data-tab-save-key="android-language"><ul class="nav nav-tabs" role="tablist"><li class="nav-item"><a class="nav-link active" data-tab-save-id="kotlin" id="59-tab" href="#59-tab-panel" role="tab" aria-controls="59-tab-panel" aria-selected="true">Kotlin</a></li><li class="nav-item"><a class="nav-link" data-tab-save-id="java" id="60-tab" href="#60-tab-panel" role="tab" aria-controls="60-tab-panel" aria-selected="false">Java</a></li></ul><div class="tab-content"><div class="tab-pane active" id="59-tab-panel" role="tabpanel" aria-labelledby="59-tab"><div class="code-block-wrapper language-kotlin"><div class="code-block-header">MyApplication.kt</div><div class="code-block-body"><span class="code-block-language" title="Language kotlin">kotlin</span><pre class="shiki dash-light" tabindex="0"><code><span class="line"><span style="color:#BD2314">class</span><span style="color:#0468D7"> MyApplication</span><span style="color:#222222"> : </span><span style="color:#0468D7">Application</span><span style="color:#222222">() {</span></span> <span class="line"><span style="color:#BD2314"> lateinit</span><span style="color:#BD2314"> var</span><span style="color:#222222"> flutterEngine : </span><span style="color:#0468D7">FlutterEngine</span></span> <span class="line"><span style="color:#BD2314"> override</span><span style="color:#BD2314"> fun</span><span style="color:#6200EE"> onCreate</span><span style="color:#222222">() {</span></span> <span class="line"><span style="color:#BD2314"> super</span><span style="color:#222222">.</span><span style="color:#6200EE">onCreate</span><span style="color:#222222">()</span></span> <span class="line"><span style="color:#6E6E70"> // Instantiate a FlutterEngine.</span></span> <span class="line"><span style="color:#222222"> flutterEngine = </span><span style="color:#6200EE">FlutterEngine</span><span style="color:#222222">(</span><span style="color:#BD2314">this</span><span style="color:#222222">)</span></span> <span class="line"><span style="color:#6E6E70"> // Configure an initial route.</span></span> <span class="line"><span style="color:#222222"> flutterEngine.navigationChannel.</span><span style="color:#6200EE">setInitialRoute</span><span style="color:#222222">(</span><span style="color:#0C7064">"your/route/here"</span><span style="color:#222222">);</span></span> <span class="line"><span style="color:#6E6E70"> // Start executing Dart code to pre-warm the FlutterEngine.</span></span> <span class="line"><span style="color:#222222"> flutterEngine.dartExecutor.</span><span style="color:#6200EE">executeDartEntrypoint</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> DartExecutor.DartEntrypoint.</span><span style="color:#6200EE">createDefault</span><span style="color:#222222">()</span></span> <span class="line"><span style="color:#222222"> )</span></span> <span class="line"><span style="color:#6E6E70"> // Cache the FlutterEngine to be used by FlutterActivity or FlutterFragment.</span></span> <span class="line"><span style="color:#222222"> FlutterEngineCache</span></span> <span class="line"><span style="color:#222222"> .</span><span style="color:#6200EE">getInstance</span><span style="color:#222222">()</span></span> <span class="line"><span style="color:#222222"> .</span><span style="color:#6200EE">put</span><span style="color:#222222">(</span><span style="color:#0C7064">"my_engine_id"</span><span style="color:#222222">, flutterEngine)</span></span> <span class="line"><span style="color:#222222"> }</span></span> <span class="line"><span style="color:#222222">}</span></span></code></pre></div></div></div><div class="tab-pane" id="60-tab-panel" role="tabpanel" aria-labelledby="60-tab"><div class="code-block-wrapper language-java"><div class="code-block-header">MyApplication.java</div><div class="code-block-body"><span class="code-block-language" title="Language java">java</span><pre class="shiki dash-light" tabindex="0"><code><span class="line"><span style="color:#BD2314">public</span><span style="color:#BD2314"> class</span><span style="color:#0468D7"> MyApplication</span><span style="color:#BD2314"> extends</span><span style="color:#222222"> Application {</span></span> <span class="line"><span style="color:#222222"> @</span><span style="color:#BD2314">Override</span></span> <span class="line"><span style="color:#BD2314"> public</span><span style="color:#BD2314"> void</span><span style="color:#6200EE"> onCreate</span><span style="color:#222222">() {</span></span> <span class="line"><span style="color:#BD2314"> super</span><span style="color:#222222">.</span><span style="color:#6200EE">onCreate</span><span style="color:#222222">();</span></span> <span class="line"><span style="color:#6E6E70"> // Instantiate a FlutterEngine.</span></span> <span class="line"><span style="color:#222222"> flutterEngine = </span><span style="color:#BD2314">new</span><span style="color:#6200EE"> FlutterEngine</span><span style="color:#222222">(</span><span style="color:#BD2314">this</span><span style="color:#222222">);</span></span> <span class="line"><span style="color:#6E6E70"> // Configure an initial route.</span></span> <span class="line"><span style="color:#222222"> flutterEngine.</span><span style="color:#6200EE">getNavigationChannel</span><span style="color:#222222">().</span><span style="color:#6200EE">setInitialRoute</span><span style="color:#222222">(</span><span style="color:#0C7064">"your/route/here"</span><span style="color:#222222">);</span></span> <span class="line"><span style="color:#6E6E70"> // Start executing Dart code to pre-warm the FlutterEngine.</span></span> <span class="line"><span style="color:#222222"> flutterEngine.</span><span style="color:#6200EE">getDartExecutor</span><span style="color:#222222">().</span><span style="color:#6200EE">executeDartEntrypoint</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> DartEntrypoint.</span><span style="color:#6200EE">createDefault</span><span style="color:#222222">()</span></span> <span class="line"><span style="color:#222222"> );</span></span> <span class="line"><span style="color:#6E6E70"> // Cache the FlutterEngine to be used by FlutterActivity or FlutterFragment.</span></span> <span class="line"><span style="color:#BD2314"> FlutterEngineCache</span></span> <span class="line"><span style="color:#222222"> .</span><span style="color:#6200EE">getInstance</span><span style="color:#222222">()</span></span> <span class="line"><span style="color:#222222"> .</span><span style="color:#6200EE">put</span><span style="color:#222222">(</span><span style="color:#0C7064">"my_engine_id"</span><span style="color:#222222">, flutterEngine);</span></span> <span class="line"><span style="color:#222222"> }</span></span> <span class="line"><span style="color:#222222">}</span></span></code></pre></div></div></div></div></div><p>By setting the initial route of the navigation channel, the associated <code>FlutterEngine</code> displays the desired route upon initial execution of the <code>runApp()</code> Dart function.</p><p>Changing the initial route property of the navigation channel after the initial execution of <code>runApp()</code> has no effect. Developers who would like to use the same <code>FlutterEngine</code> between different <code>Activity</code>s and <code>Fragment</code>s and switch the route between those displays need to set up a method channel and explicitly instruct their Dart code to change <code>Navigator</code> routes.</p><div class="header-wrapper"><h2 id="add-a-translucent-flutter-screen">Add a translucent Flutter screen</h2><a class="heading-link" href="#add-a-translucent-flutter-screen" aria-label="Link to 'Add a translucent Flutter screen' section">#</a></div><img src="/assets/images/docs/development/add-to-app/android/add-flutter-screen/add-single-flutter-screen-transparent_header.png" alt="Add Flutter Screen With Translucency Header"><p>Most full-screen Flutter experiences are opaque. However, some apps would like to deploy a Flutter screen that looks like a modal, for example, a dialog or bottom sheet. Flutter supports translucent <code>FlutterActivity</code>s out of the box.</p><p>To make your <code>FlutterActivity</code> translucent, make the following changes to the regular process of creating and launching a <code>FlutterActivity</code>.</p><div class="header-wrapper"><h3 id="step-1-use-a-theme-with-translucency">Step 1: Use a theme with translucency</h3><a class="heading-link" href="#step-1-use-a-theme-with-translucency" aria-label="Link to 'Step 1: Use a theme with translucency' section">#</a></div><p>Android requires a special theme property for <code>Activity</code>s that render with a translucent background. Create or update an Android theme with the following property:</p><div class="code-block-wrapper language-xml"><div class="code-block-body"><span class="code-block-language" title="Language xml">xml</span><pre class="shiki dash-light" tabindex="0"><code><span class="line"><span style="color:#222222"><</span><span style="color:#0468D7">style</span><span style="color:#6200EE"> name</span><span style="color:#222222">=</span><span style="color:#0C7064">"MyTheme"</span><span style="color:#6200EE"> parent</span><span style="color:#222222">=</span><span style="color:#0C7064">"@style/MyParentTheme"</span><span style="color:#222222">></span></span> <span class="line"><span style="color:#222222"> <</span><span style="color:#0468D7">item</span><span style="color:#6200EE"> name</span><span style="color:#222222">=</span><span style="color:#0C7064">"android:windowIsTranslucent"</span><span style="color:#222222">>true</</span><span style="color:#0468D7">item</span><span style="color:#222222">></span></span> <span class="line"><span style="color:#222222"></</span><span style="color:#0468D7">style</span><span style="color:#222222">></span></span></code></pre></div></div><p>Then, apply the translucent theme to your <code>FlutterActivity</code>.</p><div class="code-block-wrapper language-xml"><div class="code-block-body"><span class="code-block-language" title="Language xml">xml</span><pre class="shiki dash-light" tabindex="0"><code><span class="line"><span style="color:#222222"><</span><span style="color:#0468D7">activity</span></span> <span class="line"><span style="color:#6200EE"> android</span><span style="color:#222222">:</span><span style="color:#6200EE">name</span><span style="color:#222222">=</span><span style="color:#0C7064">"io.flutter.embedding.android.FlutterActivity"</span></span> <span class="line"><span style="color:#6200EE"> android</span><span style="color:#222222">:</span><span style="color:#6200EE">theme</span><span style="color:#222222">=</span><span style="color:#0C7064">"@style/MyTheme"</span></span> <span class="line"><span style="color:#6200EE"> android</span><span style="color:#222222">:</span><span style="color:#6200EE">configChanges</span><span style="color:#222222">=</span><span style="color:#0C7064">"orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"</span></span> <span class="line"><span style="color:#6200EE"> android</span><span style="color:#222222">:</span><span style="color:#6200EE">hardwareAccelerated</span><span style="color:#222222">=</span><span style="color:#0C7064">"true"</span></span> <span class="line"><span style="color:#6200EE"> android</span><span style="color:#222222">:</span><span style="color:#6200EE">windowSoftInputMode</span><span style="color:#222222">=</span><span style="color:#0C7064">"adjustResize"</span></span> <span class="line"><span style="color:#222222"> /></span></span></code></pre></div></div><p>Your <code>FlutterActivity</code> now supports translucency. Next, you need to launch your <code>FlutterActivity</code> with explicit transparency support.</p><div class="header-wrapper"><h3 id="step-2-start-flutteractivity-with-transparency">Step 2: Start FlutterActivity with transparency</h3><a class="heading-link" href="#step-2-start-flutteractivity-with-transparency" aria-label="Link to 'Step 2: Start FlutterActivity with transparency' section">#</a></div><p>To launch your <code>FlutterActivity</code> with a transparent background, pass the appropriate <code>BackgroundMode</code> to the <code>IntentBuilder</code>:</p><div class="tabs-wrapper" data-tab-save-key="android-language"><ul class="nav nav-tabs" role="tablist"><li class="nav-item"><a class="nav-link active" data-tab-save-id="kotlin" id="61-tab" href="#61-tab-panel" role="tab" aria-controls="61-tab-panel" aria-selected="true">Kotlin</a></li><li class="nav-item"><a class="nav-link" data-tab-save-id="java" id="62-tab" href="#62-tab-panel" role="tab" aria-controls="62-tab-panel" aria-selected="false">Java</a></li></ul><div class="tab-content"><div class="tab-pane active" id="61-tab-panel" role="tabpanel" aria-labelledby="61-tab"><div class="code-block-wrapper language-kotlin"><div class="code-block-header">ExistingActivity.kt</div><div class="code-block-body"><span class="code-block-language" title="Language kotlin">kotlin</span><pre class="shiki dash-light" tabindex="0"><code><span class="line"><span style="color:#6E6E70">// Using a new FlutterEngine.</span></span> <span class="line"><span style="color:#6200EE">startActivity</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> FlutterActivity</span></span> <span class="line"><span style="color:#222222"> .</span><span style="color:#6200EE">withNewEngine</span><span style="color:#222222">()</span></span> <span class="line"><span style="color:#222222"> .</span><span style="color:#6200EE">backgroundMode</span><span style="color:#222222">(FlutterActivityLaunchConfigs.BackgroundMode.transparent)</span></span> <span class="line"><span style="color:#222222"> .</span><span style="color:#6200EE">build</span><span style="color:#222222">(</span><span style="color:#BD2314">this</span><span style="color:#222222">)</span></span> <span class="line"><span style="color:#222222">);</span></span> <span class="line"></span> <span class="line"><span style="color:#6E6E70">// Using a cached FlutterEngine.</span></span> <span class="line"><span style="color:#6200EE">startActivity</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> FlutterActivity</span></span> <span class="line"><span style="color:#222222"> .</span><span style="color:#6200EE">withCachedEngine</span><span style="color:#222222">(</span><span style="color:#0C7064">"my_engine_id"</span><span style="color:#222222">)</span></span> <span class="line"><span style="color:#222222"> .</span><span style="color:#6200EE">backgroundMode</span><span style="color:#222222">(FlutterActivityLaunchConfigs.BackgroundMode.transparent)</span></span> <span class="line"><span style="color:#222222"> .</span><span style="color:#6200EE">build</span><span style="color:#222222">(</span><span style="color:#BD2314">this</span><span style="color:#222222">)</span></span> <span class="line"><span style="color:#222222">);</span></span></code></pre></div></div></div><div class="tab-pane" id="62-tab-panel" role="tabpanel" aria-labelledby="62-tab"><div class="code-block-wrapper language-java"><div class="code-block-header">ExistingActivity.java</div><div class="code-block-body"><span class="code-block-language" title="Language java">java</span><pre class="shiki dash-light" tabindex="0"><code><span class="line"><span style="color:#6E6E70">// Using a new FlutterEngine.</span></span> <span class="line"><span style="color:#6200EE">startActivity</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#BD2314"> FlutterActivity</span></span> <span class="line"><span style="color:#222222"> .</span><span style="color:#6200EE">withNewEngine</span><span style="color:#222222">()</span></span> <span class="line"><span style="color:#222222"> .</span><span style="color:#6200EE">backgroundMode</span><span style="color:#222222">(FlutterActivityLaunchConfigs.BackgroundMode.transparent)</span></span> <span class="line"><span style="color:#222222"> .</span><span style="color:#6200EE">build</span><span style="color:#222222">(context)</span></span> <span class="line"><span style="color:#222222">);</span></span> <span class="line"></span> <span class="line"><span style="color:#6E6E70">// Using a cached FlutterEngine.</span></span> <span class="line"><span style="color:#6200EE">startActivity</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#BD2314"> FlutterActivity</span></span> <span class="line"><span style="color:#222222"> .</span><span style="color:#6200EE">withCachedEngine</span><span style="color:#222222">(</span><span style="color:#0C7064">"my_engine_id"</span><span style="color:#222222">)</span></span> <span class="line"><span style="color:#222222"> .</span><span style="color:#6200EE">backgroundMode</span><span style="color:#222222">(FlutterActivityLaunchConfigs.BackgroundMode.transparent)</span></span> <span class="line"><span style="color:#222222"> .</span><span style="color:#6200EE">build</span><span style="color:#222222">(context)</span></span> <span class="line"><span style="color:#222222">);</span></span></code></pre></div></div></div></div></div><p>You now have a <code>FlutterActivity</code> with a transparent background.</p><aside class="alert alert-info"><div class="alert-header"><i class="material-symbols" aria-hidden="true">info</i> <span>Note</span></div><div class="alert-content"><p>Make sure that your Flutter content also includes a translucent background. If your Flutter UI paints a solid background color, then it still appears as though your <code>FlutterActivity</code> has an opaque background.</p></div></aside><p id="page-github-links"><span>Unless stated otherwise, the documentation on this site reflects the latest stable version of Flutter. Page last updated on 2025-01-31.</span> <a href="https://github.com/flutter/website/tree/main/src/content/add-to-app/android/add-flutter-screen.md" target="_blank" rel="noopener">View source</a> <span>or </span><a href="https://github.com/flutter/website/issues/new?template=1_page_issue.yml&&page-url=https://docs.flutter.dev/add-to-app/android/add-flutter-screen/&page-source=https://github.com/flutter/website/tree/main/src/content/add-to-app/android/add-flutter-screen.md" title="Report an issue with this page" target="_blank" rel="noopener">report an issue</a>.</p></article></main></div><footer id="site-footer"><div class="footer-section footer-main"><a class="brand" href="https://flutter.dev"><img src="/assets/images/branding/flutter/logo+text/horizontal/white.svg" alt="Flutter logo" width="164"></a><div class="footer-social-links"><a class="icon-button" href="https://medium.com/flutter" target="_blank" rel="noopener" title="Flutter's Medium blog"><svg><use href="/assets/images/social/medium.svg#medium"></use></svg> </a><a class="icon-button" href="https://youtube.com/@flutterdev" target="_blank" rel="noopener" title="Flutter's YouTube"><svg><use href="/assets/images/social/youtube.svg#youtube"></use></svg> </a><a class="icon-button" href="https://github.com/flutter" target="_blank" rel="noopener" title="Flutter's GitHub"><svg><use href="/assets/images/social/github.svg#github"></use></svg> </a><a class="icon-button" href="https://bsky.app/profile/flutter.dev" target="_blank" rel="noopener" title="Flutter's Bluesky"><svg><use href="/assets/images/social/bluesky.svg#bluesky"></use></svg> </a><a class="icon-button" href="https://twitter.com/FlutterDev" target="_blank" rel="noopener" title="Flutter's X (Twitter)"><svg><use href="/assets/images/social/x.svg#x"></use></svg></a></div></div><div class="footer-section footer-tray"><div class="footer-licenses">Except as otherwise noted, this site is licensed under a <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>, and code samples are licensed under the <a href="https://opensource.org/licenses/BSD-3-Clause">3-Clause BSD License</a>.</div><div class="footer-utility-links"><ul><li><a href="/tos" title="Terms of use">Terms</a></li><li><a href="/brand" title="Brand usage guidelines">Brand</a></li><li><a href="https://policies.google.com/privacy" target="_blank" rel="noopener" title="Privacy policy">Privacy</a></li><li><a href="/security" title="Security philosophy and practices">Security</a></li></ul></div></div></footer></div><script src="/assets/js/tabs.js?v=4"></script><script src="/assets/js/archive.js?v=4"></script><script src="/assets/js/main.js?v=4"></script></body></html>