title: Flutter: Collapsing AppBar using NestedScrollView
body: <p>I already implemented <code>NestedScrollView</code> and this is my result.</p>
  
  <p><strong>Before Scrolled:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/59MQJ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/59MQJ.jpg" alt="enter image description here"></a></p>
  
  <p><strong>After Scrolled:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/AC5Qr.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AC5Qr.jpg" alt="enter image description here"></a></p>
  
  <p>The question are:</p>
  
  <ol>
  <li>In the <strong>Before Scrolled section</strong>, how to make the default <code>Live Button</code> is in the center of <code>AppBar</code>?</li>
  <li>In the <strong>After Scrolled section</strong>, when the user scrolled to the top, the <code>Live Button</code> is moved from the center (default) to the right (besides <code>Chat Button</code>).</li>
  <li>In the <strong>After Scrolled section</strong>, when the user scrolled to the top, the <code>title</code> should not overlap with <code>Back Button</code>, <code>Live Button</code>, and <code>Chat Button</code> but the <code>title prefix</code> is should ​​to the right of <code>Back Button</code>, and the <code>title suffix</code> should to the left of <code>Live Button</code>, and <code>Live Button</code> should to the left of <code>Chat Button</code>.</li>
  </ol>
  
  <p>This is my code for building <code>AppBar</code>:</p>
  
  <pre><code>Widget _customAppBar(EventEntity event) {
      return SliverAppBar(
        expandedHeight: 200 + _appBarHeight,
        floating: false,
        pinned: true,
        leading: _buildNavButton(), // Back Button (Left)
        actions: &lt;Widget&gt;[
          // Live Button (Right)
          event?.status != null &amp;&amp;
              event.status == EventStatus.LIVE
              ? Center(child: LiveLabel(),)
              : Container(),
          // Chat Button (Right)
          HelpButton(),
        ],
        flexibleSpace: FlexibleSpaceBar(
          centerTitle: true,
          title: Text(
            widget.event.name.trim(),
            style: TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 24,
            ),
            overflow: TextOverflow.ellipsis,
            maxLines: 1,
            textAlign: TextAlign.center,
          ),
          background: Hero(
            tag: '--${widget.visibilityFilter} __${widget.event.id}',
            child: DinoNetworkImage(
              imageUrl: widget.event.image,
              fit: BoxFit.contain,
            ),
          ),
        ),
      );
    }
  </code></pre>
  
  <p>And this is the <code>build</code> method:</p>
  
  <pre><code>Widget build(BuildContext context) {
      return Scaffold(
        key: _scaffoldKey,
        body: SafeArea(
          top: true,
          bottom: false,
          child: Stack(
            fit: StackFit.expand,
            children: &lt;Widget&gt;[
              NestedScrollView(
                headerSliverBuilder: (BuildContext context,
                    bool innerBoxIsScrolled) {
                  return &lt;Widget&gt;[
                    _customAppBar(widget.event),
                  ];
                },
                body: SingleChildScrollView(
                  ....
                ),
              ),
              ....
            ],
          ),
        ),
      );
    }
  </code></pre>
  
  <p>How to make that happens with my code?</p>