203 lines
12 KiB
HTML
203 lines
12 KiB
HTML
|
<!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, initial-scale=1">
|
||
|
|
<meta name="description" content="API docs for the build method from the SideBarContentState class, for the Dart programming language.">
|
||
|
|
<title>build method - SideBarContentState class - SideBarContent library - Dart API</title>
|
||
|
|
<!-- required because all the links are pseudo-absolute -->
|
||
|
|
<base href="../..">
|
||
|
|
|
||
|
|
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:500,400i,400,300|Source+Sans+Pro:400,300,700" rel="stylesheet">
|
||
|
|
<link rel="stylesheet" href="static-assets/github.css">
|
||
|
|
<link rel="stylesheet" href="static-assets/styles.css">
|
||
|
|
<link rel="icon" href="static-assets/favicon.png">
|
||
|
|
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div id="overlay-under-drawer"></div>
|
||
|
|
|
||
|
|
<header id="title">
|
||
|
|
<button id="sidenav-left-toggle" type="button"> </button>
|
||
|
|
<ol class="breadcrumbs gt-separated dark hidden-xs">
|
||
|
|
<li><a href="index.html">touch_demonstrator</a></li>
|
||
|
|
<li><a href="pages_SideBarContent/pages_SideBarContent-library.html">SideBarContent</a></li>
|
||
|
|
<li><a href="pages_SideBarContent/SideBarContentState-class.html">SideBarContentState</a></li>
|
||
|
|
<li class="self-crumb">build method</li>
|
||
|
|
</ol>
|
||
|
|
<div class="self-name">build</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>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<main>
|
||
|
|
|
||
|
|
<div class="col-xs-6 col-sm-3 col-md-2 sidebar sidebar-offcanvas-left">
|
||
|
|
<h5>SideBarContentState class</h5>
|
||
|
|
<ol>
|
||
|
|
<li class="section-title"><a href="pages_SideBarContent/SideBarContentState-class.html#constructors">Constructors</a></li>
|
||
|
|
<li><a href="pages_SideBarContent/SideBarContentState/SideBarContentState.html">SideBarContentState</a></li>
|
||
|
|
|
||
|
|
<li class="section-title inherited">
|
||
|
|
<a href="pages_SideBarContent/SideBarContentState-class.html#instance-properties">Properties</a>
|
||
|
|
</li>
|
||
|
|
<li class="inherited"><a href="pages_SideBarContent/SideBarContentState/context.html">context</a></li>
|
||
|
|
<li class="inherited"><a href="pages_SideBarContent/SideBarContentState/hashCode.html">hashCode</a></li>
|
||
|
|
<li class="inherited"><a href="pages_SideBarContent/SideBarContentState/mounted.html">mounted</a></li>
|
||
|
|
<li class="inherited"><a href="pages_SideBarContent/SideBarContentState/runtimeType.html">runtimeType</a></li>
|
||
|
|
<li class="inherited"><a href="pages_SideBarContent/SideBarContentState/widget.html">widget</a></li>
|
||
|
|
|
||
|
|
<li class="section-title"><a href="pages_SideBarContent/SideBarContentState-class.html#instance-methods">Methods</a></li>
|
||
|
|
<li><a href="pages_SideBarContent/SideBarContentState/build.html">build</a></li>
|
||
|
|
<li class="inherited"><a href="pages_SideBarContent/SideBarContentState/deactivate.html">deactivate</a></li>
|
||
|
|
<li class="inherited"><a href="pages_SideBarContent/SideBarContentState/debugFillProperties.html">debugFillProperties</a></li>
|
||
|
|
<li class="inherited"><a href="pages_SideBarContent/SideBarContentState/didChangeDependencies.html">didChangeDependencies</a></li>
|
||
|
|
<li class="inherited"><a href="pages_SideBarContent/SideBarContentState/didUpdateWidget.html">didUpdateWidget</a></li>
|
||
|
|
<li class="inherited"><a href="pages_SideBarContent/SideBarContentState/dispose.html">dispose</a></li>
|
||
|
|
<li class="inherited"><a href="pages_SideBarContent/SideBarContentState/initState.html">initState</a></li>
|
||
|
|
<li class="inherited"><a href="pages_SideBarContent/SideBarContentState/noSuchMethod.html">noSuchMethod</a></li>
|
||
|
|
<li class="inherited"><a href="pages_SideBarContent/SideBarContentState/reassemble.html">reassemble</a></li>
|
||
|
|
<li class="inherited"><a href="pages_SideBarContent/SideBarContentState/setState.html">setState</a></li>
|
||
|
|
<li class="inherited"><a href="pages_SideBarContent/SideBarContentState/toDiagnosticsNode.html">toDiagnosticsNode</a></li>
|
||
|
|
<li class="inherited"><a href="pages_SideBarContent/SideBarContentState/toString.html">toString</a></li>
|
||
|
|
<li class="inherited"><a href="pages_SideBarContent/SideBarContentState/toStringShort.html">toStringShort</a></li>
|
||
|
|
|
||
|
|
<li class="section-title inherited"><a href="pages_SideBarContent/SideBarContentState-class.html#operators">Operators</a></li>
|
||
|
|
<li class="inherited"><a href="pages_SideBarContent/SideBarContentState/operator_equals.html">operator ==</a></li>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</ol>
|
||
|
|
</div><!--/.sidebar-offcanvas-->
|
||
|
|
|
||
|
|
<div class="col-xs-12 col-sm-9 col-md-8 main-content">
|
||
|
|
<h1>build method</h1>
|
||
|
|
|
||
|
|
<section class="multi-line-signature">
|
||
|
|
<div>
|
||
|
|
<ol class="annotation-list">
|
||
|
|
<li>@override</li>
|
||
|
|
</ol>
|
||
|
|
</div>
|
||
|
|
<span class="returntype">Widget</span>
|
||
|
|
<span class="name ">build</span>
|
||
|
|
(<wbr><span class="parameter" id="build-param-context"><span class="type-annotation">BuildContext</span> <span class="parameter-name">context</span></span>)
|
||
|
|
|
||
|
|
</section>
|
||
|
|
<section class="desc markdown">
|
||
|
|
<p>Describes the part of the user interface represented by this widget.</p>
|
||
|
|
<p>The framework calls this method in a number of different situations:</p><ul><li>After calling <a href="pages_SideBarContent/SideBarContentState/initState.html">initState</a>.</li><li>After calling <a href="pages_SideBarContent/SideBarContentState/didUpdateWidget.html">didUpdateWidget</a>.</li><li>After receiving a call to <a href="pages_SideBarContent/SideBarContentState/setState.html">setState</a>.</li><li>After a dependency of this <code>State</code> object changes (e.g., an
|
||
|
|
<code>InheritedWidget</code> referenced by the previous <a href="pages_SideBarContent/SideBarContentState/build.html">build</a> changes).</li><li>After calling <a href="pages_SideBarContent/SideBarContentState/deactivate.html">deactivate</a> and then reinserting the <code>State</code> object into
|
||
|
|
the tree at another location.</li></ul>
|
||
|
|
<p>The framework replaces the subtree below this widget with the widget
|
||
|
|
returned by this method, either by updating the existing subtree or by
|
||
|
|
removing the subtree and inflating a new subtree, depending on whether the
|
||
|
|
widget returned by this method can update the root of the existing
|
||
|
|
subtree, as determined by calling <code>Widget.canUpdate</code>.</p>
|
||
|
|
<p>Typically implementations return a newly created constellation of widgets
|
||
|
|
that are configured with information from this widget's constructor, the
|
||
|
|
given <code>BuildContext</code>, and the internal state of this <code>State</code> object.</p>
|
||
|
|
<p>The given <code>BuildContext</code> contains information about the location in the
|
||
|
|
tree at which this widget is being built. For example, the context
|
||
|
|
provides the set of inherited widgets for this location in the tree. The
|
||
|
|
<code>BuildContext</code> argument is always the same as the <code>context</code> property of
|
||
|
|
this <code>State</code> object and will remain the same for the lifetime of this
|
||
|
|
object. The <code>BuildContext</code> argument is provided redundantly here so that
|
||
|
|
this method matches the signature for a <code>WidgetBuilder</code>.</p>
|
||
|
|
<h2 id="design-discussion">Design discussion</h2>
|
||
|
|
<h3 id="why-is-the-build-method-on-state-and-not-statefulwidget">Why is the <a href="pages_SideBarContent/SideBarContentState/build.html">build</a> method on <code>State</code>, and not <code>StatefulWidget</code>?</h3>
|
||
|
|
<p>Putting a <code>Widget build(BuildContext context)</code> method on <code>State</code> rather
|
||
|
|
putting a <code>Widget build(BuildContext context, State state)</code> method on
|
||
|
|
<code>StatefulWidget</code> gives developers more flexibility when subclassing
|
||
|
|
<code>StatefulWidget</code>.</p>
|
||
|
|
<p>For example, <code>AnimatedWidget</code> is a subclass of <code>StatefulWidget</code> that
|
||
|
|
introduces an abstract <code>Widget build(BuildContext context)</code> method for its
|
||
|
|
subclasses to implement. If <code>StatefulWidget</code> already had a <a href="pages_SideBarContent/SideBarContentState/build.html">build</a> method
|
||
|
|
that took a <code>State</code> argument, <code>AnimatedWidget</code> would be forced to provide
|
||
|
|
its <code>State</code> object to subclasses even though its <code>State</code> object is an
|
||
|
|
internal implementation detail of <code>AnimatedWidget</code>.</p>
|
||
|
|
<p>Conceptually, <code>StatelessWidget</code> could also be implemented as a subclass of
|
||
|
|
<code>StatefulWidget</code> in a similar manner. If the <a href="pages_SideBarContent/SideBarContentState/build.html">build</a> method were on
|
||
|
|
<code>StatefulWidget</code> rather than <code>State</code>, that would not be possible anymore.</p>
|
||
|
|
<p>Putting the <a href="pages_SideBarContent/SideBarContentState/build.html">build</a> function on <code>State</code> rather than <code>StatefulWidget</code> also
|
||
|
|
helps avoid a category of bugs related to closures implicitly capturing
|
||
|
|
<code>this</code>. If you defined a closure in a <a href="pages_SideBarContent/SideBarContentState/build.html">build</a> function on a
|
||
|
|
<code>StatefulWidget</code>, that closure would implicitly capture <code>this</code>, which is
|
||
|
|
the current widget instance, and would have the (immutable) fields of that
|
||
|
|
instance in scope:</p>
|
||
|
|
<pre class="language-dart"><code class="language-dart">class MyButton extends StatefulWidget {
|
||
|
|
...
|
||
|
|
final Color color;
|
||
|
|
|
||
|
|
@override
|
||
|
|
Widget build(BuildContext context, MyButtonState state) {
|
||
|
|
... () { print("color: $color"); } ...
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</code></pre>
|
||
|
|
<p>For example, suppose the parent builds <code>MyButton</code> with <code>color</code> being blue,
|
||
|
|
the <code>$color</code> in the print function refers to blue, as expected. Now,
|
||
|
|
suppose the parent rebuilds <code>MyButton</code> with green. The closure created by
|
||
|
|
the first build still implicitly refers to the original widget and the
|
||
|
|
<code>$color</code> still prints blue even through the widget has been updated to
|
||
|
|
green.</p>
|
||
|
|
<p>In contrast, with the <a href="pages_SideBarContent/SideBarContentState/build.html">build</a> function on the <code>State</code> object, closures
|
||
|
|
created during <a href="pages_SideBarContent/SideBarContentState/build.html">build</a> implicitly capture the <code>State</code> instance instead of
|
||
|
|
the widget instance:</p>
|
||
|
|
<pre class="language-dart"><code class="language-dart">class MyButtonState extends State<MyButton> {
|
||
|
|
...
|
||
|
|
@override
|
||
|
|
Widget build(BuildContext context) {
|
||
|
|
... () { print("color: ${widget.color}"); } ...
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</code></pre>
|
||
|
|
<p>Now when the parent rebuilds <code>MyButton</code> with green, the closure created by
|
||
|
|
the first build still refers to <code>State</code> object, which is preserved across
|
||
|
|
rebuilds, but the framework has updated that <code>State</code> object's <a href="pages_SideBarContent/SideBarContentState/widget.html">widget</a>
|
||
|
|
property to refer to the new <code>MyButton</code> instance and <code>${widget.color}</code>
|
||
|
|
prints green, as expected.</p>
|
||
|
|
<p>See also:</p><ul><li>The discussion on performance considerations at <code>StatefulWidget</code>.</li></ul>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="summary source-code" id="source">
|
||
|
|
<h2><span>Implementation</span> </h2>
|
||
|
|
<pre class="language-dart"><code class="language-dart">@override
|
||
|
|
Widget build(BuildContext context) {
|
||
|
|
return Scaffold(
|
||
|
|
appBar: AppBar(
|
||
|
|
title: Text('${widget.title}'),
|
||
|
|
),
|
||
|
|
body: SafeArea(child: Container()));
|
||
|
|
}</code></pre>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
</div> <!-- /.main-content -->
|
||
|
|
|
||
|
|
<div class="col-xs-6 col-sm-6 col-md-2 sidebar sidebar-offcanvas-right">
|
||
|
|
</div><!--/.sidebar-offcanvas-->
|
||
|
|
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<footer>
|
||
|
|
<span class="no-break">
|
||
|
|
touch_demonstrator 1.0.0+1
|
||
|
|
</span>
|
||
|
|
|
||
|
|
</footer>
|
||
|
|
|
||
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
||
|
|
<script src="static-assets/typeahead.bundle.min.js"></script>
|
||
|
|
<script src="static-assets/highlight.pack.js"></script>
|
||
|
|
<script src="static-assets/URI.js"></script>
|
||
|
|
<script src="static-assets/script.js"></script>
|
||
|
|
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|