在Flutter中的FAB后面添加模糊效果

问题描述

如何在FAB后面添加这种模糊效果？ 我尝试使用BottomAppBar实现此目的，但BottomAppBar在LinearGradient中不接受透明色 我也尝试降低BottomAppBar背景的不透明度，但效果不佳

expected

Widget build(BuildContext context) {
    return Scaffold(
      body: _myListView(context),bottomNavigationBar: BottomAppBar(
        child: Container(
          height: MediaQuery.of(context).size.height/10,decoration: Boxdecoration(
            gradient: LinearGradient(colors: [Colors.transparent,Colors.white],begin: Alignment.topCenter,end: Alignment.bottomCenter
            )
          ),child: MyFloatingActionButton(),),);
}

output

解决方法

我能够在Stack的帮助下解决问题

Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          _myListView(context),Positioned(child:
            Container(
              padding: EdgeInsets.all(5.0),alignment: Alignment.bottomCenter,decoration: BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment.topCenter,end: Alignment.bottomCenter,colors: <Color>[
                    Colors.white.withAlpha(0),Colors.white12,Colors.white70
                  ],),child: MyFloatingActionButton(),bottom: 0,top: MediaQuery.of(context).size.height/1.5,width: MediaQuery.of(context).size.width,],);
  }