flutter - Flutter-Material Design 2半透明Appbar

Question

我想获得这样的效果-向上滚动时，应用程序栏是透明的，并且在其下方可见列表 View :


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



我的窗口布局:

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

在extendBodyBehindAppBar: true小部件中设置Scaffold。然后像这样使用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"),
          );
        },
      ),
    );
  }
}