CINXE.COM

<!DOCTYPE html> <html lang="en"> <head><script type="text/javascript" src="https://web-static.archive.org/_static/js/bundle-playback.js?v=7YQSqjSh" charset="utf-8"></script> <script type="text/javascript" src="https://web-static.archive.org/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script> <script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script> <script type="text/javascript" src="https://web-static.archive.org/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("https://web.archive.org/web"); __wm.wombat("https://flutter.dev/docs/perf/rendering/best-practices","20210603070132","https://web.archive.org/","web","https://web-static.archive.org/_static/", "1622703692"); </script> <link rel="stylesheet" type="text/css" href="https://web-static.archive.org/_static/css/banner-styles.css?v=p7PEIJWi" /> <link rel="stylesheet" type="text/css" href="https://web-static.archive.org/_static/css/iconochive.css?v=3PDvdIFv" />  <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Performance best practices - Flutter </title> <link rel="shortcut icon" href="/web/20210603070132im_/https://flutter.dev/images/favicon.png">  <script src="https://web.archive.org/web/20210603070132js_/https://www.googleoptimize.com/optimize.js?id=GTM-MPZP6R8"></script>   <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://web.archive.org/web/20210603070132/https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-ND4LWWZ');</script>  <meta name="description" content="How to ensure that your Flutter app is performant."> <meta name="keywords" content=" "> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@flutterdev"> <meta property="og:title" content="Performance best practices"> <meta property="og:url" content="https://web.archive.org/web/20210603070132/https://flutter.dev/docs/perf/rendering/best-practices"> <meta property="og:description" content="How to ensure that your Flutter app is performant."> <meta property="og:image" content="https://web.archive.org/web/20210603070132im_/https://flutter.dev/images/flutter-logo-sharing.png"> <link href="https://web.archive.org/web/20210603070132cs_/https://fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:300,400,500|Roboto+Mono:400,700|Material+Icons" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="/web/20210603070132cs_/https://flutter.dev/assets/main-5179236d2a521f0d8c964446a1eaa9bee448793c298286381d5cbdc3f6776229.css" integrity="" crossorigin="anonymous"> <script src="https://web.archive.org/web/20210603070132js_/https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script> <script type="text/javascript" src="/web/20210603070132js_/https://flutter.dev/assets/main-3d1fe020941b4eb18d313f0eb6a8ff9fd170a0b3ed6913d333d804fec0136545.js" integrity="" crossorigin="anonymous"></script> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//web.archive.org/web/20210603070132/https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-67589403-1', 'auto'); ga('send', 'pageview'); </script> <meta name="google-site-verification" content="HFqxhSbf9YA_0rBglNLzDiWnrHiK_w4cqDh2YD2GEY4"/> <meta name="google-site-verification" content="Zom-prnFykfYycmI_nzRWYx5r6Z9OwR-yEsgElRz_Ug"/> </head> <body>  <noscript><iframe src="https://web.archive.org/web/20210603070132if_/https://www.googletagmanager.com/ns.html?id=GTM-ND4LWWZ" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>  <div id="overlay-under-drawer"></div> <header class="site-header"> <nav class="navbar navbar-expand-md justify-content-start justify-content-md-between"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <i class="material-icons">menu</i> </button> <a class="navbar-brand" href="/web/20210603070132/https://flutter.dev/"> <img alt="Flutter logo" height="37" width="129" class="align-middle" src="/web/20210603070132im_/https://flutter.dev/assets/flutter-lockup-1caf6476beed76adec3c477586da54de6b552b2f42108ec5bc68dc63bae2df75.png" integrity="sha256-HK9kdr7tdq3sPEd1htpU3mtVKy9CEI7FvGjcY7ri33U=" crossorigin="anonymous"> </a> <div class="collapse navbar-collapse flex-grow-0" id="navbarSupportedContent"> <div class="site-header__sheet-bg" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"></div> <div class="site-header__sheet"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link active" href="/web/20210603070132/https://flutter.dev/docs">Docs</a> </li> <div class="site-sidebar site-sidebar--header d-md-none"> <ul class="nav flex-column"><li class="nav-item"> <a class="nav-link collapsed" data-toggle="collapse" href="#sidenav-1" role="button" aria-expanded="false" aria-controls="sidenav-1">Get started</a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-1"> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/get-started/install">1. Install</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/get-started/editor">2. Set up an editor</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/get-started/test-drive">3. Test drive</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/get-started/codelab">4. Write your first app</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/get-started/learn-more">5. Learn more</a> </li><div class="dropdown-divider"></div><li class="nav-item"> <a class="nav-link collapsable" data-toggle="collapse" data-target="#sidenav-1-7" href="#sidenav-1-7" role="button" aria-expanded="true" aria-controls="sidenav-1-7">From another platform? </a> <ul class="nav flex-column flex-nowrap collapse show" id="sidenav-1-7"> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/get-started/flutter-for/android-devs">Flutter for Android devs</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/get-started/flutter-for/ios-devs">Flutter for iOS devs</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/get-started/flutter-for/react-native-devs">Flutter for React Native devs</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/get-started/flutter-for/web-devs">Flutter for web devs</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/get-started/flutter-for/xamarin-forms-devs">Flutter for Xamarin.Forms devs</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/get-started/flutter-for/declarative">Introduction to declarative UI</a> </li></ul> </li> <li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210603070132/https://dart.dev/overview" target="_blank" rel="noopener">Dart language overview<i class="fas fa-external-link-alt"></i></a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/get-started/web">Building a web app</a> </li> </ul> </li><li class="nav-item"> <a class="nav-link collapsed" data-toggle="collapse" href="#sidenav-2" role="button" aria-expanded="false" aria-controls="sidenav-2">Samples & tutorials</a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-2"> <li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210603070132/https://gallery.flutter.dev/" target="_blank" rel="noopener">Flutter Gallery [running app]<i class="fas fa-external-link-alt"></i></a> </li><li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210603070132/https://github.com/flutter/gallery" target="_blank" rel="noopener">Flutter Gallery [repo]<i class="fas fa-external-link-alt"></i></a> </li><li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210603070132/https://flutter.github.io/samples/" target="_blank" rel="noopener">Sample apps on GitHub<i class="fas fa-external-link-alt"></i></a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/cookbook">Cookbook</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/codelabs">Codelabs</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/reference/tutorials">Tutorials</a> </li> </ul> </li><li class="nav-item"> <a class="nav-link " data-toggle="collapse" href="#sidenav-3" role="button" aria-expanded="true" aria-controls="sidenav-3">Development</a> <ul class="nav flex-column flex-nowrap collapse show" id="sidenav-3"> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-1" href="/web/20210603070132/https://flutter.dev/docs/development/ui" role="button" aria-expanded="false" aria-controls="sidenav-3-1">User interface </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-1"> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/ui/widgets-intro">Introduction to widgets</a> </li><li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-1-2" href="/web/20210603070132/https://flutter.dev/docs/development/ui/layout" role="button" aria-expanded="false" aria-controls="sidenav-3-1-2">Building layouts </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-1-2"> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/ui/layout">Layouts in Flutter</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/ui/layout/tutorial">Tutorial</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/ui/layout/adaptive-responsive">Creating adaptive and responsive apps</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/ui/layout/building-adaptive-apps">Building adaptive apps [NEW]</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/ui/layout/constraints">Understanding constraints</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/ui/layout/box-constraints">Box constraints</a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/ui/interactive">Adding interactivity</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/ui/assets-and-images">Assets and images</a> </li><li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-1-5" href="/web/20210603070132/https://flutter.dev/docs/development/ui/navigation" role="button" aria-expanded="false" aria-controls="sidenav-3-1-5">Navigation & routing </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-1-5"> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/ui/navigation">Navigation in Flutter</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/ui/navigation/deep-linking">Deep linking</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/ui/navigation/url-strategies">URL strategies</a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-1-6" href="/web/20210603070132/https://flutter.dev/docs/development/ui/animations" role="button" aria-expanded="false" aria-controls="sidenav-3-1-6">Animations </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-1-6"> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/ui/animations">Introduction</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/ui/animations/overview">Overview</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/ui/animations/tutorial">Tutorial</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/ui/animations/implicit-animations">Implicit animations</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/ui/animations/hero-animations">Hero animations</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/ui/animations/staggered-animations">Staggered animations</a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-1-7" href="/web/20210603070132/https://flutter.dev/docs/development/ui/advanced" role="button" aria-expanded="false" aria-controls="sidenav-3-1-7">Advanced UI </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-1-7"> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/ui/advanced/slivers">Slivers</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/ui/advanced/gestures">Gestures</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/ui/advanced/splash-screen">Splash screens</a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/ui/widgets">Widget catalog</a> </li></ul> </li> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-2" href="/web/20210603070132/https://flutter.dev/docs/development/data-and-backend" role="button" aria-expanded="false" aria-controls="sidenav-3-2">Data & backend </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-2"> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-2-1" href="/web/20210603070132/https://flutter.dev/docs/development/data-and-backend/state-mgmt" role="button" aria-expanded="false" aria-controls="sidenav-3-2-1">State management </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-2-1"> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/data-and-backend/state-mgmt/intro">Introduction</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/data-and-backend/state-mgmt/declarative">Think declaratively</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/data-and-backend/state-mgmt/ephemeral-vs-app">Ephemeral vs app state</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/data-and-backend/state-mgmt/simple">Simple app state management</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/data-and-backend/state-mgmt/options">Options</a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/data-and-backend/networking">Networking & http</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/data-and-backend/json">JSON and serialization</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/data-and-backend/firebase">Firebase</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/data-and-backend/google-apis">Google APIs</a> </li></ul> </li> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-3" href="/web/20210603070132/https://flutter.dev/docs/development/accessibility-and-localization" role="button" aria-expanded="false" aria-controls="sidenav-3-3">Accessibility & internationalization </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-3"> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/accessibility-and-localization/accessibility">Accessibility</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/accessibility-and-localization/internationalization">Internationalization</a> </li></ul> </li> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-4" href="/web/20210603070132/https://flutter.dev/docs/development/platform-integration" role="button" aria-expanded="false" aria-controls="sidenav-3-4">Platform integration </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-4"> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/tools/sdk/release-notes/supported-platforms">Supported platforms</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/platform-integration/ios-app-clip">Adding iOS App Clip support</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/platform-integration/apple-watch">Apple Watch support</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/platform-integration/c-interop">C interop</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/platform-integration/platform-views">Hosting native Android and iOS views</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/platform-integration/web">Web FAQ</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/platform-integration/platform-channels">Writing platform-specific code</a> </li></ul> </li> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-5" href="/web/20210603070132/https://flutter.dev/docs/development/packages-and-plugins" role="button" aria-expanded="false" aria-controls="sidenav-3-5">Packages & plugins </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-5"> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/packages-and-plugins/using-packages">Using packages</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/packages-and-plugins/developing-packages">Developing packages & plugins</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/packages-and-plugins/favorites">Flutter Favorites program</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/packages-and-plugins/background-processes">Background processes</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/packages-and-plugins/plugin-api-migration">Android plugin upgrade</a> </li><li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210603070132/https://pub.dev/flutter" target="_blank" rel="noopener">Package site<i class="fas fa-external-link-alt"></i></a> </li></ul> </li> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-6" href="/web/20210603070132/https://flutter.dev/docs/development/add-to-app" role="button" aria-expanded="false" aria-controls="sidenav-3-6">Add Flutter to existing app </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-6"> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/add-to-app">Introduction</a> </li><li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-6-2" href="/web/20210603070132/https://flutter.dev/docs/development/add-to-app/android" role="button" aria-expanded="false" aria-controls="sidenav-3-6-2">Adding to an Android app </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-6-2"> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/add-to-app/android/project-setup">Project setup</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/add-to-app/android/add-flutter-screen">Add a single Flutter screen</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/add-to-app/android/add-flutter-fragment">Add a Flutter Fragment</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/add-to-app/android/add-flutter-view">Add a Flutter View</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/add-to-app/android/plugin-setup">Plugin setup</a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-6-3" href="/web/20210603070132/https://flutter.dev/docs/development/add-to-app/ios" role="button" aria-expanded="false" aria-controls="sidenav-3-6-3">Adding to an iOS app </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-6-3"> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/add-to-app/ios/project-setup">Project setup</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/add-to-app/ios/add-flutter-screen">Add a single Flutter screen</a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/add-to-app/debugging">Debugging & hot reload</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/add-to-app/performance">Loading sequence and performance</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/add-to-app/multiple-flutters">Multiple Flutter instances</a> </li></ul> </li> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-7" href="/web/20210603070132/https://flutter.dev/docs/development/tools" role="button" aria-expanded="false" aria-controls="sidenav-3-7">Tools & features </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-7"> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/tools/android-studio">Android Studio & IntelliJ</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/tools/vs-code">Visual Studio Code</a> </li><li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-7-3" href="/web/20210603070132/https://flutter.dev/docs/development/tools/devtools" role="button" aria-expanded="false" aria-controls="sidenav-3-7-3">DevTools </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-7-3"> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/tools/devtools/overview">Overview</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/tools/devtools/android-studio">Install from Android Studio & IntelliJ</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/tools/devtools/vscode">Install from VS Code</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/tools/devtools/cli">Install from command line</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/tools/devtools/inspector">Flutter inspector</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/tools/devtools/performance">Performance view</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/tools/devtools/cpu-profiler">CPU Profiler view</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/tools/devtools/memory">Memory view</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/tools/devtools/network">Network view</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/tools/devtools/debugger">Debugger</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/tools/devtools/logging">Logging view</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/tools/devtools/app-size">App size tool</a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-7-4" href="/web/20210603070132/https://flutter.dev/docs/development/tools/sdk" role="button" aria-expanded="false" aria-controls="sidenav-3-7-4">Flutter SDK </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-7-4"> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/tools/sdk/overview">Overview</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/tools/sdk/upgrading">Upgrading</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/tools/sdk/releases">Releases</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/release/breaking-changes">Breaking changes</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/tools/sdk/release-notes">Release notes</a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/tools/pubspec">Flutter and the pubspec file</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/tools/hot-reload">Hot reload</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/tools/flutter-fix">Flutter Fix</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/tools/formatting">Code formatting</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/tools/web-renderers">Web renderers</a> </li></ul> </li> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-8" href="/web/20210603070132/https://flutter.dev/docs/development/androidx-migration" role="button" aria-expanded="false" aria-controls="sidenav-3-8">Migration notes </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-8"> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/androidx-migration">AndroidX migration</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/packages-and-plugins/plugin-api-migration">Android plugin upgrade</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/ios-14">Developing for iOS 14</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/ios-project-migration">Xcode 11.4 support</a> </li></ul> </li> </ul> </li><li class="nav-item"> <a class="nav-link collapsed" data-toggle="collapse" href="#sidenav-4" role="button" aria-expanded="false" aria-controls="sidenav-4">Testing & debugging</a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-4"> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/testing/debugging">Debugging tools</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/testing/code-debugging">Debugging apps programmatically</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/testing/oem-debuggers">Using an OEM debugger</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/testing/build-modes">Flutter's build modes</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/testing/common-errors">Common Flutter errors</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/testing/errors">Handling errors</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/testing">Testing</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/testing/integration-tests">Integration testing</a> </li> </ul> </li><li class="nav-item"> <a class="nav-link active" data-toggle="collapse" href="#sidenav-5" role="button" aria-expanded="true" aria-controls="sidenav-5">Performance & optimization</a> <ul class="nav flex-column flex-nowrap collapse show" id="sidenav-5"> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/perf">Overview</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/perf/app-size">App size</a> </li><li class="nav-item"> <a class="nav-link active collapsable" data-toggle="collapse" data-target="#sidenav-5-3" href="/web/20210603070132/https://flutter.dev/docs/perf/rendering" role="button" aria-expanded="true" aria-controls="sidenav-5-3">Rendering performance </a> <ul class="nav flex-column flex-nowrap collapse show" id="sidenav-5-3"> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/perf/rendering">Overview</a> </li><li class="nav-item"> <a class="nav-link active" href="/web/20210603070132/https://flutter.dev/docs/perf/rendering/best-practices">Performance best practices</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/perf/rendering/ui-performance">Performance profiling</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/perf/rendering/shader">Reduce shader compilation jank</a> </li></ul> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/perf/deferred-components">Deferred components</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/perf/metrics">Performance metrics</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/perf/faq">Performance FAQ</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/perf/appendix">Appendix</a> </li> </ul> </li><li class="nav-item"> <a class="nav-link collapsed" data-toggle="collapse" href="#sidenav-6" role="button" aria-expanded="false" aria-controls="sidenav-6">Deployment</a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-6"> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/deployment/obfuscate">Obfuscating Dart code</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/deployment/flavors">Creating flavors for Flutter</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/deployment/android">Build and release an Android app</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/deployment/ios">Build and release an iOS app</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/deployment/linux">Build and release a Linux app</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/deployment/web">Build and release a web app</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/deployment/cd">Continuous deployment</a> </li> </ul> </li><li class="nav-item"> <a class="nav-link collapsed" data-toggle="collapse" href="#sidenav-7" role="button" aria-expanded="false" aria-controls="sidenav-7">Resources</a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-7"> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/resources/bootstrap-into-dart">Dart resources</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/resources/compatibility">Compatibility policy</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/resources/architectural-overview">Architectural overview</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/resources/inside-flutter">Inside Flutter</a> </li><li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210603070132/https://pub.dev/packages/google_fonts" target="_blank" rel="noopener">Google Fonts package<i class="fas fa-external-link-alt"></i></a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/resources/platform-adaptations">Platform adaptations</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/resources/videos">Videos and online courses</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/resources/books">Books</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/resources/faq">FAQ</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/resources/design-docs">Design Documents</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/resources/bug-reports">Creating useful bug reports</a> </li><li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210603070132/https://github.com/flutter/flutter/blob/master/CONTRIBUTING.md" target="_blank" rel="noopener">Contributing to Flutter<i class="fas fa-external-link-alt"></i></a> </li><li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210603070132/https://drive.google.com/drive/folders/1KXNtO9My2AMpDOF9A9Y_4aj4_BcgmDDT" target="_blank" rel="noopener">Official brand assets<i class="fas fa-external-link-alt"></i></a> </li> </ul> </li><li class="nav-item"> <a class="nav-link " data-toggle="collapse" href="#sidenav-8" role="button" aria-expanded="true" aria-controls="sidenav-8">Reference</a> <ul class="nav flex-column flex-nowrap collapse show" id="sidenav-8"> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/dash">Who is Dash?</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/reference/widgets">Widget index</a> </li><li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210603070132/https://api.flutter.dev/" target="_blank" rel="noopener">API reference<i class="fas fa-external-link-alt"></i></a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/reference/flutter-cli">flutter CLI reference</a> </li><li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210603070132/https://pub.dev/flutter" target="_blank" rel="noopener">Package site<i class="fas fa-external-link-alt"></i></a> </li> </ul> </li></ul> </div> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/showcase">Showcase</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/community">Community</a> </li> </ul> <form action="/web/20210603070132/https://flutter.dev/search/" class="site-header__search form-inline"> <input class="site-header__searchfield form-control" type="search" name="q" id="q" autocomplete="off" placeholder="Search" aria-label="Search"> </form> </div> </div> <div class="site-header__social navbar-nav flex-row"> <a class="nav-item nav-link" href="https://web.archive.org/web/20210603070132/https://twitter.com/flutterdev" aria-label="Twittter"><i class="fab fa-twitter fa-lg"></i></a> <a class="nav-item nav-link" href="https://web.archive.org/web/20210603070132/https://www.youtube.com/flutterdev" aria-label="YouTube"><i class="fab fa-youtube fa-lg"></i></a> <a class="nav-item nav-link" href="https://web.archive.org/web/20210603070132/https://github.com/flutter" aria-label="Github"><i class="fab fa-github fa-lg"></i></a> </div> <a class="site-header__cta btn btn-primary" href="/web/20210603070132/https://flutter.dev/docs/get-started/install/">Get started</a> </nav> </header> <div class="site-banner site-banner--default" role="alert"> Flutter 2.2 is here. <a href="https://web.archive.org/web/20210603070132/https://medium.com/flutter/announcing-flutter-2-2-at-google-i-o-2021-92f0fcbd7ef9">Learn more</a>. </div> <div class="container-fluid position-relative"> <div class="row flex-xl-nowrap"> <div class="fixed-col site-sidebar site-sidebar--fixed col-12 col-md-3 col-xl-2 d-none d-md-block" data-fixed-column> <ul class="nav flex-column"><li class="nav-item"> <a class="nav-link collapsed" data-toggle="collapse" href="#sidenav-1" role="button" aria-expanded="false" aria-controls="sidenav-1">Get started</a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-1"> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/get-started/install">1. Install</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/get-started/editor">2. Set up an editor</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/get-started/test-drive">3. Test drive</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/get-started/codelab">4. Write your first app</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/get-started/learn-more">5. Learn more</a> </li><div class="dropdown-divider"></div><li class="nav-item"> <a class="nav-link collapsable" data-toggle="collapse" data-target="#sidenav-1-7" href="#sidenav-1-7" role="button" aria-expanded="true" aria-controls="sidenav-1-7">From another platform? </a> <ul class="nav flex-column flex-nowrap collapse show" id="sidenav-1-7"> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/get-started/flutter-for/android-devs">Flutter for Android devs</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/get-started/flutter-for/ios-devs">Flutter for iOS devs</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/get-started/flutter-for/react-native-devs">Flutter for React Native devs</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/get-started/flutter-for/web-devs">Flutter for web devs</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/get-started/flutter-for/xamarin-forms-devs">Flutter for Xamarin.Forms devs</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/get-started/flutter-for/declarative">Introduction to declarative UI</a> </li></ul> </li> <li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210603070132/https://dart.dev/overview" target="_blank" rel="noopener">Dart language overview<i class="fas fa-external-link-alt"></i></a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/get-started/web">Building a web app</a> </li> </ul> </li><li class="nav-item"> <a class="nav-link collapsed" data-toggle="collapse" href="#sidenav-2" role="button" aria-expanded="false" aria-controls="sidenav-2">Samples & tutorials</a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-2"> <li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210603070132/https://gallery.flutter.dev/" target="_blank" rel="noopener">Flutter Gallery [running app]<i class="fas fa-external-link-alt"></i></a> </li><li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210603070132/https://github.com/flutter/gallery" target="_blank" rel="noopener">Flutter Gallery [repo]<i class="fas fa-external-link-alt"></i></a> </li><li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210603070132/https://flutter.github.io/samples/" target="_blank" rel="noopener">Sample apps on GitHub<i class="fas fa-external-link-alt"></i></a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/cookbook">Cookbook</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/codelabs">Codelabs</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/reference/tutorials">Tutorials</a> </li> </ul> </li><li class="nav-item"> <a class="nav-link " data-toggle="collapse" href="#sidenav-3" role="button" aria-expanded="true" aria-controls="sidenav-3">Development</a> <ul class="nav flex-column flex-nowrap collapse show" id="sidenav-3"> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-1" href="/web/20210603070132/https://flutter.dev/docs/development/ui" role="button" aria-expanded="false" aria-controls="sidenav-3-1">User interface </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-1"> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/ui/widgets-intro">Introduction to widgets</a> </li><li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-1-2" href="/web/20210603070132/https://flutter.dev/docs/development/ui/layout" role="button" aria-expanded="false" aria-controls="sidenav-3-1-2">Building layouts </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-1-2"> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/ui/layout">Layouts in Flutter</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/ui/layout/tutorial">Tutorial</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/ui/layout/adaptive-responsive">Creating adaptive and responsive apps</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/ui/layout/building-adaptive-apps">Building adaptive apps [NEW]</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/ui/layout/constraints">Understanding constraints</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/ui/layout/box-constraints">Box constraints</a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/ui/interactive">Adding interactivity</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/ui/assets-and-images">Assets and images</a> </li><li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-1-5" href="/web/20210603070132/https://flutter.dev/docs/development/ui/navigation" role="button" aria-expanded="false" aria-controls="sidenav-3-1-5">Navigation & routing </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-1-5"> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/ui/navigation">Navigation in Flutter</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/ui/navigation/deep-linking">Deep linking</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/ui/navigation/url-strategies">URL strategies</a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-1-6" href="/web/20210603070132/https://flutter.dev/docs/development/ui/animations" role="button" aria-expanded="false" aria-controls="sidenav-3-1-6">Animations </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-1-6"> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/ui/animations">Introduction</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/ui/animations/overview">Overview</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/ui/animations/tutorial">Tutorial</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/ui/animations/implicit-animations">Implicit animations</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/ui/animations/hero-animations">Hero animations</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/ui/animations/staggered-animations">Staggered animations</a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-1-7" href="/web/20210603070132/https://flutter.dev/docs/development/ui/advanced" role="button" aria-expanded="false" aria-controls="sidenav-3-1-7">Advanced UI </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-1-7"> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/ui/advanced/slivers">Slivers</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/ui/advanced/gestures">Gestures</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/ui/advanced/splash-screen">Splash screens</a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/ui/widgets">Widget catalog</a> </li></ul> </li> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-2" href="/web/20210603070132/https://flutter.dev/docs/development/data-and-backend" role="button" aria-expanded="false" aria-controls="sidenav-3-2">Data & backend </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-2"> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-2-1" href="/web/20210603070132/https://flutter.dev/docs/development/data-and-backend/state-mgmt" role="button" aria-expanded="false" aria-controls="sidenav-3-2-1">State management </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-2-1"> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/data-and-backend/state-mgmt/intro">Introduction</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/data-and-backend/state-mgmt/declarative">Think declaratively</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/data-and-backend/state-mgmt/ephemeral-vs-app">Ephemeral vs app state</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/data-and-backend/state-mgmt/simple">Simple app state management</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/data-and-backend/state-mgmt/options">Options</a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/data-and-backend/networking">Networking & http</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/data-and-backend/json">JSON and serialization</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/data-and-backend/firebase">Firebase</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/data-and-backend/google-apis">Google APIs</a> </li></ul> </li> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-3" href="/web/20210603070132/https://flutter.dev/docs/development/accessibility-and-localization" role="button" aria-expanded="false" aria-controls="sidenav-3-3">Accessibility & internationalization </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-3"> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/accessibility-and-localization/accessibility">Accessibility</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/accessibility-and-localization/internationalization">Internationalization</a> </li></ul> </li> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-4" href="/web/20210603070132/https://flutter.dev/docs/development/platform-integration" role="button" aria-expanded="false" aria-controls="sidenav-3-4">Platform integration </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-4"> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/tools/sdk/release-notes/supported-platforms">Supported platforms</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/platform-integration/ios-app-clip">Adding iOS App Clip support</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/platform-integration/apple-watch">Apple Watch support</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/platform-integration/c-interop">C interop</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/platform-integration/platform-views">Hosting native Android and iOS views</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/platform-integration/web">Web FAQ</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/platform-integration/platform-channels">Writing platform-specific code</a> </li></ul> </li> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-5" href="/web/20210603070132/https://flutter.dev/docs/development/packages-and-plugins" role="button" aria-expanded="false" aria-controls="sidenav-3-5">Packages & plugins </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-5"> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/packages-and-plugins/using-packages">Using packages</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/packages-and-plugins/developing-packages">Developing packages & plugins</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/packages-and-plugins/favorites">Flutter Favorites program</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/packages-and-plugins/background-processes">Background processes</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/packages-and-plugins/plugin-api-migration">Android plugin upgrade</a> </li><li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210603070132/https://pub.dev/flutter" target="_blank" rel="noopener">Package site<i class="fas fa-external-link-alt"></i></a> </li></ul> </li> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-6" href="/web/20210603070132/https://flutter.dev/docs/development/add-to-app" role="button" aria-expanded="false" aria-controls="sidenav-3-6">Add Flutter to existing app </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-6"> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/add-to-app">Introduction</a> </li><li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-6-2" href="/web/20210603070132/https://flutter.dev/docs/development/add-to-app/android" role="button" aria-expanded="false" aria-controls="sidenav-3-6-2">Adding to an Android app </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-6-2"> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/add-to-app/android/project-setup">Project setup</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/add-to-app/android/add-flutter-screen">Add a single Flutter screen</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/add-to-app/android/add-flutter-fragment">Add a Flutter Fragment</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/add-to-app/android/add-flutter-view">Add a Flutter View</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/add-to-app/android/plugin-setup">Plugin setup</a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-6-3" href="/web/20210603070132/https://flutter.dev/docs/development/add-to-app/ios" role="button" aria-expanded="false" aria-controls="sidenav-3-6-3">Adding to an iOS app </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-6-3"> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/add-to-app/ios/project-setup">Project setup</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/add-to-app/ios/add-flutter-screen">Add a single Flutter screen</a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/add-to-app/debugging">Debugging & hot reload</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/add-to-app/performance">Loading sequence and performance</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/add-to-app/multiple-flutters">Multiple Flutter instances</a> </li></ul> </li> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-7" href="/web/20210603070132/https://flutter.dev/docs/development/tools" role="button" aria-expanded="false" aria-controls="sidenav-3-7">Tools & features </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-7"> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/tools/android-studio">Android Studio & IntelliJ</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/tools/vs-code">Visual Studio Code</a> </li><li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-7-3" href="/web/20210603070132/https://flutter.dev/docs/development/tools/devtools" role="button" aria-expanded="false" aria-controls="sidenav-3-7-3">DevTools </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-7-3"> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/tools/devtools/overview">Overview</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/tools/devtools/android-studio">Install from Android Studio & IntelliJ</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/tools/devtools/vscode">Install from VS Code</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/tools/devtools/cli">Install from command line</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/tools/devtools/inspector">Flutter inspector</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/tools/devtools/performance">Performance view</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/tools/devtools/cpu-profiler">CPU Profiler view</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/tools/devtools/memory">Memory view</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/tools/devtools/network">Network view</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/tools/devtools/debugger">Debugger</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/tools/devtools/logging">Logging view</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/tools/devtools/app-size">App size tool</a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-7-4" href="/web/20210603070132/https://flutter.dev/docs/development/tools/sdk" role="button" aria-expanded="false" aria-controls="sidenav-3-7-4">Flutter SDK </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-7-4"> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/tools/sdk/overview">Overview</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/tools/sdk/upgrading">Upgrading</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/tools/sdk/releases">Releases</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/release/breaking-changes">Breaking changes</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/tools/sdk/release-notes">Release notes</a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/tools/pubspec">Flutter and the pubspec file</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/tools/hot-reload">Hot reload</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/tools/flutter-fix">Flutter Fix</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/tools/formatting">Code formatting</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/tools/web-renderers">Web renderers</a> </li></ul> </li> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-8" href="/web/20210603070132/https://flutter.dev/docs/development/androidx-migration" role="button" aria-expanded="false" aria-controls="sidenav-3-8">Migration notes </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-8"> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/androidx-migration">AndroidX migration</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/packages-and-plugins/plugin-api-migration">Android plugin upgrade</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/ios-14">Developing for iOS 14</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/development/ios-project-migration">Xcode 11.4 support</a> </li></ul> </li> </ul> </li><li class="nav-item"> <a class="nav-link collapsed" data-toggle="collapse" href="#sidenav-4" role="button" aria-expanded="false" aria-controls="sidenav-4">Testing & debugging</a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-4"> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/testing/debugging">Debugging tools</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/testing/code-debugging">Debugging apps programmatically</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/testing/oem-debuggers">Using an OEM debugger</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/testing/build-modes">Flutter's build modes</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/testing/common-errors">Common Flutter errors</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/testing/errors">Handling errors</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/testing">Testing</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/testing/integration-tests">Integration testing</a> </li> </ul> </li><li class="nav-item"> <a class="nav-link active" data-toggle="collapse" href="#sidenav-5" role="button" aria-expanded="true" aria-controls="sidenav-5">Performance & optimization</a> <ul class="nav flex-column flex-nowrap collapse show" id="sidenav-5"> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/perf">Overview</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/perf/app-size">App size</a> </li><li class="nav-item"> <a class="nav-link active collapsable" data-toggle="collapse" data-target="#sidenav-5-3" href="/web/20210603070132/https://flutter.dev/docs/perf/rendering" role="button" aria-expanded="true" aria-controls="sidenav-5-3">Rendering performance </a> <ul class="nav flex-column flex-nowrap collapse show" id="sidenav-5-3"> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/perf/rendering">Overview</a> </li><li class="nav-item"> <a class="nav-link active" href="/web/20210603070132/https://flutter.dev/docs/perf/rendering/best-practices">Performance best practices</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/perf/rendering/ui-performance">Performance profiling</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/perf/rendering/shader">Reduce shader compilation jank</a> </li></ul> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/perf/deferred-components">Deferred components</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/perf/metrics">Performance metrics</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/perf/faq">Performance FAQ</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/perf/appendix">Appendix</a> </li> </ul> </li><li class="nav-item"> <a class="nav-link collapsed" data-toggle="collapse" href="#sidenav-6" role="button" aria-expanded="false" aria-controls="sidenav-6">Deployment</a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-6"> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/deployment/obfuscate">Obfuscating Dart code</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/deployment/flavors">Creating flavors for Flutter</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/deployment/android">Build and release an Android app</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/deployment/ios">Build and release an iOS app</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/deployment/linux">Build and release a Linux app</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/deployment/web">Build and release a web app</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/deployment/cd">Continuous deployment</a> </li> </ul> </li><li class="nav-item"> <a class="nav-link collapsed" data-toggle="collapse" href="#sidenav-7" role="button" aria-expanded="false" aria-controls="sidenav-7">Resources</a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-7"> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/resources/bootstrap-into-dart">Dart resources</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/resources/compatibility">Compatibility policy</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/resources/architectural-overview">Architectural overview</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/resources/inside-flutter">Inside Flutter</a> </li><li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210603070132/https://pub.dev/packages/google_fonts" target="_blank" rel="noopener">Google Fonts package<i class="fas fa-external-link-alt"></i></a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/resources/platform-adaptations">Platform adaptations</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/resources/videos">Videos and online courses</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/resources/books">Books</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/resources/faq">FAQ</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/resources/design-docs">Design Documents</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/resources/bug-reports">Creating useful bug reports</a> </li><li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210603070132/https://github.com/flutter/flutter/blob/master/CONTRIBUTING.md" target="_blank" rel="noopener">Contributing to Flutter<i class="fas fa-external-link-alt"></i></a> </li><li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210603070132/https://drive.google.com/drive/folders/1KXNtO9My2AMpDOF9A9Y_4aj4_BcgmDDT" target="_blank" rel="noopener">Official brand assets<i class="fas fa-external-link-alt"></i></a> </li> </ul> </li><li class="nav-item"> <a class="nav-link " data-toggle="collapse" href="#sidenav-8" role="button" aria-expanded="true" aria-controls="sidenav-8">Reference</a> <ul class="nav flex-column flex-nowrap collapse show" id="sidenav-8"> <li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/dash">Who is Dash?</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/reference/widgets">Widget index</a> </li><li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210603070132/https://api.flutter.dev/" target="_blank" rel="noopener">API reference<i class="fas fa-external-link-alt"></i></a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603070132/https://flutter.dev/docs/reference/flutter-cli">flutter CLI reference</a> </li><li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210603070132/https://pub.dev/flutter" target="_blank" rel="noopener">Package site<i class="fas fa-external-link-alt"></i></a> </li> </ul> </li></ul> </div> <div id="site-toc--side" class="site-toc site-toc--side fixed-col col-xl-2 order-3" data-fixed-column> <header class="site-toc__title"> Contents <button type="button" class="btn site-toc--button__page-top" aria-label="Page top"></button> </header> <ul class="section-nav nav"> <li class="toc-entry nav-item toc-h2"><a class="nav-link" href="#best-practices">Best practices</a> <ul class="nav"> <li class="toc-entry nav-item toc-h3"><a class="nav-link" href="#controlling-build-cost">Controlling build() cost</a></li> <li class="toc-entry nav-item toc-h3"><a class="nav-link" href="#apply-effects-only-when-needed">Apply effects only when needed</a> <ul class="nav"> <li class="toc-entry nav-item toc-h4"><a class="nav-link" href="#why-is-savelayer-expensive">Why is savelayer expensive?</a></li> </ul> </li> <li class="toc-entry nav-item toc-h3"><a class="nav-link" href="#render-grids-and-lists-lazily">Render grids and lists lazily</a></li> <li class="toc-entry nav-item toc-h3"><a class="nav-link" href="#build-and-display-frames-in-16ms">Build and display frames in 16ms</a></li> </ul> </li> <li class="toc-entry nav-item toc-h2"><a class="nav-link" href="#pitfalls">Pitfalls</a></li> <li class="toc-entry nav-item toc-h2"><a class="nav-link" href="#resources">Resources</a></li> </ul> </div> <main class="site-content col-12 col-md-9 offset-md-3 col-xl-8 offset-xl-2 col-xxl-8 offset-xxl-2" role="main"> <div class="container"> <header class="site-content__title"> <div id="page-github-links" class="btn-group" aria-label="Page GitHub links" role="group"> <a href="https://web.archive.org/web/20210603070132/https://github.com/flutter/website/tree/master/src/docs/perf/rendering/best-practices.md" class="btn no-automatic-external" title="View page source" target="_blank" rel="noopener"> <i class="fas fa-file-alt fa-sm"></i> </a> <a href="https://web.archive.org/web/20210603070132/https://github.com/flutter/website/issues/new?title='Performance best practices' page issue&body=Page URL: https://flutter.dev/docs/perf/rendering/best-practices.html%0D%0APage source: https://github.com/flutter/website/tree/master/src/docs/perf/rendering/best-practices.md%0D%0A%0D%0AFound a typo? You can fix it yourself by going to the page source and clicking the pencil icon. Or finish creating this issue.%0D%0A%0D%0ADescription of issue:" class="btn no-automatic-external" title="Report an issue with this page" target="_blank" rel="noopener"> <i class="fas fa-bug fa-sm"></i> </a> </div> <h1>Performance best practices</h1> </header> <div id="site-toc--inline" class="site-toc site-toc--inline "> <header class="site-toc__title"> Contents </header> <ul class="section-nav"> <li class="toc-entry toc-h2"><a href="#best-practices">Best practices</a> <ul> <li class="toc-entry toc-h3"><a href="#controlling-build-cost">Controlling build() cost</a></li> <li class="toc-entry toc-h3"><a href="#apply-effects-only-when-needed">Apply effects only when needed</a> <ul> <li class="toc-entry toc-h4"><a href="#why-is-savelayer-expensive">Why is savelayer expensive?</a></li> </ul> </li> <li class="toc-entry toc-h3"><a href="#render-grids-and-lists-lazily">Render grids and lists lazily</a></li> <li class="toc-entry toc-h3"><a href="#build-and-display-frames-in-16ms">Build and display frames in 16ms</a></li> </ul> </li> <li class="toc-entry toc-h2"><a href="#pitfalls">Pitfalls</a></li> <li class="toc-entry toc-h2"><a href="#resources">Resources</a></li> </ul> </div> <aside class="alert alert-info" role="alert"> <p><i class="fas fa-info-circle"></i> <strong>Note:</strong> To learn how to use the <strong>Performance View</strong> (part of Flutter DevTools) for debugging performance issues, see <a href="/web/20210603070132/https://flutter.dev/docs/development/tools/devtools/performance">Using the Performance view</a>.</p> </aside> <p>Generally, Flutter applications are performant by default, so you only need to avoid common pitfalls to get excellent performance. These best recommendations will help you write the most performant Flutter app possible.</p> <p>If you are writing web apps in Flutter, you might be interested in a series of articles, written by the Flutter Material team, after they modified the <a href="https://web.archive.org/web/20210603070132/https://gallery.flutter.dev/#/">Flutter Gallery</a> app to make it more performant on the web:</p> <ul> <li><a href="https://web.archive.org/web/20210603070132/https://medium.com/flutter/optimizing-performance-in-flutter-web-apps-with-tree-shaking-and-deferred-loading-535fbe3cd674">Optimizing performance in Flutter web apps with tree shaking and deferred loading</a></li> <li><a href="https://web.archive.org/web/20210603070132/https://medium.com/flutter/improving-perceived-performance-with-image-placeholders-precaching-and-disabled-navigation-6b3601087a2b">Improving perceived performance with image placeholders, precaching, and disabled navigation transitions</a></li> <li><a href="https://web.archive.org/web/20210603070132/https://medium.com/flutter/building-performant-flutter-widgets-3b2558aa08fa">Building performant Flutter widgets</a></li> </ul> <h2 id="best-practices"> <a class="anchor" href="#best-practices" aria-hidden="true"><span class="octicon octicon-link"></span></a>Best practices</h2> <p>How do you design a Flutter app to most efficiently render your scenes? In particular, how do you ensure that the painting code generated by the framework is as efficient as possible? Here are a few things to consider when designing your app:</p> <h3 id="controlling-build-cost"> <a class="anchor" href="#controlling-build-cost" aria-hidden="true"><span class="octicon octicon-link"></span></a>Controlling build() cost</h3> <ul> <li>Avoid repetitive and costly work in <code class="language-plaintext highlighter-rouge">build()</code> methods since <code class="language-plaintext highlighter-rouge">build()</code> can be invoked frequently when ancestor Widgets rebuild.</li> <li>Avoid overly large single Widgets with a large <code class="language-plaintext highlighter-rouge">build()</code> function. Split them into different Widgets based on encapsulation but also on how they change: <ul> <li>When <code class="language-plaintext highlighter-rouge">setState()</code> is called on a State, all descendent widgets rebuild. Therefore, localize the <code class="language-plaintext highlighter-rouge">setState()</code> call to the part of the subtree whose UI actually needs to change. Avoid calling setState() high up in the tree if the change is contained to a small part of the tree.</li> <li>The traversal to rebuild all descendents stops when the same instance of the child widget as the previous frame is re-encountered. This technique is heavily used inside the framework for optimizing animations where the animation doesn’t affect the child subtree. See the <a href="https://web.archive.org/web/20210603070132/https://api.flutter.dev/flutter/widgets/TransitionBuilder.html"><code class="language-plaintext highlighter-rouge">TransitionBuilder</code></a> pattern and the <a href="https://web.archive.org/web/20210603070132/https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/widgets/transitions.dart">source code for <code class="language-plaintext highlighter-rouge">SlideTransition</code></a>, which uses this principle to avoid rebuilding its descendents when animating.</li> </ul> </li> </ul> <p>Also see:</p> <ul> <li> <a href="https://web.archive.org/web/20210603070132/https://api.flutter.dev/flutter/widgets/StatefulWidget-class.html#performance-considerations">Performance considerations</a>, part of the <a href="https://web.archive.org/web/20210603070132/https://api.flutter.dev/flutter/widgets/StatefulWidget-class.html"><code class="language-plaintext highlighter-rouge">StatefulWidget</code></a> API doc</li> </ul> <h3 id="apply-effects-only-when-needed"> <a class="anchor" href="#apply-effects-only-when-needed" aria-hidden="true"><span class="octicon octicon-link"></span></a>Apply effects only when needed</h3> <p>Use effects carefully, as they can be expensive. Some of them invoke <code class="language-plaintext highlighter-rouge">saveLayer()</code> behind the scenes, which can be an expensive operation.</p> <aside class="alert alert-secondary" role="alert"> <h4> <a class="anchor" href="#why-is-savelayer-expensive" aria-hidden="true"><span class="octicon octicon-link"></span></a>Why is savelayer expensive?</h4> <p><a name="why-is-savelayer-expensive"></a> Calling <code class="language-plaintext highlighter-rouge">saveLayer()</code> allocates an offscreen buffer. Drawing content into the offscreen buffer might trigger render target switches that are particularly slow in older GPUs.</p> </aside> <p>Some general rules when applying specific effects:</p> <ul> <li>Use the <a href="https://web.archive.org/web/20210603070132/https://api.flutter.dev/flutter/widgets/Opacity-class.html"><code class="language-plaintext highlighter-rouge">Opacity</code></a> widget only when necessary. See the <a href="https://web.archive.org/web/20210603070132/https://api.flutter.dev/flutter/widgets/Opacity-class.html#transparent-image">Transparent image</a> section in the Opacity API page for an example of applying opacity directly to an image, which is faster than using the Opacity widget.</li> <li> <strong>Clipping</strong> doesn’t call <code class="language-plaintext highlighter-rouge">saveLayer()</code> (unless explicitly requested with <code class="language-plaintext highlighter-rouge">Clip.antiAliasWithSaveLayer</code>) so these operations aren’t as expensive as Opacity, but clipping is still costly, so use with caution. By default, clipping is disabled (<code class="language-plaintext highlighter-rouge">Clip.none</code>), so you must explicitly enable it when needed.</li> </ul> <p>Other widgets that might trigger <code class="language-plaintext highlighter-rouge">saveLayer()</code> and are potentially costly:</p> <ul> <li><a href="https://web.archive.org/web/20210603070132/https://api.flutter.dev/flutter/widgets/ShaderMask-class.html"><code class="language-plaintext highlighter-rouge">ShaderMask</code></a></li> <li><a href="https://web.archive.org/web/20210603070132/https://api.flutter.dev/flutter/dart-ui/ColorFilter-class.html"><code class="language-plaintext highlighter-rouge">ColorFilter</code></a></li> <li> <a href="https://web.archive.org/web/20210603070132/https://api.flutter.dev/flutter/material/Chip-class.html"><code class="language-plaintext highlighter-rouge">Chip</code></a>—might cause call to <code class="language-plaintext highlighter-rouge">saveLayer()</code> if <code class="language-plaintext highlighter-rouge">disabledColorAlpha != 0xff</code> </li> <li> <a href="https://web.archive.org/web/20210603070132/https://api.flutter.dev/flutter/widgets/Text-class.html"><code class="language-plaintext highlighter-rouge">Text</code></a>—might cause call to <code class="language-plaintext highlighter-rouge">saveLayer()</code> if there’s an <code class="language-plaintext highlighter-rouge">overflowShader</code> </li> </ul> <p>Ways to avoid calls to <code class="language-plaintext highlighter-rouge">saveLayer()</code>:</p> <ul> <li>To implement fading in an image, consider using the <a href="https://web.archive.org/web/20210603070132/https://api.flutter.dev/flutter/widgets/FadeInImage-class.html"><code class="language-plaintext highlighter-rouge">FadeInImage</code></a> widget, which applies a gradual opacity using the GPU’s fragment shader. For more information, see the <a href="https://web.archive.org/web/20210603070132/https://api.flutter.dev/flutter/widgets/Opacity-class.html"><code class="language-plaintext highlighter-rouge">Opacity</code></a> docs.</li> <li>To create a rectangle with rounded corners, instead of applying a clipping rectangle, consider using the <code class="language-plaintext highlighter-rouge">borderRadius</code> property offered by many of the widget classes.</li> </ul> <h3 id="render-grids-and-lists-lazily"> <a class="anchor" href="#render-grids-and-lists-lazily" aria-hidden="true"><span class="octicon octicon-link"></span></a>Render grids and lists lazily</h3> <p>Use the lazy methods, with callbacks, when building large grids or lists. That way only the visible portion of the screen is built at startup time.</p> <p>Also see:</p> <ul> <li> <a href="/web/20210603070132/https://flutter.dev/cookbook/lists/long-lists">Working with long lists</a> in the <a href="/web/20210603070132/https://flutter.dev/cookbook">Cookbook</a> </li> <li> <a href="https://web.archive.org/web/20210603070132/https://medium.com/saugo360/flutter-creating-a-listview-that-loads-one-page-at-a-time-c5c91b6fabd3">Creating a ListView that loads one page at a time</a> a community article by AbdulRahman AlHamali</li> <li> <a href="https://web.archive.org/web/20210603070132/https://api.flutter.dev/flutter/widgets/ListView/ListView.builder.html"><code class="language-plaintext highlighter-rouge">Listview.builder</code></a> API</li> </ul> <h3 id="build-and-display-frames-in-16ms"> <a class="anchor" href="#build-and-display-frames-in-16ms" aria-hidden="true"><span class="octicon octicon-link"></span></a>Build and display frames in 16ms</h3> <p>Since there are two separate threads for building and rendering, you have 16ms for building, and 16ms for rendering on a 60Hz display. If latency is a concern, build and display a frame in 16ms <em>or less</em>. Note that means built in 8ms or less, and rendered in 8ms or less, for a total of 16ms or less. If missing frames (jankyness) is a concern, then 16ms for each of the build and render stages is OK.</p> <p>If your frames are rendering in well under 16ms total in <a href="/web/20210603070132/https://flutter.dev/docs/testing/build-modes#profile">profile mode</a>, you likely don’t have to worry about performance even if some performance pitfalls apply, but you should still aim to build and render a frame as fast as possible. Why?</p> <ul> <li>Lowering the frame render time below 16ms might not make a visual difference, but it <strong>improves battery life</strong> and thermal issues.</li> <li>It might run fine on your device, but consider performance for the lowest device you are targeting.</li> <li>When 120fps devices become widely available, you’ll want to render frames in under 8ms (total) in order to provide the smoothest experience.</li> </ul> <p>If you are wondering why 60fps leads to a smooth visual experience, see the video <a href="https://web.archive.org/web/20210603070132/https://www.youtube.com/watch?v=CaMTIgxCSqU">Why 60fps?</a></p> <h2 id="pitfalls"> <a class="anchor" href="#pitfalls" aria-hidden="true"><span class="octicon octicon-link"></span></a>Pitfalls</h2> <p>If you need to tune your app’s performance, or perhaps the UI isn’t as smooth as you expect, the Flutter plugin for your IDE can help. In the Flutter Performance window, enable the <strong>Show widget rebuild information</strong> check box. This feature helps you detect when frames are being rendered and displayed in more than 16ms. Where possible, the plugin provides a link to a relevant tip.</p> <p>The following behaviors might negatively impact your app’s performance.</p> <ul> <li> <p>Avoid using the <code class="language-plaintext highlighter-rouge">Opacity</code> widget, and particularly avoid it in an animation. Use <code class="language-plaintext highlighter-rouge">AnimatedOpacity</code> or <code class="language-plaintext highlighter-rouge">FadeInImage</code> instead. For more information, see <a href="https://web.archive.org/web/20210603070132/https://api.flutter.dev/flutter/widgets/Opacity-class.html#performance-considerations-for-opacity-animation">Performance considerations for opacity animation</a>.</p> </li> <li> <p>When using an AnimatedBuilder, avoid putting a subtree in the builder function that builds widgets that don’t depend on the animation. This subtree is rebuilt for every tick of the animation. Instead, build that part of the subtree once and pass it as a child to the AnimatedBuilder. For more information, see <a href="https://web.archive.org/web/20210603070132/https://api.flutter.dev/flutter/widgets/AnimatedBuilder-class.html#performance-optimizations">Performance optimizations</a>.</p> </li> <li> <p>Avoid clipping in an animation. If possible, pre-clip the image before animating it.</p> </li> <li> <p>Avoid using constructors with a concrete <code class="language-plaintext highlighter-rouge">List</code> of children (such as <code class="language-plaintext highlighter-rouge">Column()</code> or <code class="language-plaintext highlighter-rouge">ListView()</code>) if most of the children are not visible on screen to avoid the build cost.</p> </li> </ul> <h2 id="resources"> <a class="anchor" href="#resources" aria-hidden="true"><span class="octicon octicon-link"></span></a>Resources</h2> <p>For more performance info, see the following resources:</p> <ul> <li> <a href="https://web.archive.org/web/20210603070132/https://api.flutter.dev/flutter/widgets/AnimatedBuilder-class.html#performance-optimizations">Performance optimizations</a> in the AnimatedBuilder API page</li> <li> <a href="https://web.archive.org/web/20210603070132/https://api.flutter.dev/flutter/widgets/Opacity-class.html#performance-considerations-for-opacity-animation">Performance considerations for opacity animation</a> in the Opacity API page</li> <li> <a href="https://web.archive.org/web/20210603070132/https://api.flutter.dev/flutter/widgets/ListView-class.html#child-elements-lifecycle">Child elements’ lifecycle</a> and how to load them efficiently, in the ListView API page</li> <li> <a href="https://web.archive.org/web/20210603070132/https://api.flutter.dev/flutter/widgets/StatefulWidget-class.html#performance-considerations">Performance considerations</a> of a <code class="language-plaintext highlighter-rouge">StatefulWidget</code> </li> </ul> </div> </main> </div> </div> <footer class="site-footer"> <div class="container-fluid"> <div class="row"> <div class="col-md-12 site-footer__wrapper"> <div class="site-footer__logo"> <img src="/web/20210603070132im_/https://flutter.dev/images/flutter-mono-81x100.png" alt="Flutter Logo" width="81" height="100"> </div> <div class="site-footer__content"> <ul class="site-footer__link-list"> <li><a href="https://web.archive.org/web/20210603070132/https://groups.google.com/forum/#!forum/flutter-dev">flutter-dev@</a></li> <li><a href="/web/20210603070132/https://flutter.dev/tos">terms</a></li> <li><a href="/web/20210603070132/https://flutter.dev/brand">brand usage</a></li> <li><a href="/web/20210603070132/https://flutter.dev/security">security</a></li> <li><a href="https://web.archive.org/web/20210603070132/https://www.google.com/intl/en/policies/privacy">privacy</a></li> <li><a href="https://web.archive.org/web/20210603070132/https://esflutter.dev/">español</a></li> <li><a href="https://web.archive.org/web/20210603070132/https://flutter.cn/" class="text-nowrap">社区中文资源</a></li> <li><a href="https://web.archive.org/web/20210603070132/https://flutter-ko.dev/" class="text-nowrap">한국어</a></li> <li><a href="https://web.archive.org/web/20210603070132/https://blog.google/inside-google/company-announcements/standing-with-black-community">We stand in solidarity with the Black community. Black Lives Matter.</a></li> </ul> <p class="licenses"> Except as otherwise noted, this work is licensed under a <a rel="license" href="https://web.archive.org/web/20210603070132/https://creativecommons.org/licenses/by/4.0">Creative Commons Attribution 4.0 International License</a>, and code samples are licensed under the BSD License. </p> </div> </div> </div> </div> </footer> <script async="" defer="" src="//web.archive.org/web/20210603070132js_/https://survey.g.doubleclick.net/async_survey?site=at3ul57xpub2vk3oxt2ytw365i"></script> </body> </html>