Flutter - Material Design 2 半透明appbar

Question

我想获得这样的效果 - 向上滚动时，appbar 是透明的，其下方可见 listview：

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

我的窗口布局：

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 小部件。我的 appbar 是自定义的，定义如下：

_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 不会是透明的：

我试图将我的 appbar 背景设置为具有透明度的颜色，但没有成功。我还需要让我的小部件实际重叠（ListView 需要重叠我的应用栏），它会从 Flutter 生成错误消息。

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

Answer 1

在Scaffold 小部件中设置extendBodyBehindAppBar: true。然后像这样使用Opacity 小部件，

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: Home()));
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: PreferredSize(
        preferredSize: const Size.fromHeight(kToolbarHeight),
        child: Opacity( //Wrap your `AppBar`
          opacity: 0.8,
          child: AppBar(
            title: Text("Demo"),
          ),
        ),
      ),
      body: ListView.builder(
        itemCount: 30,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text("Tile: $index"),
          );
        },
      ),
    );
  }
}

Answer 2

 @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
                }
                ),
              )
            ]
            ),
          )
          )
        ]
        )
    );
  }