Flutter-材质设计2半透明appbar

Question

我想获得这样的效果-向上滚动时，应用程序栏是透明的，在其下方可以看到列表视图：

并且向下滚动，只有白色-应用栏下方的第一项：

我的窗口布局：

return Container(
      color: AppTheme.nearlyWhite,
      child: SafeArea(
        top: false,
        bottom: false,
        child: Scaffold(
          backgroundColor: AppTheme.nearlyWhite,
          body: Stack(
            children: <Widget>[
              DrawerUserController(
                screenIndex: _drawerIndex,
                drawerWidth: MediaQuery.of(context).size.width * 0.75,
                animationController: (AnimationController animationController) => _sliderAnimationController = animationController,
                onDrawerCall: (DrawerIndex drawerIndexdata) => _onDrawerCall(drawerIndexdata, _forceRefresh),
                onDrawerTap:(DrawerIndex drawerIndexdata) => _onDrawerTap(drawerIndexdata),

                screenView: Column(
                  children: <Widget>[
                    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))
            ],
          ),
        ),
      ),
    );
  }

_screenView是简单的Listview().builder()，它显示每个项目的InkWell小部件。我的应用栏是自定义的，定义如下：

_createAppBar() {
    return SizedBox(
      height: AppBar().preferredSize.height,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          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: <Widget>[
                    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: () => setState(() => _forceRefresh = true),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

这是第一个可见的列表现在的样子：

所以，几乎在那里，但是当向下滚动时，应用程序栏将不会透明：

我试图将Appbar Backround设置为具有透明性的颜色，但没有成功。另外，我还需要使小部件实际重叠（ListView需要与我的应用栏重叠），并且它会从Flutter生成错误消息。

任何想法如何正确地做到这一点？

Answer 1

 @override
  Widget build(BuildContext context) {
    return Container(
        child: Stack(
        children:[
          Container(
          color:Colors.white,
          padding:EdgeInsets.all(10),
          child:ListView.builder(
          itemCount:25+1,
            //length + 1 is beacause to show 1st item at the beginning
          shrinkWrap:true,
          itemBuilder:(con,ind){
            return ind==0 ?
              Container(height:70)
              :ListTile(
            title:Text('Item $ind',
                      style:TextStyle(color:Colors.black,))
            );
          }
          )
          ),
          Container(
          height:70,
          color:Colors.transparent,
          child:Card(
            color:Colors.white.withAlpha(80),
            child: Row(
            children:[
              Expanded(
                flex:1,
                child: IconButton(
                icon:Icon(Icons.list,color:Colors.black,size:25),
                onPressed:(){
                  //todo
                }
                ),
              ),
              Expanded(
                flex:3,
                child: Text('Title',
                           style:TextStyle(color:Colors.black,)),
              ),

              Expanded(
                flex:1,
                child: IconButton(
                icon:Icon(Icons.search,color:Colors.black,size:25),
                onPressed:(){
                  //todo
                }
                ),
              ),
              Expanded(
                flex:1,
                child: IconButton(
                icon:Icon(Icons.more_vert,color:Colors.black,size:25),
                onPressed:(){
                  //todo
                }
                ),
              )
            ]
            ),
          )
          )
        ]
        )
    );
  }

Answer 2

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.white,
        body: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              pinned: true,
              backgroundColor: Colors.white,
              title: Text('Title', style: TextStyle(color: Colors.black)),
            ),
            SliverList(
              delegate: SliverChildListDelegate(List.generate(100, (i) => _buildListTile(i))),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildListTile(int i) {
    return ListTile(title: Text('Item $i'));
  }
}

结果https://imgur.com/zoHSvUf