CINXE.COM

<!doctype html><html lang="en"><head><meta <span class="line"><span style="color:#BD2314"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#BD2314"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#BD2314"> <span class="line"><span style="color:#0468D7"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#BD2314"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#0468D7"> <span class="line"><span style="color:#0468D7"> <span class="line"><span style="color:#0468D7"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#BD2314"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#0468D7"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#0468D7"> <span class="line"><span style="color:#0468D7"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#0468D7"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#0468D7"> <span class="line"><span style="color:#0468D7"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#0468D7"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#0468D7"> <span class="line"><span style="color:#0468D7"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#BD2314"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#0468D7"> <span class="line"><span style="color:#0468D7"> <span class="line"><span style="color:#0468D7"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#BD2314"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#0468D7"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#0468D7"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#0468D7"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#BD2314"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#0468D7"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#0468D7"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#0468D7"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#BD2314"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#0468D7"> <span class="line"><span style="color:#0468D7"> <span class="line"><span style="color:#0468D7"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"></span> <span class="line"><span style="color:#0468D7"> <span class="line"><span style="color:#BD2314"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#BD2314"> <span class="line"><span style="color:#BD2314"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#0468D7"> <span class="line"><span style="color:#0468D7"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#BD2314"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#BD2314"> <span class="line"><span style="color:#BD2314"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#BD2314"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"></span> <span class="line"><span style="color:#0468D7"> <span class="line"><span style="color:#BD2314"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#BD2314"> <span class="line"><span style="color:#BD2314"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#0468D7"> <span class="line"><span style="color:#0468D7"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"></span> <span class="line"><span style="color:#0468D7"> <span class="line"><span style="color:#BD2314"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#BD2314"> <span class="line"><span style="color:#BD2314"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#0468D7"> <span class="line"><span style="color:#0468D7"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> <span class="line"><span style="color:#222222"> charset="utf-8"><title>Layouts | Flutter</title><link rel="icon" href="/assets/images/branding/flutter/icon/64.png" eleventy:ignore><link rel="apple-touch-icon" href="/assets/images/branding/flutter/logo/flutter-logomark-320px.png" eleventy:ignore><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="theme-color" content="#ffffff"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><meta name="google-site-verification" content="HFqxhSbf9YA_0rBglNLzDiWnrHiK_w4cqDh2YD2GEY4"><script>!function(e,t,a,n){e[n]=e[n]||[],e[n].push({"gtm.start":(new Date).getTime(),event:"gtm.js"});var g=t.getElementsByTagName(a)[0],m=t.createElement(a);m.async=!0,m.src="https://www.googletagmanager.com/gtm.js?id=GTM-ND4LWWZ",g.parentNode.insertBefore(m,g)}(window,document,"script","dataLayer")</script><script>!function(e,a,t,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=a.createElement(t),s=a.getElementsByTagName(t)[0],o.async=1,o.src="//www.google-analytics.com/analytics.js",s.parentNode.insertBefore(o,s)}(window,document,"script",0,"ga"),ga("create","UA-67589403-1","auto"),ga("send","pageview")</script><meta name="description" content="Learn how to create layouts in Flutter."><meta name="twitter:card" content="summary_large_image"><meta name="twitter:site" content="@flutterdev"><meta property="og:title" content="Layouts"><meta property="og:url" content="https://docs.flutter.dev/get-started/fundamentals/layout"><meta property="og:description" content="Learn how to create layouts in Flutter."><meta property="og:image" content="https://docs.flutter.dev/assets/images/flutter-logo-sharing.png" eleventy:ignore><link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Google+Sans+Text:wght@400;500;700&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Google+Sans+Mono:wght@400;500;700&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" rel="stylesheet"><script>window.__CALLBACKS=[]</script><link rel="stylesheet" href="/assets/css/main.css?v=4"></head><body><section id="cookie-notice"><div class="container"><p>docs.flutter.dev uses cookies from Google to deliver and enhance the quality of its services and to analyze traffic. <a href="https://policies.google.com/technologies/cookies" target="_blank" rel="noopener">Learn more</a>.</p><button id="cookie-consent" class="filled-button">OK, got it</button></div></section><noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-ND4LWWZ" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><div id="site-banner" role="alert"><p>Flutter 3.29 is here with a bouquet of performance and fidelity improvements for your apps! <a href="https://medium.com/flutter/whats-new-in-flutter-3-29-f90c380c2317">Learn more</a><br></p></div><header class="site-header"><a href="#document-title" id="skip-to-main" class="filled-button" tabindex="1">Skip to main content</a><nav class="navbar"><div id="site-switcher" class="dropdown"><button class="dropdown-button site-wordmark" aria-expanded="false" aria-controls="site-switcher-menu" aria-label="Switch between Flutter and Dart sites"><img src="/assets/images/branding/flutter/logo/default.svg" alt="Flutter logo" width="28"> <span>Flutter</span> <span class="subtype">Docs</span> <span class="material-symbols" aria-hidden="true">unfold_more</span></button><div class="dropdown-content" id="site-switcher-menu"><nav class="dropdown-menu" role="menu"><ul><li role="presentation"><a href="https://flutter.dev" class="site-wordmark" role="menuitem" title="Flutter homepage" aria-label="Go to the Flutter homepage"><img src="/assets/images/branding/flutter/logo/default.svg" alt="Flutter logo" width="28"> <span>Flutter</span></a></li><li role="presentation"><a href="https://docs.flutter.dev" class="site-wordmark current-site" role="menuitem" aria-current="true" title="Flutter docs homepage" aria-label="Go to the Flutter docs homepage"><img src="/assets/images/branding/flutter/logo/default.svg" alt="Flutter logo" width="28"> <span>Flutter</span> <span class="subtype">Docs</span></a></li><li role="presentation"><a href="https://api.flutter.dev" class="site-wordmark" role="menuitem" title="Flutter API reference" aria-label="Go to the Flutter API reference"><img src="/assets/images/branding/flutter/logo/default.svg" alt="Flutter logo" width="28"> <span>Flutter</span> <span class="subtype">API</span></a></li><li aria-hidden="true" class="dropdown-divider" role="separator"></li><li role="presentation"><a href="https://dart.dev" class="site-wordmark" role="menuitem" title="Dart homepage" aria-label="Go to the Dart homepage"><img src="/assets/images/branding/dart/logo.svg" alt="Dart logo" width="28" height="28"> <span>Dart</span></a></li><li role="presentation"><a href="https://dartpad.dev" class="site-wordmark" role="menuitem" title="DartPad playground" aria-label="Go to the DartPad playground"><img src="/assets/images/branding/dart/logo.svg" alt="Dart logo" width="28" height="28"> <span>DartPad</span></a></li><li role="presentation"><a href="https://pub.dev" class="site-wordmark" role="menuitem" title="pub.dev homepage" aria-label="Go to the pub.dev homepage"><img src="/assets/images/branding/dart/logo.svg" alt="Dart logo" width="28" height="28"> <span>pub.dev</span></a></li></ul></nav></div></div><div class="navbar-contents"><ul class="navbar-nav"><li class="nav-item"><a class="nav-link" href="https://flutter.dev">Homepage</a></li><li class="nav-item"><a class="nav-link" href="https://flutter.dev/community">Community</a></li><li class="nav-item"><a class="nav-link" href="https://pub.dev">Packages</a></li><li class="nav-item"><a class="nav-link" href="https://api.flutter.dev">API reference</a></li></ul><form action="/search/" class="site-header__search"><input class="site-header__searchfield search-field" type="search" name="q" id="q" autocomplete="off" placeholder="Search" aria-label="Search"></form><a href="/search" id="fallback-search-button" class="icon-button" aria-label="Navigate to the docs search page." title="Navigate to the docs search page."><span class="material-symbols" aria-hidden="true">search</span> </a><a id="call-to-action" class="filled-button" href="/get-started/install/">Get started</a> <button id="menu-toggle" class="icon-button" type="button" aria-controls="sidenav" aria-label="Toggle navigation" title="Toggle navigation"><span class="material-symbols" aria-hidden="true">menu</span></button></div></nav></header><div id="site-below-header"><div id="site-main-row"><div id="sidenav" class="site-sidebar"><nav><ul><li class="nav-header">Get started</li><li class="nav-item"><a class="nav-link" href="/get-started/install"><div><span>Set up Flutter</span></div></a></li><li class="nav-item"><button class="nav-link active collapsible" data-toggle="collapse" data-target="#sidenav-3" role="button" aria-expanded="true" aria-controls="sidenav-3"><span>Learn Flutter</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse show" id="sidenav-3"><li class="nav-item"><a class="nav-link" href="/get-started/learn-flutter"><div><span>Introduction</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/codelab"><div><span>Write your first app</span></div></a></li><li class="nav-item"><button class="nav-link active collapsible" data-toggle="collapse" data-target="#sidenav-3-3" role="button" aria-expanded="true" aria-controls="sidenav-3-3"><span>Learn the fundamentals</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse show" id="sidenav-3-3"><li class="nav-item"><a class="nav-link" href="/get-started/fundamentals"><div><span>Introduction</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/fundamentals/dart"><div><span>Intro to Dart</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/fundamentals/widgets"><div><span>Widgets</span></div></a></li><li class="nav-item"><a class="nav-link active" href="/get-started/fundamentals/layout"><div><span>Layout</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/fundamentals/state-management"><div><span>State management</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/fundamentals/user-input"><div><span>Handling user input</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/fundamentals/networking"><div><span>Networking and data</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/fundamentals/local-caching"><div><span>Local data and caching</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-3-4" role="button" aria-expanded="false" aria-controls="sidenav-3-4"><span>From another platform?</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-3-4"><li class="nav-item"><a class="nav-link" href="/get-started/flutter-for/android-devs"><div><span>Flutter for Android devs</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/flutter-for/compose-devs"><div><span>Flutter for Jetpack Compose devs</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/flutter-for/swiftui-devs"><div><span>Flutter for SwiftUI devs</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/flutter-for/uikit-devs"><div><span>Flutter for UIKit devs</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/flutter-for/react-native-devs"><div><span>Flutter for React Native devs</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/flutter-for/web-devs"><div><span>Flutter for web devs</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/flutter-for/xamarin-forms-devs"><div><span>Flutter for Xamarin.Forms devs</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/flutter-for/declarative"><div><span>Introduction to declarative UI</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/flutter-for/dart-swift-concurrency"><div><span>Flutter versus Swift concurrency</span></div></a></li></ul></li><div class="sidenav-divider"></div><li class="nav-item"><a class="nav-link" href="/codelabs"><div><span>Codelabs</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook"><div><span>Cookbook</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://github.com/flutter/samples" target="_blank" rel="noopener"><div><span>Demos and samples</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-4" role="button" aria-expanded="false" aria-controls="sidenav-4"><span>Stay up to date</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-4"><li class="nav-item"><a class="nav-link" href="/release/upgrade"><div><span>Upgrade</span></div></a></li><li class="nav-item"><a class="nav-link" href="/release/archive"><div><span>SDK archive</span></div></a></li><div class="sidenav-divider"></div><li class="nav-item"><a class="nav-link" href="/release/whats-new"><div><span>What's new</span></div></a></li><li class="nav-item"><a class="nav-link" href="/release/release-notes"><div><span>Release notes</span></div></a></li><li class="nav-item"><a class="nav-link" href="/release/breaking-changes"><div><span>Breaking changes</span></div></a></li><li class="nav-item"><a class="nav-link" href="/release/compatibility-policy"><div><span>Compatibility policy</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-5" role="button" aria-expanded="false" aria-controls="sidenav-5"><span>App solutions</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-5"><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-5-1" role="button" aria-expanded="false" aria-controls="sidenav-5-1"><span>AI</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-5-1"><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-5-1-1" role="button" aria-expanded="false" aria-controls="sidenav-5-1-1"><span>AI Toolkit guide</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-5-1-1"><li class="nav-item"><a class="nav-link" href="/ai-toolkit"><div><span>Overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ai-toolkit/user-experience"><div><span>User experience</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ai-toolkit/feature-integration"><div><span>Feature integration</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ai-toolkit/custom-llm-providers"><div><span>Custom LLM providers</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ai-toolkit/chat-client-sample"><div><span>Chat client sample</span></div></a></li></ul></li><li class="nav-item"><a class="nav-link" href="https://www.youtube.com/watch?v=1AuzJEiHjO4" target="_blank" rel="noopener"><div><span>Build with Google AI Dart SDK (video)</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-5-2" role="button" aria-expanded="false" aria-controls="sidenav-5-2"><span>Firebase & Firestore</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-5-2"><li class="nav-item"><a class="nav-link" href="/data-and-backend/firebase"><div><span>Overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://firebase.google.com/docs/flutter" target="_blank" rel="noopener"><div><span>Discover Firebase for Flutter</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://www.youtube.com/watch?v=wUSkeTaBonA" target="_blank" rel="noopener"><div><span>Get to know Firebase for Flutter</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://firebase.google.com/codelabs/firebase-auth-in-flutter-apps" target="_blank" rel="noopener"><div><span>Add a user authentication flow to a Flutter app using FirebaseUI</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://firebase.google.com/codelabs/firebase-get-to-know-web" target="_blank" rel="noopener"><div><span>Get to know Firebase for web</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-5-3" role="button" aria-expanded="false" aria-controls="sidenav-5-3"><span>Games</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-5-3"><li class="nav-item"><a class="nav-link" href="/resources/games-toolkit"><div><span>Overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/games/achievements-leaderboard"><div><span>Add achievements and leaderboards</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://firebase.google.com/codelabs/build-leaderboards-with-firestore#0" target="_blank" rel="noopener"><div><span>Build leaderboards with Firestore</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/plugins/google-mobile-ads"><div><span>Add advertising</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/games/firestore-multiplayer"><div><span>Add multiplayer support</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://codelabs.developers.google.com/codelabs/flutter-in-app-purchases" target="_blank" rel="noopener"><div><span>Add in-app purchases</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://firebase.google.com/codelabs/firebase-auth-in-flutter-apps" target="_blank" rel="noopener"><div><span>Add user authentication</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://firebase.google.com/docs/crashlytics/get-started?platform=flutter" target="_blank" rel="noopener"><div><span>Debug using Crashlytics</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://codelabs.developers.google.com/codelabs/flutter-flame-brick-breaker" target="_blank" rel="noopener"><div><span>Intro to Flame with Flutter</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-5-4" role="button" aria-expanded="false" aria-controls="sidenav-5-4"><span>Monetization</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-5-4"><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-5-4-1" role="button" aria-expanded="false" aria-controls="sidenav-5-4-1"><span>Advertising</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-5-4-1"><li class="nav-item"><a class="nav-link" href="/resources/ads-overview"><div><span>Ads overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/plugins/google-mobile-ads"><div><span>Add advertising</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://codelabs.developers.google.com/codelabs/admob-ads-in-flutter" target="_blank" rel="noopener"><div><span>Add AdMob ads to your Flutter app</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://codelabs.developers.google.com/codelabs/admob-inline-ads-in-flutter" target="_blank" rel="noopener"><div><span>Add an AdMob banner and native inline ads</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://developers.google.com/admob/flutter/mediation" target="_blank" rel="noopener"><div><span>Google AdMob mediation</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://pub.dev/packages/interactive_media_ads" target="_blank" rel="noopener"><div><span>Interactive Media Ads SDK</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-5-4-2" role="button" aria-expanded="false" aria-controls="sidenav-5-4-2"><span>In-app purchases</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-5-4-2"><li class="nav-item"><a class="nav-link" href="/resources/in-app-purchases-overview"><div><span>In-app purchases overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://codelabs.developers.google.com/codelabs/flutter-in-app-purchases" target="_blank" rel="noopener"><div><span>Add in-app purchases</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-5-4-3" role="button" aria-expanded="false" aria-controls="sidenav-5-4-3"><span>Payments</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-5-4-3"><li class="nav-item"><a class="nav-link" href="/resources/payments-overview"><div><span>Payments overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://pub.dev/packages/pay" target="_blank" rel="noopener"><div><span>Google pay package</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li></ul></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-5-5" role="button" aria-expanded="false" aria-controls="sidenav-5-5"><span>Maps</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-5-5"><li class="nav-item"><a class="nav-link" href="https://codelabs.developers.google.com/codelabs/google-maps-in-flutter" target="_blank" rel="noopener"><div><span>Add Google maps to a Flutter app</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://developers.google.com/maps/flutter-package" target="_blank" rel="noopener"><div><span>Google Maps package</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-5-6" role="button" aria-expanded="false" aria-controls="sidenav-5-6"><span>News</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-5-6"><li class="nav-item"><a class="nav-link" href="/resources/news-toolkit"><div><span>Build a news app</span></div></a></li></ul></li></ul></li><li aria-hidden="true"><div class="sidenav-divider"></div></li><li class="nav-header">User interface</li><li class="nav-item"><a class="nav-link" href="/ui"><div><span>Introduction</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/widgets"><div><span>Widget catalog</span></div></a></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-10" role="button" aria-expanded="false" aria-controls="sidenav-10"><span>Layout</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-10"><li class="nav-item"><a class="nav-link" href="/ui/layout"><div><span>Introduction</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/layout/tutorial"><div><span>Build a layout</span></div></a></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-10-3" role="button" aria-expanded="false" aria-controls="sidenav-10-3"><span>Lists & grids</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-10-3"><li class="nav-item"><a class="nav-link" href="/cookbook/lists/basic-list"><div><span>Create and use lists</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/lists/horizontal-list"><div><span>Create a horizontal list</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/lists/grid-lists"><div><span>Create a grid view</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/lists/mixed-list"><div><span>Create lists with different types of items</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/lists/spaced-items"><div><span>Create lists with spaced items</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/lists/long-lists"><div><span>Work with long lists</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-10-4" role="button" aria-expanded="false" aria-controls="sidenav-10-4"><span>Scrolling</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-10-4"><li class="nav-item"><a class="nav-link" href="/ui/layout/scrolling"><div><span>Overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/layout/scrolling/slivers"><div><span>Use slivers to achieve fancy scrolling</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/lists/floating-app-bar"><div><span>Place a floating app bar above a list</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/effects/parallax-scrolling"><div><span>Create a scrolling parallax effect</span></div></a></li></ul></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-11" role="button" aria-expanded="false" aria-controls="sidenav-11"><span>Adaptive & responsive design</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-11"><li class="nav-item"><a class="nav-link" href="/ui/adaptive-responsive"><div><span>Overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/adaptive-responsive/general"><div><span>General approach</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/adaptive-responsive/safearea-mediaquery"><div><span>SafeArea & MediaQuery</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/adaptive-responsive/large-screens"><div><span>Large screens & foldables</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/adaptive-responsive/input"><div><span>User input & accessibility</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/adaptive-responsive/capabilities"><div><span>Capabilities & policies</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/adaptive-responsive/platform-adaptations"><div><span>Automatic platform adaptations</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/adaptive-responsive/best-practices"><div><span>Best practices</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/adaptive-responsive/more-info"><div><span>Additional resources</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-12" role="button" aria-expanded="false" aria-controls="sidenav-12"><span>Design & theming</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-12"><li class="nav-item"><a class="nav-link" href="/cookbook/design/themes"><div><span>Share styles with themes</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/design/material"><div><span>Material design</span></div></a></li><li class="nav-item"><a class="nav-link" href="/release/breaking-changes/material-3-migration"><div><span>Migrate to Material 3</span></div></a></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-12-4" role="button" aria-expanded="false" aria-controls="sidenav-12-4"><span>Text</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-12-4"><li class="nav-item"><a class="nav-link" href="/ui/design/text/typography"><div><span>Fonts & typography</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/design/fonts"><div><span>Use a custom font</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/design/package-fonts"><div><span>Export fonts from a package</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://pub.dev/packages/google_fonts" target="_blank" rel="noopener"><div><span>Google Fonts package</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-12-5" role="button" aria-expanded="false" aria-controls="sidenav-12-5"><span>Custom graphics</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-12-5"><li class="nav-item"><a class="nav-link" href="/ui/design/graphics/fragment-shaders"><div><span>Use custom fragment shaders</span></div></a></li></ul></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-13" role="button" aria-expanded="false" aria-controls="sidenav-13"><span>Interactivity</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-13"><li class="nav-item"><a class="nav-link" href="/ui/interactivity"><div><span>Add interactivity to your app</span></div></a></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-13-2" role="button" aria-expanded="false" aria-controls="sidenav-13-2"><span>Gestures</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-13-2"><li class="nav-item"><a class="nav-link" href="/ui/interactivity/gestures"><div><span>Introduction</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/gestures/handling-taps"><div><span>Handle taps</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/interactivity/gestures/drag-outside"><div><span>Drag an object outside an app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/effects/drag-a-widget"><div><span>Drag a UI element within an app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/gestures/ripples"><div><span>Add Material touch ripples</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/gestures/dismissible"><div><span>Implement swipe to dismiss</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-13-3" role="button" aria-expanded="false" aria-controls="sidenav-13-3"><span>Input & forms</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-13-3"><li class="nav-item"><a class="nav-link" href="/cookbook/forms/text-input"><div><span>Create and style a text field</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/forms/retrieve-input"><div><span>Retrieve the value of a text field</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/forms/text-field-changes"><div><span>Handle changes to a text field</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/forms/focus"><div><span>Manage focus in text fields</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/forms/validation"><div><span>Build a form with validation</span></div></a></li></ul></li><li class="nav-item"><a class="nav-link" href="/cookbook/design/snackbars"><div><span>Display a snackbar</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/interactivity/actions-and-shortcuts"><div><span>Implement actions & shortcuts</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/interactivity/focus"><div><span>Manage keyboard focus</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-14" role="button" aria-expanded="false" aria-controls="sidenav-14"><span>Assets & media</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-14"><li class="nav-item"><a class="nav-link" href="/ui/assets/assets-and-images"><div><span>Add assets and images</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/images/network-image"><div><span>Display images from the internet</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/images/fading-in-images"><div><span>Fade in images with a placeholder</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/plugins/play-video"><div><span>Play and pause a video</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/assets/asset-transformation"><div><span>Transform assets at build time</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-15" role="button" aria-expanded="false" aria-controls="sidenav-15"><span>Navigation & routing</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-15"><li class="nav-item"><a class="nav-link" href="/ui/navigation"><div><span>Overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/design/tabs"><div><span>Add tabs to your app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/navigation/navigation-basics"><div><span>Navigate to a new screen and back</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/navigation/passing-data"><div><span>Send data to a new screen</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/navigation/returning-data"><div><span>Return data from a screen</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/design/drawer"><div><span>Add a drawer to a screen</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/navigation/deep-linking"><div><span>Set up deep linking</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/navigation/set-up-app-links"><div><span>Set up app links for Android</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/navigation/set-up-universal-links"><div><span>Set up universal links for iOS</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/navigation/url-strategies"><div><span>Configure web URL strategies</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-16" role="button" aria-expanded="false" aria-controls="sidenav-16"><span>Animations & transitions</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-16"><li class="nav-item"><a class="nav-link" href="/ui/animations"><div><span>Introduction</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/animations/tutorial"><div><span>Tutorial</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/animations/implicit-animations"><div><span>Implicit animations</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/animation/animated-container"><div><span>Animate the properties of a container</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/animation/opacity-animation"><div><span>Fade a widget in and out</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/animations/hero-animations"><div><span>Hero animations</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/animation/page-route-animation"><div><span>Animate a page route transition</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/animation/physics-simulation"><div><span>Animate using a physics simulation</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/animations/staggered-animations"><div><span>Staggered animations</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/effects/staggered-menu-animation"><div><span>Create a staggered menu animation</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/animations/overview"><div><span>API overview</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-17" role="button" aria-expanded="false" aria-controls="sidenav-17"><span>Accessibility & internationalization</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-17"><li class="nav-item"><a class="nav-link" href="/ui/accessibility-and-internationalization/accessibility"><div><span>Accessibility</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/accessibility-and-internationalization/internationalization"><div><span>Internationalization</span></div></a></li></ul></li><li aria-hidden="true"><div class="sidenav-divider"></div></li><li class="nav-header">Beyond UI</li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-20" role="button" aria-expanded="false" aria-controls="sidenav-20"><span>Data & backend</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-20"><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-20-1" role="button" aria-expanded="false" aria-controls="sidenav-20-1"><span>State management</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-20-1"><li class="nav-item"><a class="nav-link" href="/data-and-backend/state-mgmt/intro"><div><span>Introduction</span></div></a></li><li class="nav-item"><a class="nav-link" href="/data-and-backend/state-mgmt/declarative"><div><span>Think declaratively</span></div></a></li><li class="nav-item"><a class="nav-link" href="/data-and-backend/state-mgmt/ephemeral-vs-app"><div><span>Ephemeral vs app state</span></div></a></li><li class="nav-item"><a class="nav-link" href="/data-and-backend/state-mgmt/simple"><div><span>Simple app state management</span></div></a></li><li class="nav-item"><a class="nav-link" href="/data-and-backend/state-mgmt/options"><div><span>Options</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-20-2" role="button" aria-expanded="false" aria-controls="sidenav-20-2"><span>Networking & http</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-20-2"><li class="nav-item"><a class="nav-link" href="/data-and-backend/networking"><div><span>Overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/networking/fetch-data"><div><span>Fetch data from the internet</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/networking/authenticated-requests"><div><span>Make authenticated requests</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/networking/send-data"><div><span>Send data to the internet</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/networking/update-data"><div><span>Update data over the internet</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/networking/delete-data"><div><span>Delete data on the internet</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/networking/web-sockets"><div><span>Communicate with WebSockets</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-20-3" role="button" aria-expanded="false" aria-controls="sidenav-20-3"><span>Serialization</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-20-3"><li class="nav-item"><a class="nav-link" href="/data-and-backend/serialization/json"><div><span>JSON serialization</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/networking/background-parsing"><div><span>Parse JSON in the background</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-20-4" role="button" aria-expanded="false" aria-controls="sidenav-20-4"><span>Persistence</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-20-4"><li class="nav-item"><a class="nav-link" href="/cookbook/persistence/key-value"><div><span>Store key-value data on disk</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/persistence/reading-writing-files"><div><span>Read and write files</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/persistence/sqlite"><div><span>Persist data with SQLite</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-20-5" role="button" aria-expanded="false" aria-controls="sidenav-20-5"><span>Firebase</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-20-5"><li class="nav-item"><a class="nav-link" href="/data-and-backend/firebase"><div><span>Overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://firebase.google.com/docs/flutter/setup" target="_blank" rel="noopener"><div><span>Add Firebase to your Flutter app</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li></ul></li><li class="nav-item"><a class="nav-link" href="/data-and-backend/google-apis"><div><span>Google APIs</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-21" role="button" aria-expanded="false" aria-controls="sidenav-21"><span>App architecture</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-21"><li class="nav-item"><a class="nav-link" href="/app-architecture"><div><span>Introduction</span></div></a></li><li class="nav-item"><a class="nav-link" href="/app-architecture/concepts"><div><span>Architecture concepts</span></div></a></li><li class="nav-item"><a class="nav-link" href="/app-architecture/guide"><div><span>Guide to app architecture</span></div></a></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-21-4" role="button" aria-expanded="false" aria-controls="sidenav-21-4"><span>Architecture case study</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-21-4"><li class="nav-item"><a class="nav-link" href="/app-architecture/case-study"><div><span>Overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="/app-architecture/case-study/ui-layer"><div><span>UI layer</span></div></a></li><li class="nav-item"><a class="nav-link" href="/app-architecture/case-study/data-layer"><div><span>Data layer</span></div></a></li><li class="nav-item"><a class="nav-link" href="/app-architecture/case-study/dependency-injection"><div><span>Dependency injection</span></div></a></li><li class="nav-item"><a class="nav-link" href="/app-architecture/case-study/testing"><div><span>Testing each layer</span></div></a></li></ul></li><li class="nav-item"><a class="nav-link" href="/app-architecture/recommendations"><div><span>Recommendations</span></div></a></li><li class="nav-item"><a class="nav-link" href="/app-architecture/design-patterns"><div><span>Design patterns</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-22" role="button" aria-expanded="false" aria-controls="sidenav-22"><span>Platform integration</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-22"><li class="nav-item"><a class="nav-link" href="/reference/supported-platforms"><div><span>Supported platforms</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/desktop"><div><span>Build desktop apps with Flutter</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/platform-channels"><div><span>Write platform-specific code</span></div></a></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-22-4" role="button" aria-expanded="false" aria-controls="sidenav-22-4"><span>Android</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-22-4"><li class="nav-item"><a class="nav-link" href="/platform-integration/android/install-android"><div><span>Add Android as build target</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/android/splash-screen"><div><span>Add a splash screen</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/android/predictive-back"><div><span>Add predictive back</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/android/c-interop"><div><span>Bind to native code</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/android/platform-views"><div><span>Host a native Android view</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/android/call-jetpack-apis"><div><span>Calling JetPack APIs</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/android/compose-activity"><div><span>Launch a Jetpack Compose activity</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/android/restore-state-android"><div><span>Restore state on Android</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/android/chromeos"><div><span>Target ChromeOS with Android</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-22-5" role="button" aria-expanded="false" aria-controls="sidenav-22-5"><span>iOS</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-22-5"><li class="nav-item"><a class="nav-link" href="/platform-integration/ios/install-ios"><div><span>Add iOS as build target</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/ios/ios-latest"><div><span>Flutter on latest iOS</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/ios/apple-frameworks"><div><span>Leverage Apple's system libraries</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/ios/launch-screen"><div><span>Add a launch screen</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/ios/ios-app-clip"><div><span>Add iOS App Clip support</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/ios/app-extensions"><div><span>Add iOS app extensions</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/ios/c-interop"><div><span>Bind to native code</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/ios/platform-views"><div><span>Host a native iOS view</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/ios/ios-debugging"><div><span>Enable debugging on iOS</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/ios/restore-state-ios"><div><span>Restore state on iOS</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-22-6" role="button" aria-expanded="false" aria-controls="sidenav-22-6"><span>Linux</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-22-6"><li class="nav-item"><a class="nav-link" href="/platform-integration/linux/install-linux"><div><span>Add Linux as build target</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/linux/building"><div><span>Build a Linux app</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-22-7" role="button" aria-expanded="false" aria-controls="sidenav-22-7"><span>macOS</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-22-7"><li class="nav-item"><a class="nav-link" href="/platform-integration/macos/install-macos"><div><span>Add macOS as build target</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/macos/building"><div><span>Build a macOS app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/macos/c-interop"><div><span>Bind to native code</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/macos/platform-views"><div><span>Host a native macOS view</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-22-8" role="button" aria-expanded="false" aria-controls="sidenav-22-8"><span>Web</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-22-8"><li class="nav-item"><a class="nav-link" href="/platform-integration/web"><div><span>Web support in Flutter</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/web/install-web"><div><span>Add web as build target</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/web/building"><div><span>Build a web app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/web/wasm"><div><span>Compile to WebAssembly</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/web/initialization"><div><span>Customize app initialization</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/web/embedding-flutter-web"><div><span>Add Flutter to any web app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/web/web-content-in-flutter"><div><span>Web content in Flutter</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/web/renderers"><div><span>Web renderers</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/web/web-images"><div><span>Display images on the web</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/web/faq"><div><span>Web FAQ</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-22-9" role="button" aria-expanded="false" aria-controls="sidenav-22-9"><span>Windows</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-22-9"><li class="nav-item"><a class="nav-link" href="/platform-integration/windows/install-windows"><div><span>Add Windows as build target</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/windows/building"><div><span>Build a Windows app</span></div></a></li></ul></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-23" role="button" aria-expanded="false" aria-controls="sidenav-23"><span>Packages & plugins</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-23"><li class="nav-item"><a class="nav-link" href="/packages-and-plugins/using-packages"><div><span>Use packages & plugins</span></div></a></li><li class="nav-item"><a class="nav-link" href="/packages-and-plugins/developing-packages"><div><span>Develop packages & plugins</span></div></a></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-23-3" role="button" aria-expanded="false" aria-controls="sidenav-23-3"><span>Swift Package Manager</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-23-3"><li class="nav-item"><a class="nav-link" href="/packages-and-plugins/swift-package-manager/for-app-developers"><div><span>For app developers</span></div></a></li><li class="nav-item"><a class="nav-link" href="/packages-and-plugins/swift-package-manager/for-plugin-authors"><div><span>For plugin authors</span></div></a></li></ul></li><div class="sidenav-divider"></div><li class="nav-item"><a class="nav-link" href="/packages-and-plugins/favorites"><div><span>Flutter Favorites</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://pub.dev/flutter" target="_blank" rel="noopener"><div><span>Package repository</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-24" role="button" aria-expanded="false" aria-controls="sidenav-24"><span>Testing & debugging</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-24"><li class="nav-header">Testing</li><li class="nav-item"><a class="nav-link" href="/testing/overview"><div><span>Overview</span></div></a></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-24-3" role="button" aria-expanded="false" aria-controls="sidenav-24-3"><span>Unit testing</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-24-3"><li class="nav-item"><a class="nav-link" href="/cookbook/testing/unit/introduction"><div><span>Introduction</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/testing/unit/mocking"><div><span>Mock dependencies</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-24-4" role="button" aria-expanded="false" aria-controls="sidenav-24-4"><span>Widget testing</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-24-4"><li class="nav-item"><a class="nav-link" href="/cookbook/testing/widget/introduction"><div><span>Introduction</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/testing/widget/finders"><div><span>Find widgets</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/testing/widget/scrolling"><div><span>Simulate scrolling</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/testing/widget/tap-drag"><div><span>Simulate user interaction</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-24-5" role="button" aria-expanded="false" aria-controls="sidenav-24-5"><span>Integration testing</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-24-5"><li class="nav-item"><a class="nav-link" href="/cookbook/testing/integration/introduction"><div><span>Introduction</span></div></a></li><li class="nav-item"><a class="nav-link" href="/testing/integration-tests"><div><span>Write and run an integration test</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/testing/integration/profiling"><div><span>Profile an integration test</span></div></a></li></ul></li><li class="nav-item"><a class="nav-link" href="/testing/testing-plugins"><div><span>Test a plugin</span></div></a></li><li class="nav-item"><a class="nav-link" href="/testing/plugins-in-tests"><div><span>Handle plugin code in tests</span></div></a></li><li class="nav-header">Debugging</li><li class="nav-item"><a class="nav-link" href="/testing/debugging"><div><span>Debugging tools</span></div></a></li><li class="nav-item"><a class="nav-link" href="/testing/code-debugging"><div><span>Debug your app programmatically</span></div></a></li><li class="nav-item"><a class="nav-link" href="/testing/native-debugging"><div><span>Use a native language debugger</span></div></a></li><li class="nav-item"><a class="nav-link" href="/testing/common-errors"><div><span>Common Flutter errors</span></div></a></li><li class="nav-item"><a class="nav-link" href="/testing/errors"><div><span>Handle errors</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/maintenance/error-reporting"><div><span>Report errors to a service</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-25" role="button" aria-expanded="false" aria-controls="sidenav-25"><span>Performance & optimization</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-25"><li class="nav-item"><a class="nav-link" href="/perf"><div><span>Overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/impeller"><div><span>Impeller</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/best-practices"><div><span>Performance best practices</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/app-size"><div><span>App size</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/deferred-components"><div><span>Deferred components</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/rendering-performance"><div><span>Rendering performance</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/ui-performance"><div><span>Performance profiling</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/web-performance"><div><span>Performance profiling for web</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/metrics"><div><span>Performance metrics</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/isolates"><div><span>Concurrency and isolates</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/faq"><div><span>Performance FAQ</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/appendix"><div><span>Appendix</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-26" role="button" aria-expanded="false" aria-controls="sidenav-26"><span>Deployment</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-26"><li class="nav-item"><a class="nav-link" href="/deployment/obfuscate"><div><span>Obfuscate Dart code</span></div></a></li><li class="nav-item"><a class="nav-link" href="/deployment/flavors"><div><span>Create app flavors for Android</span></div></a></li><li class="nav-item"><a class="nav-link" href="/deployment/flavors-ios"><div><span>Create app flavors for iOS and macOS</span></div></a></li><li class="nav-item"><a class="nav-link" href="/deployment/android"><div><span>Build and release an Android app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/deployment/ios"><div><span>Build and release an iOS app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/deployment/macos"><div><span>Build and release a macOS app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/deployment/linux"><div><span>Build and release a Linux app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/deployment/windows"><div><span>Build and release a Windows app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/deployment/web"><div><span>Build and release a web app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/deployment/cd"><div><span>Set up continuous deployment</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-27" role="button" aria-expanded="false" aria-controls="sidenav-27"><span>Add to an existing app</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-27"><li class="nav-item"><a class="nav-link" href="/add-to-app"><div><span>Introduction</span></div></a></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-27-2" role="button" aria-expanded="false" aria-controls="sidenav-27-2"><span>Add to an Android app</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-27-2"><li class="nav-item"><a class="nav-link" href="/add-to-app/android/project-setup"><div><span>Set up Android project</span></div></a></li><li class="nav-item"><a class="nav-link" href="/add-to-app/android/add-flutter-screen"><div><span>Add a single Flutter screen</span></div></a></li><li class="nav-item"><a class="nav-link" href="/add-to-app/android/add-flutter-fragment"><div><span>Add a Flutter Fragment</span></div></a></li><li class="nav-item"><a class="nav-link" href="/add-to-app/android/add-flutter-view"><div><span>Add a Flutter View</span></div></a></li><li class="nav-item"><a class="nav-link" href="/add-to-app/android/plugin-setup"><div><span>Use a Flutter plugin</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-27-3" role="button" aria-expanded="false" aria-controls="sidenav-27-3"><span>Add to an iOS app</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-27-3"><li class="nav-item"><a class="nav-link" href="/add-to-app/ios/project-setup"><div><span>Set up iOS project</span></div></a></li><li class="nav-item"><a class="nav-link" href="/add-to-app/ios/add-flutter-screen"><div><span>Add a single Flutter screen</span></div></a></li></ul></li><li class="nav-item"><a class="nav-link" href="/platform-integration/web/embedding-flutter-web"><div><span>Add to a web app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/add-to-app/debugging"><div><span>Debug embedded Flutter module</span></div></a></li><li class="nav-item"><a class="nav-link" href="/add-to-app/multiple-flutters"><div><span>Add multiple Flutter instances</span></div></a></li><li class="nav-item"><a class="nav-link" href="/add-to-app/performance"><div><span>Loading sequence and performance</span></div></a></li></ul></li><li aria-hidden="true"><div class="sidenav-divider"></div></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-29" role="button" aria-expanded="false" aria-controls="sidenav-29"><span>Tools & editors</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-29"><li class="nav-item"><a class="nav-link" href="/tools/android-studio"><div><span>Android Studio & IntelliJ</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/vs-code"><div><span>Visual Studio Code</span></div></a></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-29-3" role="button" aria-expanded="false" aria-controls="sidenav-29-3"><span>DevTools</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-29-3"><li class="nav-item"><a class="nav-link" href="/tools/devtools"><div><span>Overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/android-studio"><div><span>Run from Android Studio & IntelliJ</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/vscode"><div><span>Run from VS Code</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/cli"><div><span>Run from command line</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/inspector"><div><span>Flutter inspector</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/legacy-inspector"><div><span>Legacy Flutter inspector</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/performance"><div><span>Performance view</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/cpu-profiler"><div><span>CPU Profiler view</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/memory"><div><span>Memory view</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/console"><div><span>Debug console view</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/network"><div><span>Network view</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/debugger"><div><span>Debugger</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/logging"><div><span>Logging view</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/app-size"><div><span>App size tool</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/extensions"><div><span>DevTools extensions</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/deep-links"><div><span>Validate deep links</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/release-notes"><div><span>Release notes</span></div></a></li></ul></li><li class="nav-item"><a class="nav-link" href="/tools/sdk"><div><span>SDK overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/pubspec"><div><span>Flutter's pubspec options</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/flutter-fix"><div><span>Automated fixes</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/formatting"><div><span>Code formatting</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-30" role="button" aria-expanded="false" aria-controls="sidenav-30"><span>Flutter concepts</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-30"><li class="nav-item"><a class="nav-link" href="/resources/architectural-overview"><div><span>Architectural overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="/resources/inside-flutter"><div><span>Inside Flutter</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/layout/constraints"><div><span>Understanding constraints</span></div></a></li><li class="nav-item"><a class="nav-link" href="/testing/build-modes"><div><span>Flutter's build modes</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/hot-reload"><div><span>Hot reload</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-31" role="button" aria-expanded="false" aria-controls="sidenav-31"><span>Resources</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-31"><li class="nav-item"><a class="nav-link" href="/resources/faq"><div><span>FAQ</span></div></a></li><li class="nav-item"><a class="nav-link" href="/resources/books"><div><span>Books</span></div></a></li><li class="nav-item"><a class="nav-link" href="/resources/videos"><div><span>Videos</span></div></a></li><li class="nav-item"><a class="nav-link" href="/resources/courses"><div><span>Courses</span></div></a></li><li class="nav-item"><a class="nav-link" href="/resources/bootstrap-into-dart"><div><span>Learn Dart</span></div></a></li><li class="nav-item"><a class="nav-link" href="/resources/support"><div><span>Get support</span></div></a></li><div class="sidenav-divider"></div><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-31-8" role="button" aria-expanded="false" aria-controls="sidenav-31-8"><span>Contribute</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-31-8"><li class="nav-item"><a class="nav-link" href="/resources/bug-reports"><div><span>Create useful bug reports</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://github.com/flutter/flutter/blob/main/CONTRIBUTING.md" target="_blank" rel="noopener"><div><span>Contribute to Flutter</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" href="/resources/design-docs"><div><span>Discover proposed features</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-31-9" role="button" aria-expanded="false" aria-controls="sidenav-31-9"><span>Reference</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-31-9"><li class="nav-item"><a class="nav-link" href="/dash"><div><span>Who is Dash?</span></div></a></li><li class="nav-item"><a class="nav-link" href="/reference/widgets"><div><span>Widget index</span></div></a></li><li class="nav-item"><a class="nav-link" href="/reference/flutter-cli"><div><span>flutter CLI</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://api.flutter.dev" target="_blank" rel="noopener"><div><span>API docs</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li></ul></li></ul></li></ul></nav></div><main class="site-content"><div id="site-toc--side" class="site-toc"><header class="site-toc__title">Contents</header><ul class="section-nav"><li class="toc-entry nav-item"><a class="nav-link" href="#understanding-layout-in-flutter">Understanding layout in Flutter</a><ul class="nav"><li class="toc-entry nav-item"><a class="nav-link" href="#constraints">Constraints</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#box-types">Box types</a></li></ul></li><li class="toc-entry nav-item"><a class="nav-link" href="#lay-out-a-single-widget">Lay out a single widget</a><ul class="nav"><li class="toc-entry nav-item"><a class="nav-link" href="#container">Container</a></li></ul></li><li class="toc-entry nav-item"><a class="nav-link" href="#layout-multiple-widgets-vertically-or-horizontally">Layout multiple widgets vertically or horizontally</a><ul class="nav"><li class="toc-entry nav-item"><a class="nav-link" href="#align-widgets-within-rows-and-columns">Align widgets within rows and columns</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#sizing-widgets-within-rows-and-columns">Sizing widgets within rows and columns</a></li></ul></li><li class="toc-entry nav-item"><a class="nav-link" href="#devtools-and-debugging-layout">DevTools and debugging layout</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#scrolling-widgets">Scrolling widgets</a><ul class="nav"><li class="toc-entry nav-item"><a class="nav-link" href="#listview">ListView</a></li></ul></li><li class="toc-entry nav-item"><a class="nav-link" href="#adaptive-layouts">Adaptive layouts</a><ul class="nav"><li class="toc-entry nav-item"><a class="nav-link" href="#the-builder-pattern">The builder pattern</a></li></ul></li><li class="toc-entry nav-item"><a class="nav-link" href="#additional-resources">Additional resources</a><ul class="nav"><li class="toc-entry nav-item"><a class="nav-link" href="#api-reference">API reference</a></li></ul></li><li class="toc-entry nav-item"><a class="nav-link" href="#feedback">Feedback</a></li></ul></div><article><header class="site-content__title"><h1 id="document-title">Layouts</h1><nav class="breadcrumbs" aria-label="breadcrumb"><ol vocab="https://schema.org/" typeof="BreadcrumbList"><li class="breadcrumb-item" property="itemListElement" typeof="ListItem"><a href="/get-started" property="item" typeof="WebPage"><span property="name">Get started</span></a><meta property="position" content="0"><span class="material-symbols child-icon" aria-hidden="true">chevron_right</span></li><li class="breadcrumb-item" property="itemListElement" typeof="ListItem"><a href="/get-started/fundamentals" property="item" typeof="WebPage"><span property="name">Fundamentals</span></a><meta property="position" content="1"><span class="material-symbols child-icon" aria-hidden="true">chevron_right</span></li><li class="breadcrumb-item active" property="itemListElement" typeof="ListItem" aria-current="page"><a href="/get-started/fundamentals/layout" property="item" typeof="WebPage"><span property="name">Layouts</span></a><meta property="position" content="2"></li></ol></nav></header><div id="site-toc--inline" class="site-toc toc-collapsible toc-collapsed"><header class="site-toc__title">Contents <span class="site-toc--inline__toggle toc-toggle-down" title="Expand table of contents"><i class="material-symbols" aria-hidden="true">keyboard_arrow_down</i></span> <span class="site-toc--inline__toggle toc-toggle-up" title="Collapse table of contents"><i class="material-symbols" aria-hidden="true">keyboard_arrow_up</i></span></header><ul class="section-nav"><li class="toc-entry"><a href="#understanding-layout-in-flutter">Understanding layout in Flutter</a><ul><li class="toc-entry"><a href="#constraints">Constraints</a></li><li class="toc-entry"><a href="#box-types">Box types</a></li></ul></li><li class="toc-entry"><a href="#lay-out-a-single-widget">Lay out a single widget</a><ul><li class="toc-entry"><a href="#container">Container</a></li></ul></li><li class="toc-entry"><a href="#layout-multiple-widgets-vertically-or-horizontally">Layout multiple widgets vertically or horizontally</a><ul><li class="toc-entry"><a href="#align-widgets-within-rows-and-columns">Align widgets within rows and columns</a></li><li class="toc-entry"><a href="#sizing-widgets-within-rows-and-columns">Sizing widgets within rows and columns</a></li></ul></li><li class="toc-entry"><a href="#devtools-and-debugging-layout">DevTools and debugging layout</a></li><li class="toc-entry"><a href="#scrolling-widgets">Scrolling widgets</a><ul><li class="toc-entry"><a href="#listview">ListView</a></li></ul></li><li class="toc-entry"><a href="#adaptive-layouts">Adaptive layouts</a><ul><li class="toc-entry"><a href="#the-builder-pattern">The builder pattern</a></li></ul></li><li class="toc-entry"><a href="#additional-resources">Additional resources</a><ul><li class="toc-entry"><a href="#api-reference">API reference</a></li></ul></li><li class="toc-entry"><a href="#feedback">Feedback</a></li></ul><span class="site-toc--inline__toggle toc-toggle-more-items" title="Expand table of contents"><i class="material-symbols" aria-hidden="true">more_horiz</i></span></div><p>Given that Flutter is a UI toolkit, you'll spend a lot of time creating layouts with Flutter widgets. In this section, you'll learn how to build layouts with some of the most common layout widgets. You'll use Flutter DevTools (also called Dart DevTools) to understand how Flutter is creating your layout. Finally, you'll encounter and debug one of Flutter's most common layout errors, the dreaded "unbounded constraints" error.</p><div class="header-wrapper"><h2 id="understanding-layout-in-flutter">Understanding layout in Flutter</h2><a class="heading-link" href="#understanding-layout-in-flutter" aria-label="Link to 'Understanding layout in Flutter' section">#</a></div><p>The core of Flutter's layout mechanism is widgets. In Flutter, almost everything is a widget — even layout models are widgets. The images, icons, and text that you see in a Flutter app are all widgets. Things you don't see are also widgets, such as the rows, columns, and grids that arrange, constrain, and align the visible widgets.</p><p>You create a layout by composing widgets to build more complex widgets. For example, the diagram below shows 3 icons with a label under each one, and the corresponding widget tree:</p><img src="/assets/images/docs/fwe/layout/simple_row_column_widget_tree.png" alt="A diagram that shows widget composition with a series of lines and nodes."><p>In this example, there's a row of 3 columns where each column contains an icon and a label. All layouts, no matter how complex, are created by composing these layout widgets.</p><div class="header-wrapper"><h3 id="constraints">Constraints</h3><a class="heading-link" href="#constraints" aria-label="Link to 'Constraints' section">#</a></div><p>Understanding constraints in Flutter is an important part of understanding how layout works in Flutter.</p><p>Layout, in a general sense, refers to the size of the widgets and their positions on the screen. The size and position of any given widget is constrained by its parent; it can't have any size it wants, and it doesn't decide its own place on the screen. Instead, size and position are determined by a conversation between a widget and its parent.</p><p>In the simplest example, the layout conversation looks like this:</p><ol><li>A widget receives its constraints from its parent.</li><li>A constraint is just a set of 4 doubles: a minimum and maximum width, and a minimum and maximum height.</li><li>The widget determines what size it should be within those constraints, and passes its width and height back to the parent.</li><li>The parent looks at the size it wants to be and how it should be aligned, and sets the widget's position accordingly. Alignment can be set explicitly, using a variety of widgets like <code>Center</code>, and the alignment properties on <code>Row</code> and <code>Column</code>.</li></ol><p>In Flutter, this layout conversation is often expressed with the simplified phrase, "Constraints go down. Sizes go up. Parent sets the position."</p><div class="header-wrapper"><h3 id="box-types">Box types</h3><a class="heading-link" href="#box-types" aria-label="Link to 'Box types' section">#</a></div><p>In Flutter, widgets are rendered by their underlying <a href="https://api.flutter.dev/flutter/rendering/RenderBox-class.html"><code>RenderBox</code></a> objects. These objects determine how to handle the constraints they're passed.</p><p>Generally, there are three kinds of boxes:</p><ul><li>Those that try to be as big as possible. For example, the boxes used by <a href="https://api.flutter.dev/flutter/widgets/Center-class.html"><code>Center</code></a> and <a href="https://api.flutter.dev/flutter/widgets/ListView-class.html"><code>ListView</code></a>.</li><li>Those that try to be the same size as their children. For example, the boxes used by <a href="https://api.flutter.dev/flutter/widgets/Transform-class.html"><code>Transform</code></a> and <a href="https://api.flutter.dev/flutter/widgets/Opacity-class.html"><code>Opacity</code></a></li><li>Those that try to be a particular size. For example, the boxes used by <a href="https://api.flutter.dev/flutter/widgets/Image-class.html"><code>Image</code></a> and <a href="https://api.flutter.dev/flutter/widgets/Text-class.html"><code>Text</code></a>.</li></ul><p>Some widgets, for example <a href="https://api.flutter.dev/flutter/widgets/Container-class.html"><code>Container</code></a>, vary from type to type based on their constructor arguments. The <code>Container</code> constructor defaults to trying to be as big as possible, but if you give it a width, for instance, it tries to honor that and be that particular size.</p><p>Others, for example <a href="https://api.flutter.dev/flutter/widgets/Row-class.html"><code>Row</code></a> and <a href="https://api.flutter.dev/flutter/widgets/Column-class.html"><code>Column</code></a> (flex boxes) vary based on the constraints they are given. Read more about flex boxes and constraints in the <a href="/ui/layout/constraints">Understanding Constraints article</a>.</p><div class="header-wrapper"><h2 id="lay-out-a-single-widget">Lay out a single widget</h2><a class="heading-link" href="#lay-out-a-single-widget" aria-label="Link to 'Lay out a single widget' section">#</a></div><p>To lay out a single widget in Flutter, wrap a visible widget, such as <code>Text</code> or <code>Image</code> with a widget that can change its position on a screen, such as a <code>Center</code> widget.</p><aside class="alert alert-info"><div class="alert-header"><i class="material-symbols" aria-hidden="true">info</i> <span>Note</span></div><div class="alert-content"><p>The examples on the page use a widget called <code>BorderedImage</code>. This is a custom widget, and is used here to hide the code that isn't relevant to this topic.</p></div></aside><div class="code-block-wrapper language-dart"><div class="code-block-body"><span class="code-block-language" title="Language dart">dart</span><pre class="shiki dash-light" tabindex="0"><code><span class="line"><span style="color:#0468D7">Widget</span><span style="color:#6200EE"> build</span><span style="color:#222222">(</span><span style="color:#0468D7">BuildContext</span><span style="color:#222222"> context) {</span></span> return</span><span style="color:#0468D7"> Center</span><span style="color:#222222">(</span></span> child: </span><span style="color:#0468D7">BorderedImage</span><span style="color:#222222">(),</span></span> );</span></span> }</span></span></code></pre></div></div><p>The following figure shows a widget that isn't aligned on the left, and a widget that has been centered on the right.</p><img src="/assets/images/docs/fwe/layout/center.png" alt="A screenshot of a centered widget and a screenshot of a widget that hasn't been centered."><p>All layout widgets have either of the following:</p><ul><li>A <code>child</code> property if they take a single child—for example, <code>Center</code>, <code>Container</code>, or <code>Padding</code>.</li><li>A <code>children</code> property if they take a list of widgets—for example, <code>Row</code>, <code>Column</code>, <code>ListView</code>, or <code>Stack</code>.</li></ul><div class="header-wrapper"><h3 id="container">Container</h3><a class="heading-link" href="#container" aria-label="Link to 'Container' section">#</a></div><p><code>Container</code> is a convenience widget that's made up of several widgets responsible for layout, painting, positioning, and sizing. In regard to layout, it can be used to add padding and margins to a widget. There is also a <code>Padding</code> widget that could be used here to the same effect. The following example uses a <code>Container</code>.</p><div class="code-block-wrapper language-dart"><div class="code-block-body"><span class="code-block-language" title="Language dart">dart</span><pre class="shiki dash-light" tabindex="0"><code><span class="line"><span style="color:#0468D7">Widget</span><span style="color:#6200EE"> build</span><span style="color:#222222">(</span><span style="color:#0468D7">BuildContext</span><span style="color:#222222"> context) {</span></span> return</span><span style="color:#0468D7"> Container</span><span style="color:#222222">(</span></span> padding: </span><span style="color:#0468D7">EdgeInsets</span><span style="color:#222222">.</span><span style="color:#6200EE">all</span><span style="color:#222222">(</span><span style="color:#0C7064">16.0</span><span style="color:#222222">),</span></span> child: </span><span style="color:#0468D7">BorderedImage</span><span style="color:#222222">(),</span></span> );</span></span> }</span></span></code></pre></div></div><p>The following figure shows a widget without padding on the left, and a widget with padding on the right.</p><img src="/assets/images/docs/fwe/layout/padding.png" alt="A screenshot of a widget with padding and a screenshot of a widget without padding."><p>To create more complex layouts in Flutter, you can compose many widgets. For example, you can combine <code>Container</code> and <code>Center</code>:</p><div class="code-block-wrapper language-dart"><div class="code-block-body"><span class="code-block-language" title="Language dart">dart</span><pre class="shiki dash-light" tabindex="0"><code><span class="line"><span style="color:#0468D7">Widget</span><span style="color:#6200EE"> build</span><span style="color:#222222">(</span><span style="color:#0468D7">BuildContext</span><span style="color:#222222"> context) {</span></span> return</span><span style="color:#0468D7"> Center</span><span style="color:#222222">(</span></span> Container</span><span style="color:#222222">(</span></span> padding: </span><span style="color:#0468D7">EdgeInsets</span><span style="color:#222222">.</span><span style="color:#6200EE">all</span><span style="color:#222222">(</span><span style="color:#0C7064">16.0</span><span style="color:#222222">),</span></span> child: </span><span style="color:#0468D7">BorderedImage</span><span style="color:#222222">(),</span></span> ),</span></span> );</span></span> }</span></span></code></pre></div></div><div class="header-wrapper"><h2 id="layout-multiple-widgets-vertically-or-horizontally">Layout multiple widgets vertically or horizontally</h2><a class="heading-link" href="#layout-multiple-widgets-vertically-or-horizontally" aria-label="Link to 'Layout multiple widgets vertically or horizontally' section">#</a></div><p>One of the most common layout patterns is to arrange widgets vertically or horizontally. You can use a <code>Row</code> widget to arrange widgets horizontally, and a <code>Column</code> widget to arrange widgets vertically. The first figure on this page used both.</p><p>This is the most basic example of using a <code>Row</code> widget.</p><figure class="code-and-image"><div class=""><div class="code-block-wrapper language-dart"><div class="code-block-body"><span class="code-block-language" title="Language dart">dart</span><pre class="shiki dash-light" tabindex="0"><code><span class="line"><span style="color:#0468D7">Widget</span><span style="color:#6200EE"> build</span><span style="color:#222222">(</span><span style="color:#0468D7">BuildContext</span><span style="color:#222222"> context) {</span></span> return</span><span style="color:#0468D7"> Row</span><span style="color:#222222">(</span></span> children: [</span></span> BorderedImage</span><span style="color:#222222">(),</span></span> BorderedImage</span><span style="color:#222222">(),</span></span> BorderedImage</span><span style="color:#222222">(),</span></span> ],</span></span> );</span></span> }</span></span></code></pre></div></div></div><div><img src="/assets/images/docs/fwe/layout/row.png" class="" alt="A screenshot of a row widget with three children" style=""><figcaption class="figure-caption">This figure shows a row widget with three children.</figcaption></div></figure><p>Each child of <code>Row</code> or <code>Column</code> can be rows and columns themselves, combining to make a complex layout. For example, you could add labels to each of the images in the example above using columns.</p><figure class="code-and-image"><div class=""><div class="code-block-wrapper language-dart"><div class="code-block-body"><span class="code-block-language" title="Language dart">dart</span><pre class="shiki dash-light" tabindex="0"><code><span class="line"><span style="color:#0468D7">Widget</span><span style="color:#6200EE"> build</span><span style="color:#222222">(</span><span style="color:#0468D7">BuildContext</span><span style="color:#222222"> context) {</span></span> return</span><span style="color:#0468D7"> Row</span><span style="color:#222222">(</span></span> children: [</span></span> Column</span><span style="color:#222222">(</span></span> children: [</span></span> BorderedImage</span><span style="color:#222222">(),</span></span> Text</span><span style="color:#222222">(</span><span style="color:#0C7064">'Dash 1'</span><span style="color:#222222">),</span></span> ],</span></span> ),</span></span> Column</span><span style="color:#222222">(</span></span> children: [</span></span> BorderedImage</span><span style="color:#222222">(),</span></span> Text</span><span style="color:#222222">(</span><span style="color:#0C7064">'Dash 2'</span><span style="color:#222222">),</span></span> ],</span></span> ),</span></span> Column</span><span style="color:#222222">(</span></span> children: [</span></span> BorderedImage</span><span style="color:#222222">(),</span></span> Text</span><span style="color:#222222">(</span><span style="color:#0C7064">'Dash 3'</span><span style="color:#222222">),</span></span> ],</span></span> ),</span></span> ],</span></span> );</span></span> }</span></span></code></pre></div></div></div><div><img src="/assets/images/docs/fwe/layout/nested_row_column.png" class="" alt="A screenshot of a row of three widgets, each of which has a label underneath it." style=""><figcaption class="figure-caption">This figure shows a row widget with three children, each of which is a column.</figcaption></div></figure><div class="header-wrapper"><h3 id="align-widgets-within-rows-and-columns">Align widgets within rows and columns</h3><a class="heading-link" href="#align-widgets-within-rows-and-columns" aria-label="Link to 'Align widgets within rows and columns' section">#</a></div><p>In the following example, the widgets are each 200 pixels wide, and the viewport is 700 pixels wide. The widgets are consequently aligned to the left, one after the other, with all the extra space on the right.</p><img src="/assets/images/docs/fwe/layout/left_alignment.png" alt="A diagram that shows three widgets laid out in a row. Each child widget is labeled as 200px wide, and the blank space on the right is labeled as 100px wide."><p>You control how a row or column aligns its children using the <code>mainAxisAlignment</code> and <code>crossAxisAlignment</code> properties. For a row, the main axis runs horizontally and the cross axis runs vertically. For a column, the main axis runs vertically and the cross axis runs horizontally.</p><img src="/assets/images/docs/fwe/layout/axes_diagram.png" alt="A diagram that shows the direction of the main axis and cross axis in both rows and columns"><p>Setting the main axis alignment to <code>spaceEvenly</code> divides the free horizontal space evenly between, before, and after each image.</p><figure class="code-and-image"><div class=""><div class="code-block-wrapper language-dart"><div class="code-block-body"><span class="code-block-language" title="Language dart">dart</span><pre class="shiki dash-light" tabindex="0"><code><span class="line"><span style="color:#0468D7">Widget</span><span style="color:#6200EE"> build</span><span style="color:#222222">(</span><span style="color:#0468D7">BuildContext</span><span style="color:#222222"> context) {</span></span> return</span><span style="color:#0468D7"> Row</span><span style="color:#222222">(</span></span> </span><mark class="highlight"><span style="color:#222222">mainAxisAlignment: </span><span style="color:#0468D7">MainAxisAlignment</span><span style="color:#222222">.spaceEvenly</span></mark><span style="color:#222222">,</span></span> children: [</span></span> BorderedImage</span><span style="color:#222222">(),</span></span> BorderedImage</span><span style="color:#222222">(),</span></span> BorderedImage</span><span style="color:#222222">(),</span></span> ],</span></span> );</span></span> }</span></span></code></pre></div></div></div><div><img src="/assets/images/docs/fwe/layout/space_evenly.png" class="" alt="A screenshot of three widgets, spaced evenly from each other." style=""><figcaption class="figure-caption">This figure shows a row widget with three children, which are aligned with the MainAxisAlignment.spaceEvenly constant.</figcaption></div></figure><p>Columns work the same way as rows. The following example shows a column of 3 images, each is 100 pixels high. The height of the render box (in this case, the entire screen) is more than 300 pixels, so setting the main axis alignment to <code>spaceEvenly</code> divides the free vertical space evenly between, above, and below each image.</p><img src="/assets/images/docs/fwe/layout/col_space_evenly.png" alt="A screenshot of a three widgets laid out vertically, using a column widget."><p>The <a href="https://api.flutter.dev/flutter/rendering/MainAxisAlignment.html"><code>MainAxisAlignment</code></a> and <a href="https://api.flutter.dev/flutter/rendering/CrossAxisAlignment.html"><code>CrossAxisAlignment</code></a> enums offer a variety of constants for controlling alignment.</p><p>Flutter includes other widgets that can be used for alignment, notably the <code>Align</code> widget.</p><div class="header-wrapper"><h3 id="sizing-widgets-within-rows-and-columns">Sizing widgets within rows and columns</h3><a class="heading-link" href="#sizing-widgets-within-rows-and-columns" aria-label="Link to 'Sizing widgets within rows and columns' section">#</a></div><p>When a layout is too large to fit a device, a yellow and black striped pattern appears along the affected edge. In this example, the viewport is 400 pixels wide, and each child is 150 pixels wide.</p><img src="/assets/images/docs/fwe/layout/overflowing_row.png" alt="A screenshot of a row of widgets that are wider than their viewport."><p>Widgets can be sized to fit within a row or column by using the <code>Expanded</code> widget. To fix the previous example where the row of images is too wide for its render box, wrap each image with an <a href="https://api.flutter.dev/flutter/widgets/Expanded-class.html"><code>Expanded</code></a> widget.</p><figure class="code-and-image"><div class=""><div class="code-block-wrapper language-dart"><div class="code-block-body"><span class="code-block-language" title="Language dart">dart</span><pre class="shiki dash-light" tabindex="0"><code><span class="line"><span style="color:#0468D7">Widget</span><span style="color:#6200EE"> build</span><span style="color:#222222">(</span><span style="color:#0468D7">BuildContext</span><span style="color:#222222"> context) {</span></span> return</span><span style="color:#BD2314"> const</span><span style="color:#0468D7"> Row</span><span style="color:#222222">(</span></span> children: [</span></span> </span><mark class="highlight"><span style="color:#0468D7">Expanded</span></mark><span style="color:#222222">(</span></span> child: </span><span style="color:#0468D7">BorderedImage</span><span style="color:#222222">(width: </span><span style="color:#0C7064">150</span><span style="color:#222222">, height: </span><span style="color:#0C7064">150</span><span style="color:#222222">),</span></span> ),</span></span> </span><mark class="highlight"><span style="color:#0468D7">Expanded</span></mark><span style="color:#222222">(</span></span> child: </span><span style="color:#0468D7">BorderedImage</span><span style="color:#222222">(width: </span><span style="color:#0C7064">150</span><span style="color:#222222">, height: </span><span style="color:#0C7064">150</span><span style="color:#222222">),</span></span> ),</span></span> </span><mark class="highlight"><span style="color:#0468D7">Expanded</span></mark><span style="color:#222222">(</span></span> child: </span><span style="color:#0468D7">BorderedImage</span><span style="color:#222222">(width: </span><span style="color:#0C7064">150</span><span style="color:#222222">, height: </span><span style="color:#0C7064">150</span><span style="color:#222222">),</span></span> ),</span></span> ],</span></span> );</span></span> }</span></span></code></pre></div></div></div><div><img src="/assets/images/docs/fwe/layout/expanded_row.png" class="" alt="A screenshot of three widgets, which take up exactly the amount of space available on the main axis. All three widgets are equal width." style=""><figcaption class="figure-caption">This figure shows a row widget with three children that are wrapped with `Expanded` widgets.</figcaption></div></figure><p>The <code>Expanded</code> widget can also dictate how much space a widget should take up relative to its siblings. For example, perhaps you want a widget to occupy twice as much space as its siblings. For this, use the <code>Expanded</code> widgets <code>flex</code> property, an integer that determines the flex factor for a widget. The default flex factor is 1. The following code sets the flex factor of the middle image to 2:</p><figure class="code-and-image"><div class=""><div class="code-block-wrapper language-dart"><div class="code-block-body"><span class="code-block-language" title="Language dart">dart</span><pre class="shiki dash-light" tabindex="0"><code><span class="line"><span style="color:#0468D7">Widget</span><span style="color:#6200EE"> build</span><span style="color:#222222">(</span><span style="color:#0468D7">BuildContext</span><span style="color:#222222"> context) {</span></span> return</span><span style="color:#BD2314"> const</span><span style="color:#0468D7"> Row</span><span style="color:#222222">(</span></span> children: [</span></span> Expanded</span><span style="color:#222222">(</span></span> child: </span><span style="color:#0468D7">BorderedImage</span><span style="color:#222222">(width: </span><span style="color:#0C7064">150</span><span style="color:#222222">, height: </span><span style="color:#0C7064">150</span><span style="color:#222222">),</span></span> ),</span></span> Expanded</span><span style="color:#222222">(</span></span> </span><mark class="highlight"><span style="color:#222222">flex: </span><span style="color:#0C7064">2</span></mark><span style="color:#222222">,</span></span> child: </span><span style="color:#0468D7">BorderedImage</span><span style="color:#222222">(width: </span><span style="color:#0C7064">150</span><span style="color:#222222">, height: </span><span style="color:#0C7064">150</span><span style="color:#222222">),</span></span> ),</span></span> Expanded</span><span style="color:#222222">(</span></span> child: </span><span style="color:#0468D7">BorderedImage</span><span style="color:#222222">(width: </span><span style="color:#0C7064">150</span><span style="color:#222222">, height: </span><span style="color:#0C7064">150</span><span style="color:#222222">),</span></span> ),</span></span> ],</span></span> );</span></span> }</span></span></code></pre></div></div></div><div><img src="/assets/images/docs/fwe/layout/flex_2_row.png" class="" alt="A screenshot of three widgets, which take up exactly the amount of space available on the main axis. The widget in the center is twice as wide as the widgets on the left and right." style=""><figcaption class="figure-caption">This figure shows a row widget with three children which are wrapped with `Expanded` widgets. The center child has it's `flex` property set to 2.</figcaption></div></figure><div class="header-wrapper"><h2 id="devtools-and-debugging-layout">DevTools and debugging layout</h2><a class="heading-link" href="#devtools-and-debugging-layout" aria-label="Link to 'DevTools and debugging layout' section">#</a></div><p>In certain situations, a box's constraint is unbounded, or infinite. This means that either the maximum width or the maximum height is set to <a href="https://api.flutter.dev/flutter/dart-core/double/infinity-constant.html"><code>double.infinity</code></a>. A box that tries to be as big as possible won't function usefully when given an unbounded constraint and, in debug mode, throws an exception.</p><p>The most common case where a render box ends up with an unbounded constraint is within a flex box (<a href="https://api.flutter.dev/flutter/widgets/Row-class.html"><code>Row</code></a> or <a href="https://api.flutter.dev/flutter/widgets/Column-class.html"><code>Column</code></a>), and within a scrollable region (such as <a href="https://api.flutter.dev/flutter/widgets/ListView-class.html"><code>ListView</code></a> and other <a href="https://api.flutter.dev/flutter/widgets/Scrollview-class.html"><code>ScrollView</code></a> subclasses). <code>ListView</code>, for example, tries to expand to fit the space available in its cross-direction (perhaps it's a vertically-scrolling block and tries to be as wide as its parent). If you nest a vertically scrolling <code>ListView</code> inside a horizontally scrolling <code>ListView</code>, the inner list tries to be as wide as possible, which is infinitely wide, since the outer one is scrollable in that direction.</p><p>Perhaps the most common error you'll run into while building a Flutter application is due to incorrectly using layout widgets, and is referred to as the "unbounded constraints" error.</p><p>If there was only one type error you should be prepared to confront when you first start building Flutter apps, it would be this one.</p><iframe width="560" height="315" src="https://www.youtube.com/embed/jckqXR5CrPI" title="Decoding Flutter: Unbounded height and width" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen loading="lazy"></iframe><br><p><a href="https://www.youtube.com/watch/jckqXR5CrPI" target="_blank" rel="noopener" title="Open 'Decoding Flutter: Unbounded height and width' video in new tab">Decoding Flutter: Unbounded height and width</a></p><aside class="alert alert-info"><div class="alert-header"><i class="material-symbols" aria-hidden="true">info</i> <span>The Widget inspector</span></div><div class="alert-content"><p>Flutter has a robust suite of DevTools that help you work with any number of aspects of Flutter development. The "Widget Inspector" tool is particularly useful when building and debugging layouts (and working with widgets in general).</p><p><a href="/tools/devtools/inspector">Learn more about the Flutter inspector</a>.</p></div></aside><div class="header-wrapper"><h2 id="scrolling-widgets">Scrolling widgets</h2><a class="heading-link" href="#scrolling-widgets" aria-label="Link to 'Scrolling widgets' section">#</a></div><p>Flutter has many built-in widgets that automatically scroll and also offers a variety of widgets that you can customize to create specific scrolling behavior. On this page, you'll see how to use the most common widget for making any page scrollable, as well as a widget for creating scrollable lists.</p><div class="header-wrapper"><h3 id="listview">ListView</h3><a class="heading-link" href="#listview" aria-label="Link to 'ListView' section">#</a></div><p><code>ListView</code> is a column-like widget that automatically provides scrolling when its content is longer than its render box. The most basic way to use a <code>ListView</code> is very similar to using a <code>Column</code> or <code>Row</code>. Unlike a column or row, a <code>ListView</code> requires its children to take up all the available space on the cross axis, as shown in the example below.</p><figure class="code-and-image"><div class=""><div class="code-block-wrapper language-dart"><div class="code-block-body"><span class="code-block-language" title="Language dart">dart</span><pre class="shiki dash-light" tabindex="0"><code><span class="line"><span style="color:#0468D7">Widget</span><span style="color:#6200EE"> build</span><span style="color:#222222">(</span><span style="color:#0468D7">BuildContext</span><span style="color:#222222"> context) {</span></span> return</span><span style="color:#0468D7"> </span><mark class="highlight"><span style="color:#0468D7">ListView</span></mark><span style="color:#222222">(</span></span> children: </span><span style="color:#BD2314">const</span><span style="color:#222222"> [</span></span> BorderedImage</span><span style="color:#222222">(),</span></span> BorderedImage</span><span style="color:#222222">(),</span></span> BorderedImage</span><span style="color:#222222">(),</span></span> ],</span></span> );</span></span> }</span></span></code></pre></div></div></div><div><img src="/assets/images/docs/fwe/layout/basic_listview.png" class="" alt="A screenshot of three widgets laid out vertically. They have expanded to take up all available space on the cross axis." style=""><figcaption class="figure-caption">This figure shows a ListView widget with three children.</figcaption></div></figure><p><code>ListView</code>s are commonly used when you have an unknown or very large (or infinite) number of list items. When this is the case, it's best to use the <code>ListView.builder</code> constructor. The builder constructor only builds the children that are currently visible on screen.</p><p>In the following example, the <code>ListView</code> is displaying a list of to-do items. The todo items are being fetched from a repository, and therefore the number of todos is unknown.</p><figure class="code-and-image"><div class=""><div class="code-block-wrapper language-dart"><div class="code-block-body"><span class="code-block-language" title="Language dart">dart</span><pre class="shiki dash-light" tabindex="0"><code><span class="line"><span style="color:#BD2314">final</span><span style="color:#0468D7"> List</span><span style="color:#222222"><</span><span style="color:#0468D7">ToDo</span><span style="color:#222222">> items = </span><span style="color:#0468D7">Repository</span><span style="color:#222222">.</span><span style="color:#6200EE">fetchTodos</span><span style="color:#222222">();</span></span> Widget</span><span style="color:#6200EE"> build</span><span style="color:#222222">(</span><span style="color:#0468D7">BuildContext</span><span style="color:#222222"> context) {</span></span> return</span><span style="color:#0468D7"> ListView</span><span style="color:#222222">.</span><span style="color:#6200EE">builder</span><span style="color:#222222">(</span></span> itemCount: items.length,</span></span> itemBuilder: (context, idx) {</span></span> var</span><span style="color:#222222"> item = items[idx];</span></span> return</span><span style="color:#0468D7"> Padding</span><span style="color:#222222">(</span></span> padding: </span><span style="color:#BD2314">const</span><span style="color:#0468D7"> EdgeInsets</span><span style="color:#222222">.</span><span style="color:#6200EE">all</span><span style="color:#222222">(</span><span style="color:#0C7064">8.0</span><span style="color:#222222">),</span></span> child: </span><span style="color:#0468D7">Row</span><span style="color:#222222">(</span></span> mainAxisAlignment: </span><span style="color:#0468D7">MainAxisAlignment</span><span style="color:#222222">.spaceBetween,</span></span> children: [</span></span> Text</span><span style="color:#222222">(item.description),</span></span> Text</span><span style="color:#222222">(item.isComplete),</span></span> ],</span></span> ),</span></span> );</span></span> },</span></span> );</span></span> }</span></span></code></pre></div></div></div><div><img src="/assets/images/docs/fwe/layout/listview_builder.png" class="" alt="A screenshot of several widgets laid out vertically. They have expanded to take up all available space on the cross axis." style=""><figcaption class="figure-caption">This figure shows the ListView.builder constructor to display an unknown number of children.</figcaption></div></figure><div class="header-wrapper"><h2 id="adaptive-layouts">Adaptive layouts</h2><a class="heading-link" href="#adaptive-layouts" aria-label="Link to 'Adaptive layouts' section">#</a></div><p>Because Flutter is used to create mobile, tablet, desktop, <em>and</em> web apps, it's likely you'll need to adjust your application to behave differently depending on things like screen size or input device. This is referred to as making an app <em>adaptive</em> and <em>responsive</em>.</p><p>One of the most useful widgets in making adaptive layouts is the <a href="https://api.flutter.dev/flutter/widgets/LayoutBuilder-class.html"><code>LayoutBuilder</code></a> widget. <code>LayoutBuilder</code> is one of many widgets that uses the "builder" pattern in Flutter.</p><div class="header-wrapper"><h3 id="the-builder-pattern">The builder pattern</h3><a class="heading-link" href="#the-builder-pattern" aria-label="Link to 'The builder pattern' section">#</a></div><p>In Flutter, you'll find several widgets that use the word "builder" in their names or in their constructors. The following list isn't exhaustive:</p><ul><li><a href="https://api.flutter.dev/flutter/widgets/ListView/ListView.builder.html"><code>ListView.builder</code></a></li><li><a href="https://api.flutter.dev/flutter/widgets/GridView/GridView.builder.html"><code>GridView.builder</code></a></li><li><a href="https://api.flutter.dev/flutter/widgets/Builder-class.html"><code>Builder</code></a></li><li><a href="https://api.flutter.dev/flutter/widgets/LayoutBuilder-class.html"><code>LayoutBuilder</code></a></li><li><a href="https://api.flutter.dev/flutter/widgets/FutureBuilder-class.html"><code>FutureBuilder</code></a></li></ul><p>These different "builders" are useful for solving different problems. For example, the <code>ListView.builder</code> constructor is primarily used to lazily render items in a list, while the <code>Builder</code> widget is useful for gaining access to the <code>BuildContext</code> in deeply widget code.</p><p>Despite their different use cases, these builders are unified by how they work. Builder widgets and builder constructors all have arguments called 'builder' (or something similar, like <code>itemBuilder</code> in the case of <code>ListView.builder</code>), and the builder argument always accepts a callback. This callback is a <strong>builder function</strong>. Builder functions are callbacks that pass data to the parent widget, and the parent widget uses those arguments to build and return the child widget. Builder functions always pass in at least one argument–the build context– and generally at least one other argument.</p><p>For example, the <code>LayoutBuilder</code> widget is used to create responsive layouts based on the size of the viewport. The builder callback body is passed the <a href="https://api.flutter.dev/flutter/rendering/BoxConstraints-class.html"><code>BoxConstraints</code></a> that it receives from its parent, along with the widgets 'BuildContext'. With these constraints, you can return a different widget based on the available space.</p><iframe width="560" height="315" src="https://www.youtube.com/embed/IYDVcriKjsw" title="LayoutBuilder (Flutter Widget of the Week)" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen loading="lazy"></iframe><br><p><a href="https://www.youtube.com/watch/IYDVcriKjsw" target="_blank" rel="noopener" title="Open 'LayoutBuilder (Flutter Widget of the Week)' video in new tab">LayoutBuilder (Flutter Widget of the Week)</a></p><p>In the following example, the widget returned by the <code>LayoutBuilder</code> changes based on whether the viewport is less than or equal 600 pixels, or greater than 600 pixels.</p><figure class="code-and-image"><div class=""><div class="code-block-wrapper language-dart"><div class="code-block-body"><span class="code-block-language" title="Language dart">dart</span><pre class="shiki dash-light" tabindex="0"><code><span class="line"><span style="color:#0468D7">Widget</span><span style="color:#6200EE"> build</span><span style="color:#222222">(</span><span style="color:#0468D7">BuildContext</span><span style="color:#222222"> context) {</span></span> return</span><span style="color:#0468D7"> LayoutBuilder</span><span style="color:#222222">(</span></span> builder: (</span><span style="color:#0468D7">BuildContext</span><span style="color:#222222"> context, </span><span style="color:#0468D7">BoxConstraints</span><span style="color:#222222"> constraints) {</span></span> </span><mark class="highlight"><span style="color:#BD2314">if</span><span style="color:#222222"> (constraints.maxWidth <= </span><span style="color:#0C7064">600</span><span style="color:#222222">)</span></mark><span style="color:#222222"> {</span></span> return</span><span style="color:#0468D7"> _MobileLayout</span><span style="color:#222222">();</span></span> } </span><span style="color:#BD2314">else</span><span style="color:#222222"> {</span></span> return</span><span style="color:#0468D7"> _DesktopLayout</span><span style="color:#222222">();</span></span> }</span></span> },</span></span> );</span></span> }</span></span></code></pre></div></div></div><div><img src="/assets/images/docs/fwe/layout/layout_builder.png" class="" alt="Two screenshots, in which one shows a narrow layout and the other shows a wide layout." style=""><figcaption class="figure-caption">This figure shows a narrow layout, which lays out its children vertically, and a wider layout, which lays out its children in a grid.</figcaption></div></figure><p>Meanwhile, the <code>itemBuilder</code> callback on the <code>ListView.builder</code> constructor is passed the build context and an <code>int</code>. This callback is called once for every item in the list, and the int argument represents the index of the list item. The first time the itemBuilder callback is called when Flutter is building the UI, the int passed to the function is 0, the second time it's 1, and so on.</p><p>This allows you to provide specific configuration based on the index. Recall the example above using the<code>ListView.builder</code> constructor:</p><div class="code-block-wrapper language-dart"><div class="code-block-body"><span class="code-block-language" title="Language dart">dart</span><pre class="shiki dash-light" tabindex="0"><code><span class="line"><span style="color:#BD2314">final</span><span style="color:#0468D7"> List</span><span style="color:#222222"><</span><span style="color:#0468D7">ToDo</span><span style="color:#222222">> items = </span><span style="color:#0468D7">Repository</span><span style="color:#222222">.</span><span style="color:#6200EE">fetchTodos</span><span style="color:#222222">();</span></span> Widget</span><span style="color:#6200EE"> build</span><span style="color:#222222">(</span><span style="color:#0468D7">BuildContext</span><span style="color:#222222"> context) {</span></span> return</span><span style="color:#0468D7"> ListView</span><span style="color:#222222">.</span><span style="color:#6200EE">builder</span><span style="color:#222222">(</span></span> itemCount: items.length,</span></span> itemBuilder: (context, idx) {</span></span> var</span><span style="color:#222222"> item = items[idx];</span></span> return</span><span style="color:#0468D7"> Padding</span><span style="color:#222222">(</span></span> padding: </span><span style="color:#BD2314">const</span><span style="color:#0468D7"> EdgeInsets</span><span style="color:#222222">.</span><span style="color:#6200EE">all</span><span style="color:#222222">(</span><span style="color:#0C7064">8.0</span><span style="color:#222222">),</span></span> child: </span><span style="color:#0468D7">Row</span><span style="color:#222222">(</span></span> mainAxisAlignment: </span><span style="color:#0468D7">MainAxisAlignment</span><span style="color:#222222">.spaceBetween,</span></span> children: [</span></span> Text</span><span style="color:#222222">(item.description),</span></span> Text</span><span style="color:#222222">(item.isComplete),</span></span> ],</span></span> ),</span></span> );</span></span> },</span></span> );</span></span> }</span></span></code></pre></div></div><p>This example code uses the index that's passed into the builder to grab the correct todo from the list of items, and then displays that todo's data in the widget that is returned from the builder.</p><p>To exemplify this, the following example changes the background color of every other list item.</p><figure class="code-and-image"><div class=""><div class="code-block-wrapper language-dart"><div class="code-block-body"><span class="code-block-language" title="Language dart">dart</span><pre class="shiki dash-light" tabindex="0"><code><span class="line"><span style="color:#BD2314">final</span><span style="color:#0468D7"> List</span><span style="color:#222222"><</span><span style="color:#0468D7">ToDo</span><span style="color:#222222">> items = </span><span style="color:#0468D7">Repository</span><span style="color:#222222">.</span><span style="color:#6200EE">fetchTodos</span><span style="color:#222222">();</span></span> Widget</span><span style="color:#6200EE"> build</span><span style="color:#222222">(</span><span style="color:#0468D7">BuildContext</span><span style="color:#222222"> context) {</span></span> return</span><span style="color:#0468D7"> ListView</span><span style="color:#222222">.</span><span style="color:#6200EE">builder</span><span style="color:#222222">(</span></span> itemCount: items.length,</span></span> itemBuilder: (context, idx) {</span></span> var</span><span style="color:#222222"> item = items[idx];</span></span> return</span><span style="color:#0468D7"> Container</span><span style="color:#222222">(</span></span> </span><mark class="highlight"><span style="color:#222222">color: idx % </span><span style="color:#0C7064">2</span><span style="color:#222222"> == </span><span style="color:#0C7064">0</span><span style="color:#222222"> ? </span><span style="color:#0468D7">Colors</span><span style="color:#222222">.lightBlue : </span><span style="color:#0468D7">Colors</span><span style="color:#222222">.transparent</span></mark><span style="color:#222222">,</span></span> padding: </span><span style="color:#BD2314">const</span><span style="color:#0468D7"> EdgeInsets</span><span style="color:#222222">.</span><span style="color:#6200EE">all</span><span style="color:#222222">(</span><span style="color:#0C7064">8.0</span><span style="color:#222222">),</span></span> child: </span><span style="color:#0468D7">Row</span><span style="color:#222222">(</span></span> mainAxisAlignment: </span><span style="color:#0468D7">MainAxisAlignment</span><span style="color:#222222">.spaceBetween,</span></span> children: [</span></span> Text</span><span style="color:#222222">(item.description),</span></span> Text</span><span style="color:#222222">(item.isComplete),</span></span> ],</span></span> ),</span></span> );</span></span> },</span></span> );</span></span> }</span></span></code></pre></div></div></div><div><img src="/assets/images/docs/fwe/layout/alternating_list_items.png" class="" alt="This figure shows a `ListView`, in which its children have alternating background colors. The background colors were determined programmatically based on the index of the child within the `ListView`." style=""><figcaption class="figure-caption">This figure shows a `ListView`, in which its children have alternating background colors. The background colors were determined programmatically based on the index of the child within the `ListView`.</figcaption></div></figure><div class="header-wrapper"><h2 id="additional-resources">Additional resources</h2><a class="heading-link" href="#additional-resources" aria-label="Link to 'Additional resources' section">#</a></div><ul><li>Common layout widgets and concepts<ul><li>Video: <a href="https://youtube.com/watch?v=S0Ylpa44OAQ">OverlayPortal—Flutter Widget of the Week</a></li><li>Video: <a href="https://youtube.com/watch?v=liEGSeD3Zt8">Stack—Flutter Widget of the Week</a></li><li>Tutorial: <a href="/ui/layout">Layouts in Flutter</a></li><li>Documentation: <a href="/ui/layout#stack">Stack documentation</a></li></ul></li><li>Sizing and positioning widgets<ul><li>Video: <a href="https://youtube.com/watch?v=_rnZaagadyo">Expanded—Flutter Widget of the Week</a></li><li>Video: <a href="https://youtube.com/watch?v=CI7x0mAZiY0">Flexible—Flutter Widget of the Week</a></li><li>Video: <a href="https://youtube.com/watch?v=Si5XJ_IocEs">Intrinsic widgets—Decoding Flutter</a></li></ul></li><li>Scrollable widgets<ul><li>Example code: <a href="/cookbook/lists/long-lists">Work with long lists</a></li><li>Example code: <a href="/cookbook/lists/horizontal-list">Create a horizontal list</a></li><li>Example code: <a href="/cookbook/lists/grid-lists">Create a grid list</a></li><li>Video: <a href="https://youtube.com/watch?v=KJpkjHGiI5A">ListView—Flutter Widget of the Week</a></li></ul></li><li>Adaptive Apps<ul><li>Tutorial: <a href="https://codelabs.developers.google.com/codelabs/flutter-adaptive-app">Adaptive Apps codelab</a></li><li>Video: <a href="https://youtube.com/watch?v=A3WrA4zAaPw">MediaQuery—Flutter Widget of the Week</a></li><li>Video: <a href="https://youtube.com/watch?v=RCdeSKVt7LI">Building platform adaptive apps</a></li><li>Video: <a href="https://youtube.com/watch?v=xXNOkIuSYuA">Builder—Flutter Widget of the Week</a></li></ul></li></ul><div class="header-wrapper"><h3 id="api-reference">API reference</h3><a class="heading-link" href="#api-reference" aria-label="Link to 'API reference' section">#</a></div><p>The following resources explain individual APIs.</p><ul><li><a href="https://api.flutter.dev/flutter/widgets/Builder-class.html"><code>Builder</code></a></li><li><a href="https://api.flutter.dev/flutter/widgets/Row-class.html"><code>Row</code></a></li><li><a href="https://api.flutter.dev/flutter/widgets/Column-class.html"><code>Column</code></a></li><li><a href="https://api.flutter.dev/flutter/widgets/Expanded-class.html"><code>Expanded</code></a></li><li><a href="https://api.flutter.dev/flutter/widgets/Flexible-class.html"><code>Flexible</code></a></li><li><a href="https://api.flutter.dev/flutter/widgets/ListView-class.html"><code>ListView</code></a></li><li><a href="https://api.flutter.dev/flutter/widgets/Stack-class.html"><code>Stack</code></a></li><li><a href="https://api.flutter.dev/flutter/widgets/Positioned-class.html"><code>Positioned</code></a></li><li><a href="https://api.flutter.dev/flutter/widgets/MediaQuery-class.html"><code>MediaQuery</code></a></li><li><a href="https://api.flutter.dev/flutter/widgets/LayoutBuilder-class.html"><code>LayoutBuilder</code></a></li></ul><div class="header-wrapper"><h2 id="feedback">Feedback</h2><a class="heading-link" href="#feedback" aria-label="Link to 'Feedback' section">#</a></div><p>As this section of the website is evolving, we <a href="https://google.qualtrics.com/jfe/form/SV_6A9KxXR7XmMrNsy?page=%22layout%22">welcome your feedback</a>!</p><nav class="site-nextprev-nav"><ul><li class="prev"><a href="/get-started/fundamentals/widgets">Widgets</a></li><li class="next"><a href="/get-started/fundamentals/state-management">State management</a></li></ul></nav><p id="page-github-links"><span>Unless stated otherwise, the documentation on this site reflects the latest stable version of Flutter. Page last updated on 2025-01-31.</span> <a href="https://github.com/flutter/website/tree/main/src/content/get-started/fundamentals/layout.md" target="_blank" rel="noopener">View source</a> <span>or </span><a href="https://github.com/flutter/website/issues/new?template=1_page_issue.yml&&page-url=https://docs.flutter.dev/get-started/fundamentals/layout/&page-source=https://github.com/flutter/website/tree/main/src/content/get-started/fundamentals/layout.md" title="Report an issue with this page" target="_blank" rel="noopener">report an issue</a>.</p></article></main></div><footer id="site-footer"><div class="footer-section footer-main"><a class="brand" href="https://flutter.dev"><img src="/assets/images/branding/flutter/logo+text/horizontal/white.svg" alt="Flutter logo" width="164"></a><div class="footer-social-links"><a class="icon-button" href="https://medium.com/flutter" target="_blank" rel="noopener" title="Flutter's Medium blog"><svg><use href="/assets/images/social/medium.svg#medium"></use></svg> </a><a class="icon-button" href="https://youtube.com/@flutterdev" target="_blank" rel="noopener" title="Flutter's YouTube"><svg><use href="/assets/images/social/youtube.svg#youtube"></use></svg> </a><a class="icon-button" href="https://github.com/flutter" target="_blank" rel="noopener" title="Flutter's GitHub"><svg><use href="/assets/images/social/github.svg#github"></use></svg> </a><a class="icon-button" href="https://bsky.app/profile/flutter.dev" target="_blank" rel="noopener" title="Flutter's Bluesky"><svg><use href="/assets/images/social/bluesky.svg#bluesky"></use></svg> </a><a class="icon-button" href="https://twitter.com/FlutterDev" target="_blank" rel="noopener" title="Flutter's X (Twitter)"><svg><use href="/assets/images/social/x.svg#x"></use></svg></a></div></div><div class="footer-section footer-tray"><div class="footer-licenses">Except as otherwise noted, this site is licensed under a <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>, and code samples are licensed under the <a href="https://opensource.org/licenses/BSD-3-Clause">3-Clause BSD License</a>.</div><div class="footer-utility-links"><ul><li><a href="/tos" title="Terms of use">Terms</a></li><li><a href="/brand" title="Brand usage guidelines">Brand</a></li><li><a href="https://policies.google.com/privacy" target="_blank" rel="noopener" title="Privacy policy">Privacy</a></li><li><a href="/security" title="Security philosophy and practices">Security</a></li></ul></div></div></footer></div><script src="/assets/js/tabs.js?v=4"></script><script src="/assets/js/archive.js?v=4"></script><script src="/assets/js/main.js?v=4"></script></body></html>