title: Flutter - material design 2 semi transparent appbar
body: <p>I want to get effect like this - when scrolled up, appbar is transparent with listview visible below it:
  <a href="https://i.stack.imgur.com/R2Hxr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/R2Hxr.png" alt="enter image description here"></a></p>
  
  <p>And scrolled down, only white color - first item below appbar:</p>
  
  <p><a href="https://i.stack.imgur.com/zsxZu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zsxZu.png" alt="enter image description here"></a></p>
  
  <p>My window layout:</p>
  
  <pre><code>return Container(
        color: AppTheme.nearlyWhite,
        child: SafeArea(
          top: false,
          bottom: false,
          child: Scaffold(
            backgroundColor: AppTheme.nearlyWhite,
            body: Stack(
              children: &lt;Widget&gt;[
                DrawerUserController(
                  screenIndex: _drawerIndex,
                  drawerWidth: MediaQuery.of(context).size.width * 0.75,
                  animationController: (AnimationController animationController) =&gt; _sliderAnimationController = animationController,
                  onDrawerCall: (DrawerIndex drawerIndexdata) =&gt; _onDrawerCall(drawerIndexdata, _forceRefresh),
                  onDrawerTap:(DrawerIndex drawerIndexdata) =&gt; _onDrawerTap(drawerIndexdata),
  
                  screenView: Column(
                    children: &lt;Widget&gt;[
                      Padding(
                        padding: EdgeInsets.fromLTRB(8, MediaQuery.of(context).padding.top + 8, 8, 8),
                        child: _createAppBar(),
                      ),
                      Expanded(
                          child:
                          Container(
                              color: Colors.white,
                              child: _screenView,
                          )
                      ),
                    ],
                  ),
                ),
                new FabDialer(_fabMiniMenuItemList, Colors.blue, new Icon(Icons.add))
              ],
            ),
          ),
        ),
      );
    }
  </code></pre>
  
  <p><code>_screenView</code> is simple <code>Listview().builder()</code> and it shows <code>InkWell</code> widget for each item. My appbar is custom, defined like this:</p>
  
  <pre><code>_createAppBar() {
      return SizedBox(
        height: AppBar().preferredSize.height,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: &lt;Widget&gt;[
            Padding(
              padding: const EdgeInsets.only(top: 8, left: 8),
              child: Container(
                width: AppBar().preferredSize.height - 8,
                height: AppBar().preferredSize.height - 8,
              ),
            ),
            Expanded(
              child: Center(
                child: Padding(
                  padding: const EdgeInsets.only(top: 4),
                  child: Column(
                    children: &lt;Widget&gt;[
                      Text(
                        _menuSelected,
                        style: TextStyle(
                          fontSize: 22,
                          color: AppTheme.darkText,
                          fontWeight: FontWeight.w400,
                        ),
                      ),
                      Text(
                        globals.cityName,
                        style: TextStyle(
                          fontSize: 15,
                          color: AppTheme.darkerText,
                          fontWeight: FontWeight.w400,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(top: 8, right: 8),
              child: Container(
                width: AppBar().preferredSize.height - 8,
                height: AppBar().preferredSize.height - 8,
                color: Colors.white,
                child: Material(
                  color: Colors.transparent,
                  child: InkWell(
                    borderRadius:
                    BorderRadius.circular(AppBar().preferredSize.height),
                    child: Icon(Icons.refresh, color: AppTheme.dark_grey,),
                    onTap: () =&gt; setState(() =&gt; _forceRefresh = true),
                  ),
                ),
              ),
            ),
          ],
        ),
      );
    }
  </code></pre>
  
  <p>That's how it looks now with first list item visible:</p>
  
  <p><a href="https://i.stack.imgur.com/80dnQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/80dnQ.png" alt="enter image description here"></a></p>
  
  <p>So, almost there, but when scrolled down, appbar won't be transparent:
  <a href="https://i.stack.imgur.com/Zjp10.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Zjp10.png" alt="enter image description here"></a></p>
  
  <p>I tried to mess around with setting my appbar backround to color with transparency, without success. Also I need to get my widgets actually overlapped (<code>ListView</code> needs to overlap my appbar) and it generates error messages from Flutter.</p>
  
  <p>Any ideas how to do that properly?</p>