CINXE.COM

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no"> <meta name="description" content="API docs for the LayoutBuilder class from the widgets library, for the Dart programming language."> <title>LayoutBuilder class - widgets library - Dart API</title>  <base href="../"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,300;0,400;0,500;0,700;1,400&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"> <link rel="stylesheet" href="static-assets/github.css?v1"> <link rel="stylesheet" href="static-assets/styles.css?v1"> <link rel="icon" href="static-assets/favicon.png?v1">  <style> @import 'https://fonts.googleapis.com/css?family=Roboto:500,400italic,300,400,100i'; @import 'https://fonts.googleapis.com/css?family=Google+Sans:500,400italic,300,400,100i'; @import 'https://fonts.googleapis.com/css?family=Open+Sans:500,400italic,300,400,100i'; @import 'https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Sharp|Material+Icons+Round'; </style> <link href="https://flutter.github.io/assets-for-api-docs/assets/cupertino/cupertino.css" rel="stylesheet" type="text/css"> <link href="../assets/overrides.css" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Sharp|Material+Icons+Round" rel="stylesheet"> <style> /* Rule for sizing the icon. */ .md-36 { font-size: 36px; } </style>  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f) })(window,document,'script','dataLayer','GTM-ND4LWWZ');</script>   <link rel="stylesheet" href="https://www.gstatic.com/glue/cookienotificationbar/cookienotificationbar.min.css">  <script async="" defer="" src="../assets/api_survey.js"></script>  <link href="../assets/snippets.css" rel="stylesheet" type="text/css"> <script src="../assets/snippets.js"></script> <link rel="search" type="application/opensearchdescription+xml" title="Flutter API" href="/opensearch.xml"/> </head> <body data-base-href="../" data-using-base-href="true" class="light-theme"> <div id="overlay-under-drawer"></div> <header id="title"> <span id="sidenav-left-toggle" class="material-symbols-outlined" role="button" tabindex="0">menu</span> <ol class="breadcrumbs gt-separated dark hidden-xs"> <li><a href="index.html">Flutter</a></li> <li><a href="widgets">widgets.dart</a></li> <li class="self-crumb">LayoutBuilder class</li> </ol> <div class="self-name">LayoutBuilder</div> <form class="search navbar-right" role="search"> <input type="text" id="search-box" autocomplete="off" disabled class="form-control typeahead" placeholder="Loading search..."> </form> <div class="toggle" id="theme-button" title="Toggle brightness"> <label for="theme"> <input type="checkbox" id="theme" value="light-theme"> <span id="dark-theme-button" class="material-symbols-outlined"> dark_mode </span> <span id="light-theme-button" class="material-symbols-outlined"> light_mode </span> </label> </div> </header> <main> <div id="dartdoc-main-content" class="main-content" data-above-sidebar="widgets/widgets-library-sidebar.html" data-below-sidebar="widgets/LayoutBuilder-class-sidebar.html"> <div> <div id="external-links" class="btn-group"><a title="View source code" class="source-link" href="https://github.com/flutter/flutter/blob/main/packages/flutter/lib/src/widgets/layout_builder.dart#L327"><span class="material-symbols-outlined">description</span></a></div> <h1><span class="kind-class">LayoutBuilder</span> class </h1></div> <section class="desc markdown"> <p>Builds a widget tree that can depend on the parent widget's size.</p> <p>Similar to the <a href="widgets/Builder-class.html">Builder</a> widget except that the framework calls the <a href="widgets/ConstrainedLayoutBuilder/builder.html">builder</a> function at layout time and provides the parent widget's constraints. This is useful when the parent constrains the child's size and doesn't depend on the child's intrinsic size. The <a href="widgets/LayoutBuilder-class.html">LayoutBuilder</a>'s final size will match its child's size.</p> <p>The <a href="widgets/ConstrainedLayoutBuilder/builder.html">builder</a> function is called in the following situations:</p> <ul> <li>The first time the widget is laid out.</li> <li>When the parent widget passes different layout constraints.</li> <li>When the parent widget updates this widget.</li> <li>When the dependencies that the <a href="widgets/ConstrainedLayoutBuilder/builder.html">builder</a> function subscribes to change.</li> </ul> <p>The <a href="widgets/ConstrainedLayoutBuilder/builder.html">builder</a> function is <em>not</em> called during layout if the parent passes the same constraints repeatedly.</p> <iframe src="https://www.youtube.com/embed/IYDVcriKjsw?rel=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" style="max-width: 560px; max-height: 315px; width: 100%; height: 100%; aspect-ratio: 560 / 315;"> </iframe> <p>If the child should be smaller than the parent, consider wrapping the child in an <a href="widgets/Align-class.html">Align</a> widget. If the child might want to be bigger, consider wrapping it in a <a href="widgets/SingleChildScrollView-class.html">SingleChildScrollView</a> or <a href="widgets/OverflowBox-class.html">OverflowBox</a>.</p> <p> <a name="widgets.LayoutBuilder.1"></a> <div class="snippet snippet-container anchor-container" id="longSnippet1"> <div class="snippet-description"> This example uses a <a href="widgets/LayoutBuilder-class.html">LayoutBuilder</a> to build a different widget depending on the available width. Resize the DartPad window to see <a href="widgets/LayoutBuilder-class.html">LayoutBuilder</a> in action! </div> <a class="anchor-button-overlay anchor-button" title="Copy link to clipboard" onmouseenter="fixHref(this, 'widgets.LayoutBuilder.1');" onclick="fixHref(this, 'widgets.LayoutBuilder.1'); copyStringToClipboard(this.href);" href="#"> <i class="material-icons anchor-image">link</i> </a> <div class="snippet-description"> <p>To create a local project with this code sample, run:<br /> <span class="snippet-create-command">flutter create --sample=widgets.LayoutBuilder.1 mysample</span> </p> </div> <iframe class="snippet-dartpad" src="https://dartpad.dev/embed-flutter.html?split=60&run=true&sample_id=widgets.LayoutBuilder.1&channel=stable"> </iframe> </div> </p> <p>See also:</p> <ul> <li><a href="widgets/SliverLayoutBuilder-class.html">SliverLayoutBuilder</a>, the sliver counterpart of this widget.</li> <li><a href="widgets/Builder-class.html">Builder</a>, which calls a <code>builder</code> function at build time.</li> <li><a href="widgets/StatefulBuilder-class.html">StatefulBuilder</a>, which passes its <code>builder</code> function a <code>setState</code> callback.</li> <li><a href="widgets/CustomSingleChildLayout-class.html">CustomSingleChildLayout</a>, which positions its child during layout.</li> <li>The <a href="https://flutter.dev/widgets/layout/">catalog of layout widgets</a>.</li> </ul> </section> <section> <dl class="dl-horizontal"> <dt>Inheritance</dt> <dd> <ul class="gt-separated dark clazz-relationships"> <li><a href="dart-core/Object-class.html">Object</a></li> <li><a href="foundation/DiagnosticableTree-class.html">DiagnosticableTree</a></li> <li><a href="widgets/Widget-class.html">Widget</a></li> <li><a href="widgets/RenderObjectWidget-class.html">RenderObjectWidget</a></li> <li><a href="widgets/ConstrainedLayoutBuilder-class.html">ConstrainedLayoutBuilder</a><span class="signature"><<wbr><span class="type-parameter"><a href="rendering/BoxConstraints-class.html">BoxConstraints</a></span>></span></li> <li>LayoutBuilder</li> </ul> </dd> </dl> </section> <section class="summary offset-anchor" id="constructors"> <h2>Constructors</h2> <dl class="constructor-summary-list"> <dt id="LayoutBuilder" class="callable"> <span class="name"><a href="widgets/LayoutBuilder/LayoutBuilder.html">LayoutBuilder</a></span><span class="signature">({<span class="parameter" id="-param-key"><span class="type-annotation"><a href="foundation/Key-class.html">Key</a>?</span> <span class="parameter-name">key</span>, </span><span class="parameter" id="-param-builder"><span>required</span> <span class="type-annotation"><a href="widgets/Widget-class.html">Widget</a></span> <span class="parameter-name">builder</span>(<span class="parameter" id="param-context"><span class="type-annotation"><a href="widgets/BuildContext-class.html">BuildContext</a></span> <span class="parameter-name">context</span>, </span><span class="parameter" id="param-constraints"><span class="type-annotation"><a href="rendering/BoxConstraints-class.html">BoxConstraints</a></span> <span class="parameter-name">constraints</span></span>)</span>})</span> </dt> <dd> Creates a widget that defers its building until layout. <div class="constructor-modifier features">const</div> </dd> </dl> </section> <section class="summary offset-anchor inherited" id="instance-properties"> <h2>Properties</h2> <dl class="properties"> <dt id="builder" class="property inherited"> <span class="name"><a href="widgets/ConstrainedLayoutBuilder/builder.html">builder</a></span> <span class="signature">→ <a href="widgets/Widget-class.html">Widget</a> Function<span class="signature">(<span class="parameter" id="param-context"><span class="type-annotation"><a href="widgets/BuildContext-class.html">BuildContext</a></span> <span class="parameter-name">context</span>, </span><span class="parameter" id="param-constraints"><span class="type-annotation"><a href="rendering/BoxConstraints-class.html">BoxConstraints</a></span> <span class="parameter-name">constraints</span></span>)</span></span> </dt> <dd class="inherited"> Called at layout time to construct the widget tree. <div class="features"><span class="feature">final</span><span class="feature">inherited</span></div> </dd> <dt id="hashCode" class="property inherited"> <span class="name"><a href="widgets/Widget/hashCode.html">hashCode</a></span> <span class="signature">→ <a href="dart-core/int-class.html">int</a></span> </dt> <dd class="inherited"> The hash code for this object. <div class="features"><span class="feature">no setter</span><span class="feature">inherited</span></div> </dd> <dt id="key" class="property inherited"> <span class="name"><a href="widgets/Widget/key.html">key</a></span> <span class="signature">→ <a href="foundation/Key-class.html">Key</a>?</span> </dt> <dd class="inherited"> Controls how one widget replaces another widget in the tree. <div class="features"><span class="feature">final</span><span class="feature">inherited</span></div> </dd> <dt id="runtimeType" class="property inherited"> <span class="name"><a href="dart-core/Object/runtimeType.html">runtimeType</a></span> <span class="signature">→ <a href="dart-core/Type-class.html">Type</a></span> </dt> <dd class="inherited"> A representation of the runtime type of the object. <div class="features"><span class="feature">no setter</span><span class="feature">inherited</span></div> </dd> </dl> </section> <section class="summary offset-anchor" id="instance-methods"> <h2>Methods</h2> <dl class="callables"> <dt id="createElement" class="callable inherited"> <span class="name"><a href="widgets/ConstrainedLayoutBuilder/createElement.html">createElement</a></span><span class="signature">(<wbr>) <span class="returntype parameter">→ <a href="widgets/RenderObjectElement-class.html">RenderObjectElement</a></span> </span> </dt> <dd class="inherited"> RenderObjectWidgets always inflate to a <a href="widgets/RenderObjectElement-class.html">RenderObjectElement</a> subclass. <div class="features"><span class="feature">inherited</span></div> </dd> <dt id="createRenderObject" class="callable"> <span class="name"><a href="widgets/LayoutBuilder/createRenderObject.html">createRenderObject</a></span><span class="signature">(<wbr><span class="parameter" id="createRenderObject-param-context"><span class="type-annotation"><a href="widgets/BuildContext-class.html">BuildContext</a></span> <span class="parameter-name">context</span></span>) <span class="returntype parameter">→ <a href="rendering/RenderObject-class.html">RenderObject</a></span> </span> </dt> <dd> Creates an instance of the <a href="rendering/RenderObject-class.html">RenderObject</a> class that this <a href="widgets/RenderObjectWidget-class.html">RenderObjectWidget</a> represents, using the configuration described by this <a href="widgets/RenderObjectWidget-class.html">RenderObjectWidget</a>. <div class="features"><span class="feature">override</span></div> </dd> <dt id="debugDescribeChildren" class="callable inherited"> <span class="name"><a href="foundation/DiagnosticableTree/debugDescribeChildren.html">debugDescribeChildren</a></span><span class="signature">(<wbr>) <span class="returntype parameter">→ <a href="dart-core/List-class.html">List</a><span class="signature"><<wbr><span class="type-parameter"><a href="foundation/DiagnosticsNode-class.html">DiagnosticsNode</a></span>></span></span> </span> </dt> <dd class="inherited"> Returns a list of <a href="foundation/DiagnosticsNode-class.html">DiagnosticsNode</a> objects describing this node's children. <div class="features"><span class="feature">inherited</span></div> </dd> <dt id="debugFillProperties" class="callable inherited"> <span class="name"><a href="widgets/Widget/debugFillProperties.html">debugFillProperties</a></span><span class="signature">(<wbr><span class="parameter" id="debugFillProperties-param-properties"><span class="type-annotation"><a href="foundation/DiagnosticPropertiesBuilder-class.html">DiagnosticPropertiesBuilder</a></span> <span class="parameter-name">properties</span></span>) <span class="returntype parameter">→ void</span> </span> </dt> <dd class="inherited"> Add additional properties associated with the node. <div class="features"><span class="feature">inherited</span></div> </dd> <dt id="didUnmountRenderObject" class="callable inherited"> <span class="name"><a href="widgets/RenderObjectWidget/didUnmountRenderObject.html">didUnmountRenderObject</a></span><span class="signature">(<wbr><span class="parameter" id="didUnmountRenderObject-param-renderObject"><span>covariant</span> <span class="type-annotation"><a href="rendering/RenderObject-class.html">RenderObject</a></span> <span class="parameter-name">renderObject</span></span>) <span class="returntype parameter">→ void</span> </span> </dt> <dd class="inherited"> A render object previously associated with this widget has been removed from the tree. The given <a href="rendering/RenderObject-class.html">RenderObject</a> will be of the same type as returned by this object's <a href="widgets/RenderObjectWidget/createRenderObject.html">createRenderObject</a>. <div class="features"><span class="feature">inherited</span></div> </dd> <dt id="noSuchMethod" class="callable inherited"> <span class="name"><a href="dart-core/Object/noSuchMethod.html">noSuchMethod</a></span><span class="signature">(<wbr><span class="parameter" id="noSuchMethod-param-invocation"><span class="type-annotation"><a href="dart-core/Invocation-class.html">Invocation</a></span> <span class="parameter-name">invocation</span></span>) <span class="returntype parameter">→ dynamic</span> </span> </dt> <dd class="inherited"> Invoked when a nonexistent method or property is accessed. <div class="features"><span class="feature">inherited</span></div> </dd> <dt id="toDiagnosticsNode" class="callable inherited"> <span class="name"><a href="foundation/DiagnosticableTree/toDiagnosticsNode.html">toDiagnosticsNode</a></span><span class="signature">(<wbr>{<span class="parameter" id="toDiagnosticsNode-param-name"><span class="type-annotation"><a href="dart-core/String-class.html">String</a>?</span> <span class="parameter-name">name</span>, </span><span class="parameter" id="toDiagnosticsNode-param-style"><span class="type-annotation"><a href="foundation/DiagnosticsTreeStyle.html">DiagnosticsTreeStyle</a>?</span> <span class="parameter-name">style</span></span>}) <span class="returntype parameter">→ <a href="foundation/DiagnosticsNode-class.html">DiagnosticsNode</a></span> </span> </dt> <dd class="inherited"> Returns a debug representation of the object that is used by debugging tools and by <a href="foundation/DiagnosticsNode/toStringDeep.html">DiagnosticsNode.toStringDeep</a>. <div class="features"><span class="feature">inherited</span></div> </dd> <dt id="toString" class="callable inherited"> <span class="name"><a href="foundation/Diagnosticable/toString.html">toString</a></span><span class="signature">(<wbr>{<span class="parameter" id="toString-param-minLevel"><span class="type-annotation"><a href="foundation/DiagnosticLevel.html">DiagnosticLevel</a></span> <span class="parameter-name">minLevel</span> = <span class="default-value">DiagnosticLevel.info</span></span>}) <span class="returntype parameter">→ <a href="dart-core/String-class.html">String</a></span> </span> </dt> <dd class="inherited"> A string representation of this object. <div class="features"><span class="feature">inherited</span></div> </dd> <dt id="toStringDeep" class="callable inherited"> <span class="name"><a href="foundation/DiagnosticableTree/toStringDeep.html">toStringDeep</a></span><span class="signature">(<wbr>{<span class="parameter" id="toStringDeep-param-prefixLineOne"><span class="type-annotation"><a href="dart-core/String-class.html">String</a></span> <span class="parameter-name">prefixLineOne</span> = <span class="default-value">''</span>, </span><span class="parameter" id="toStringDeep-param-prefixOtherLines"><span class="type-annotation"><a href="dart-core/String-class.html">String</a>?</span> <span class="parameter-name">prefixOtherLines</span>, </span><span class="parameter" id="toStringDeep-param-minLevel"><span class="type-annotation"><a href="foundation/DiagnosticLevel.html">DiagnosticLevel</a></span> <span class="parameter-name">minLevel</span> = <span class="default-value">DiagnosticLevel.debug</span>, </span><span class="parameter" id="toStringDeep-param-wrapWidth"><span class="type-annotation"><a href="dart-core/int-class.html">int</a></span> <span class="parameter-name">wrapWidth</span> = <span class="default-value">65</span></span>}) <span class="returntype parameter">→ <a href="dart-core/String-class.html">String</a></span> </span> </dt> <dd class="inherited"> Returns a string representation of this node and its descendants. <div class="features"><span class="feature">inherited</span></div> </dd> <dt id="toStringShallow" class="callable inherited"> <span class="name"><a href="foundation/DiagnosticableTree/toStringShallow.html">toStringShallow</a></span><span class="signature">(<wbr>{<span class="parameter" id="toStringShallow-param-joiner"><span class="type-annotation"><a href="dart-core/String-class.html">String</a></span> <span class="parameter-name">joiner</span> = <span class="default-value">', '</span>, </span><span class="parameter" id="toStringShallow-param-minLevel"><span class="type-annotation"><a href="foundation/DiagnosticLevel.html">DiagnosticLevel</a></span> <span class="parameter-name">minLevel</span> = <span class="default-value">DiagnosticLevel.debug</span></span>}) <span class="returntype parameter">→ <a href="dart-core/String-class.html">String</a></span> </span> </dt> <dd class="inherited"> Returns a one-line detailed description of the object. <div class="features"><span class="feature">inherited</span></div> </dd> <dt id="toStringShort" class="callable inherited"> <span class="name"><a href="widgets/Widget/toStringShort.html">toStringShort</a></span><span class="signature">(<wbr>) <span class="returntype parameter">→ <a href="dart-core/String-class.html">String</a></span> </span> </dt> <dd class="inherited"> A short, textual description of this widget. <div class="features"><span class="feature">inherited</span></div> </dd> <dt id="updateRenderObject" class="callable inherited"> <span class="name"><a href="widgets/RenderObjectWidget/updateRenderObject.html">updateRenderObject</a></span><span class="signature">(<wbr><span class="parameter" id="updateRenderObject-param-context"><span class="type-annotation"><a href="widgets/BuildContext-class.html">BuildContext</a></span> <span class="parameter-name">context</span>, </span><span class="parameter" id="updateRenderObject-param-renderObject"><span>covariant</span> <span class="type-annotation"><a href="rendering/RenderObject-class.html">RenderObject</a></span> <span class="parameter-name">renderObject</span></span>) <span class="returntype parameter">→ void</span> </span> </dt> <dd class="inherited"> Copies the configuration described by this <a href="widgets/RenderObjectWidget-class.html">RenderObjectWidget</a> to the given <a href="rendering/RenderObject-class.html">RenderObject</a>, which will be of the same type as returned by this object's <a href="widgets/RenderObjectWidget/createRenderObject.html">createRenderObject</a>. <div class="features"><span class="feature">inherited</span></div> </dd> <dt id="updateShouldRebuild" class="callable inherited"> <span class="name"><a href="widgets/ConstrainedLayoutBuilder/updateShouldRebuild.html">updateShouldRebuild</a></span><span class="signature">(<wbr><span class="parameter" id="updateShouldRebuild-param-oldWidget"><span>covariant</span> <span class="type-annotation"><a href="widgets/ConstrainedLayoutBuilder-class.html">ConstrainedLayoutBuilder</a><span class="signature"><<wbr><span class="type-parameter"><a href="rendering/BoxConstraints-class.html">BoxConstraints</a></span>></span></span> <span class="parameter-name">oldWidget</span></span>) <span class="returntype parameter">→ <a href="dart-core/bool-class.html">bool</a></span> </span> </dt> <dd class="inherited"> Whether <a href="widgets/ConstrainedLayoutBuilder/builder.html">builder</a> needs to be called again even if the layout constraints are the same. <div class="features"><span class="feature">inherited</span></div> </dd> </dl> </section> <section class="summary offset-anchor inherited" id="operators"> <h2>Operators</h2> <dl class="callables"> <dt id="operator ==" class="callable inherited"> <span class="name"><a href="widgets/Widget/operator_equals.html">operator ==</a></span><span class="signature">(<wbr><span class="parameter" id="==-param-other"><span class="type-annotation"><a href="dart-core/Object-class.html">Object</a></span> <span class="parameter-name">other</span></span>) <span class="returntype parameter">→ <a href="dart-core/bool-class.html">bool</a></span> </span> </dt> <dd class="inherited"> The equality operator. <div class="features"><span class="feature">inherited</span></div> </dd> </dl> </section> </div>  <div id="dartdoc-sidebar-left" class="sidebar sidebar-offcanvas-left">  <header id="header-search-sidebar" class="hidden-l"> <form class="search-sidebar" role="search"> <input type="text" id="search-sidebar" autocomplete="off" disabled class="form-control typeahead" placeholder="Loading search..."> </form> </header> <ol class="breadcrumbs gt-separated dark hidden-l" id="sidebar-nav"> <li><a href="index.html">Flutter</a></li> <li><a href="widgets">widgets</a></li> <li class="self-crumb">LayoutBuilder class</li> </ol> <h5>widgets library</h5> <div id="dartdoc-sidebar-left-content"></div> </div> <div id="dartdoc-sidebar-right" class="sidebar sidebar-offcanvas-right"> </div> </main> <footer> <span class="no-break"> Flutter 0.0.0 </span> <script src="footer.js"></script> </footer> <script src="static-assets/highlight.pack.js?v1"></script> <script src="static-assets/docs.dart.js"></script>  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-ND4LWWZ" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>   <div class="glue-footer"></div> <button aria-hidden="true" class="glue-footer__link glue-cookie-notification-bar-control">Cookies management controls</button> <script src="https://www.gstatic.com/glue/cookienotificationbar/cookienotificationbar.min.js" data-glue-cookie-notification-bar-category="2B"></script>  </body> </html>