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?
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.
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 [https://docs.flutter.io/flutter/widgets/RenderObjectWidget-class.htmltext-decoration: none; color: rgb(17, 85, 204);](RenderObjectWidget)s, which describe concrete [https://docs.flutter.io/flutter/rendering/RenderObject-class.htmltext-decoration: none; color: rgb(17, 85, 204);](RenderObject)s).
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 [https://docs.flutter.io/flutter/widgets/BuildContext-class.htmltext-decoration: none; color: rgb(17, 85, 204);](BuildContext) 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 [https://docs.flutter.io/flutter/widgets/StatefulWidget-class.htmltext-decoration: none; color: rgb(17, 85, 204);](StatefulWidget).
## 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 [https://docs.flutter.io/flutter/widgets/StatelessWidget/build.htmltext-decoration: none; color: rgb(17, 85, 204);](build) 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 [https://docs.flutter.io/flutter/widgets/InheritedWidget-class.htmltext-decoration: none; color: rgb(17, 85, 204);](InheritedWidget) it depends on changes.
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 [https://docs.flutter.io/flutter/widgets/StatelessWidget/build.htmltext-decoration: none; color: rgb(17, 85, 204);](build) method to maintain a fluid rendering performance.
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:
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 [https://docs.flutter.io/flutter/widgets/Row-class.htmltext-decoration: none; color: rgb(17, 85, 204);](Row)s, [https://docs.flutter.io/flutter/widgets/Column-class.htmltext-decoration: none; color: rgb(17, 85, 204);](Column)s, [https://docs.flutter.io/flutter/widgets/Padding-class.htmltext-decoration: none; color: rgb(17, 85, 204);](Padding)s, and [https://docs.flutter.io/flutter/widgets/SizedBox-class.htmltext-decoration: none; color: rgb(17, 85, 204);](SizedBox)es to position a single child in a particularly fancy manner, consider using just an [https://docs.flutter.io/flutter/widgets/Align-class.htmltext-decoration: none; color: rgb(17, 85, 204);](Align) or a[https://docs.flutter.io/flutter/widgets/CustomSingleChildLayout-class.htmltext-decoration: none; color: rgb(17, 85, 204);](CustomSingleChildLayout). Instead of an intricate layering of multiple [https://docs.flutter.io/flutter/widgets/Container-class.htmltext-decoration: none; color: rgb(17, 85, 204);](Container)s and with [https://docs.flutter.io/flutter/painting/Decoration-class.htmltext-decoration: none; color: rgb(17, 85, 204);](Decoration)s to draw just the right graphical effect, consider a single [https://docs.flutter.io/flutter/widgets/CustomPaint-class.htmltext-decoration: none; color: rgb(17, 85, 204);](CustomPaint) widget.
- margin: 0px;](Use `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` widgets where possible, and provide a `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` constructor for the widget so that users of the widget can also do so.
- margin: 0px;](Consider refactoring the stateless widget into a stateful widget so that it can use some of the techniques described at [https://docs.flutter.io/flutter/widgets/StatefulWidget-class.htmltext-decoration: none; color: rgb(17, 85, 204);](StatefulWidget), such as caching common parts of subtrees and using [https://docs.flutter.io/flutter/widgets/GlobalKey-class.htmltext-decoration: none; color: rgb(17, 85, 204);](GlobalKey)s when changing the tree structure.
- margin: 0px;](If the widget is likely to get rebuilt frequently due to the use of [https://docs.flutter.io/flutter/widgets/InheritedWidget-class.htmltext-decoration: none; color: rgb(17, 85, 204);](InheritedWidget)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 [https://docs.flutter.io/flutter/material/Theme-class.htmltext-decoration: none; color: rgb(17, 85, 204);](Theme), 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.
## 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 `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`:
hljs-keywordcolor: rgb(51, 51, 51); font-weight: bold;](new _YellowBirdState();
}
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));
}
}
```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;](In this example. the [https://docs.flutter.io/flutter/widgets/State-class.htmltext-decoration: none; color: rgb(17, 85, 204);](State) has no actual state. State is normally represented as private member fields. Also, normally widgets have more constructor arguments, each of which corresponds to a `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;](final` property.
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 `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` 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:
hljs-keywordcolor: rgb(51, 51, 51); font-weight: bold;](new _BirdState();
}
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;
hljs-keywordcolor: rgb(51, 51, 51); font-weight: bold;](void grow() {
setState(() { _size += hljs-numbercolor: rgb(0, 128, 128);](0.1; });
}
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 `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`. Also by convention, the first argument is [https://docs.flutter.io/flutter/widgets/Widget/key.htmltext-decoration: none; color: rgb(17, 85, 204);](key), and the last argument is `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`, `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`, or the equivalent.
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:
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;](- [https://docs.flutter.io/flutter/widgets/State-class.htmltext-decoration: none; color: rgb(17, 85, 204);](State), where the logic behind a [https://docs.flutter.io/flutter/widgets/StatefulWidget-class.htmltext-decoration: none; color: rgb(17, 85, 204);](StatefulWidget) is hosted.- [https://docs.flutter.io/flutter/widgets/StatelessWidget-class.htmltext-decoration: none; color: rgb(17, 85, 204);](StatelessWidget), for widgets that always build the same way given a particular configuration and ambient state.- [https://docs.flutter.io/flutter/widgets/InheritedWidget-class.htmltext-decoration: none; color: rgb(17, 85, 204);](InheritedWidget), for widgets that introduce ambient state that can be read by descendant widgets.