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/get-started/flutter-for/web-devs","20210603051017","https://web.archive.org/","web","https://web-static.archive.org/_static/", "1622697017"); </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>Flutter for web developers - Flutter </title> <link rel="shortcut icon" href="/web/20210603051017im_/https://flutter.dev/images/favicon.png">  <script src="https://web.archive.org/web/20210603051017js_/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/20210603051017/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="Learn how to apply Web developer knowledge when building Flutter apps."> <meta name="keywords" content=" "> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@flutterdev"> <meta property="og:title" content="Flutter for web developers"> <meta property="og:url" content="https://web.archive.org/web/20210603051017/https://flutter.dev/docs/get-started/flutter-for/web-devs"> <meta property="og:description" content="Learn how to apply Web developer knowledge when building Flutter apps."> <meta property="og:image" content="https://web.archive.org/web/20210603051017im_/https://flutter.dev/images/flutter-logo-sharing.png"> <link href="https://web.archive.org/web/20210603051017cs_/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/20210603051017cs_/https://flutter.dev/assets/main-5179236d2a521f0d8c964446a1eaa9bee448793c298286381d5cbdc3f6776229.css" integrity="" crossorigin="anonymous"> <script src="https://web.archive.org/web/20210603051017js_/https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script> <script type="text/javascript" src="/web/20210603051017js_/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/20210603051017/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/20210603051017if_/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/20210603051017/https://flutter.dev/"> <img alt="Flutter logo" height="37" width="129" class="align-middle" src="/web/20210603051017im_/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/20210603051017/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 active" data-toggle="collapse" href="#sidenav-1" role="button" aria-expanded="true" aria-controls="sidenav-1">Get started</a> <ul class="nav flex-column flex-nowrap collapse show" id="sidenav-1"> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/get-started/install">1. Install</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/get-started/editor">2. Set up an editor</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/get-started/test-drive">3. Test drive</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/get-started/codelab">4. Write your first app</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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 active 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/20210603051017/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/20210603051017/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/20210603051017/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 active" href="/web/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/https://flutter.dev/docs/cookbook">Cookbook</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/codelabs">Codelabs</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/https://flutter.dev/docs/development/ui/layout">Layouts in Flutter</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/development/ui/layout/tutorial">Tutorial</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/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/20210603051017/https://flutter.dev/docs/development/ui/layout/constraints">Understanding constraints</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/https://flutter.dev/docs/development/ui/interactive">Adding interactivity</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/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/20210603051017/https://flutter.dev/docs/development/ui/navigation">Navigation in Flutter</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/development/ui/navigation/deep-linking">Deep linking</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/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/20210603051017/https://flutter.dev/docs/development/ui/animations">Introduction</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/development/ui/animations/overview">Overview</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/development/ui/animations/tutorial">Tutorial</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/development/ui/animations/implicit-animations">Implicit animations</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/development/ui/animations/hero-animations">Hero animations</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/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/20210603051017/https://flutter.dev/docs/development/ui/advanced/slivers">Slivers</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/development/ui/advanced/gestures">Gestures</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/https://flutter.dev/docs/development/data-and-backend/state-mgmt/intro">Introduction</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/https://flutter.dev/docs/development/data-and-backend/networking">Networking & http</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/development/data-and-backend/json">JSON and serialization</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/development/data-and-backend/firebase">Firebase</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/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/20210603051017/https://flutter.dev/docs/development/accessibility-and-localization/accessibility">Accessibility</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/https://flutter.dev/docs/development/platform-integration/apple-watch">Apple Watch support</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/development/platform-integration/c-interop">C interop</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/https://flutter.dev/docs/development/platform-integration/web">Web FAQ</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/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/20210603051017/https://flutter.dev/docs/development/packages-and-plugins/using-packages">Using packages</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/https://flutter.dev/docs/development/packages-and-plugins/favorites">Flutter Favorites program</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/development/packages-and-plugins/background-processes">Background processes</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/https://flutter.dev/docs/development/add-to-app/debugging">Debugging & hot reload</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/https://flutter.dev/docs/development/tools/android-studio">Android Studio & IntelliJ</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/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/20210603051017/https://flutter.dev/docs/development/tools/devtools/overview">Overview</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/https://flutter.dev/docs/development/tools/devtools/vscode">Install from VS Code</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/development/tools/devtools/cli">Install from command line</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/development/tools/devtools/inspector">Flutter inspector</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/development/tools/devtools/performance">Performance view</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/development/tools/devtools/cpu-profiler">CPU Profiler view</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/development/tools/devtools/memory">Memory view</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/development/tools/devtools/network">Network view</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/development/tools/devtools/debugger">Debugger</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/development/tools/devtools/logging">Logging view</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/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/20210603051017/https://flutter.dev/docs/development/tools/sdk/overview">Overview</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/development/tools/sdk/upgrading">Upgrading</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/development/tools/sdk/releases">Releases</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/release/breaking-changes">Breaking changes</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/https://flutter.dev/docs/development/tools/pubspec">Flutter and the pubspec file</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/development/tools/hot-reload">Hot reload</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/development/tools/flutter-fix">Flutter Fix</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/development/tools/formatting">Code formatting</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/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/20210603051017/https://flutter.dev/docs/development/androidx-migration">AndroidX migration</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/https://flutter.dev/docs/development/ios-14">Developing for iOS 14</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/https://flutter.dev/docs/testing/debugging">Debugging tools</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/testing/code-debugging">Debugging apps programmatically</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/testing/oem-debuggers">Using an OEM debugger</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/testing/build-modes">Flutter's build modes</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/testing/common-errors">Common Flutter errors</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/testing/errors">Handling errors</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/testing">Testing</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/testing/integration-tests">Integration testing</a> </li> </ul> </li><li class="nav-item"> <a class="nav-link collapsed" data-toggle="collapse" href="#sidenav-5" role="button" aria-expanded="false" aria-controls="sidenav-5">Performance & optimization</a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-5"> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/perf">Overview</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/perf/app-size">App size</a> </li><li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-5-3" href="/web/20210603051017/https://flutter.dev/docs/perf/rendering" role="button" aria-expanded="false" aria-controls="sidenav-5-3">Rendering performance </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-5-3"> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/perf/rendering">Overview</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/perf/rendering/best-practices">Performance best practices</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/perf/rendering/ui-performance">Performance profiling</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/https://flutter.dev/docs/perf/deferred-components">Deferred components</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/perf/metrics">Performance metrics</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/perf/faq">Performance FAQ</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/https://flutter.dev/docs/deployment/obfuscate">Obfuscating Dart code</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/deployment/flavors">Creating flavors for Flutter</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/deployment/android">Build and release an Android app</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/deployment/ios">Build and release an iOS app</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/deployment/linux">Build and release a Linux app</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/deployment/web">Build and release a web app</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/https://flutter.dev/docs/resources/bootstrap-into-dart">Dart resources</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/resources/compatibility">Compatibility policy</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/resources/architectural-overview">Architectural overview</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/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/20210603051017/https://flutter.dev/docs/resources/platform-adaptations">Platform adaptations</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/resources/videos">Videos and online courses</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/resources/books">Books</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/resources/faq">FAQ</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/resources/design-docs">Design Documents</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/https://flutter.dev/dash">Who is Dash?</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/reference/widgets">Widget index</a> </li><li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/https://flutter.dev/showcase">Showcase</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/community">Community</a> </li> </ul> <form action="/web/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/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 active" data-toggle="collapse" href="#sidenav-1" role="button" aria-expanded="true" aria-controls="sidenav-1">Get started</a> <ul class="nav flex-column flex-nowrap collapse show" id="sidenav-1"> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/get-started/install">1. Install</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/get-started/editor">2. Set up an editor</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/get-started/test-drive">3. Test drive</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/get-started/codelab">4. Write your first app</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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 active 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/20210603051017/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/20210603051017/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/20210603051017/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 active" href="/web/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/https://flutter.dev/docs/cookbook">Cookbook</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/codelabs">Codelabs</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/https://flutter.dev/docs/development/ui/layout">Layouts in Flutter</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/development/ui/layout/tutorial">Tutorial</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/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/20210603051017/https://flutter.dev/docs/development/ui/layout/constraints">Understanding constraints</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/https://flutter.dev/docs/development/ui/interactive">Adding interactivity</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/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/20210603051017/https://flutter.dev/docs/development/ui/navigation">Navigation in Flutter</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/development/ui/navigation/deep-linking">Deep linking</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/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/20210603051017/https://flutter.dev/docs/development/ui/animations">Introduction</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/development/ui/animations/overview">Overview</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/development/ui/animations/tutorial">Tutorial</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/development/ui/animations/implicit-animations">Implicit animations</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/development/ui/animations/hero-animations">Hero animations</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/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/20210603051017/https://flutter.dev/docs/development/ui/advanced/slivers">Slivers</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/development/ui/advanced/gestures">Gestures</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/https://flutter.dev/docs/development/data-and-backend/state-mgmt/intro">Introduction</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/https://flutter.dev/docs/development/data-and-backend/networking">Networking & http</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/development/data-and-backend/json">JSON and serialization</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/development/data-and-backend/firebase">Firebase</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/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/20210603051017/https://flutter.dev/docs/development/accessibility-and-localization/accessibility">Accessibility</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/https://flutter.dev/docs/development/platform-integration/apple-watch">Apple Watch support</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/development/platform-integration/c-interop">C interop</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/https://flutter.dev/docs/development/platform-integration/web">Web FAQ</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/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/20210603051017/https://flutter.dev/docs/development/packages-and-plugins/using-packages">Using packages</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/https://flutter.dev/docs/development/packages-and-plugins/favorites">Flutter Favorites program</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/development/packages-and-plugins/background-processes">Background processes</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/https://flutter.dev/docs/development/add-to-app/debugging">Debugging & hot reload</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/https://flutter.dev/docs/development/tools/android-studio">Android Studio & IntelliJ</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/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/20210603051017/https://flutter.dev/docs/development/tools/devtools/overview">Overview</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/https://flutter.dev/docs/development/tools/devtools/vscode">Install from VS Code</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/development/tools/devtools/cli">Install from command line</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/development/tools/devtools/inspector">Flutter inspector</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/development/tools/devtools/performance">Performance view</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/development/tools/devtools/cpu-profiler">CPU Profiler view</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/development/tools/devtools/memory">Memory view</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/development/tools/devtools/network">Network view</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/development/tools/devtools/debugger">Debugger</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/development/tools/devtools/logging">Logging view</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/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/20210603051017/https://flutter.dev/docs/development/tools/sdk/overview">Overview</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/development/tools/sdk/upgrading">Upgrading</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/development/tools/sdk/releases">Releases</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/release/breaking-changes">Breaking changes</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/https://flutter.dev/docs/development/tools/pubspec">Flutter and the pubspec file</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/development/tools/hot-reload">Hot reload</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/development/tools/flutter-fix">Flutter Fix</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/development/tools/formatting">Code formatting</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/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/20210603051017/https://flutter.dev/docs/development/androidx-migration">AndroidX migration</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/https://flutter.dev/docs/development/ios-14">Developing for iOS 14</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/https://flutter.dev/docs/testing/debugging">Debugging tools</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/testing/code-debugging">Debugging apps programmatically</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/testing/oem-debuggers">Using an OEM debugger</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/testing/build-modes">Flutter's build modes</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/testing/common-errors">Common Flutter errors</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/testing/errors">Handling errors</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/testing">Testing</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/testing/integration-tests">Integration testing</a> </li> </ul> </li><li class="nav-item"> <a class="nav-link collapsed" data-toggle="collapse" href="#sidenav-5" role="button" aria-expanded="false" aria-controls="sidenav-5">Performance & optimization</a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-5"> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/perf">Overview</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/perf/app-size">App size</a> </li><li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-5-3" href="/web/20210603051017/https://flutter.dev/docs/perf/rendering" role="button" aria-expanded="false" aria-controls="sidenav-5-3">Rendering performance </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-5-3"> <li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/perf/rendering">Overview</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/perf/rendering/best-practices">Performance best practices</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/perf/rendering/ui-performance">Performance profiling</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/https://flutter.dev/docs/perf/deferred-components">Deferred components</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/perf/metrics">Performance metrics</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/perf/faq">Performance FAQ</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/https://flutter.dev/docs/deployment/obfuscate">Obfuscating Dart code</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/deployment/flavors">Creating flavors for Flutter</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/deployment/android">Build and release an Android app</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/deployment/ios">Build and release an iOS app</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/deployment/linux">Build and release a Linux app</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/deployment/web">Build and release a web app</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/https://flutter.dev/docs/resources/bootstrap-into-dart">Dart resources</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/resources/compatibility">Compatibility policy</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/resources/architectural-overview">Architectural overview</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/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/20210603051017/https://flutter.dev/docs/resources/platform-adaptations">Platform adaptations</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/resources/videos">Videos and online courses</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/resources/books">Books</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/resources/faq">FAQ</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/resources/design-docs">Design Documents</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/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/20210603051017/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/20210603051017/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/20210603051017/https://flutter.dev/dash">Who is Dash?</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603051017/https://flutter.dev/docs/reference/widgets">Widget index</a> </li><li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210603051017/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/20210603051017/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/20210603051017/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="#performing-basic-layout-operations">Performing basic layout operations</a> <ul class="nav"> <li class="toc-entry nav-item toc-h3"><a class="nav-link" href="#styling-and-aligning-text">Styling and aligning text</a></li> <li class="toc-entry nav-item toc-h3"><a class="nav-link" href="#setting-background-color">Setting background color</a></li> <li class="toc-entry nav-item toc-h3"><a class="nav-link" href="#centering-components">Centering components</a></li> <li class="toc-entry nav-item toc-h3"><a class="nav-link" href="#setting-container-width">Setting container width</a></li> </ul> </li> <li class="toc-entry nav-item toc-h2"><a class="nav-link" href="#manipulating-position-and-size">Manipulating position and size</a> <ul class="nav"> <li class="toc-entry nav-item toc-h3"><a class="nav-link" href="#setting-absolute-position">Setting absolute position</a></li> <li class="toc-entry nav-item toc-h3"><a class="nav-link" href="#rotating-components">Rotating components</a></li> <li class="toc-entry nav-item toc-h3"><a class="nav-link" href="#scaling-components">Scaling components</a></li> <li class="toc-entry nav-item toc-h3"><a class="nav-link" href="#applying-a-linear-gradient">Applying a linear gradient</a> <ul class="nav"> <li class="toc-entry nav-item toc-h4"><a class="nav-link" href="#vertical-gradient">Vertical gradient</a></li> <li class="toc-entry nav-item toc-h4"><a class="nav-link" href="#horizontal-gradient">Horizontal gradient</a></li> </ul> </li> </ul> </li> <li class="toc-entry nav-item toc-h2"><a class="nav-link" href="#manipulating-shapes">Manipulating shapes</a> <ul class="nav"> <li class="toc-entry nav-item toc-h3"><a class="nav-link" href="#rounding-corners">Rounding corners</a></li> <li class="toc-entry nav-item toc-h3"><a class="nav-link" href="#adding-box-shadows">Adding box shadows</a></li> <li class="toc-entry nav-item toc-h3"><a class="nav-link" href="#making-circles-and-ellipses">Making circles and ellipses</a></li> </ul> </li> <li class="toc-entry nav-item toc-h2"><a class="nav-link" href="#manipulating-text">Manipulating text</a> <ul class="nav"> <li class="toc-entry nav-item toc-h3"><a class="nav-link" href="#adjusting-text-spacing">Adjusting text spacing</a></li> <li class="toc-entry nav-item toc-h3"><a class="nav-link" href="#making-inline-formatting-changes">Making inline formatting changes</a></li> <li class="toc-entry nav-item toc-h3"><a class="nav-link" href="#creating-text-excerpts">Creating text excerpts</a></li> </ul> </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/20210603051017/https://github.com/flutter/website/tree/master/src/docs/get-started/flutter-for/web-devs.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/20210603051017/https://github.com/flutter/website/issues/new?title='Flutter for web developers' page issue&body=Page URL: https://flutter.dev/docs/get-started/flutter-for/web-devs.html%0D%0APage source: https://github.com/flutter/website/tree/master/src/docs/get-started/flutter-for/web-devs.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>Flutter for web developers</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="#performing-basic-layout-operations">Performing basic layout operations</a> <ul> <li class="toc-entry toc-h3"><a href="#styling-and-aligning-text">Styling and aligning text</a></li> <li class="toc-entry toc-h3"><a href="#setting-background-color">Setting background color</a></li> <li class="toc-entry toc-h3"><a href="#centering-components">Centering components</a></li> <li class="toc-entry toc-h3"><a href="#setting-container-width">Setting container width</a></li> </ul> </li> <li class="toc-entry toc-h2"><a href="#manipulating-position-and-size">Manipulating position and size</a> <ul> <li class="toc-entry toc-h3"><a href="#setting-absolute-position">Setting absolute position</a></li> <li class="toc-entry toc-h3"><a href="#rotating-components">Rotating components</a></li> <li class="toc-entry toc-h3"><a href="#scaling-components">Scaling components</a></li> <li class="toc-entry toc-h3"><a href="#applying-a-linear-gradient">Applying a linear gradient</a> <ul> <li class="toc-entry toc-h4"><a href="#vertical-gradient">Vertical gradient</a></li> <li class="toc-entry toc-h4"><a href="#horizontal-gradient">Horizontal gradient</a></li> </ul> </li> </ul> </li> <li class="toc-entry toc-h2"><a href="#manipulating-shapes">Manipulating shapes</a> <ul> <li class="toc-entry toc-h3"><a href="#rounding-corners">Rounding corners</a></li> <li class="toc-entry toc-h3"><a href="#adding-box-shadows">Adding box shadows</a></li> <li class="toc-entry toc-h3"><a href="#making-circles-and-ellipses">Making circles and ellipses</a></li> </ul> </li> <li class="toc-entry toc-h2"><a href="#manipulating-text">Manipulating text</a> <ul> <li class="toc-entry toc-h3"><a href="#adjusting-text-spacing">Adjusting text spacing</a></li> <li class="toc-entry toc-h3"><a href="#making-inline-formatting-changes">Making inline formatting changes</a></li> <li class="toc-entry toc-h3"><a href="#creating-text-excerpts">Creating text excerpts</a></li> </ul> </li> </ul> </div> <p>This page is for users who are familiar with the HTML and CSS syntax for arranging components of an application’s UI. It maps HTML/CSS code snippets to their Flutter/Dart code equivalents.</p> <p>One of the fundamental differences between designing a web layout and a Flutter layout, is learning how constraints work, and how widgets are sized and positioned. To learn more, see <a href="/web/20210603051017/https://flutter.dev/docs/development/ui/layout/constraints">Understanding constraints</a>.</p> <p>The examples assume:</p> <ul> <li> <p>The HTML document starts with <code class="language-plaintext highlighter-rouge"><!DOCTYPE html></code>, and the CSS box model for all HTML elements is set to <a href="https://web.archive.org/web/20210603051017/https://css-tricks.com/box-sizing/"><code class="language-plaintext highlighter-rouge">border-box</code></a>, for consistency with the Flutter model.</p> <div class="language-css highlighter-rouge"> <div class="highlight"><pre class="highlight"><code><span class="p">{</span> <span class="nl">box-sizing</span><span class="p">:</span> <span class="n">border-box</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> </div> </li> <li> <p>In Flutter, the default styling of the “Lorem ipsum” text is defined by the <code class="language-plaintext highlighter-rouge">bold24Roboto</code> variable as follows, to keep the syntax simple:</p> <div class="language-dart highlighter-rouge"> <div class="highlight"><pre class="highlight"><code><span class="n">TextStyle</span> <span class="n">bold24Roboto</span> <span class="o">=</span> <span class="n">TextStyle</span><span class="o">(</span> <span class="nl">color:</span> <span class="n">Colors</span><span class="o">.</span><span class="na">white</span><span class="o">,</span> <span class="nl">fontSize:</span> <span class="mi">24</span><span class="o">,</span> <span class="nl">fontWeight:</span> <span class="n">FontWeight</span><span class="o">.</span><span class="na">w900</span><span class="o">,</span> <span class="o">);</span> </code></pre></div> </div> </li> </ul> <aside class="alert alert-secondary" role="alert"> <p>How is react-style, or <em>declarative</em>, programming different than the traditional imperative style? For a comparison, see <a href="/web/20210603051017/https://flutter.dev/docs/get-started/flutter-for/declarative">Introduction to declarative UI</a>.</p> </aside> <h2 id="performing-basic-layout-operations"> <a class="anchor" href="#performing-basic-layout-operations" aria-hidden="true"><span class="octicon octicon-link"></span></a>Performing basic layout operations</h2> <p>The following examples show how to perform the most common UI layout tasks.</p> <h3 id="styling-and-aligning-text"> <a class="anchor" href="#styling-and-aligning-text" aria-hidden="true"><span class="octicon octicon-link"></span></a>Styling and aligning text</h3> <p>Font style, size, and other text attributes that CSS handles with the font and color properties are individual properties of a <a href="https://web.archive.org/web/20210603051017/https://api.flutter.dev/flutter/painting/TextStyle-class.html"><code class="language-plaintext highlighter-rouge">TextStyle</code></a> child of a <a href="https://web.archive.org/web/20210603051017/https://api.flutter.dev/flutter/widgets/Text-class.html"><code class="language-plaintext highlighter-rouge">Text</code></a> widget.</p> <p>For text-align property in CSS that is used for aligning text, there is a textAlign property of a <a href="https://web.archive.org/web/20210603051017/https://api.flutter.dev/flutter/widgets/Text-class.html"><code class="language-plaintext highlighter-rouge">Text</code></a> widget.</p> <p>In both HTML and Flutter, child elements or widgets are anchored at the top left, by default.</p> <div class="lefthighlight"> <pre class="prettyprint lang-css"><div class="greybox"> Lorem ipsum </div> .greybox { background-color: #e0e0e0; /* grey 300 */ width: 320px; height: 240px; <span class="highlight">font: 900 24px Georgia;</span> <span class="highlight">text-align: center;</span> }</pre> </div> <div class="righthighlight"> <pre class="prettyprint lang-dart">var container = Container( // grey box child: Text( "Lorem ipsum", <span class="highlight">textAlign: TextAlign.center,</span> style: <span class="highlight">TextStyle( fontSize: 24, fontWeight: FontWeight.w900, fontFamily: "Georgia", ),</span> ), width: 320, height: 240, color: Colors.grey[300], );</pre> </div> <h3 id="setting-background-color"> <a class="anchor" href="#setting-background-color" aria-hidden="true"><span class="octicon octicon-link"></span></a>Setting background color</h3> <p>In Flutter, you set the background color using the <code class="language-plaintext highlighter-rouge">color</code> property or the <code class="language-plaintext highlighter-rouge">decoration</code> property of a <a href="https://web.archive.org/web/20210603051017/https://api.flutter.dev/flutter/widgets/Container-class.html"><code class="language-plaintext highlighter-rouge">Container</code></a>. However, you cannot supply both, since it would potentially result in the decoration drawing over the background color. The <code class="language-plaintext highlighter-rouge">color</code> property should be preferred when the background is a simple color. For other cases, such as gradients or images, use the <code class="language-plaintext highlighter-rouge">decoration</code> property.</p> <p>The CSS examples use the hex color equivalents to the Material color palette.</p> <div class="lefthighlight"> <pre class="prettyprint lang-css"><div class="greybox"> Lorem ipsum </div> .greybox { <span class="highlight">background-color: #e0e0e0;</span> /* grey 300 */ width: 320px; height: 240px; font: 900 24px Roboto; }</pre> </div> <div class="righthighlight"> <pre class="prettyprint lang-dart">var container = Container( // grey box child: Text( "Lorem ipsum", style: bold24Roboto, ), width: 320, height: 240, <span class="highlight">color: Colors.grey[300],</span> );</pre> </div> <div class="righthighlight"> <pre class="prettyprint lang-dart">var container = Container( // grey box child: Text( "Lorem ipsum", style: bold24Roboto, ), width: 320, height: 240, <span class="highlight">decoration: BoxDecoration( color: Colors.grey[300], ),</span> );</pre> </div> <h3 id="centering-components"> <a class="anchor" href="#centering-components" aria-hidden="true"><span class="octicon octicon-link"></span></a>Centering components</h3> <p>A <a href="https://web.archive.org/web/20210603051017/https://api.flutter.dev/flutter/widgets/Center-class.html"><code class="language-plaintext highlighter-rouge">Center</code></a> widget centers its child both horizontally and vertically.</p> <p>To accomplish a similar effect in CSS, the parent element uses either a flex or table-cell display behavior. The examples on this page show the flex behavior.</p> <div class="lefthighlight"> <pre class="prettyprint lang-css"><div class="greybox"> Lorem ipsum </div> .greybox { background-color: #e0e0e0; /* grey 300 */ width: 320px; height: 240px; font: 900 24px Roboto; <span class="highlight">display: flex; align-items: center; justify-content: center; </span> }</pre> </div> <div class="righthighlight"> <pre class="prettyprint lang-dart">var container = Container( // grey box child: <span class="highlight">Center( child: </span> Text( "Lorem ipsum", style: bold24Roboto, ), ), width: 320, height: 240, color: Colors.grey[300], );</pre> </div> <h3 id="setting-container-width"> <a class="anchor" href="#setting-container-width" aria-hidden="true"><span class="octicon octicon-link"></span></a>Setting container width</h3> <p>To specify the width of a <a href="https://web.archive.org/web/20210603051017/https://api.flutter.dev/flutter/widgets/Container-class.html"><code class="language-plaintext highlighter-rouge">Container</code></a> widget, use its <code class="language-plaintext highlighter-rouge">width</code> property. This is a fixed width, unlike the CSS max-width property that adjusts the container width up to a maximum value. To mimic that effect in Flutter, use the <code class="language-plaintext highlighter-rouge">constraints</code> property of the Container. Create a new <a href="https://web.archive.org/web/20210603051017/https://api.flutter.dev/flutter/rendering/BoxConstraints-class.html"><code class="language-plaintext highlighter-rouge">BoxConstraints</code></a> widget with a <code class="language-plaintext highlighter-rouge">minWidth</code> or <code class="language-plaintext highlighter-rouge">maxWidth</code>.</p> <p>For nested Containers, if the parent’s width is less than the child’s width, the child Container sizes itself to match the parent.</p> <div class="lefthighlight"> <pre class="prettyprint lang-css"><div class="greybox"> <div class="redbox"> Lorem ipsum </div> </div> .greybox { background-color: #e0e0e0; /* grey 300 */ <span class="highlight">width: 320px; </span> height: 240px; font: 900 24px Roboto; display: flex; align-items: center; justify-content: center; } .redbox { background-color: #ef5350; /* red 400 */ padding: 16px; color: #ffffff; <span class="highlight">width: 100%; max-width: 240px; </span> }</pre> </div> <div class="righthighlight"> <pre class="prettyprint lang-dart">var container = Container( // grey box child: Center( child: Container( // red box child: Text( "Lorem ipsum", style: bold24Roboto, ), decoration: BoxDecoration( color: Colors.red[400], ), padding: EdgeInsets.all(16), <span class="highlight">width: 240, </span>//max-width is 240 ), ), <span class="highlight">width: 320, </span> height: 240, color: Colors.grey[300], );</pre> </div> <h2 id="manipulating-position-and-size"> <a class="anchor" href="#manipulating-position-and-size" aria-hidden="true"><span class="octicon octicon-link"></span></a>Manipulating position and size</h2> <p>The following examples show how to perform more complex operations on widget position, size, and background.</p> <h3 id="setting-absolute-position"> <a class="anchor" href="#setting-absolute-position" aria-hidden="true"><span class="octicon octicon-link"></span></a>Setting absolute position</h3> <p>By default, widgets are positioned relative to their parent.</p> <p>To specify an absolute position for a widget as x-y coordinates, nest it in a <a href="https://web.archive.org/web/20210603051017/https://api.flutter.dev/flutter/widgets/Positioned-class.html"><code class="language-plaintext highlighter-rouge">Positioned</code></a> widget that is, in turn, nested in a <a href="https://web.archive.org/web/20210603051017/https://api.flutter.dev/flutter/widgets/Stack-class.html"><code class="language-plaintext highlighter-rouge">Stack</code></a> widget.</p> <div class="lefthighlight"> <pre class="prettyprint lang-css"><div class="greybox"> <div class="redbox"> Lorem ipsum </div> </div> .greybox { background-color: #e0e0e0; /* grey 300 */ width: 320px; height: 240px; font: 900 24px Roboto; <span class="highlight">position: relative; </span> } .redbox { background-color: #ef5350; /* red 400 */ padding: 16px; color: #ffffff; <span class="highlight">position: absolute; top: 24px; left: 24px; </span> }</pre> </div> <div class="righthighlight"> <pre class="prettyprint lang-dart">var container = Container( // grey box <span class="highlight">child: Stack( children: [ Positioned( // red box child: </span> Container( child: Text( "Lorem ipsum", style: bold24Roboto, ), decoration: BoxDecoration( color: Colors.red[400], ), padding: EdgeInsets.all(16), ), <span class="highlight">left: 24, top: 24, ), ], ), </span> width: 320, height: 240, color: Colors.grey[300], );</pre> </div> <h3 id="rotating-components"> <a class="anchor" href="#rotating-components" aria-hidden="true"><span class="octicon octicon-link"></span></a>Rotating components</h3> <p>To rotate a widget, nest it in a <a href="https://web.archive.org/web/20210603051017/https://api.flutter.dev/flutter/widgets/Transform-class.html"><code class="language-plaintext highlighter-rouge">Transform</code></a> widget. Use the <code class="language-plaintext highlighter-rouge">Transform</code> widget’s <code class="language-plaintext highlighter-rouge">alignment</code> and <code class="language-plaintext highlighter-rouge">origin</code> properties to specify the transform origin (fulcrum) in relative and absolute terms, respectively.</p> <p>For a simple 2D rotation, in which the widget is rotated on the Z axis, create a new <a href="https://web.archive.org/web/20210603051017/https://api.flutter.dev/flutter/vector_math_64/Matrix4-class.html"><code class="language-plaintext highlighter-rouge">Matrix4</code></a> identity object and use its <code class="language-plaintext highlighter-rouge">rotateZ()</code> method to specify the rotation factor using radians (degrees × π / 180).</p> <div class="lefthighlight"> <pre class="prettyprint lang-css"><div class="greybox"> <div class="redbox"> Lorem ipsum </div> </div> .greybox { background-color: #e0e0e0; /* grey 300 */ width: 320px; height: 240px; font: 900 24px Roboto; display: flex; align-items: center; justify-content: center; } .redbox { background-color: #ef5350; /* red 400 */ padding: 16px; color: #ffffff; <span class="highlight">transform: rotate(15deg); </span> }</pre> </div> <div class="righthighlight"> <pre class="prettyprint lang-dart">var container = Container( // gray box child: Center( child: <span class="highlight">Transform( child: </span> Container( // red box child: Text( "Lorem ipsum", style: bold24Roboto, textAlign: TextAlign.center, ), decoration: BoxDecoration( color: Colors.red[400], ), padding: EdgeInsets.all(16), ), <span class="highlight">alignment: Alignment.center, transform: Matrix4.identity() ..rotateZ(15 * 3.1415927 / 180), ), </span> ), width: 320, height: 240, color: Colors.grey[300], );</pre> </div> <h3 id="scaling-components"> <a class="anchor" href="#scaling-components" aria-hidden="true"><span class="octicon octicon-link"></span></a>Scaling components</h3> <p>To scale a widget up or down, nest it in a <a href="https://web.archive.org/web/20210603051017/https://api.flutter.dev/flutter/widgets/Transform-class.html"><code class="language-plaintext highlighter-rouge">Transform</code></a> widget. Use the Transform widget’s <code class="language-plaintext highlighter-rouge">alignment</code> and <code class="language-plaintext highlighter-rouge">origin</code> properties to specify the transform origin (fulcrum) in relative or absolute terms, respectively.</p> <p>For a simple scaling operation along the x-axis, create a new <a href="https://web.archive.org/web/20210603051017/https://api.flutter.dev/flutter/vector_math_64/Matrix4-class.html"><code class="language-plaintext highlighter-rouge">Matrix4</code></a> identity object and use its <code class="language-plaintext highlighter-rouge">scale()</code> method to specify the scaling factor.</p> <p>When you scale a parent widget, its child widgets are scaled accordingly.</p> <div class="lefthighlight"> <pre class="prettyprint lang-css"><div class="greybox"> <div class="redbox"> Lorem ipsum </div> </div> .greybox { background-color: #e0e0e0; /* grey 300 */ width: 320px; height: 240px; font: 900 24px Roboto; display: flex; align-items: center; justify-content: center; } .redbox { background-color: #ef5350; /* red 400 */ padding: 16px; color: #ffffff; <span class="highlight">transform: scale(1.5); </span> }</pre> </div> <div class="righthighlight"> <pre class="prettyprint lang-dart">var container = Container( // gray box child: Center( child: <span class="highlight">Transform( child: </span> Container( // red box child: Text( "Lorem ipsum", style: bold24Roboto, textAlign: TextAlign.center, ), decoration: BoxDecoration( color: Colors.red[400], ), padding: EdgeInsets.all(16), ), <span class="highlight">alignment: Alignment.center, transform: Matrix4.identity() ..scale(1.5), ), </span> width: 320, height: 240, color: Colors.grey[300], );</pre> </div> <h3 id="applying-a-linear-gradient"> <a class="anchor" href="#applying-a-linear-gradient" aria-hidden="true"><span class="octicon octicon-link"></span></a>Applying a linear gradient</h3> <p>To apply a linear gradient to a widget’s background, nest it in a <a href="https://web.archive.org/web/20210603051017/https://api.flutter.dev/flutter/widgets/Container-class.html"><code class="language-plaintext highlighter-rouge">Container</code></a> widget. Then use the <code class="language-plaintext highlighter-rouge">Container</code> widget’s <code class="language-plaintext highlighter-rouge">decoration</code> property to create a <a href="https://web.archive.org/web/20210603051017/https://api.flutter.dev/flutter/painting/BoxDecoration-class.html"><code class="language-plaintext highlighter-rouge">BoxDecoration</code></a> object, and use <code class="language-plaintext highlighter-rouge">BoxDecoration</code>’s <code class="language-plaintext highlighter-rouge">gradient</code> property to transform the background fill.</p> <p>The gradient “angle” is based on the Alignment (x, y) values:</p> <ul> <li>If the beginning and ending x values are equal, the gradient is vertical (0° | 180°).</li> <li>If the beginning and ending y values are equal, the gradient is horizontal (90° | 270°).</li> </ul> <h4 id="vertical-gradient"> <a class="anchor" href="#vertical-gradient" aria-hidden="true"><span class="octicon octicon-link"></span></a>Vertical gradient</h4> <div class="lefthighlight"> <pre class="prettyprint lang-css"><div class="greybox"> <div class="redbox"> Lorem ipsum </div> </div> .greybox { background-color: #e0e0e0; /* grey 300 */ width: 320px; height: 240px; font: 900 24px Roboto; display: flex; align-items: center; justify-content: center; } .redbox { padding: 16px; color: #ffffff; <span class="highlight">background: linear-gradient(180deg, #ef5350, rgba(0, 0, 0, 0) 80%); </span> }</pre> </div> <div class="righthighlight"> <pre class="prettyprint lang-dart">var container = Container( // grey box child: Center( child: Container( // red box child: Text( "Lorem ipsum", style: bold24Roboto, ), <span class="highlight">decoration: BoxDecoration( gradient: LinearGradient( begin: const Alignment(0.0, -1.0), end: const Alignment(0.0, 0.6), colors: <Color>[ const Color(0xffef5350), const Color(0x00ef5350) ], ), ), </span> padding: EdgeInsets.all(16), ), ), width: 320, height: 240, color: Colors.grey[300], );</pre> </div> <h4 id="horizontal-gradient"> <a class="anchor" href="#horizontal-gradient" aria-hidden="true"><span class="octicon octicon-link"></span></a>Horizontal gradient</h4> <div class="lefthighlight"> <pre class="prettyprint lang-css"><div class="greybox"> <div class="redbox"> Lorem ipsum </div> </div> .greybox { background-color: #e0e0e0; /* grey 300 */ width: 320px; height: 240px; font: 900 24px Roboto; display: flex; align-items: center; justify-content: center; } .redbox { padding: 16px; color: #ffffff; <span class="highlight">background: linear-gradient(90deg, #ef5350, rgba(0, 0, 0, 0) 80%); </span> }</pre> </div> <div class="righthighlight"> <pre class="prettyprint lang-dart">var container = Container( // grey box child: Center( child: Container( // red box child: Text( "Lorem ipsum", style: bold24Roboto, ), <span class="highlight">decoration: BoxDecoration( gradient: LinearGradient( begin: const Alignment(-1.0, 0.0), end: const Alignment(0.6, 0.0), colors: <Color>[ const Color(0xffef5350), const Color(0x00ef5350) ], ), ), </span> padding: EdgeInsets.all(16), ), ), width: 320, height: 240, color: Colors.grey[300], );</pre> </div> <h2 id="manipulating-shapes"> <a class="anchor" href="#manipulating-shapes" aria-hidden="true"><span class="octicon octicon-link"></span></a>Manipulating shapes</h2> <p>The following examples show how to make and customize shapes.</p> <h3 id="rounding-corners"> <a class="anchor" href="#rounding-corners" aria-hidden="true"><span class="octicon octicon-link"></span></a>Rounding corners</h3> <p>To round the corners of a rectangular shape, use the <code class="language-plaintext highlighter-rouge">borderRadius</code> property of a <a href="https://web.archive.org/web/20210603051017/https://api.flutter.dev/flutter/painting/BoxDecoration-class.html"><code class="language-plaintext highlighter-rouge">BoxDecoration</code></a> object. Create a new <a href="https://web.archive.org/web/20210603051017/https://api.flutter.dev/flutter/painting/BorderRadius-class.html"><code class="language-plaintext highlighter-rouge">BorderRadius</code></a> object that specifies the radius for rounding each corner.</p> <div class="lefthighlight"> <pre class="prettyprint lang-css"><div class="greybox"> <div class="redbox"> Lorem ipsum </div> </div> .greybox { background-color: #e0e0e0; /* gray 300 */ width: 320px; height: 240px; font: 900 24px Roboto; display: flex; align-items: center; justify-content: center; } .redbox { background-color: #ef5350; /* red 400 */ padding: 16px; color: #ffffff; <span class="highlight">border-radius: 8px; </span> }</pre> </div> <div class="righthighlight"> <pre class="prettyprint lang-dart">var container = Container( // grey box child: Center( child: Container( // red circle child: Text( "Lorem ipsum", style: bold24Roboto, ), decoration: BoxDecoration( color: Colors.red[400], <span class="highlight">borderRadius: BorderRadius.all( const Radius.circular(8), ), </span> ), padding: EdgeInsets.all(16), ), ), width: 320, height: 240, color: Colors.grey[300], );</pre> </div> <h3 id="adding-box-shadows"> <a class="anchor" href="#adding-box-shadows" aria-hidden="true"><span class="octicon octicon-link"></span></a>Adding box shadows</h3> <p>In CSS you can specify shadow offset and blur in shorthand, using the box-shadow property. This example shows two box shadows, with properties:</p> <ul> <li><code class="language-plaintext highlighter-rouge">xOffset: 0px, yOffset: 2px, blur: 4px, color: black @80% alpha</code></li> <li><code class="language-plaintext highlighter-rouge">xOffset: 0px, yOffset: 06x, blur: 20px, color: black @50% alpha</code></li> </ul> <p>In Flutter, each property and value is specified separately. Use the <code class="language-plaintext highlighter-rouge">boxShadow</code> property of <code class="language-plaintext highlighter-rouge">BoxDecoration</code> to create a list of <a href="https://web.archive.org/web/20210603051017/https://api.flutter.dev/flutter/painting/BoxShadow-class.html"><code class="language-plaintext highlighter-rouge">BoxShadow</code></a> widgets. You can define one or multiple <code class="language-plaintext highlighter-rouge">BoxShadow</code> widgets, which can be stacked to customize the shadow depth, color, and so on.</p> <div class="lefthighlight"> <pre class="prettyprint lang-css"><div class="greybox"> <div class="redbox"> Lorem ipsum </div> </div> .greybox { background-color: #e0e0e0; /* grey 300 */ width: 320px; height: 240px; font: 900 24px Roboto; display: flex; align-items: center; justify-content: center; } .redbox { background-color: #ef5350; /* red 400 */ padding: 16px; color: #ffffff; <span class="highlight">box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 6px 20px rgba(0, 0, 0, 0.5);</span> }</pre> </div> <div class="righthighlight"> <pre class="prettyprint lang-dart">var container = Container( // grey box child: Center( child: Container( // red box child: Text( "Lorem ipsum", style: bold24Roboto, ), decoration: BoxDecoration( color: Colors.red[400], <span class="highlight">boxShadow: [ BoxShadow ( color: const Color(0xcc000000), offset: Offset(0, 2), blurRadius: 4, ), BoxShadow ( color: const Color(0x80000000), offset: Offset(0, 6), blurRadius: 20, ), ], </span> ), padding: EdgeInsets.all(16), ), ), width: 320, height: 240, decoration: BoxDecoration( color: Colors.grey[300], ), margin: EdgeInsets.only(bottom: 16), );</pre> </div> <h3 id="making-circles-and-ellipses"> <a class="anchor" href="#making-circles-and-ellipses" aria-hidden="true"><span class="octicon octicon-link"></span></a>Making circles and ellipses</h3> <p>Making a circle in CSS requires a workaround of applying a border-radius of 50% to all four sides of a rectangle, though there are <a href="https://web.archive.org/web/20210603051017/https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape">basic shapes</a>.</p> <p>While this approach is supported with the <code class="language-plaintext highlighter-rouge">borderRadius</code> property of <a href="https://web.archive.org/web/20210603051017/https://api.flutter.dev/flutter/painting/BoxDecoration-class.html"><code class="language-plaintext highlighter-rouge">BoxDecoration</code></a>, Flutter provides a <code class="language-plaintext highlighter-rouge">shape</code> property with <a href="https://web.archive.org/web/20210603051017/https://api.flutter.dev/flutter/painting/BoxShape-class.html"><code class="language-plaintext highlighter-rouge">BoxShape</code> enum</a> for this purpose.</p> <div class="lefthighlight"> <pre class="prettyprint lang-css"><div class="greybox"> <div class="redcircle"> Lorem ipsum </div> </div> .greybox { background-color: #e0e0e0; /* gray 300 */ width: 320px; height: 240px; font: 900 24px Roboto; display: flex; align-items: center; justify-content: center; } .redcircle { background-color: #ef5350; /* red 400 */ padding: 16px; color: #ffffff; <span class="highlight">text-align: center; width: 160px; height: 160px; border-radius: 50%; </span> }</pre> </div> <div class="righthighlight"> <pre class="prettyprint lang-dart">var container = Container( // grey box child: Center( child: Container( // red circle child: Text( "Lorem ipsum", style: bold24Roboto, <span class="highlight">textAlign: TextAlign.center, </span> ), decoration: BoxDecoration( color: Colors.red[400], <span class="highlight">shape: BoxShape.circle, </span> ), padding: EdgeInsets.all(16), <span class="highlight">width: 160, height: 160, </span> ), ), width: 320, height: 240, color: Colors.grey[300], );</pre> </div> <h2 id="manipulating-text"> <a class="anchor" href="#manipulating-text" aria-hidden="true"><span class="octicon octicon-link"></span></a>Manipulating text</h2> <p>The following examples show how to specify fonts and other text attributes. They also show how to transform text strings, customize spacing, and create excerpts.</p> <h3 id="adjusting-text-spacing"> <a class="anchor" href="#adjusting-text-spacing" aria-hidden="true"><span class="octicon octicon-link"></span></a>Adjusting text spacing</h3> <p>In CSS you specify the amount of white space between each letter or word by giving a length value for the letter-spacing and word-spacing properties, respectively. The amount of space can be in px, pt, cm, em, etc.</p> <p>In Flutter, you specify white space as logical pixels (negative values are allowed) for the <code class="language-plaintext highlighter-rouge">letterSpacing</code> and <code class="language-plaintext highlighter-rouge">wordSpacing</code> properties of a <a href="https://web.archive.org/web/20210603051017/https://api.flutter.dev/flutter/painting/TextStyle-class.html"><code class="language-plaintext highlighter-rouge">TextStyle</code></a> child of a <code class="language-plaintext highlighter-rouge">Text</code> widget.</p> <div class="lefthighlight"> <pre class="prettyprint lang-css"><div class="greybox"> <div class="redbox"> Lorem ipsum </div> </div> .greybox { background-color: #e0e0e0; /* grey 300 */ width: 320px; height: 240px; font: 900 24px Roboto; display: flex; align-items: center; justify-content: center; } .redbox { background-color: #ef5350; /* red 400 */ padding: 16px; color: #ffffff; <span class="highlight">letter-spacing: 4px; </span> }</pre> </div> <div class="righthighlight"> <pre class="prettyprint lang-dart">var container = Container( // grey box child: Center( child: Container( // red box child: Text( "Lorem ipsum", style: TextStyle( color: Colors.white, fontSize: 24, fontWeight: FontWeight.w900, <span class="highlight">letterSpacing: 4, </span> ), ), decoration: BoxDecoration( color: Colors.red[400], ), padding: EdgeInsets.all(16), ), ), width: 320, height: 240, color: Colors.grey[300], );</pre> </div> <h3 id="making-inline-formatting-changes"> <a class="anchor" href="#making-inline-formatting-changes" aria-hidden="true"><span class="octicon octicon-link"></span></a>Making inline formatting changes</h3> <p>A <a href="https://web.archive.org/web/20210603051017/https://api.flutter.dev/flutter/widgets/Text-class.html"><code class="language-plaintext highlighter-rouge">Text</code></a> widget lets you display text with some formatting characteristics. To display text that uses multiple styles (in this example, a single word with emphasis), use a <a href="https://web.archive.org/web/20210603051017/https://api.flutter.dev/flutter/widgets/RichText-class.html"><code class="language-plaintext highlighter-rouge">RichText</code></a> widget instead. Its <code class="language-plaintext highlighter-rouge">text</code> property can specify one or more <a href="https://web.archive.org/web/20210603051017/https://api.flutter.dev/flutter/painting/TextSpan-class.html"><code class="language-plaintext highlighter-rouge">TextSpan</code></a> widgets that can be individually styled.</p> <p>In the following example, “Lorem” is in a <code class="language-plaintext highlighter-rouge">TextSpan</code> widget with the default (inherited) text styling, and “ipsum” is in a separate <code class="language-plaintext highlighter-rouge">TextSpan</code> with custom styling.</p> <div class="lefthighlight"> <pre class="prettyprint lang-css"><div class="greybox"> <div class="redbox"> <span class="highlight">Lorem <em>ipsum</em></span> </div> </div> .greybox { background-color: #e0e0e0; /* grey 300 */ width: 320px; height: 240px; <span class="highlight">font: 900 24px Roboto;</span> display: flex; align-items: center; justify-content: center; } .redbox { background-color: #ef5350; /* red 400 */ padding: 16px; color: #ffffff; } <span class="highlight">.redbox em { font: 300 48px Roboto; font-style: italic; } </span></pre> </div> <div class="righthighlight"> <pre class="prettyprint lang-dart">var container = Container( // grey box child: Center( child: Container( // red box child: <span class="highlight">RichText( text: TextSpan( style: bold24Roboto, children: <TextSpan>[ TextSpan(text: "Lorem "), TextSpan( text: "ipsum", style: TextStyle( fontWeight: FontWeight.w300, fontStyle: FontStyle.italic, fontSize: 48, ), ), ], ), ), </span> decoration: BoxDecoration( color: Colors.red[400], ), padding: EdgeInsets.all(16), ), ), width: 320, height: 240, color: Colors.grey[300], );</pre> </div> <h3 id="creating-text-excerpts"> <a class="anchor" href="#creating-text-excerpts" aria-hidden="true"><span class="octicon octicon-link"></span></a>Creating text excerpts</h3> <p>An excerpt displays the initial line(s) of text in a paragraph, and handles the overflow text, often using an ellipsis. In HTML/CSS an excerpt can be no longer than one line. Truncating after multiple lines requires some JavaScript code.</p> <p>In Flutter, use the <code class="language-plaintext highlighter-rouge">maxLines</code> property of a <a href="https://web.archive.org/web/20210603051017/https://api.flutter.dev/flutter/widgets/Text-class.html"><code class="language-plaintext highlighter-rouge">Text</code></a> widget to specify the number of lines to include in the excerpt, and the <code class="language-plaintext highlighter-rouge">overflow</code> property for handling overflow text.</p> <div class="lefthighlight"> <pre class="prettyprint lang-css"><div class="greybox"> <div class="redbox"> Lorem ipsum dolor sit amet, consec etur </div> </div> .greybox { background-color: #e0e0e0; /* grey 300 */ width: 320px; height: 240px; font: 900 24px Roboto; display: flex; align-items: center; justify-content: center; } .redbox { background-color: #ef5350; /* red 400 */ padding: 16px; color: #ffffff; <span class="highlight">overflow: hidden; text-overflow: ellipsis; white-space: nowrap; </span> }</pre> </div> <div class="righthighlight"> <pre class="prettyprint lang-dart">var container = Container( // grey box child: Center( child: Container( // red box child: Text( "Lorem ipsum dolor sit amet, consec etur", style: bold24Roboto, <span class="highlight">overflow: TextOverflow.ellipsis, maxLines: 1, </span> ), decoration: BoxDecoration( color: Colors.red[400], ), padding: EdgeInsets.all(16), ), ), width: 320, height: 240, color: Colors.grey[300], );</pre> </div> <div class="end-examples"></div> </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/20210603051017im_/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/20210603051017/https://groups.google.com/forum/#!forum/flutter-dev">flutter-dev@</a></li> <li><a href="/web/20210603051017/https://flutter.dev/tos">terms</a></li> <li><a href="/web/20210603051017/https://flutter.dev/brand">brand usage</a></li> <li><a href="/web/20210603051017/https://flutter.dev/security">security</a></li> <li><a href="https://web.archive.org/web/20210603051017/https://www.google.com/intl/en/policies/privacy">privacy</a></li> <li><a href="https://web.archive.org/web/20210603051017/https://esflutter.dev/">español</a></li> <li><a href="https://web.archive.org/web/20210603051017/https://flutter.cn/" class="text-nowrap">社区中文资源</a></li> <li><a href="https://web.archive.org/web/20210603051017/https://flutter-ko.dev/" class="text-nowrap">한국어</a></li> <li><a href="https://web.archive.org/web/20210603051017/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/20210603051017/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/20210603051017js_/https://survey.g.doubleclick.net/async_survey?site=at3ul57xpub2vk3oxt2ytw365i"></script> </body> </html>