<p>margin-bottom: 1em; margin-top: 0px; color: rgb(17, 17, 17); font-family: Roboto, sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 300; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(253, 253, 253); text-decoration-style: initial; text-decoration-color: initial;](What is a StatelessWidget?</p> <p>margin-bottom: 1em; margin-top: 0px; color: rgb(17, 17, 17); font-family: Roboto, sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 300; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(253, 253, 253); text-decoration-style: initial; text-decoration-color: initial;](A widget that does not require mutable state.</p> <p>margin-bottom: 1em; margin-top: 0px; color: rgb(17, 17, 17); font-family: Roboto, sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 300; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(253, 253, 253); text-decoration-style: initial; text-decoration-color: initial;](A stateless widget is a widget that describes part of the user interface by building a constellation of other widgets that describe the user interface more concretely. The building process continues recursively until the description of the user interface is fully concrete (e.g., consists entirely of <a href="RenderObjectWidget">https://docs.flutter.io/flutter/widgets/RenderObjectWidget-class.htmltext-decoration: none; color: rgb(17, 85, 204);</a>s, which describe concrete <a href="RenderObject">https://docs.flutter.io/flutter/rendering/RenderObject-class.htmltext-decoration: none; color: rgb(17, 85, 204);</a>s).</p> <p>margin-bottom: 1em; margin-top: 0px; color: rgb(17, 17, 17); font-family: Roboto, sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 300; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(253, 253, 253); text-decoration-style: initial; text-decoration-color: initial;](Stateless widget are useful when the part of the user interface you are describing does not depend on anything other than the configuration information in the object itself and the <a href="BuildContext">https://docs.flutter.io/flutter/widgets/BuildContext-class.htmltext-decoration: none; color: rgb(17, 85, 204);</a> in which the widget is inflated. For compositions that can change dynamically, e.g. due to having an internal clock-driven state, or depending on some system state, consider using <a href="StatefulWidget">https://docs.flutter.io/flutter/widgets/StatefulWidget-class.htmltext-decoration: none; color: rgb(17, 85, 204);</a>.</p> <h2 id="font-family-source-sans-pro-sans-serif-font-weight-300-margin-top-24px-color-rgb17-17-17-font-size-24px-margin-bottom-8px-font-style-normal-font-variant-ligatures-normal-font-variant-caps-normal-letter-spacing-normal-orphans-2-text-align-start-text-indent-0px-text-transform-none-white-space-normal-widows-2-word-spacing-0px-webkit-text-stroke-width-0px-background-color-rgb253-253-253-text-decoration-style-initial-text-decoration-color-initialperformance-considerationsmargin-bottom-1em-margin-top-0px-color-rgb17-17-17-font-family-roboto-sans-serif-font-size-15px-font-style-normal-font-variant-ligatures-normal-font-variant-caps-normal-font-weight-300-letter-spacing-normal-orphans-2-text-align-start-text-indent-0px-text-transform-none-white-space-normal-widows-2-word-spacing-0px-webkit-text-stroke-width-0px-background-color-rgb253-253-253-text-decoration-style-initial-text-decoration-color-initialthe-httpsdocs.flutter.ioflutterwidgetsstatelesswidgetbuild.htmltext-decoration-none-color-rgb17-85-204-method-of-a-stateless-widget-is-typically-only-called-in-three-situations-the-first-time-the-widget-is-inserted-in-the-tree-when-the-widgets-parent-changes-its-configuration-and-when-an-httpsdocs.flutter.ioflutterwidgetsinheritedwidget-class.htmltext-decoration-none-color-rgb17-85-204-it-depends-on-changes">font-family: "Source Sans Pro", sans-serif; font-weight: 300; margin-top: 24px; color: rgb(17, 17, 17); font-size: 24px; margin-bottom: 8px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(253, 253, 253); text-decoration-style: initial; text-decoration-color: initial;](Performance considerationsmargin-bottom: 1em; margin-top: 0px; color: rgb(17, 17, 17); font-family: Roboto, sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 300; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(253, 253, 253); text-decoration-style: initial; text-decoration-color: initial;](The <a href="build">https://docs.flutter.io/flutter/widgets/StatelessWidget/build.htmltext-decoration: none; color: rgb(17, 85, 204);</a> method of a stateless widget is typically only called in three situations: the first time the widget is inserted in the tree, when the widget's parent changes its configuration, and when an <a href="InheritedWidget">https://docs.flutter.io/flutter/widgets/InheritedWidget-class.htmltext-decoration: none; color: rgb(17, 85, 204);</a> it depends on changes.</h2> <p>margin-bottom: 1em; margin-top: 0px; color: rgb(17, 17, 17); font-family: Roboto, sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 300; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(253, 253, 253); text-decoration-style: initial; text-decoration-color: initial;](If a widget's parent will regularly change the widget's configuration, or if it depends on inherited widgets that frequently change, then it is important to optimize the performance of the <a href="build">https://docs.flutter.io/flutter/widgets/StatelessWidget/build.htmltext-decoration: none; color: rgb(17, 85, 204);</a> method to maintain a fluid rendering performance.</p> <p>margin-bottom: 1em; margin-top: 0px; color: rgb(17, 17, 17); font-family: Roboto, sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 300; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(253, 253, 253); text-decoration-style: initial; text-decoration-color: initial;](There are several techniques one can use to minimize the impact of rebuilding a stateless widget:</p> <p>color: rgb(17, 17, 17); font-family: Roboto, sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 300; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(253, 253, 253); text-decoration-style: initial; text-decoration-color: initial;](- margin: 0px;](Minimize the number of nodes transitively created by the build method and any widgets it creates. For example, instead of an elaborate arrangement of <a href="Row">https://docs.flutter.io/flutter/widgets/Row-class.htmltext-decoration: none; color: rgb(17, 85, 204);</a>s, <a href="Column">https://docs.flutter.io/flutter/widgets/Column-class.htmltext-decoration: none; color: rgb(17, 85, 204);</a>s, <a href="Padding">https://docs.flutter.io/flutter/widgets/Padding-class.htmltext-decoration: none; color: rgb(17, 85, 204);</a>s, and <a href="SizedBox">https://docs.flutter.io/flutter/widgets/SizedBox-class.htmltext-decoration: none; color: rgb(17, 85, 204);</a>es to position a single child in a particularly fancy manner, consider using just an <a href="Align">https://docs.flutter.io/flutter/widgets/Align-class.htmltext-decoration: none; color: rgb(17, 85, 204);</a> or a<a href="CustomSingleChildLayout">https://docs.flutter.io/flutter/widgets/CustomSingleChildLayout-class.htmltext-decoration: none; color: rgb(17, 85, 204);</a>. Instead of an intricate layering of multiple <a href="Container">https://docs.flutter.io/flutter/widgets/Container-class.htmltext-decoration: none; color: rgb(17, 85, 204);</a>s and with <a href="Decoration">https://docs.flutter.io/flutter/painting/Decoration-class.htmltext-decoration: none; color: rgb(17, 85, 204);</a>s to draw just the right graphical effect, consider a single <a href="CustomPaint">https://docs.flutter.io/flutter/widgets/CustomPaint-class.htmltext-decoration: none; color: rgb(17, 85, 204);</a> widget.</p> <ul> <li><p>margin: 0px;](Use <code>font-family: "Source Code Pro", Menlo, monospace; color: inherit; padding: 0.2em 0px; font-size: 1em; background-color: inherit; border-radius: 3px; font-weight: 300;](const</code> widgets where possible, and provide a <code>font-family: "Source Code Pro", Menlo, monospace; color: inherit; padding: 0.2em 0px; font-size: 1em; background-color: inherit; border-radius: 3px; font-weight: 300;](const</code> constructor for the widget so that users of the widget can also do so.</p> </li> <li><p>margin: 0px;](Consider refactoring the stateless widget into a stateful widget so that it can use some of the techniques described at <a href="StatefulWidget">https://docs.flutter.io/flutter/widgets/StatefulWidget-class.htmltext-decoration: none; color: rgb(17, 85, 204);</a>, such as caching common parts of subtrees and using <a href="GlobalKey">https://docs.flutter.io/flutter/widgets/GlobalKey-class.htmltext-decoration: none; color: rgb(17, 85, 204);</a>s when changing the tree structure.</p> </li> <li><p>margin: 0px;](If the widget is likely to get rebuilt frequently due to the use of <a href="InheritedWidget">https://docs.flutter.io/flutter/widgets/InheritedWidget-class.htmltext-decoration: none; color: rgb(17, 85, 204);</a>s, consider refactoring the stateless widget into multiple widgets, with the parts of the tree that change being pushed to the leaves. For example instead of building a tree with four widgets, the inner-most widget depending on the <a href="Theme">https://docs.flutter.io/flutter/material/Theme-class.htmltext-decoration: none; color: rgb(17, 85, 204);</a>, consider factoring out the part of the build function that builds the inner-most widget into its own widget, so that only the inner-most widget needs to be rebuilt when the theme changes.</p> </li> </ul> <h2 id="font-family-source-sans-pro-sans-serif-font-weight-300-margin-top-24px-color-rgb17-17-17-font-size-24px-margin-bottom-8px-font-style-normal-font-variant-ligatures-normal-font-variant-caps-normal-letter-spacing-normal-orphans-2-text-align-start-text-indent-0px-text-transform-none-white-space-normal-widows-2-word-spacing-0px-webkit-text-stroke-width-0px-background-color-rgb253-253-253-text-decoration-style-initial-text-decoration-color-initialsample-codemargin-bottom-1em-margin-top-0px-color-rgb17-17-17-font-family-roboto-sans-serif-font-size-15px-font-style-normal-font-variant-ligatures-normal-font-variant-caps-normal-font-weight-300-letter-spacing-normal-orphans-2-text-align-start-text-indent-0px-text-transform-none-white-space-normal-widows-2-word-spacing-0px-webkit-text-stroke-width-0px-background-color-rgb253-253-253-text-decoration-style-initial-text-decoration-color-initialthe-following-is-a-skeleton-of-a-stateless-widget-subclass-called-font-family-source-code-pro-menlo-monospace-color-inherit-padding-0.2em-0px-font-size-1em-background-color-inherit-border-radius-3px-font-weight-300greenfrog">font-family: "Source Sans Pro", sans-serif; font-weight: 300; margin-top: 24px; color: rgb(17, 17, 17); font-size: 24px; margin-bottom: 8px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(253, 253, 253); text-decoration-style: initial; text-decoration-color: initial;](Sample codemargin-bottom: 1em; margin-top: 0px; color: rgb(17, 17, 17); font-family: Roboto, sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 300; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(253, 253, 253); text-decoration-style: initial; text-decoration-color: initial;](The following is a skeleton of a stateless widget subclass called <code>font-family: "Source Code Pro", Menlo, monospace; color: inherit; padding: 0.2em 0px; font-size: 1em; background-color: inherit; border-radius: 3px; font-weight: 300;](GreenFrog</code>:</h2> <p>hljs-keywordcolor: rgb(51, 51, 51); font-weight: bold;](new _YellowBirdState(); }</p> <p>hljs-class](hljs-keywordcolor: rgb(51, 51, 51); font-weight: bold;](class hljs-titlecolor: rgb(68, 85, 136); font-weight: bold;](_YellowBirdState hljs-keywordcolor: rgb(51, 51, 51); font-weight: bold;](extends hljs-titlecolor: rgb(68, 85, 136); font-weight: bold;](State { hljs-metacolor: rgb(153, 153, 153); font-weight: bold;](@override Widget build(BuildContext context) { hljs-keywordcolor: rgb(51, 51, 51); font-weight: bold;](return hljs-keywordcolor: rgb(51, 51, 51); font-weight: bold;](new Container(color: hljs-keywordcolor: rgb(51, 51, 51); font-weight: bold;](const Color(hljs-numbercolor: rgb(0, 128, 128);](0xFFFFE306)); } }
<p>margin-bottom: 1em; margin-top: 0px; color: rgb(17, 17, 17); font-family: Roboto, sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 300; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(253, 253, 253); text-decoration-style: initial; text-decoration-color: initial;](The next example shows the more generic widget <code>font-family: "Source Code Pro", Menlo, monospace; color: inherit; padding: 0.2em 0px; font-size: 1em; background-color: inherit; border-radius: 3px; font-weight: 300;](Bird</code> which can be given a color and a child, and which has some internal state with a method that can be called to mutate it:</p>
<p>hljs-keywordcolor: rgb(51, 51, 51); font-weight: bold;](new _BirdState();
}</p>
<p>hljs-class](hljs-keywordcolor: rgb(51, 51, 51); font-weight: bold;](class hljs-titlecolor: rgb(68, 85, 136); font-weight: bold;](_BirdState hljs-keywordcolor: rgb(51, 51, 51); font-weight: bold;](extends hljs-titlecolor: rgb(68, 85, 136); font-weight: bold;](State {
hljs-built_incolor: rgb(0, 134, 179);](double _size = hljs-numbercolor: rgb(0, 128, 128);](1.0;</p>
<p>hljs-keywordcolor: rgb(51, 51, 51); font-weight: bold;](void grow() {
setState(() { _size += hljs-numbercolor: rgb(0, 128, 128);](0.1; });
}</p>
<p>hljs-metacolor: rgb(153, 153, 153); font-weight: bold;](@override
Widget build(BuildContext context) {
hljs-keywordcolor: rgb(51, 51, 51); font-weight: bold;](return hljs-keywordcolor: rgb(51, 51, 51); font-weight: bold;](new Container(
color: widget.color,
transform: hljs-keywordcolor: rgb(51, 51, 51); font-weight: bold;](new Matrix4.diagonal3Values(_size, _size, hljs-numbercolor: rgb(0, 128, 128);](1.0),
child: widget.child,
);
}
}
```margin-bottom: 1em; margin-top: 0px; color: rgb(17, 17, 17); font-family: Roboto, sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 300; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(253, 253, 253); text-decoration-style: initial; text-decoration-color: initial;](By convention, widget constructors only use named arguments. Named arguments can be marked as required using <code>font-family: "Source Code Pro", Menlo, monospace; color: inherit; padding: 0.2em 0px; font-size: 1em; background-color: inherit; border-radius: 3px; font-weight: 300;](@required</code>. Also by convention, the first argument is <a href="key">https://docs.flutter.io/flutter/widgets/Widget/key.htmltext-decoration: none; color: rgb(17, 85, 204);</a>, and the last argument is <code>font-family: "Source Code Pro", Menlo, monospace; color: inherit; padding: 0.2em 0px; font-size: 1em; background-color: inherit; border-radius: 3px; font-weight: 300;](child</code>, <code>font-family: "Source Code Pro", Menlo, monospace; color: inherit; padding: 0.2em 0px; font-size: 1em; background-color: inherit; border-radius: 3px; font-weight: 300;](children</code>, or the equivalent.</p>
<p>margin-bottom: 1em; margin-top: 0px; color: rgb(17, 17, 17); font-family: Roboto, sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 300; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(253, 253, 253); text-decoration-style: initial; text-decoration-color: initial;](See also:</p>
<p>color: rgb(17, 17, 17); font-family: Roboto, sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 300; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(253, 253, 253); text-decoration-style: initial; text-decoration-color: initial;](- <a href="State">https://docs.flutter.io/flutter/widgets/State-class.htmltext-decoration: none; color: rgb(17, 85, 204);</a>, where the logic behind a <a href="StatefulWidget">https://docs.flutter.io/flutter/widgets/StatefulWidget-class.htmltext-decoration: none; color: rgb(17, 85, 204);</a> is hosted.- <a href="StatelessWidget">https://docs.flutter.io/flutter/widgets/StatelessWidget-class.htmltext-decoration: none; color: rgb(17, 85, 204);</a>, for widgets that always build the same way given a particular configuration and ambient state.- <a href="InheritedWidget">https://docs.flutter.io/flutter/widgets/InheritedWidget-class.htmltext-decoration: none; color: rgb(17, 85, 204);</a>, for widgets that introduce ambient state that can be read by descendant widgets.</p>