在 Flutter 的 FAB 后面添加雾效果

Question

如何在 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

Answer 1

我在 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,
          ),

        ],
      ),
    );
  }