Flutter 模仿知乎加号按键 添加半透明路由页面

效果

本文使用flutter模仿知乎的加号按键，实现如图效果：

分析思路

仔细分析，上述效果包含了以下几个关键点：点击按键在原有页面上添加一个新页面；新页面半透明高斯模糊，露出上层页面；弹出时有上滑动画；点击新页面的空白处返回。

简单来说，添加新页面是通过在Stack上放置新页面实现的（直接Navigator.of(context).push的新页面无法露出下层的效果）；
动画用Transform.translate实现；
高斯模糊用BackDropFilter实现；
点击新页面空白处则是在全局和非空白处设GestureDetector（利用冒泡特性），在合适时机调用返回的回调函数。

具体实现

点击后在栈上添加页面

父页面
Stack的build函数，这里_mainBackPage()是背后默认显示的页面，_addPageStack是用来存放半透明页面的栈（其默认为空）。

  //（dart的语法高亮支持不全，所以以下使用java格式）
  //...
  List<Widget> _addPageStack = [];
  //...
  @override
  void initState() {
   
  	//...
    _addPageStack = [];
  }

@override
  Widget build(BuildContext context) {
   
    return Stack(
      children: <Widget>[_mainBackPage()]..addAll(_addPageStack),
      alignment: Alignment.center,
    );
  }

以下为BottomNavigationBar项的点击事件，点击加号的时候给_addPageStack栈添加AddPage页面（由于子页面要有点击空白返回的回调函数，所以需要传入callback）。

bottomNavigationBar: 
          child: BottomNavigationBar(
            onTap: (int index) {
   
              //...
              // 如果点击了加号的Item，触发以下事件
                setState(() {
   
                  _addPageStack.add(AddPage(callback: _onTapBackground));
              //...

页面半透明 高斯模糊

在子页面中使用如下组件包裹即可。

child: BackdropFilter(
              filter: prefix0.ImageFilter.blur(sigmaX