|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202 |
- <!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>
|