CINXE.COM

<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Layout | 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 Flutter's layout mechanism works and how to build a layout."><meta name="twitter:card" content="summary_large_image"><meta name="twitter:site" content="@flutterdev"><meta property="og:title" content="Layouts in Flutter"><meta property="og:url" content="https://docs.flutter.dev/ui/layout"><meta property="og:description" content="Learn how Flutter's layout mechanism works and how to build a layout."><meta property="og:image" content="https://docs.flutter.dev/assets/images/flutter-logo-sharing.png" eleventy:ignore><link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Google+Sans+Text:wght@400;500;700&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Google+Sans+Mono:wght@400;500;700&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" rel="stylesheet"><script>window.__CALLBACKS=[]</script><link rel="stylesheet" href="/assets/css/main.css?v=4"></head><body><section id="cookie-notice"><div class="container"><p>docs.flutter.dev uses cookies from Google to deliver and enhance the quality of its services and to analyze traffic. <a href="https://policies.google.com/technologies/cookies" target="_blank" rel="noopener">Learn more</a>.</p><button id="cookie-consent" class="filled-button">OK, got it</button></div></section><noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-ND4LWWZ" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><div id="site-banner" role="alert"><p>Flutter 3.29 is here with a bouquet of performance and fidelity improvements for your apps! <a href="https://medium.com/flutter/whats-new-in-flutter-3-29-f90c380c2317">Learn more</a><br></p></div><header class="site-header"><a href="#document-title" id="skip-to-main" class="filled-button" tabindex="1">Skip to main content</a><nav class="navbar"><div id="site-switcher" class="dropdown"><button class="dropdown-button site-wordmark" aria-expanded="false" aria-controls="site-switcher-menu" aria-label="Switch between Flutter and Dart sites"><img src="/assets/images/branding/flutter/logo/default.svg" alt="Flutter logo" width="28"> <span>Flutter</span> <span class="subtype">Docs</span> <span class="material-symbols" aria-hidden="true">unfold_more</span></button><div class="dropdown-content" id="site-switcher-menu"><nav class="dropdown-menu" role="menu"><ul><li role="presentation"><a href="https://flutter.dev" class="site-wordmark" role="menuitem" title="Flutter homepage" aria-label="Go to the Flutter homepage"><img src="/assets/images/branding/flutter/logo/default.svg" alt="Flutter logo" width="28"> <span>Flutter</span></a></li><li role="presentation"><a href="https://docs.flutter.dev" class="site-wordmark current-site" role="menuitem" aria-current="true" title="Flutter docs homepage" aria-label="Go to the Flutter docs homepage"><img src="/assets/images/branding/flutter/logo/default.svg" alt="Flutter logo" width="28"> <span>Flutter</span> <span class="subtype">Docs</span></a></li><li role="presentation"><a href="https://api.flutter.dev" class="site-wordmark" role="menuitem" title="Flutter API reference" aria-label="Go to the Flutter API reference"><img src="/assets/images/branding/flutter/logo/default.svg" alt="Flutter logo" width="28"> <span>Flutter</span> <span class="subtype">API</span></a></li><li aria-hidden="true" class="dropdown-divider" role="separator"></li><li role="presentation"><a href="https://dart.dev" class="site-wordmark" role="menuitem" title="Dart homepage" aria-label="Go to the Dart homepage"><img src="/assets/images/branding/dart/logo.svg" alt="Dart logo" width="28" height="28"> <span>Dart</span></a></li><li role="presentation"><a href="https://dartpad.dev" class="site-wordmark" role="menuitem" title="DartPad playground" aria-label="Go to the DartPad playground"><img src="/assets/images/branding/dart/logo.svg" alt="Dart logo" width="28" height="28"> <span>DartPad</span></a></li><li role="presentation"><a href="https://pub.dev" class="site-wordmark" role="menuitem" title="pub.dev homepage" aria-label="Go to the pub.dev homepage"><img src="/assets/images/branding/dart/logo.svg" alt="Dart logo" width="28" height="28"> <span>pub.dev</span></a></li></ul></nav></div></div><div class="navbar-contents"><ul class="navbar-nav"><li class="nav-item"><a class="nav-link" href="https://flutter.dev">Homepage</a></li><li class="nav-item"><a class="nav-link" href="https://flutter.dev/community">Community</a></li><li class="nav-item"><a class="nav-link" href="https://pub.dev">Packages</a></li><li class="nav-item"><a class="nav-link" href="https://api.flutter.dev">API reference</a></li></ul><form action="/search/" class="site-header__search"><input class="site-header__searchfield search-field" type="search" name="q" id="q" autocomplete="off" placeholder="Search" aria-label="Search"></form><a href="/search" id="fallback-search-button" class="icon-button" aria-label="Navigate to the docs search page." title="Navigate to the docs search page."><span class="material-symbols" aria-hidden="true">search</span> </a><a id="call-to-action" class="filled-button" href="/get-started/install/">Get started</a> <button id="menu-toggle" class="icon-button" type="button" aria-controls="sidenav" aria-label="Toggle navigation" title="Toggle navigation"><span class="material-symbols" aria-hidden="true">menu</span></button></div></nav></header><div id="site-below-header"><div id="site-main-row"><div id="sidenav" class="site-sidebar"><nav><ul><li class="nav-header">Get started</li><li class="nav-item"><a class="nav-link" href="/get-started/install"><div><span>Set up Flutter</span></div></a></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-3" role="button" aria-expanded="false" aria-controls="sidenav-3"><span>Learn Flutter</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-3"><li class="nav-item"><a class="nav-link" href="/get-started/learn-flutter"><div><span>Introduction</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/codelab"><div><span>Write your first app</span></div></a></li><li class="nav-item"><button class="nav-link collapsible" data-toggle="collapse" data-target="#sidenav-3-3" role="button" aria-expanded="true" aria-controls="sidenav-3-3"><span>Learn the fundamentals</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse show" id="sidenav-3-3"><li class="nav-item"><a class="nav-link" href="/get-started/fundamentals"><div><span>Introduction</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/fundamentals/dart"><div><span>Intro to Dart</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/fundamentals/widgets"><div><span>Widgets</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/fundamentals/layout"><div><span>Layout</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/fundamentals/state-management"><div><span>State management</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/fundamentals/user-input"><div><span>Handling user input</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/fundamentals/networking"><div><span>Networking and data</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/fundamentals/local-caching"><div><span>Local data and caching</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-3-4" role="button" aria-expanded="false" aria-controls="sidenav-3-4"><span>From another platform?</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-3-4"><li class="nav-item"><a class="nav-link" href="/get-started/flutter-for/android-devs"><div><span>Flutter for Android devs</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/flutter-for/compose-devs"><div><span>Flutter for Jetpack Compose devs</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/flutter-for/swiftui-devs"><div><span>Flutter for SwiftUI devs</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/flutter-for/uikit-devs"><div><span>Flutter for UIKit devs</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/flutter-for/react-native-devs"><div><span>Flutter for React Native devs</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/flutter-for/web-devs"><div><span>Flutter for web devs</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/flutter-for/xamarin-forms-devs"><div><span>Flutter for Xamarin.Forms devs</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/flutter-for/declarative"><div><span>Introduction to declarative UI</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/flutter-for/dart-swift-concurrency"><div><span>Flutter versus Swift concurrency</span></div></a></li></ul></li><div class="sidenav-divider"></div><li class="nav-item"><a class="nav-link" href="/codelabs"><div><span>Codelabs</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook"><div><span>Cookbook</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://github.com/flutter/samples" target="_blank" rel="noopener"><div><span>Demos and samples</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-4" role="button" aria-expanded="false" aria-controls="sidenav-4"><span>Stay up to date</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-4"><li class="nav-item"><a class="nav-link" href="/release/upgrade"><div><span>Upgrade</span></div></a></li><li class="nav-item"><a class="nav-link" href="/release/archive"><div><span>SDK archive</span></div></a></li><div class="sidenav-divider"></div><li class="nav-item"><a class="nav-link" href="/release/whats-new"><div><span>What's new</span></div></a></li><li class="nav-item"><a class="nav-link" href="/release/release-notes"><div><span>Release notes</span></div></a></li><li class="nav-item"><a class="nav-link" href="/release/breaking-changes"><div><span>Breaking changes</span></div></a></li><li class="nav-item"><a class="nav-link" href="/release/compatibility-policy"><div><span>Compatibility policy</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-5" role="button" aria-expanded="false" aria-controls="sidenav-5"><span>App solutions</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-5"><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-5-1" role="button" aria-expanded="false" aria-controls="sidenav-5-1"><span>AI</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-5-1"><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-5-1-1" role="button" aria-expanded="false" aria-controls="sidenav-5-1-1"><span>AI Toolkit guide</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-5-1-1"><li class="nav-item"><a class="nav-link" href="/ai-toolkit"><div><span>Overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ai-toolkit/user-experience"><div><span>User experience</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ai-toolkit/feature-integration"><div><span>Feature integration</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ai-toolkit/custom-llm-providers"><div><span>Custom LLM providers</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ai-toolkit/chat-client-sample"><div><span>Chat client sample</span></div></a></li></ul></li><li class="nav-item"><a class="nav-link" href="https://www.youtube.com/watch?v=1AuzJEiHjO4" target="_blank" rel="noopener"><div><span>Build with Google AI Dart SDK (video)</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-5-2" role="button" aria-expanded="false" aria-controls="sidenav-5-2"><span>Firebase & Firestore</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-5-2"><li class="nav-item"><a class="nav-link" href="/data-and-backend/firebase"><div><span>Overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://firebase.google.com/docs/flutter" target="_blank" rel="noopener"><div><span>Discover Firebase for Flutter</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://www.youtube.com/watch?v=wUSkeTaBonA" target="_blank" rel="noopener"><div><span>Get to know Firebase for Flutter</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://firebase.google.com/codelabs/firebase-auth-in-flutter-apps" target="_blank" rel="noopener"><div><span>Add a user authentication flow to a Flutter app using FirebaseUI</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://firebase.google.com/codelabs/firebase-get-to-know-web" target="_blank" rel="noopener"><div><span>Get to know Firebase for web</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-5-3" role="button" aria-expanded="false" aria-controls="sidenav-5-3"><span>Games</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-5-3"><li class="nav-item"><a class="nav-link" href="/resources/games-toolkit"><div><span>Overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/games/achievements-leaderboard"><div><span>Add achievements and leaderboards</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://firebase.google.com/codelabs/build-leaderboards-with-firestore#0" target="_blank" rel="noopener"><div><span>Build leaderboards with Firestore</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/plugins/google-mobile-ads"><div><span>Add advertising</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/games/firestore-multiplayer"><div><span>Add multiplayer support</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://codelabs.developers.google.com/codelabs/flutter-in-app-purchases" target="_blank" rel="noopener"><div><span>Add in-app purchases</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://firebase.google.com/codelabs/firebase-auth-in-flutter-apps" target="_blank" rel="noopener"><div><span>Add user authentication</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://firebase.google.com/docs/crashlytics/get-started?platform=flutter" target="_blank" rel="noopener"><div><span>Debug using Crashlytics</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://codelabs.developers.google.com/codelabs/flutter-flame-brick-breaker" target="_blank" rel="noopener"><div><span>Intro to Flame with Flutter</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-5-4" role="button" aria-expanded="false" aria-controls="sidenav-5-4"><span>Monetization</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-5-4"><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-5-4-1" role="button" aria-expanded="false" aria-controls="sidenav-5-4-1"><span>Advertising</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-5-4-1"><li class="nav-item"><a class="nav-link" href="/resources/ads-overview"><div><span>Ads overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/plugins/google-mobile-ads"><div><span>Add advertising</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://codelabs.developers.google.com/codelabs/admob-ads-in-flutter" target="_blank" rel="noopener"><div><span>Add AdMob ads to your Flutter app</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://codelabs.developers.google.com/codelabs/admob-inline-ads-in-flutter" target="_blank" rel="noopener"><div><span>Add an AdMob banner and native inline ads</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://developers.google.com/admob/flutter/mediation" target="_blank" rel="noopener"><div><span>Google AdMob mediation</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://pub.dev/packages/interactive_media_ads" target="_blank" rel="noopener"><div><span>Interactive Media Ads SDK</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-5-4-2" role="button" aria-expanded="false" aria-controls="sidenav-5-4-2"><span>In-app purchases</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-5-4-2"><li class="nav-item"><a class="nav-link" href="/resources/in-app-purchases-overview"><div><span>In-app purchases overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://codelabs.developers.google.com/codelabs/flutter-in-app-purchases" target="_blank" rel="noopener"><div><span>Add in-app purchases</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-5-4-3" role="button" aria-expanded="false" aria-controls="sidenav-5-4-3"><span>Payments</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-5-4-3"><li class="nav-item"><a class="nav-link" href="/resources/payments-overview"><div><span>Payments overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://pub.dev/packages/pay" target="_blank" rel="noopener"><div><span>Google pay package</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li></ul></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-5-5" role="button" aria-expanded="false" aria-controls="sidenav-5-5"><span>Maps</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-5-5"><li class="nav-item"><a class="nav-link" href="https://codelabs.developers.google.com/codelabs/google-maps-in-flutter" target="_blank" rel="noopener"><div><span>Add Google maps to a Flutter app</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://developers.google.com/maps/flutter-package" target="_blank" rel="noopener"><div><span>Google Maps package</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-5-6" role="button" aria-expanded="false" aria-controls="sidenav-5-6"><span>News</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-5-6"><li class="nav-item"><a class="nav-link" href="/resources/news-toolkit"><div><span>Build a news app</span></div></a></li></ul></li></ul></li><li aria-hidden="true"><div class="sidenav-divider"></div></li><li class="nav-header">User interface</li><li class="nav-item"><a class="nav-link" href="/ui"><div><span>Introduction</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/widgets"><div><span>Widget catalog</span></div></a></li><li class="nav-item"><button class="nav-link active collapsible" data-toggle="collapse" data-target="#sidenav-10" role="button" aria-expanded="true" aria-controls="sidenav-10"><span>Layout</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse show" id="sidenav-10"><li class="nav-item"><a class="nav-link active" 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="#lay-out-a-widget">Lay out a widget</a><ul class="nav"><li class="toc-entry nav-item"><a class="nav-link" href="#1-select-a-layout-widget">1. Select a layout widget</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#2-create-a-visible-widget">2. Create a visible widget</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#3-add-the-visible-widget-to-the-layout-widget">3. Add the visible widget to the layout widget</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#4-add-the-layout-widget-to-the-page">4. Add the layout widget to the page</a></li></ul></li><li class="toc-entry nav-item"><a class="nav-link" href="#lay-out-multiple-widgets-vertically-and-horizontally">Lay out multiple widgets vertically and horizontally</a><ul class="nav"><li class="toc-entry nav-item"><a class="nav-link" href="#aligning-widgets">Aligning widgets</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#sizing-widgets">Sizing widgets</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#packing-widgets">Packing widgets</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#nesting-rows-and-columns">Nesting rows and columns</a></li></ul></li><li class="toc-entry nav-item"><a class="nav-link" href="#common-layout-widgets">Common layout widgets</a><ul class="nav"><li class="toc-entry nav-item"><a class="nav-link" href="#standard-widgets">Standard widgets</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#material-widgets">Material widgets</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#container">Container</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#gridview">GridView</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#listview">ListView</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#stack">Stack</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#card">Card</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#listtile">ListTile</a></li></ul></li><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="#videos">Videos</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#other-resources">Other resources</a></li></ul></div><article><header class="site-content__title"><h1 id="document-title">Layouts in Flutter</h1><nav class="breadcrumbs" aria-label="breadcrumb"><ol vocab="https://schema.org/" typeof="BreadcrumbList"><li class="breadcrumb-item" property="itemListElement" typeof="ListItem"><a href="/ui" property="item" typeof="WebPage"><span property="name">UI</span></a><meta property="position" content="0"><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="/ui/layout" property="item" typeof="WebPage"><span property="name">Layout</span></a><meta property="position" content="1"></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="#lay-out-a-widget">Lay out a widget</a><ul><li class="toc-entry"><a href="#1-select-a-layout-widget">1. Select a layout widget</a></li><li class="toc-entry"><a href="#2-create-a-visible-widget">2. Create a visible widget</a></li><li class="toc-entry"><a href="#3-add-the-visible-widget-to-the-layout-widget">3. Add the visible widget to the layout widget</a></li><li class="toc-entry"><a href="#4-add-the-layout-widget-to-the-page">4. Add the layout widget to the page</a></li></ul></li><li class="toc-entry"><a href="#lay-out-multiple-widgets-vertically-and-horizontally">Lay out multiple widgets vertically and horizontally</a><ul><li class="toc-entry"><a href="#aligning-widgets">Aligning widgets</a></li><li class="toc-entry"><a href="#sizing-widgets">Sizing widgets</a></li><li class="toc-entry"><a href="#packing-widgets">Packing widgets</a></li><li class="toc-entry"><a href="#nesting-rows-and-columns">Nesting rows and columns</a></li></ul></li><li class="toc-entry"><a href="#common-layout-widgets">Common layout widgets</a><ul><li class="toc-entry"><a href="#standard-widgets">Standard widgets</a></li><li class="toc-entry"><a href="#material-widgets">Material widgets</a></li><li class="toc-entry"><a href="#container">Container</a></li><li class="toc-entry"><a href="#gridview">GridView</a></li><li class="toc-entry"><a href="#listview">ListView</a></li><li class="toc-entry"><a href="#stack">Stack</a></li><li class="toc-entry"><a href="#card">Card</a></li><li class="toc-entry"><a href="#listtile">ListTile</a></li></ul></li><li class="toc-entry"><a href="#constraints">Constraints</a></li><li class="toc-entry"><a href="#videos">Videos</a></li><li class="toc-entry"><a href="#other-resources">Other resources</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> <?code-excerpt path-base=""?> <aside class="alert alert-secondary"><div class="alert-header"><span>What's the point?</span></div><div class="alert-content"><ul><li>Widgets are classes used to build UIs.</li><li>Widgets are used for both layout and UI elements.</li><li>Compose simple widgets to build complex widgets.</li></ul></div></aside><p>The core of Flutter's layout mechanism is widgets. In Flutter, almost everything is a widget鈥攅ven layout models are widgets. The images, icons, and text that you see in a Flutter app are all widgets. But 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 first screenshot below shows 3 icons with a label under each one:</p><div class="side-by-side"><div class="centered-rows"><img src="/assets/images/docs/ui/layout/lakes-icons.png" alt="Sample layout"></div><div class="centered-rows"><img src="/assets/images/docs/ui/layout/lakes-icons-visual.png" alt="Sample layout with visual debugging"></div></div><p>The second screenshot displays the visual layout, showing a row of 3 columns where each column contains an icon and a label.</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>Most of the screenshots in this tutorial are displayed with <code>debugPaintSizeEnabled</code> set to <code>true</code> so you can see the visual layout. For more information, see <a href="/tools/devtools/inspector#debugging-layout-issues-visually">Debugging layout issues visually</a>, a section in <a href="/tools/devtools/inspector">Using the Flutter inspector</a>.</p></div></aside><p>Here's a diagram of the widget tree for this UI:</p><img src="/assets/images/docs/ui/layout/sample-flutter-layout.png" class="text-center" alt="Node tree"><p>Most of this should look as you might expect, but you might be wondering about the containers (shown in pink). <a href="https://api.flutter.dev/flutter/widgets/Container-class.html"><code>Container</code></a> is a widget class that allows you to customize its child widget. Use a <code>Container</code> when you want to add padding, margins, borders, or background color, to name some of its capabilities.</p><p>In this example, each <a href="https://api.flutter.dev/flutter/widgets/Text-class.html"><code>Text</code></a> widget is placed in a <code>Container</code> to add margins. The entire <a href="https://api.flutter.dev/flutter/widgets/Row-class.html"><code>Row</code></a> is also placed in a <code>Container</code> to add padding around the row.</p><p>The rest of the UI in this example is controlled by properties. Set an <a href="https://api.flutter.dev/flutter/material/Icons-class.html"><code>Icon</code></a>'s color using its <code>color</code> property. Use the <code>Text.style</code> property to set the font, its color, weight, and so on. Columns and rows have properties that allow you to specify how their children are aligned vertically or horizontally, and how much space the children should occupy.</p><div class="header-wrapper"><h2 id="lay-out-a-widget">Lay out a widget</h2><a class="heading-link" href="#lay-out-a-widget" aria-label="Link to 'Lay out a widget' section">#</a></div><p>How do you lay out a single widget in Flutter? This section shows you how to create and display a simple widget. It also shows the entire code for a simple Hello World app.</p><p>In Flutter, it takes only a few steps to put text, an icon, or an image on the screen.</p><div class="header-wrapper"><h3 id="1-select-a-layout-widget">1. Select a layout widget</h3><a class="heading-link" href="#1-select-a-layout-widget" aria-label="Link to '1. Select a layout widget' section">#</a></div><p>Choose from a variety of <a href="/ui/widgets/layout">layout widgets</a> based on how you want to align or constrain the visible widget, as these characteristics are typically passed on to the contained widget.</p><p>This example uses <a href="https://api.flutter.dev/flutter/widgets/Center-class.html"><code>Center</code></a> which centers its content horizontally and vertically.</p><div class="header-wrapper"><h3 id="2-create-a-visible-widget">2. Create a visible widget</h3><a class="heading-link" href="#2-create-a-visible-widget" aria-label="Link to '2. Create a visible widget' section">#</a></div><p>For example, create a <a href="https://api.flutter.dev/flutter/widgets/Text-class.html"><code>Text</code></a> widget:</p> <?code-excerpt "layout/base/lib/main.dart (text)" replace="/child: //g"?> <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">Text</span><span style="color:#222222">(</span><span style="color:#0C7064">'Hello World'</span><span style="color:#222222">),</span></span></code></pre></div></div><p>Create an <a href="https://api.flutter.dev/flutter/widgets/Image-class.html"><code>Image</code></a> widget:</p> <?code-excerpt "layout/lakes/step5/lib/main.dart (image-asset)" remove="/width|height/"?> <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></code></pre></div></div><p>Create an <a href="https://api.flutter.dev/flutter/material/Icons-class.html"><code>Icon</code></a> widget:</p> <?code-excerpt "layout/lakes/step5/lib/main.dart (icon)"?> <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">Icon</span><span style="color:#222222">(</span><span style="color:#0468D7">Icons</span><span style="color:#222222">.star, color: </span><span style="color:#0468D7">Colors</span><span style="color:#222222">.red[</span><span style="color:#0C7064">500</span><span style="color:#222222">]),</span></span></code></pre></div></div><div class="header-wrapper"><h3 id="3-add-the-visible-widget-to-the-layout-widget">3. Add the visible widget to the layout widget</h3><a class="heading-link" href="#3-add-the-visible-widget-to-the-layout-widget" aria-label="Link to '3. Add the visible widget to the layout widget' section">#</a></div> <?code-excerpt path-base="layout/base"?> <p>All layout widgets have either of the following:</p><ul><li>A <code>child</code> property if they take a single child鈥攆or example, <code>Center</code> or <code>Container</code></li><li>A <code>children</code> property if they take a list of widgets鈥攆or example, <code>Row</code>, <code>Column</code>, <code>ListView</code>, or <code>Stack</code>.</li></ul><p>Add the <code>Text</code> widget to the <code>Center</code> widget:</p> <?code-excerpt "lib/main.dart (centered-text)" replace="/body: //g"?> <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">const</span><span style="color:#0468D7"> Center</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> child: </span><span style="color:#0468D7">Text</span><span style="color:#222222">(</span><span style="color:#0C7064">'Hello World'</span><span style="color:#222222">),</span></span> <span class="line"><span style="color:#222222">),</span></span></code></pre></div></div><div class="header-wrapper"><h3 id="4-add-the-layout-widget-to-the-page">4. Add the layout widget to the page</h3><a class="heading-link" href="#4-add-the-layout-widget-to-the-page" aria-label="Link to '4. Add the layout widget to the page' section">#</a></div><p>A Flutter app is itself a widget, and most widgets have a <a href="https://api.flutter.dev/flutter/widgets/StatelessWidget/build.html"><code>build()</code></a> method. Instantiating and returning a widget in the app's <code>build()</code> method displays the widget.</p><div class="header-wrapper"><h4 id="material-apps">Material apps</h4><a class="heading-link" href="#material-apps" aria-label="Link to 'Material apps' section">#</a></div><p>For a <code>Material</code> app, you can use a <a href="https://api.flutter.dev/flutter/material/Scaffold-class.html"><code>Scaffold</code></a> widget; it provides a default banner, background color, and has API for adding drawers, snack bars, and bottom sheets. Then you can add the <code>Center</code> widget directly to the <code>body</code> property for the home page.</p> <?code-excerpt path-base="layout/base"?> <?code-excerpt "lib/main.dart (my-app)"?> <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">class</span><span style="color:#0468D7"> MyApp</span><span style="color:#BD2314"> extends</span><span style="color:#0468D7"> StatelessWidget</span><span style="color:#222222"> {</span></span> <span class="line"><span style="color:#BD2314"> const</span><span style="color:#0468D7"> MyApp</span><span style="color:#222222">({</span><span style="color:#BD2314">super</span><span style="color:#222222">.key});</span></span> <span class="line"></span> <span class="line"><span style="color:#BD2314"> @override</span></span> <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> <span class="line"><span style="color:#BD2314"> const</span><span style="color:#0468D7"> String</span><span style="color:#222222"> appTitle = </span><span style="color:#0C7064">'Flutter layout demo'</span><span style="color:#222222">;</span></span> <span class="line"><span style="color:#BD2314"> return</span><span style="color:#0468D7"> MaterialApp</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> title: appTitle,</span></span> <span class="line"><span style="color:#222222"> home: </span><span style="color:#0468D7">Scaffold</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> appBar: </span><span style="color:#0468D7">AppBar</span><span style="color:#222222">(title: </span><span style="color:#BD2314">const</span><span style="color:#0468D7"> Text</span><span style="color:#222222">(appTitle)),</span></span> <span class="line"><span style="color:#222222"> body: </span><span style="color:#BD2314">const</span><span style="color:#0468D7"> Center</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> child: </span><span style="color:#0468D7">Text</span><span style="color:#222222">(</span><span style="color:#0C7064">'Hello World'</span><span style="color:#222222">),</span></span> <span class="line"><span style="color:#222222"> ),</span></span> <span class="line"><span style="color:#222222"> ),</span></span> <span class="line"><span style="color:#222222"> );</span></span> <span class="line"><span style="color:#222222"> }</span></span> <span class="line"><span style="color:#222222">}</span></span></code></pre></div></div><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 <a href="https://api.flutter.dev/flutter/material/material-library.html">Material library</a> implements widgets that follow <a href="https://m3.material.io/styles">Material Design</a> principles. When designing your UI, you can exclusively use widgets from the standard <a href="https://api.flutter.dev/flutter/widgets/widgets-library.html">widgets library</a>, or you can use widgets from the Material library. You can mix widgets from both libraries, you can customize existing widgets, or you can build your own set of custom widgets.</p></div></aside><div class="header-wrapper"><h4 id="cupertino-apps">Cupertino apps</h4><a class="heading-link" href="#cupertino-apps" aria-label="Link to 'Cupertino apps' section">#</a></div><p>To create a <code>Cupertino</code> app, use <code>CupertinoApp</code> and <a href="https://api.flutter.dev/flutter/cupertino/CupertinoPageScaffold-class.html"><code>CupertinoPageScaffold</code></a> widgets.</p><p>Unlike <code>Material</code>, it doesn't provide a default banner or background color. You need to set these yourself.</p><ul><li><p>To set default colors, pass in a configured <a href="https://api.flutter.dev/flutter/cupertino/CupertinoThemeData-class.html"><code>CupertinoThemeData</code></a> to your app's <code>theme</code> property.</p></li><li><p>To add an iOS-styled navigation bar to the top of your app, add a <a href="https://api.flutter.dev/flutter/cupertino/CupertinoNavigationBar-class.html"><code>CupertinoNavigationBar</code></a> widget to the <code>navigationBar</code> property of your scaffold. You can use the colors that <a href="https://api.flutter.dev/flutter/cupertino/CupertinoColors-class.html"><code>CupertinoColors</code></a> provides to configure your widgets to match iOS design.</p></li><li><p>To lay out the body of your app, set the <code>child</code> property of your scaffold with the desired widget as its value, like <code>Center</code> or <code>Column</code>.</p></li></ul><p>To learn what other UI components you can add, check out the <a href="https://api.flutter.dev/flutter/cupertino/cupertino-library.html">Cupertino library</a>.</p> <?code-excerpt "lib/cupertino.dart (my-app)"?> <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">class</span><span style="color:#0468D7"> MyApp</span><span style="color:#BD2314"> extends</span><span style="color:#0468D7"> StatelessWidget</span><span style="color:#222222"> {</span></span> <span class="line"><span style="color:#BD2314"> const</span><span style="color:#0468D7"> MyApp</span><span style="color:#222222">({</span><span style="color:#BD2314">super</span><span style="color:#222222">.key});</span></span> <span class="line"></span> <span class="line"><span style="color:#BD2314"> @override</span></span> <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> <span class="line"><span style="color:#BD2314"> return</span><span style="color:#BD2314"> const</span><span style="color:#0468D7"> CupertinoApp</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> title: </span><span style="color:#0C7064">'Flutter layout demo'</span><span style="color:#222222">,</span></span> <span class="line"><span style="color:#222222"> theme: </span><span style="color:#0468D7">CupertinoThemeData</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> brightness: </span><span style="color:#0468D7">Brightness</span><span style="color:#222222">.light,</span></span> <span class="line"><span style="color:#222222"> primaryColor: </span><span style="color:#0468D7">CupertinoColors</span><span style="color:#222222">.systemBlue,</span></span> <span class="line"><span style="color:#222222"> ),</span></span> <span class="line"><span style="color:#222222"> home: </span><span style="color:#0468D7">CupertinoPageScaffold</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> navigationBar: </span><span style="color:#0468D7">CupertinoNavigationBar</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> backgroundColor: </span><span style="color:#0468D7">CupertinoColors</span><span style="color:#222222">.systemGrey,</span></span> <span class="line"><span style="color:#222222"> middle: </span><span style="color:#0468D7">Text</span><span style="color:#222222">(</span><span style="color:#0C7064">'Flutter layout demo'</span><span style="color:#222222">),</span></span> <span class="line"><span style="color:#222222"> ),</span></span> <span class="line"><span style="color:#222222"> child: </span><span style="color:#0468D7">Center</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> child: </span><span style="color:#0468D7">Column</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> mainAxisAlignment: </span><span style="color:#0468D7">MainAxisAlignment</span><span style="color:#222222">.center,</span></span> <span class="line"><span style="color:#222222"> children: <</span><span style="color:#0468D7">Widget</span><span style="color:#222222">>[</span><span style="color:#0468D7">Text</span><span style="color:#222222">(</span><span style="color:#0C7064">'Hello World'</span><span style="color:#222222">)],</span></span> <span class="line"><span style="color:#222222"> ),</span></span> <span class="line"><span style="color:#222222"> ),</span></span> <span class="line"><span style="color:#222222"> ),</span></span> <span class="line"><span style="color:#222222"> );</span></span> <span class="line"><span style="color:#222222"> }</span></span> <span class="line"><span style="color:#222222">}</span></span></code></pre></div></div><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 <a href="https://api.flutter.dev/flutter/cupertino/cupertino-library.html">Cupertino library</a> implements widgets that follow <a href="https://developer.apple.com/design/human-interface-guidelines/designing-for-ios">Apple's Human Interface Guidelines for iOS</a>. When designing your UI, you can use widgets from the standard <a href="https://api.flutter.dev/flutter/widgets/widgets-library.html">widgets library</a>, or the Cupertino library. You can mix widgets from both libraries, you can customize existing widgets, or you can build your own set of custom widgets.</p></div></aside><div class="header-wrapper"><h4 id="non-material-apps">Non-Material apps</h4><a class="heading-link" href="#non-material-apps" aria-label="Link to 'Non-Material apps' section">#</a></div><p>For a non-Material app, you can add the <code>Container</code> widget to the app's <code>build()</code> method:</p> <?code-excerpt path-base="layout/non_material"?> <?code-excerpt "lib/main.dart (my-app)"?> <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">class</span><span style="color:#0468D7"> MyApp</span><span style="color:#BD2314"> extends</span><span style="color:#0468D7"> StatelessWidget</span><span style="color:#222222"> {</span></span> <span class="line"><span style="color:#BD2314"> const</span><span style="color:#0468D7"> MyApp</span><span style="color:#222222">({</span><span style="color:#BD2314">super</span><span style="color:#222222">.key});</span></span> <span class="line"></span> <span class="line"><span style="color:#BD2314"> @override</span></span> <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> <span class="line"><span style="color:#BD2314"> return</span><span style="color:#0468D7"> Container</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> decoration: </span><span style="color:#BD2314">const</span><span style="color:#0468D7"> BoxDecoration</span><span style="color:#222222">(color: </span><span style="color:#0468D7">Colors</span><span style="color:#222222">.white),</span></span> <span class="line"><span style="color:#222222"> child: </span><span style="color:#BD2314">const</span><span style="color:#0468D7"> Center</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> child: </span><span style="color:#0468D7">Text</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#0C7064"> 'Hello World'</span><span style="color:#222222">,</span></span> <span class="line"><span style="color:#222222"> textDirection: </span><span style="color:#0468D7">TextDirection</span><span style="color:#222222">.ltr,</span></span> <span class="line"><span style="color:#222222"> style: </span><span style="color:#0468D7">TextStyle</span><span style="color:#222222">(fontSize: </span><span style="color:#0C7064">32</span><span style="color:#222222">, color: </span><span style="color:#0468D7">Colors</span><span style="color:#222222">.black87),</span></span> <span class="line"><span style="color:#222222"> ),</span></span> <span class="line"><span style="color:#222222"> ),</span></span> <span class="line"><span style="color:#222222"> );</span></span> <span class="line"><span style="color:#222222"> }</span></span> <span class="line"><span style="color:#222222">}</span></span></code></pre></div></div><p>By default, a non-Material app doesn't include an <code>AppBar</code>, title, or background color. If you want these features in a non-Material app, you have to build them yourself. This app changes the background color to white and the text to dark grey to mimic a Material app.</p><div class="side-by-side"><div><p>That's it! When you run the app, you should see <em>Hello World</em>.</p><p>App source code:</p><ul><li><a href="https://github.com/flutter/website/tree/main/examples/layout/base">Material app</a></li><li><a href="https://github.com/flutter/website/tree/main/examples/layout/non_material">Non-Material app</a></li></ul></div><figure class=""><div class="site-figure-container"><img src="/assets/images/docs/ui/layout/hello-world.png" class="simple-border" alt="Screenshot of app displaying Hello World" style="max-height: 400px;"></div></figure></div><hr><div class="header-wrapper"><h2 id="lay-out-multiple-widgets-vertically-and-horizontally">Lay out multiple widgets vertically and horizontally</h2><a class="heading-link" href="#lay-out-multiple-widgets-vertically-and-horizontally" aria-label="Link to 'Lay out multiple widgets vertically and horizontally' section">#</a></div> <?code-excerpt path-base=""?> <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.</p><aside class="alert alert-secondary"><div class="alert-header"><span>What's the point?</span></div><div class="alert-content"><ul><li><code>Row</code> and <code>Column</code> are two of the most commonly used layout patterns.</li><li><code>Row</code> and <code>Column</code> each take a list of child widgets.</li><li>A child widget can itself be a <code>Row</code>, <code>Column</code>, or other complex widget.</li><li>You can specify how a <code>Row</code> or <code>Column</code> aligns its children, both vertically and horizontally.</li><li>You can stretch or constrain specific child widgets.</li><li>You can specify how child widgets use the <code>Row</code>'s or <code>Column</code>'s available space.</li></ul></div></aside><p>To create a row or column in Flutter, you add a list of children widgets to a <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> widget. In turn, each child can itself be a row or column, and so on. The following example shows how it is possible to nest rows or columns inside of rows or columns.</p><p>This layout is organized as a <code>Row</code>. The row contains two children: a column on the left, and an image on the right:</p><img src="/assets/images/docs/ui/layout/pavlova-diagram.png" alt="Screenshot with callouts showing the row containing two children"><p>The left column's widget tree nests rows and columns.</p><img src="/assets/images/docs/ui/layout/pavlova-left-column-diagram.png" alt="Diagram showing a left column broken down to its sub-rows and sub-columns"><p>You'll implement some of Pavlova's layout code in <a href="#nesting-rows-and-columns">Nesting rows and columns</a>.</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><code>Row</code> and <code>Column</code> are basic primitive widgets for horizontal and vertical layouts鈥攖hese low-level widgets allow for maximum customization. Flutter also offers specialized, higher level widgets that might be sufficient for your needs. For example, instead of <code>Row</code> you might prefer <a href="https://api.flutter.dev/flutter/material/ListTile-class.html"><code>ListTile</code></a>, an easy-to-use widget with properties for leading and trailing icons, and up to 3 lines of text. Instead of Column, you might prefer <a href="https://api.flutter.dev/flutter/widgets/ListView-class.html"><code>ListView</code></a>, a column-like layout that automatically scrolls if its content is too long to fit the available space. For more information, see <a href="#common-layout-widgets">Common layout widgets</a>.</p></div></aside><div class="header-wrapper"><h3 id="aligning-widgets">Aligning widgets</h3><a class="heading-link" href="#aligning-widgets" aria-label="Link to 'Aligning widgets' section">#</a></div><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><div class="side-by-side"><div class="centered-rows"><img src="/assets/images/docs/ui/layout/row-diagram.png" alt="Diagram showing the main axis and cross axis for a row"></div><div class="centered-rows"><img src="/assets/images/docs/ui/layout/column-diagram.png" alt="Diagram showing the main axis and cross axis for a column"></div></div><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><aside class="alert alert-info"><div class="alert-header"><i class="material-symbols" aria-hidden="true">info</i> <span>Note</span></div><div class="alert-content"><p>When you add images to your project, you need to update the <code>pubspec.yaml</code> file to access them鈥攖his example uses <code>Image.asset</code> to display the images. For more information, see this example's <a href="https://github.com/flutter/website/tree/main/examples/layout/row_column/pubspec.yaml"><code>pubspec.yaml</code> file</a> or <a href="/ui/assets/assets-and-images">Adding assets and images</a>. You don't need to do this if you're referencing online images using <code>Image.network</code>.</p></div></aside><p>In the following example, each of the 3 images is 100 pixels wide. The render box (in this case, the entire screen) is more than 300 pixels wide, so setting the main axis alignment to <code>spaceEvenly</code> divides the free horizontal space evenly between, before, and after each image.</p><div class="code-and-content"><div> <?code-excerpt "layout/row_column/lib/main.dart (row)" replace="/Row/[!$&!]/g"?> <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"><mark class="highlight"><span style="color:#0468D7">Row</span></mark><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> mainAxisAlignment: </span><span style="color:#0468D7">MainAxisAlignment</span><span style="color:#222222">.spaceEvenly,</span></span> <span class="line"><span style="color:#222222"> children: [</span></span> <span class="line"><span style="color:#0468D7"> Image</span><span style="color:#222222">.</span><span style="color:#6200EE">asset</span><span style="color:#222222">(</span><span style="color:#0C7064">'images/pic1.jpg'</span><span style="color:#222222">),</span></span> <span class="line"><span style="color:#0468D7"> Image</span><span style="color:#222222">.</span><span style="color:#6200EE">asset</span><span style="color:#222222">(</span><span style="color:#0C7064">'images/pic2.jpg'</span><span style="color:#222222">),</span></span> <span class="line"><span style="color:#0468D7"> Image</span><span style="color:#222222">.</span><span style="color:#6200EE">asset</span><span style="color:#222222">(</span><span style="color:#0C7064">'images/pic3.jpg'</span><span style="color:#222222">),</span></span> <span class="line"><span style="color:#222222"> ],</span></span> <span class="line"><span style="color:#222222">);</span></span></code></pre></div></div></div><div><img src="/assets/images/docs/ui/layout/row-spaceevenly-visual.png" alt="Row with 3 evenly spaced images"><p><strong>App source:</strong> <a href="https://github.com/flutter/website/tree/main/examples/layout/row_column">row_column</a></p></div></div><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><div class="code-and-content"><div> <?code-excerpt "layout/row_column/lib/main.dart (column)" replace="/Column/[!$&!]/g"?> <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"><mark class="highlight"><span style="color:#0468D7">Column</span></mark><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> mainAxisAlignment: </span><span style="color:#0468D7">MainAxisAlignment</span><span style="color:#222222">.spaceEvenly,</span></span> <span class="line"><span style="color:#222222"> children: [</span></span> <span class="line"><span style="color:#0468D7"> Image</span><span style="color:#222222">.</span><span style="color:#6200EE">asset</span><span style="color:#222222">(</span><span style="color:#0C7064">'images/pic1.jpg'</span><span style="color:#222222">),</span></span> <span class="line"><span style="color:#0468D7"> Image</span><span style="color:#222222">.</span><span style="color:#6200EE">asset</span><span style="color:#222222">(</span><span style="color:#0C7064">'images/pic2.jpg'</span><span style="color:#222222">),</span></span> <span class="line"><span style="color:#0468D7"> Image</span><span style="color:#222222">.</span><span style="color:#6200EE">asset</span><span style="color:#222222">(</span><span style="color:#0C7064">'images/pic3.jpg'</span><span style="color:#222222">),</span></span> <span class="line"><span style="color:#222222"> ],</span></span> <span class="line"><span style="color:#222222">);</span></span></code></pre></div></div></div><div class="text-center"><img src="/assets/images/docs/ui/layout/column-visual.png" height="250px" alt="Column showing 3 images spaced evenly"><p><strong>App source:</strong> <a href="https://github.com/flutter/website/tree/main/examples/layout/row_column">row_column</a></p></div></div><div class="header-wrapper"><h3 id="sizing-widgets">Sizing widgets</h3><a class="heading-link" href="#sizing-widgets" aria-label="Link to 'Sizing widgets' 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. Here is an <a href="https://github.com/flutter/website/tree/main/examples/layout/sizing">example</a> of a row that is too wide:</p><img src="/assets/images/docs/ui/layout/layout-too-large.png" class="text-center" alt="Overly-wide row"><p>Widgets can be sized to fit within a row or column by using the <a href="https://api.flutter.dev/flutter/widgets/Expanded-class.html"><code>Expanded</code></a> widget. To fix the previous example where the row of images is too wide for its render box, wrap each image with an <code>Expanded</code> widget.</p><div class="code-and-content"><div> <?code-excerpt "layout/sizing/lib/main.dart (expanded-images)" replace="/Expanded/[!$&!]/g"?> <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">Row</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> crossAxisAlignment: </span><span style="color:#0468D7">CrossAxisAlignment</span><span style="color:#222222">.center,</span></span> <span class="line"><span style="color:#222222"> children: [</span></span> <span class="line"><span style="color:#0468D7"> </span><mark class="highlight"><span style="color:#0468D7">Expanded</span></mark><span style="color:#222222">(child: </span><span style="color:#0468D7">Image</span><span style="color:#222222">.</span><span style="color:#6200EE">asset</span><span style="color:#222222">(</span><span style="color:#0C7064">'images/pic1.jpg'</span><span style="color:#222222">)),</span></span> <span class="line"><span style="color:#0468D7"> </span><mark class="highlight"><span style="color:#0468D7">Expanded</span></mark><span style="color:#222222">(child: </span><span style="color:#0468D7">Image</span><span style="color:#222222">.</span><span style="color:#6200EE">asset</span><span style="color:#222222">(</span><span style="color:#0C7064">'images/pic2.jpg'</span><span style="color:#222222">)),</span></span> <span class="line"><span style="color:#0468D7"> </span><mark class="highlight"><span style="color:#0468D7">Expanded</span></mark><span style="color:#222222">(child: </span><span style="color:#0468D7">Image</span><span style="color:#222222">.</span><span style="color:#6200EE">asset</span><span style="color:#222222">(</span><span style="color:#0C7064">'images/pic3.jpg'</span><span style="color:#222222">)),</span></span> <span class="line"><span style="color:#222222"> ],</span></span> <span class="line"><span style="color:#222222">);</span></span></code></pre></div></div></div><div><img src="/assets/images/docs/ui/layout/row-expanded-2-visual.png" alt="Row of 3 images that are too wide, but each is constrained to take only 1/3 of the space"><p><strong>App source:</strong> <a href="https://github.com/flutter/website/tree/main/examples/layout/sizing">sizing</a></p></div></div><p>Perhaps you want a widget to occupy twice as much space as its siblings. For this, use the <code>Expanded</code> widget <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><div class="code-and-content"><div> <?code-excerpt "layout/sizing/lib/main.dart (expanded-images-with-flex)" replace="/flex.*/[!$&!]/g"?> <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">Row</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> crossAxisAlignment: </span><span style="color:#0468D7">CrossAxisAlignment</span><span style="color:#222222">.center,</span></span> <span class="line"><span style="color:#222222"> children: [</span></span> <span class="line"><span style="color:#0468D7"> Expanded</span><span style="color:#222222">(child: </span><span style="color:#0468D7">Image</span><span style="color:#222222">.</span><span style="color:#6200EE">asset</span><span style="color:#222222">(</span><span style="color:#0C7064">'images/pic1.jpg'</span><span style="color:#222222">)),</span></span> <span class="line"><span style="color:#0468D7"> Expanded</span><span style="color:#222222">(</span><mark class="highlight"><span style="color:#222222">flex: </span><span style="color:#0C7064">2</span><span style="color:#222222">, child: </span><span style="color:#0468D7">Image</span><span style="color:#222222">.</span><span style="color:#6200EE">asset</span><span style="color:#222222">(</span><span style="color:#0C7064">'images/pic2.jpg'</span><span style="color:#222222">)),</span></mark></span> <span class="line"><span style="color:#0468D7"> Expanded</span><span style="color:#222222">(child: </span><span style="color:#0468D7">Image</span><span style="color:#222222">.</span><span style="color:#6200EE">asset</span><span style="color:#222222">(</span><span style="color:#0C7064">'images/pic3.jpg'</span><span style="color:#222222">)),</span></span> <span class="line"><span style="color:#222222"> ],</span></span> <span class="line"><span style="color:#222222">);</span></span></code></pre></div></div></div><div><img src="/assets/images/docs/ui/layout/row-expanded-visual.png" alt="Row of 3 images with the middle image twice as wide as the others"><p><strong>App source:</strong> <a href="https://github.com/flutter/website/tree/main/examples/layout/sizing">sizing</a></p></div></div><div class="header-wrapper"><h3 id="packing-widgets">Packing widgets</h3><a class="heading-link" href="#packing-widgets" aria-label="Link to 'Packing widgets' section">#</a></div><p>By default, a row or column occupies as much space along its main axis as possible, but if you want to pack the children closely together, set its <code>mainAxisSize</code> to <code>MainAxisSize.min</code>. The following example uses this property to pack the star icons together.</p><div class="code-and-content"><div> <?code-excerpt "layout/pavlova/lib/main.dart (stars)" replace="/mainAxisSize.*/[!$&!]/g; /\w+ \w+ = //g; /;//g"?> <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">Row</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> </span><mark class="highlight"><span style="color:#222222">mainAxisSize: </span><span style="color:#0468D7">MainAxisSize</span><span style="color:#222222">.min,</span></mark></span> <span class="line"><span style="color:#222222"> children: [</span></span> <span class="line"><span style="color:#0468D7"> Icon</span><span style="color:#222222">(</span><span style="color:#0468D7">Icons</span><span style="color:#222222">.star, color: </span><span style="color:#0468D7">Colors</span><span style="color:#222222">.green[</span><span style="color:#0C7064">500</span><span style="color:#222222">]),</span></span> <span class="line"><span style="color:#0468D7"> Icon</span><span style="color:#222222">(</span><span style="color:#0468D7">Icons</span><span style="color:#222222">.star, color: </span><span style="color:#0468D7">Colors</span><span style="color:#222222">.green[</span><span style="color:#0C7064">500</span><span style="color:#222222">]),</span></span> <span class="line"><span style="color:#0468D7"> Icon</span><span style="color:#222222">(</span><span style="color:#0468D7">Icons</span><span style="color:#222222">.star, color: </span><span style="color:#0468D7">Colors</span><span style="color:#222222">.green[</span><span style="color:#0C7064">500</span><span style="color:#222222">]),</span></span> <span class="line"><span style="color:#BD2314"> const</span><span style="color:#0468D7"> Icon</span><span style="color:#222222">(</span><span style="color:#0468D7">Icons</span><span style="color:#222222">.star, color: </span><span style="color:#0468D7">Colors</span><span style="color:#222222">.black),</span></span> <span class="line"><span style="color:#BD2314"> const</span><span style="color:#0468D7"> Icon</span><span style="color:#222222">(</span><span style="color:#0468D7">Icons</span><span style="color:#222222">.star, color: </span><span style="color:#0468D7">Colors</span><span style="color:#222222">.black),</span></span> <span class="line"><span style="color:#222222"> ],</span></span> <span class="line"><span style="color:#222222">)</span></span></code></pre></div></div></div><div><img src="/assets/images/docs/ui/layout/packed.png" class="simple-border" alt="Row of 5 stars, packed together in the middle of the row"><p><strong>App source:</strong> <a href="https://github.com/flutter/website/tree/main/examples/layout/pavlova">pavlova</a></p></div></div><div class="header-wrapper"><h3 id="nesting-rows-and-columns">Nesting rows and columns</h3><a class="heading-link" href="#nesting-rows-and-columns" aria-label="Link to 'Nesting rows and columns' section">#</a></div><p>The layout framework allows you to nest rows and columns inside of rows and columns as deeply as you need. Let's look at the code for the outlined section of the following layout:</p><img src="/assets/images/docs/ui/layout/pavlova-large-annotated.png" class="border text-center" alt="Screenshot of the pavlova app, with the ratings and icon rows outlined in red"><p>The outlined section is implemented as two rows. The ratings row contains five stars and the number of reviews. The icons row contains three columns of icons and text.</p><p>The widget tree for the ratings row:</p><img src="/assets/images/docs/ui/layout/widget-tree-pavlova-rating-row.png" class="text-center" alt="Ratings row widget tree"><p>The <code>ratings</code> variable creates a row containing a smaller row of 5-star icons, and text:</p> <?code-excerpt "layout/pavlova/lib/main.dart (ratings)" replace="/ratings/[!$&!]/g"?> <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:#222222"> stars = </span><span style="color:#0468D7">Row</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> mainAxisSize: </span><span style="color:#0468D7">MainAxisSize</span><span style="color:#222222">.min,</span></span> <span class="line"><span style="color:#222222"> children: [</span></span> <span class="line"><span style="color:#0468D7"> Icon</span><span style="color:#222222">(</span><span style="color:#0468D7">Icons</span><span style="color:#222222">.star, color: </span><span style="color:#0468D7">Colors</span><span style="color:#222222">.green[</span><span style="color:#0C7064">500</span><span style="color:#222222">]),</span></span> <span class="line"><span style="color:#0468D7"> Icon</span><span style="color:#222222">(</span><span style="color:#0468D7">Icons</span><span style="color:#222222">.star, color: </span><span style="color:#0468D7">Colors</span><span style="color:#222222">.green[</span><span style="color:#0C7064">500</span><span style="color:#222222">]),</span></span> <span class="line"><span style="color:#0468D7"> Icon</span><span style="color:#222222">(</span><span style="color:#0468D7">Icons</span><span style="color:#222222">.star, color: </span><span style="color:#0468D7">Colors</span><span style="color:#222222">.green[</span><span style="color:#0C7064">500</span><span style="color:#222222">]),</span></span> <span class="line"><span style="color:#BD2314"> const</span><span style="color:#0468D7"> Icon</span><span style="color:#222222">(</span><span style="color:#0468D7">Icons</span><span style="color:#222222">.star, color: </span><span style="color:#0468D7">Colors</span><span style="color:#222222">.black),</span></span> <span class="line"><span style="color:#BD2314"> const</span><span style="color:#0468D7"> Icon</span><span style="color:#222222">(</span><span style="color:#0468D7">Icons</span><span style="color:#222222">.star, color: </span><span style="color:#0468D7">Colors</span><span style="color:#222222">.black),</span></span> <span class="line"><span style="color:#222222"> ],</span></span> <span class="line"><span style="color:#222222">);</span></span> <span class="line"></span> <span class="line"><span style="color:#BD2314">final</span><span style="color:#222222"> </span><mark class="highlight"><span style="color:#222222">ratings</span></mark><span style="color:#222222"> = </span><span style="color:#0468D7">Container</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> 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">20</span><span style="color:#222222">),</span></span> <span class="line"><span style="color:#222222"> child: </span><span style="color:#0468D7">Row</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> mainAxisAlignment: </span><span style="color:#0468D7">MainAxisAlignment</span><span style="color:#222222">.spaceEvenly,</span></span> <span class="line"><span style="color:#222222"> children: [</span></span> <span class="line"><span style="color:#222222"> stars,</span></span> <span class="line"><span style="color:#BD2314"> const</span><span style="color:#0468D7"> Text</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#0C7064"> '170 Reviews'</span><span style="color:#222222">,</span></span> <span class="line"><span style="color:#222222"> style: </span><span style="color:#0468D7">TextStyle</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> color: </span><span style="color:#0468D7">Colors</span><span style="color:#222222">.black,</span></span> <span class="line"><span style="color:#222222"> fontWeight: </span><span style="color:#0468D7">FontWeight</span><span style="color:#222222">.w800,</span></span> <span class="line"><span style="color:#222222"> fontFamily: </span><span style="color:#0C7064">'Roboto'</span><span style="color:#222222">,</span></span> <span class="line"><span style="color:#222222"> letterSpacing: </span><span style="color:#0C7064">0.5</span><span style="color:#222222">,</span></span> <span class="line"><span style="color:#222222"> fontSize: </span><span style="color:#0C7064">20</span><span style="color:#222222">,</span></span> <span class="line"><span style="color:#222222"> ),</span></span> <span class="line"><span style="color:#222222"> ),</span></span> <span class="line"><span style="color:#222222"> ],</span></span> <span class="line"><span style="color:#222222"> ),</span></span> <span class="line"><span style="color:#222222">);</span></span></code></pre></div></div><aside class="alert alert-success"><div class="alert-header"><i class="material-symbols" aria-hidden="true">lightbulb</i> <span>Tip</span></div><div class="alert-content"><p>To minimize the visual confusion that can result from heavily nested layout code, implement pieces of the UI in variables and functions.</p></div></aside><p>The icons row, below the ratings row, contains 3 columns; each column contains an icon and two lines of text, as you can see in its widget tree:</p><img src="/assets/images/docs/ui/layout/widget-tree-pavlova-icon-row.png" class="text-center" alt="Icon widget tree"><p>The <code>iconList</code> variable defines the icons row:</p> <?code-excerpt "layout/pavlova/lib/main.dart (icon-list)" replace="/iconList/[!$&!]/g"?> <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">const</span><span style="color:#222222"> descTextStyle = </span><span style="color:#0468D7">TextStyle</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> color: </span><span style="color:#0468D7">Colors</span><span style="color:#222222">.black,</span></span> <span class="line"><span style="color:#222222"> fontWeight: </span><span style="color:#0468D7">FontWeight</span><span style="color:#222222">.w800,</span></span> <span class="line"><span style="color:#222222"> fontFamily: </span><span style="color:#0C7064">'Roboto'</span><span style="color:#222222">,</span></span> <span class="line"><span style="color:#222222"> letterSpacing: </span><span style="color:#0C7064">0.5</span><span style="color:#222222">,</span></span> <span class="line"><span style="color:#222222"> fontSize: </span><span style="color:#0C7064">18</span><span style="color:#222222">,</span></span> <span class="line"><span style="color:#222222"> height: </span><span style="color:#0C7064">2</span><span style="color:#222222">,</span></span> <span class="line"><span style="color:#222222">);</span></span> <span class="line"></span> <span class="line"><span style="color:#6E6E70">// DefaultTextStyle.merge() allows you to create a default text</span></span> <span class="line"><span style="color:#6E6E70">// style that is inherited by its child and all subsequent children.</span></span> <span class="line"><span style="color:#BD2314">final</span><span style="color:#222222"> </span><mark class="highlight"><span style="color:#222222">iconList</span></mark><span style="color:#222222"> = </span><span style="color:#0468D7">DefaultTextStyle</span><span style="color:#222222">.</span><span style="color:#6200EE">merge</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> style: descTextStyle,</span></span> <span class="line"><span style="color:#222222"> child: </span><span style="color:#0468D7">Container</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> 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">20</span><span style="color:#222222">),</span></span> <span class="line"><span style="color:#222222"> child: </span><span style="color:#0468D7">Row</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> mainAxisAlignment: </span><span style="color:#0468D7">MainAxisAlignment</span><span style="color:#222222">.spaceEvenly,</span></span> <span class="line"><span style="color:#222222"> children: [</span></span> <span class="line"><span style="color:#0468D7"> Column</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> children: [</span></span> <span class="line"><span style="color:#0468D7"> Icon</span><span style="color:#222222">(</span><span style="color:#0468D7">Icons</span><span style="color:#222222">.kitchen, color: </span><span style="color:#0468D7">Colors</span><span style="color:#222222">.green[</span><span style="color:#0C7064">500</span><span style="color:#222222">]),</span></span> <span class="line"><span style="color:#BD2314"> const</span><span style="color:#0468D7"> Text</span><span style="color:#222222">(</span><span style="color:#0C7064">'PREP:'</span><span style="color:#222222">),</span></span> <span class="line"><span style="color:#BD2314"> const</span><span style="color:#0468D7"> Text</span><span style="color:#222222">(</span><span style="color:#0C7064">'25 min'</span><span style="color:#222222">),</span></span> <span class="line"><span style="color:#222222"> ],</span></span> <span class="line"><span style="color:#222222"> ),</span></span> <span class="line"><span style="color:#0468D7"> Column</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> children: [</span></span> <span class="line"><span style="color:#0468D7"> Icon</span><span style="color:#222222">(</span><span style="color:#0468D7">Icons</span><span style="color:#222222">.timer, color: </span><span style="color:#0468D7">Colors</span><span style="color:#222222">.green[</span><span style="color:#0C7064">500</span><span style="color:#222222">]),</span></span> <span class="line"><span style="color:#BD2314"> const</span><span style="color:#0468D7"> Text</span><span style="color:#222222">(</span><span style="color:#0C7064">'COOK:'</span><span style="color:#222222">),</span></span> <span class="line"><span style="color:#BD2314"> const</span><span style="color:#0468D7"> Text</span><span style="color:#222222">(</span><span style="color:#0C7064">'1 hr'</span><span style="color:#222222">),</span></span> <span class="line"><span style="color:#222222"> ],</span></span> <span class="line"><span style="color:#222222"> ),</span></span> <span class="line"><span style="color:#0468D7"> Column</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> children: [</span></span> <span class="line"><span style="color:#0468D7"> Icon</span><span style="color:#222222">(</span><span style="color:#0468D7">Icons</span><span style="color:#222222">.restaurant, color: </span><span style="color:#0468D7">Colors</span><span style="color:#222222">.green[</span><span style="color:#0C7064">500</span><span style="color:#222222">]),</span></span> <span class="line"><span style="color:#BD2314"> const</span><span style="color:#0468D7"> Text</span><span style="color:#222222">(</span><span style="color:#0C7064">'FEEDS:'</span><span style="color:#222222">),</span></span> <span class="line"><span style="color:#BD2314"> const</span><span style="color:#0468D7"> Text</span><span style="color:#222222">(</span><span style="color:#0C7064">'4-6'</span><span style="color:#222222">),</span></span> <span class="line"><span style="color:#222222"> ],</span></span> <span class="line"><span style="color:#222222"> ),</span></span> <span class="line"><span style="color:#222222"> ],</span></span> <span class="line"><span style="color:#222222"> ),</span></span> <span class="line"><span style="color:#222222"> ),</span></span> <span class="line"><span style="color:#222222">);</span></span></code></pre></div></div><p>The <code>leftColumn</code> variable contains the ratings and icons rows, as well as the title and text that describes the Pavlova:</p> <?code-excerpt "layout/pavlova/lib/main.dart (left-column)" replace="/leftColumn/[!$&!]/g"?> <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:#222222"> </span><mark class="highlight"><span style="color:#222222">leftColumn</span></mark><span style="color:#222222"> = </span><span style="color:#0468D7">Container</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> padding: </span><span style="color:#BD2314">const</span><span style="color:#0468D7"> EdgeInsets</span><span style="color:#222222">.</span><span style="color:#6200EE">fromLTRB</span><span style="color:#222222">(</span><span style="color:#0C7064">20</span><span style="color:#222222">, </span><span style="color:#0C7064">30</span><span style="color:#222222">, </span><span style="color:#0C7064">20</span><span style="color:#222222">, </span><span style="color:#0C7064">20</span><span style="color:#222222">),</span></span> <span class="line"><span style="color:#222222"> child: </span><span style="color:#0468D7">Column</span><span style="color:#222222">(children: [titleText, subTitle, ratings, iconList]),</span></span> <span class="line"><span style="color:#222222">);</span></span></code></pre></div></div><p>The left column is placed in a <code>SizedBox</code> to constrain its width. Finally, the UI is constructed with the entire row (containing the left column and the image) inside a <code>Card</code>.</p><p>The <a href="https://pixabay.com/en/photos/pavlova">Pavlova image</a> is from <a href="https://pixabay.com/en/photos/pavlova">Pixabay</a>. You can embed an image from the net using <code>Image.network()</code> but, for this example, the image is saved to an images directory in the project, added to the <a href="https://github.com/flutter/website/tree/main/examples/layout/pavlova/pubspec.yaml">pubspec file</a>, and accessed using <code>Images.asset()</code>. For more information, see <a href="/ui/assets/assets-and-images">Adding assets and images</a>.</p> <?code-excerpt "layout/pavlova/lib/main.dart (body)"?> <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:#222222">body: </span><span style="color:#0468D7">Center</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> child: </span><span style="color:#0468D7">Container</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> margin: </span><span style="color:#BD2314">const</span><span style="color:#0468D7"> EdgeInsets</span><span style="color:#222222">.</span><span style="color:#6200EE">fromLTRB</span><span style="color:#222222">(</span><span style="color:#0C7064">0</span><span style="color:#222222">, </span><span style="color:#0C7064">40</span><span style="color:#222222">, </span><span style="color:#0C7064">0</span><span style="color:#222222">, </span><span style="color:#0C7064">30</span><span style="color:#222222">),</span></span> <span class="line"><span style="color:#222222"> height: </span><span style="color:#0C7064">600</span><span style="color:#222222">,</span></span> <span class="line"><span style="color:#222222"> child: </span><span style="color:#0468D7">Card</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> child: </span><span style="color:#0468D7">Row</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> crossAxisAlignment: </span><span style="color:#0468D7">CrossAxisAlignment</span><span style="color:#222222">.start,</span></span> <span class="line"><span style="color:#222222"> children: [</span><span style="color:#0468D7">SizedBox</span><span style="color:#222222">(width: </span><span style="color:#0C7064">440</span><span style="color:#222222">, child: leftColumn), mainImage],</span></span> <span class="line"><span style="color:#222222"> ),</span></span> <span class="line"><span style="color:#222222"> ),</span></span> <span class="line"><span style="color:#222222"> ),</span></span> <span class="line"><span style="color:#222222">),</span></span></code></pre></div></div><aside class="alert alert-success"><div class="alert-header"><i class="material-symbols" aria-hidden="true">lightbulb</i> <span>Tip</span></div><div class="alert-content"><p>The Pavlova example runs best horizontally on a wide device, such as a tablet. If you are running this example in the iOS simulator, you can select a different device using the <strong>Hardware > Device</strong> menu. For this example, we recommend the iPad Pro. You can change its orientation to landscape mode using <strong>Hardware > Rotate</strong>. You can also change the size of the simulator window (without changing the number of logical pixels) using <strong>Window > Scale</strong>.</p></div></aside><p><strong>App source:</strong> <a href="https://github.com/flutter/website/tree/main/examples/layout/pavlova">pavlova</a></p><hr><div class="header-wrapper"><h2 id="common-layout-widgets">Common layout widgets</h2><a class="heading-link" href="#common-layout-widgets" aria-label="Link to 'Common layout widgets' section">#</a></div><p>Flutter has a rich library of layout widgets. Here are a few of those most commonly used. The intent is to get you up and running as quickly as possible, rather than overwhelm you with a complete list. For information on other available widgets, refer to the <a href="/ui/widgets">Widget catalog</a>, or use the Search box in the <a href="https://api.flutter.dev/flutter">API reference docs</a>. Also, the widget pages in the API docs often make suggestions about similar widgets that might better suit your needs.</p><p>The following widgets fall into two categories: standard widgets from the <a href="https://api.flutter.dev/flutter/widgets/widgets-library.html">widgets library</a>, and specialized widgets from the <a href="https://api.flutter.dev/flutter/material/material-library.html">Material library</a>. Any app can use the widgets library but only Material apps can use the Material Components library.</p><div class="header-wrapper"><h3 id="standard-widgets">Standard widgets</h3><a class="heading-link" href="#standard-widgets" aria-label="Link to 'Standard widgets' section">#</a></div><ul><li><a href="#container"><code>Container</code></a>: Adds padding, margins, borders, background color, or other decorations to a widget.</li><li><a href="#gridview"><code>GridView</code></a>: Lays widgets out as a scrollable grid.</li><li><a href="#listview"><code>ListView</code></a>: Lays widgets out as a scrollable list.</li><li><a href="#stack"><code>Stack</code></a>: Overlaps a widget on top of another.</li></ul><div class="header-wrapper"><h3 id="material-widgets">Material widgets</h3><a class="heading-link" href="#material-widgets" aria-label="Link to 'Material widgets' section">#</a></div><ul><li><a href="#card"><code>Card</code></a>: Organizes related info into a box with rounded corners and a drop shadow.</li><li><a href="#listtile"><code>ListTile</code></a>: Organizes up to 3 lines of text, and optional leading and trailing icons, into a row.</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>Many layouts make liberal use of <a href="https://api.flutter.dev/flutter/widgets/Container-class.html"><code>Container</code></a>s to separate widgets using padding, or to add borders or margins. You can change the device's background by placing the entire layout into a <code>Container</code> and changing its background color or image.</p><div class="side-by-side"><div><div class="header-wrapper"><h4 id="summary-container">Summary (Container)</h4><a class="heading-link" href="#summary-container" aria-label="Link to 'Summary (Container)' section">#</a></div><ul><li>Add padding, margins, borders</li><li>Change background color or image</li><li>Contains a single child widget, but that child can be a <code>Row</code>, <code>Column</code>, or even the root of a widget tree</li></ul></div><div class="text-center"><img src="/assets/images/docs/ui/layout/margin-padding-border.png" alt="Diagram showing: margin, border, padding, and content"></div></div><div class="header-wrapper"><h4 id="examples-container">Examples (Container)</h4><a class="heading-link" href="#examples-container" aria-label="Link to 'Examples (Container)' section">#</a></div><p>This layout consists of a column with two rows, each containing 2 images. A <a href="https://api.flutter.dev/flutter/widgets/Container-class.html"><code>Container</code></a> is used to change the background color of the column to a lighter grey.</p><div class="code-and-content"><div> <?code-excerpt "layout/container/lib/main.dart (column)" replace="/\bContainer/[!$&!]/g;"?> <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"> _buildImageColumn</span><span style="color:#222222">() {</span></span> <span class="line"><span style="color:#BD2314"> return</span><span style="color:#0468D7"> </span><mark class="highlight"><span style="color:#0468D7">Container</span></mark><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> decoration: </span><span style="color:#BD2314">const</span><span style="color:#0468D7"> BoxDecoration</span><span style="color:#222222">(color: </span><span style="color:#0468D7">Colors</span><span style="color:#222222">.black26),</span></span> <span class="line"><span style="color:#222222"> child: </span><span style="color:#0468D7">Column</span><span style="color:#222222">(children: [</span><span style="color:#6200EE">_buildImageRow</span><span style="color:#222222">(</span><span style="color:#0C7064">1</span><span style="color:#222222">), </span><span style="color:#6200EE">_buildImageRow</span><span style="color:#222222">(</span><span style="color:#0C7064">3</span><span style="color:#222222">)]),</span></span> <span class="line"><span style="color:#222222"> );</span></span> <span class="line"><span style="color:#222222">}</span></span></code></pre></div></div></div><div class="text-center"><img src="/assets/images/docs/ui/layout/container.png" class="mb-4" width="230px" alt="Screenshot showing 2 rows, each containing 2 images"></div></div><p>A <code>Container</code> is also used to add a rounded border and margins to each image:</p> <?code-excerpt "layout/container/lib/main.dart (row)" replace="/\bContainer/[!$&!]/g;"?> <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"> _buildDecoratedImage</span><span style="color:#222222">(</span><span style="color:#0468D7">int</span><span style="color:#222222"> imageIndex) => </span><span style="color:#0468D7">Expanded</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> child: </span><mark class="highlight"><span style="color:#0468D7">Container</span></mark><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> decoration: </span><span style="color:#0468D7">BoxDecoration</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> border: </span><span style="color:#0468D7">Border</span><span style="color:#222222">.</span><span style="color:#6200EE">all</span><span style="color:#222222">(width: </span><span style="color:#0C7064">10</span><span style="color:#222222">, color: </span><span style="color:#0468D7">Colors</span><span style="color:#222222">.black38),</span></span> <span class="line"><span style="color:#222222"> borderRadius: </span><span style="color:#BD2314">const</span><span style="color:#0468D7"> BorderRadius</span><span style="color:#222222">.</span><span style="color:#6200EE">all</span><span style="color:#222222">(</span><span style="color:#0468D7">Radius</span><span style="color:#222222">.</span><span style="color:#6200EE">circular</span><span style="color:#222222">(</span><span style="color:#0C7064">8</span><span style="color:#222222">)),</span></span> <span class="line"><span style="color:#222222"> ),</span></span> <span class="line"><span style="color:#222222"> margin: </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">4</span><span style="color:#222222">),</span></span> <span class="line"><span style="color:#222222"> child: </span><span style="color:#0468D7">Image</span><span style="color:#222222">.</span><span style="color:#6200EE">asset</span><span style="color:#222222">(</span><span style="color:#0C7064">'images/pic</span><span style="color:#0C7064">$</span><span style="color:#222222">imageIndex</span><span style="color:#0C7064">.jpg'</span><span style="color:#222222">),</span></span> <span class="line"><span style="color:#222222"> ),</span></span> <span class="line"><span style="color:#222222">);</span></span> <span class="line"></span> <span class="line"><span style="color:#0468D7">Widget</span><span style="color:#6200EE"> _buildImageRow</span><span style="color:#222222">(</span><span style="color:#0468D7">int</span><span style="color:#222222"> imageIndex) => </span><span style="color:#0468D7">Row</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> children: [</span></span> <span class="line"><span style="color:#6200EE"> _buildDecoratedImage</span><span style="color:#222222">(imageIndex),</span></span> <span class="line"><span style="color:#6200EE"> _buildDecoratedImage</span><span style="color:#222222">(imageIndex + </span><span style="color:#0C7064">1</span><span style="color:#222222">),</span></span> <span class="line"><span style="color:#222222"> ],</span></span> <span class="line"><span style="color:#222222">);</span></span></code></pre></div></div><p>You can find more <code>Container</code> examples in the <a href="/ui/layout/tutorial">tutorial</a>.</p><p><strong>App source:</strong> <a href="https://github.com/flutter/website/tree/main/examples/layout/container">container</a></p><hr><div class="header-wrapper"><h3 id="gridview">GridView</h3><a class="heading-link" href="#gridview" aria-label="Link to 'GridView' section">#</a></div><p>Use <a href="https://api.flutter.dev/flutter/widgets/GridView-class.html"><code>GridView</code></a> to lay widgets out as a two-dimensional list. <code>GridView</code> provides two pre-fabricated lists, or you can build your own custom grid. When a <code>GridView</code> detects that its contents are too long to fit the render box, it automatically scrolls.</p><div class="header-wrapper"><h4 id="summary-gridview">Summary (GridView)</h4><a class="heading-link" href="#summary-gridview" aria-label="Link to 'Summary (GridView)' section">#</a></div><ul><li>Lays widgets out in a grid</li><li>Detects when the column content exceeds the render box and automatically provides scrolling</li><li>Build your own custom grid, or use one of the provided grids:<ul><li><code>GridView.count</code> allows you to specify the number of columns</li><li><code>GridView.extent</code> allows you to specify the maximum pixel width of a tile</li></ul></li></ul><aside class="alert alert-info"><div class="alert-header"><i class="material-symbols" aria-hidden="true">info</i> <span>Note</span></div><div class="alert-content"><p>When displaying a two-dimensional list where it's important which row and column a cell occupies (for example, it's the entry in the "calorie" column for the "avocado" row), use <a href="https://api.flutter.dev/flutter/widgets/Table-class.html"><code>Table</code></a> or <a href="https://api.flutter.dev/flutter/material/DataTable-class.html"><code>DataTable</code></a>.</p></div></aside><div class="header-wrapper"><h4 id="examples-gridview">Examples (GridView)</h4><a class="heading-link" href="#examples-gridview" aria-label="Link to 'Examples (GridView)' section">#</a></div><div class="side-by-side"><div><img src="/assets/images/docs/ui/layout/gridview-extent.png" class="text-center" alt="A 3-column grid of photos" height="440px"><p>Uses <code>GridView.extent</code> to create a grid with tiles a maximum 150 pixels wide.</p><p><strong>App source:</strong> <a href="https://github.com/flutter/website/tree/main/examples/layout/grid_and_list">grid_and_list</a></p></div><div><img src="/assets/images/docs/ui/layout/gridview-count-flutter-gallery.png" class="text-center" alt="A 2 column grid with footers" height="440px"><p>Uses <code>GridView.count</code> to create a grid that's 2 tiles wide in portrait mode, and 3 tiles wide in landscape mode. The titles are created by setting the <code>footer</code> property for each <a href="https://api.flutter.dev/flutter/material/GridTile-class.html"><code>GridTile</code></a>.</p><p><strong>Dart code:</strong> <a href="https://github.com/flutter/website/tree/main/examples/layout/gallery/lib/grid_list_demo.dart"><code>grid_list_demo.dart</code></a></p></div></div> <?code-excerpt "layout/grid_and_list/lib/main.dart (grid)" replace="/\GridView/[!$&!]/g;"?> <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"> _buildGrid</span><span style="color:#222222">() => </span><mark class="highlight"><span style="color:#0468D7">GridView</span></mark><span style="color:#222222">.</span><span style="color:#6200EE">extent</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> maxCrossAxisExtent: </span><span style="color:#0C7064">150</span><span style="color:#222222">,</span></span> <span class="line"><span style="color:#222222"> 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">4</span><span style="color:#222222">),</span></span> <span class="line"><span style="color:#222222"> mainAxisSpacing: </span><span style="color:#0C7064">4</span><span style="color:#222222">,</span></span> <span class="line"><span style="color:#222222"> crossAxisSpacing: </span><span style="color:#0C7064">4</span><span style="color:#222222">,</span></span> <span class="line"><span style="color:#222222"> children: </span><span style="color:#6200EE">_buildGridTileList</span><span style="color:#222222">(</span><span style="color:#0C7064">30</span><span style="color:#222222">),</span></span> <span class="line"><span style="color:#222222">);</span></span> <span class="line"></span> <span class="line"><span style="color:#6E6E70">// The images are saved with names pic0.jpg, pic1.jpg...pic29.jpg.</span></span> <span class="line"><span style="color:#6E6E70">// The List.generate() constructor allows an easy way to create</span></span> <span class="line"><span style="color:#6E6E70">// a list when objects have a predictable naming pattern.</span></span> <span class="line"><span style="color:#0468D7">List</span><span style="color:#222222"><</span><span style="color:#0468D7">Widget</span><span style="color:#222222">> </span><span style="color:#6200EE">_buildGridTileList</span><span style="color:#222222">(</span><span style="color:#0468D7">int</span><span style="color:#222222"> count) =></span></span> <span class="line"><span style="color:#0468D7"> List</span><span style="color:#222222">.</span><span style="color:#6200EE">generate</span><span style="color:#222222">(count, (i) => </span><span style="color:#0468D7">Image</span><span style="color:#222222">.</span><span style="color:#6200EE">asset</span><span style="color:#222222">(</span><span style="color:#0C7064">'images/pic</span><span style="color:#0C7064">$</span><span style="color:#222222">i</span><span style="color:#0C7064">.jpg'</span><span style="color:#222222">));</span></span></code></pre></div></div><hr><div class="header-wrapper"><h3 id="listview">ListView</h3><a class="heading-link" href="#listview" aria-label="Link to 'ListView' section">#</a></div><p><a href="https://api.flutter.dev/flutter/widgets/ListView-class.html"><code>ListView</code></a>, a column-like widget, automatically provides scrolling when its content is too long for its render box.</p><div class="header-wrapper"><h4 id="summary-listview">Summary (ListView)</h4><a class="heading-link" href="#summary-listview" aria-label="Link to 'Summary (ListView)' section">#</a></div><ul><li>A specialized <a href="https://api.flutter.dev/flutter/widgets/Column-class.html"><code>Column</code></a> for organizing a list of boxes</li><li>Can be laid out horizontally or vertically</li><li>Detects when its content won't fit and provides scrolling</li><li>Less configurable than <code>Column</code>, but easier to use and supports scrolling</li></ul><div class="header-wrapper"><h4 id="examples-listview">Examples (ListView)</h4><a class="heading-link" href="#examples-listview" aria-label="Link to 'Examples (ListView)' section">#</a></div><div class="side-by-side"><div><img src="/assets/images/docs/ui/layout/listview.png" height="400px" class="simple-border text-center" alt="ListView containing movie theaters and restaurants"><p>Uses <code>ListView</code> to display a list of businesses using <code>ListTile</code>s. A <code>Divider</code> separates the theaters from the restaurants.</p><p><strong>App source:</strong> <a href="https://github.com/flutter/website/tree/main/examples/layout/grid_and_list">grid_and_list</a></p></div><div><img src="/assets/images/docs/ui/layout/listview-color-gallery.png" height="400px" class="simple-border text-center" alt="ListView containing shades of blue"><p>Uses <code>ListView</code> to display the <a href="https://api.flutter.dev/flutter/material/Colors-class.html"><code>Colors</code></a> from the <a href="https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors">Material 2 Design palette</a> for a particular color family.</p><p><strong>Dart code:</strong> <a href="https://github.com/flutter/website/tree/main/examples/layout/gallery/lib/colors_demo.dart"><code>colors_demo.dart</code></a></p></div></div> <?code-excerpt "layout/grid_and_list/lib/main.dart (list)" replace="/\ListView/[!$&!]/g;"?> <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"> _buildList</span><span style="color:#222222">() {</span></span> <span class="line"><span style="color:#BD2314"> return</span><span style="color:#0468D7"> </span><mark class="highlight"><span style="color:#0468D7">ListView</span></mark><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> children: [</span></span> <span class="line"><span style="color:#6200EE"> _tile</span><span style="color:#222222">(</span><span style="color:#0C7064">'CineArts at the Empire'</span><span style="color:#222222">, </span><span style="color:#0C7064">'85 W Portal Ave'</span><span style="color:#222222">, </span><span style="color:#0468D7">Icons</span><span style="color:#222222">.theaters),</span></span> <span class="line"><span style="color:#6200EE"> _tile</span><span style="color:#222222">(</span><span style="color:#0C7064">'The Castro Theater'</span><span style="color:#222222">, </span><span style="color:#0C7064">'429 Castro St'</span><span style="color:#222222">, </span><span style="color:#0468D7">Icons</span><span style="color:#222222">.theaters),</span></span> <span class="line"><span style="color:#6200EE"> _tile</span><span style="color:#222222">(</span><span style="color:#0C7064">'Alamo Drafthouse Cinema'</span><span style="color:#222222">, </span><span style="color:#0C7064">'2550 Mission St'</span><span style="color:#222222">, </span><span style="color:#0468D7">Icons</span><span style="color:#222222">.theaters),</span></span> <span class="line"><span style="color:#6200EE"> _tile</span><span style="color:#222222">(</span><span style="color:#0C7064">'Roxie Theater'</span><span style="color:#222222">, </span><span style="color:#0C7064">'3117 16th St'</span><span style="color:#222222">, </span><span style="color:#0468D7">Icons</span><span style="color:#222222">.theaters),</span></span> <span class="line"><span style="color:#6200EE"> _tile</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#0C7064"> 'United Artists Stonestown Twin'</span><span style="color:#222222">,</span></span> <span class="line"><span style="color:#0C7064"> '501 Buckingham Way'</span><span style="color:#222222">,</span></span> <span class="line"><span style="color:#0468D7"> Icons</span><span style="color:#222222">.theaters,</span></span> <span class="line"><span style="color:#222222"> ),</span></span> <span class="line"><span style="color:#6200EE"> _tile</span><span style="color:#222222">(</span><span style="color:#0C7064">'AMC Metreon 16'</span><span style="color:#222222">, </span><span style="color:#0C7064">'135 4th St #3000'</span><span style="color:#222222">, </span><span style="color:#0468D7">Icons</span><span style="color:#222222">.theaters),</span></span> <span class="line"><span style="color:#BD2314"> const</span><span style="color:#0468D7"> Divider</span><span style="color:#222222">(),</span></span> <span class="line"><span style="color:#6200EE"> _tile</span><span style="color:#222222">(</span><span style="color:#0C7064">'K</span><span style="color:#222222">\'</span><span style="color:#0C7064">s Kitchen'</span><span style="color:#222222">, </span><span style="color:#0C7064">'757 Monterey Blvd'</span><span style="color:#222222">, </span><span style="color:#0468D7">Icons</span><span style="color:#222222">.restaurant),</span></span> <span class="line"><span style="color:#6200EE"> _tile</span><span style="color:#222222">(</span><span style="color:#0C7064">'Emmy</span><span style="color:#222222">\'</span><span style="color:#0C7064">s Restaurant'</span><span style="color:#222222">, </span><span style="color:#0C7064">'1923 Ocean Ave'</span><span style="color:#222222">, </span><span style="color:#0468D7">Icons</span><span style="color:#222222">.restaurant),</span></span> <span class="line"><span style="color:#6200EE"> _tile</span><span style="color:#222222">(</span><span style="color:#0C7064">'Chaiya Thai Restaurant'</span><span style="color:#222222">, </span><span style="color:#0C7064">'272 Claremont Blvd'</span><span style="color:#222222">, </span><span style="color:#0468D7">Icons</span><span style="color:#222222">.restaurant),</span></span> <span class="line"><span style="color:#6200EE"> _tile</span><span style="color:#222222">(</span><span style="color:#0C7064">'La Ciccia'</span><span style="color:#222222">, </span><span style="color:#0C7064">'291 30th St'</span><span style="color:#222222">, </span><span style="color:#0468D7">Icons</span><span style="color:#222222">.restaurant),</span></span> <span class="line"><span style="color:#222222"> ],</span></span> <span class="line"><span style="color:#222222"> );</span></span> <span class="line"><span style="color:#222222">}</span></span> <span class="line"></span> <span class="line"><span style="color:#0468D7">ListTile</span><span style="color:#6200EE"> _tile</span><span style="color:#222222">(</span><span style="color:#0468D7">String</span><span style="color:#222222"> title, </span><span style="color:#0468D7">String</span><span style="color:#222222"> subtitle, </span><span style="color:#0468D7">IconData</span><span style="color:#222222"> icon) {</span></span> <span class="line"><span style="color:#BD2314"> return</span><span style="color:#0468D7"> ListTile</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> title: </span><span style="color:#0468D7">Text</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> title,</span></span> <span class="line"><span style="color:#222222"> style: </span><span style="color:#BD2314">const</span><span style="color:#0468D7"> TextStyle</span><span style="color:#222222">(fontWeight: </span><span style="color:#0468D7">FontWeight</span><span style="color:#222222">.w500, fontSize: </span><span style="color:#0C7064">20</span><span style="color:#222222">),</span></span> <span class="line"><span style="color:#222222"> ),</span></span> <span class="line"><span style="color:#222222"> subtitle: </span><span style="color:#0468D7">Text</span><span style="color:#222222">(subtitle),</span></span> <span class="line"><span style="color:#222222"> leading: </span><span style="color:#0468D7">Icon</span><span style="color:#222222">(icon, color: </span><span style="color:#0468D7">Colors</span><span style="color:#222222">.blue[</span><span style="color:#0C7064">500</span><span style="color:#222222">]),</span></span> <span class="line"><span style="color:#222222"> );</span></span> <span class="line"><span style="color:#222222">}</span></span></code></pre></div></div><hr><div class="header-wrapper"><h3 id="stack">Stack</h3><a class="heading-link" href="#stack" aria-label="Link to 'Stack' section">#</a></div><p>Use <a href="https://api.flutter.dev/flutter/widgets/Stack-class.html"><code>Stack</code></a> to arrange widgets on top of a base widget鈥攐ften an image. The widgets can completely or partially overlap the base widget.</p><div class="header-wrapper"><h4 id="summary-stack">Summary (Stack)</h4><a class="heading-link" href="#summary-stack" aria-label="Link to 'Summary (Stack)' section">#</a></div><ul><li>Use for widgets that overlap another widget</li><li>The first widget in the list of children is the base widget; subsequent children are overlaid on top of that base widget</li><li>A <code>Stack</code>'s content can't scroll</li><li>You can choose to clip children that exceed the render box</li></ul><div class="header-wrapper"><h4 id="examples-stack">Examples (Stack)</h4><a class="heading-link" href="#examples-stack" aria-label="Link to 'Examples (Stack)' section">#</a></div><div class="side-by-side"><div><img src="/assets/images/docs/ui/layout/stack.png" class="text-center" height="200px" alt="Circular avatar image with a label"><p>Uses <code>Stack</code> to overlay a <code>Container</code> (that displays its <code>Text</code> on a translucent black background) on top of a <code>CircleAvatar</code>. The <code>Stack</code> offsets the text using the <code>alignment</code> property and <code>Alignment</code>s.</p><p><strong>App source:</strong> <a href="https://github.com/flutter/website/tree/main/examples/layout/card_and_stack">card_and_stack</a></p></div><div><img src="/assets/images/docs/ui/layout/stack-flutter-gallery.png" class="text-center" height="200px" alt="An image with a icon overlaid on top"><p>Uses <code>Stack</code> to overlay an icon on top of an image.</p><p><strong>Dart code:</strong> <a href="https://github.com/flutter/website/tree/main/examples/layout/gallery/lib/bottom_navigation_demo.dart"><code>bottom_navigation_demo.dart</code></a></p></div></div> <?code-excerpt "layout/card_and_stack/lib/main.dart (stack)" replace="/\bStack/[!$&!]/g;"?> <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"> _buildStack</span><span style="color:#222222">() {</span></span> <span class="line"><span style="color:#BD2314"> return</span><span style="color:#0468D7"> </span><mark class="highlight"><span style="color:#0468D7">Stack</span></mark><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> alignment: </span><span style="color:#BD2314">const</span><span style="color:#0468D7"> Alignment</span><span style="color:#222222">(</span><span style="color:#0C7064">0.6</span><span style="color:#222222">, </span><span style="color:#0C7064">0.6</span><span style="color:#222222">),</span></span> <span class="line"><span style="color:#222222"> children: [</span></span> <span class="line"><span style="color:#BD2314"> const</span><span style="color:#0468D7"> CircleAvatar</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> backgroundImage: </span><span style="color:#0468D7">AssetImage</span><span style="color:#222222">(</span><span style="color:#0C7064">'images/pic.jpg'</span><span style="color:#222222">),</span></span> <span class="line"><span style="color:#222222"> radius: </span><span style="color:#0C7064">100</span><span style="color:#222222">,</span></span> <span class="line"><span style="color:#222222"> ),</span></span> <span class="line"><span style="color:#0468D7"> Container</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> decoration: </span><span style="color:#BD2314">const</span><span style="color:#0468D7"> BoxDecoration</span><span style="color:#222222">(color: </span><span style="color:#0468D7">Colors</span><span style="color:#222222">.black45),</span></span> <span class="line"><span style="color:#222222"> child: </span><span style="color:#BD2314">const</span><span style="color:#0468D7"> Text</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#0C7064"> 'Mia B'</span><span style="color:#222222">,</span></span> <span class="line"><span style="color:#222222"> style: </span><span style="color:#0468D7">TextStyle</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> fontSize: </span><span style="color:#0C7064">20</span><span style="color:#222222">,</span></span> <span class="line"><span style="color:#222222"> fontWeight: </span><span style="color:#0468D7">FontWeight</span><span style="color:#222222">.bold,</span></span> <span class="line"><span style="color:#222222"> color: </span><span style="color:#0468D7">Colors</span><span style="color:#222222">.white,</span></span> <span class="line"><span style="color:#222222"> ),</span></span> <span class="line"><span style="color:#222222"> ),</span></span> <span class="line"><span style="color:#222222"> ),</span></span> <span class="line"><span style="color:#222222"> ],</span></span> <span class="line"><span style="color:#222222"> );</span></span> <span class="line"><span style="color:#222222">}</span></span></code></pre></div></div><hr><div class="header-wrapper"><h3 id="card">Card</h3><a class="heading-link" href="#card" aria-label="Link to 'Card' section">#</a></div><p>A <a href="https://api.flutter.dev/flutter/material/Card-class.html"><code>Card</code></a>, from the <a href="https://api.flutter.dev/flutter/material/material-library.html">Material library</a>, contains related nuggets of information and can be composed from almost any widget, but is often used with <a href="https://api.flutter.dev/flutter/material/ListTile-class.html"><code>ListTile</code></a>. <code>Card</code> has a single child, but its child can be a column, row, list, grid, or other widget that supports multiple children. By default, a <code>Card</code> shrinks its size to 0 by 0 pixels. You can use <a href="https://api.flutter.dev/flutter/widgets/SizedBox-class.html"><code>SizedBox</code></a> to constrain the size of a card.</p><p>In Flutter, a <code>Card</code> features slightly rounded corners and a drop shadow, giving it a 3D effect. Changing a <code>Card</code>'s <code>elevation</code> property allows you to control the drop shadow effect. Setting the elevation to 24, for example, visually lifts the <code>Card</code> further from the surface and causes the shadow to become more dispersed. For a list of supported elevation values, see <a href="https://m3.material.io/styles/elevation">Elevation</a> in the <a href="https://m3.material.io/styles">Material guidelines</a>. Specifying an unsupported value disables the drop shadow entirely.</p><div class="header-wrapper"><h4 id="summary-card">Summary (Card)</h4><a class="heading-link" href="#summary-card" aria-label="Link to 'Summary (Card)' section">#</a></div><ul><li>Implements a <a href="https://m3.material.io/components/cards">Material card</a></li><li>Used for presenting related nuggets of information</li><li>Accepts a single child, but that child can be a <code>Row</code>, <code>Column</code>, or other widget that holds a list of children</li><li>Displayed with rounded corners and a drop shadow</li><li>A <code>Card</code>'s content can't scroll</li><li>From the <a href="https://api.flutter.dev/flutter/material/material-library.html">Material library</a></li></ul><div class="header-wrapper"><h4 id="examples-card">Examples (Card)</h4><a class="heading-link" href="#examples-card" aria-label="Link to 'Examples (Card)' section">#</a></div><div class="side-by-side"><div><img src="/assets/images/docs/ui/layout/card.png" height="200px" class="text-center" alt="Card containing 3 ListTiles"><p>A <code>Card</code> containing 3 ListTiles and sized by wrapping it with a <code>SizedBox</code>. A <code>Divider</code> separates the first and second <code>ListTiles</code>.</p><p><strong>App source:</strong> <a href="https://github.com/flutter/website/tree/main/examples/layout/card_and_stack">card_and_stack</a></p></div><div><img src="/assets/images/docs/ui/layout/card-flutter-gallery.png" height="200px" class="text-center" alt="Tappable card containing an image and multiple forms of text"><p>A <code>Card</code> containing an image and text.</p><p><strong>Dart code:</strong> <a href="https://github.com/flutter/website/tree/main/examples/layout/gallery/lib/cards_demo.dart"><code>cards_demo.dart</code></a></p></div></div> <?code-excerpt "layout/card_and_stack/lib/main.dart (card)" replace="/\bCard/[!$&!]/g;"?> <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"> _buildCard</span><span style="color:#222222">() {</span></span> <span class="line"><span style="color:#BD2314"> return</span><span style="color:#0468D7"> SizedBox</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> height: </span><span style="color:#0C7064">210</span><span style="color:#222222">,</span></span> <span class="line"><span style="color:#222222"> child: </span><mark class="highlight"><span style="color:#0468D7">Card</span></mark><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> child: </span><span style="color:#0468D7">Column</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> children: [</span></span> <span class="line"><span style="color:#0468D7"> ListTile</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> title: </span><span style="color:#BD2314">const</span><span style="color:#0468D7"> Text</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#0C7064"> '1625 Main Street'</span><span style="color:#222222">,</span></span> <span class="line"><span style="color:#222222"> style: </span><span style="color:#0468D7">TextStyle</span><span style="color:#222222">(fontWeight: </span><span style="color:#0468D7">FontWeight</span><span style="color:#222222">.w500),</span></span> <span class="line"><span style="color:#222222"> ),</span></span> <span class="line"><span style="color:#222222"> subtitle: </span><span style="color:#BD2314">const</span><span style="color:#0468D7"> Text</span><span style="color:#222222">(</span><span style="color:#0C7064">'My City, CA 99984'</span><span style="color:#222222">),</span></span> <span class="line"><span style="color:#222222"> leading: </span><span style="color:#0468D7">Icon</span><span style="color:#222222">(</span><span style="color:#0468D7">Icons</span><span style="color:#222222">.restaurant_menu, color: </span><span style="color:#0468D7">Colors</span><span style="color:#222222">.blue[</span><span style="color:#0C7064">500</span><span style="color:#222222">]),</span></span> <span class="line"><span style="color:#222222"> ),</span></span> <span class="line"><span style="color:#BD2314"> const</span><span style="color:#0468D7"> Divider</span><span style="color:#222222">(),</span></span> <span class="line"><span style="color:#0468D7"> ListTile</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> title: </span><span style="color:#BD2314">const</span><span style="color:#0468D7"> Text</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#0C7064"> '(408) 555-1212'</span><span style="color:#222222">,</span></span> <span class="line"><span style="color:#222222"> style: </span><span style="color:#0468D7">TextStyle</span><span style="color:#222222">(fontWeight: </span><span style="color:#0468D7">FontWeight</span><span style="color:#222222">.w500),</span></span> <span class="line"><span style="color:#222222"> ),</span></span> <span class="line"><span style="color:#222222"> leading: </span><span style="color:#0468D7">Icon</span><span style="color:#222222">(</span><span style="color:#0468D7">Icons</span><span style="color:#222222">.contact_phone, color: </span><span style="color:#0468D7">Colors</span><span style="color:#222222">.blue[</span><span style="color:#0C7064">500</span><span style="color:#222222">]),</span></span> <span class="line"><span style="color:#222222"> ),</span></span> <span class="line"><span style="color:#0468D7"> ListTile</span><span style="color:#222222">(</span></span> <span class="line"><span style="color:#222222"> title: </span><span style="color:#BD2314">const</span><span style="color:#0468D7"> Text</span><span style="color:#222222">(</span><span style="color:#0C7064">'costa@example.com'</span><span style="color:#222222">),</span></span> <span class="line"><span style="color:#222222"> leading: </span><span style="color:#0468D7">Icon</span><span style="color:#222222">(</span><span style="color:#0468D7">Icons</span><span style="color:#222222">.contact_mail, color: </span><span style="color:#0468D7">Colors</span><span style="color:#222222">.blue[</span><span style="color:#0C7064">500</span><span style="color:#222222">]),</span></span> <span class="line"><span style="color:#222222"> ),</span></span> <span class="line"><span style="color:#222222"> ],</span></span> <span class="line"><span style="color:#222222"> ),</span></span> <span class="line"><span style="color:#222222"> ),</span></span> <span class="line"><span style="color:#222222"> );</span></span> <span class="line"><span style="color:#222222">}</span></span></code></pre></div></div><hr><div class="header-wrapper"><h3 id="listtile">ListTile</h3><a class="heading-link" href="#listtile" aria-label="Link to 'ListTile' section">#</a></div><p>Use <a href="https://api.flutter.dev/flutter/material/ListTile-class.html"><code>ListTile</code></a>, a specialized row widget from the <a href="https://api.flutter.dev/flutter/material/material-library.html">Material library</a>, for an easy way to create a row containing up to 3 lines of text and optional leading and trailing icons. <code>ListTile</code> is most commonly used in <a href="https://api.flutter.dev/flutter/material/Card-class.html"><code>Card</code></a> or <a href="https://api.flutter.dev/flutter/widgets/ListView-class.html"><code>ListView</code></a>, but can be used elsewhere.</p><div class="header-wrapper"><h4 id="summary-listtile">Summary (ListTile)</h4><a class="heading-link" href="#summary-listtile" aria-label="Link to 'Summary (ListTile)' section">#</a></div><ul><li>A specialized row that contains up to 3 lines of text and optional icons</li><li>Less configurable than <code>Row</code>, but easier to use</li><li>From the <a href="https://api.flutter.dev/flutter/material/material-library.html">Material library</a></li></ul><div class="header-wrapper"><h4 id="examples-listtile">Examples (ListTile)</h4><a class="heading-link" href="#examples-listtile" aria-label="Link to 'Examples (ListTile)' section">#</a></div><div class="side-by-side"><div><img src="/assets/images/docs/ui/layout/card.png" class="text-center" alt="Card containing 3 ListTiles"><p>A <code>Card</code> containing 3 <code>ListTile</code>s.</p><p><strong>App source:</strong> <a href="https://github.com/flutter/website/tree/main/examples/layout/card_and_stack">card_and_stack</a></p></div><div><img src="/assets/images/docs/ui/layout/listtile-flutter-gallery.png" height="200px" class="simple-border text-center" alt="4 ListTiles, each containing a leading avatar"><p>Uses <code>ListTile</code> with leading widgets.</p><p><strong>Dart code:</strong> <a href="https://github.com/flutter/website/tree/main/examples/layout/gallery/lib/list_demo.dart"><code>list_demo.dart</code></a></p></div></div><hr><div class="header-wrapper"><h2 id="constraints">Constraints</h2><a class="heading-link" href="#constraints" aria-label="Link to 'Constraints' section">#</a></div><p>To fully understand Flutter's layout system, you need to learn how Flutter positions and sizes the components in a layout. For more information, see <a href="/ui/layout/constraints">Understanding constraints</a>.</p><div class="header-wrapper"><h2 id="videos">Videos</h2><a class="heading-link" href="#videos" aria-label="Link to 'Videos' section">#</a></div><p>The following videos, part of the <a href="https://www.youtube.com/watch?v=wgTBLj7rMPM&list=PLjxrf2q8roU2HdJQDjJzOeO6J3FoFLWr2">Flutter in Focus</a> series, explain <code>Stateless</code> and <code>Stateful</code> widgets.</p><iframe width="560" height="315" src="https://www.youtube.com/embed/wE7khGHVkYY" title="How to create stateless widgets" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen loading="lazy"></iframe><br><iframe width="560" height="315" src="https://www.youtube.com/embed/AqCMFXEmf3w" title="How and when stateful widgets are best used" 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/playlist?list=PLjxrf2q8roU2HdJQDjJzOeO6J3FoFLWr2">Flutter in Focus playlist</a></p><hr><p>Each episode of the <a href="https://www.youtube.com/playlist?list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG">Widget of the Week series</a> focuses on a widget. Several of them includes layout widgets.</p><iframe width="560" height="315" src="https://www.youtube.com/embed/b_sQ9bMltGU" title="Introducing 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/playlist?list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG">Flutter Widget of the Week playlist</a></p><div class="header-wrapper"><h2 id="other-resources">Other resources</h2><a class="heading-link" href="#other-resources" aria-label="Link to 'Other resources' section">#</a></div><p>The following resources might help when writing layout code.</p><dl><dt><a href="/ui/layout/tutorial">Layout tutorial</a></dt><dd>Learn how to build a layout.</dd><dt><a href="/ui/widgets">Widget catalog</a></dt><dd>Describes many of the widgets available in Flutter.</dd><dt><a href="/get-started/flutter-for/web-devs">HTML/CSS Analogs in Flutter</a></dt><dd>For those familiar with web programming, this page maps HTML/CSS functionality to Flutter features.</dd><dt><a href="https://api.flutter.dev/flutter">API reference docs</a></dt><dd>Reference documentation for all of the Flutter libraries.</dd><dt><a href="/ui/assets/assets-and-images">Adding assets and images</a></dt><dd>Explains how to add images and other assets to your app's package.</dd><dt><a href="https://medium.com/@mravn/zero-to-one-with-flutter-43b13fd7b354">Zero to One with Flutter</a></dt><dd>One person's experience writing his first Flutter app.</dd></dl><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-02-12.</span> <a href="https://github.com/flutter/website/tree/main/src/content/ui/layout/index.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/ui/layout/&page-source=https://github.com/flutter/website/tree/main/src/content/ui/layout/index.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>