flutter FloatingActionButton 实现类似 闲鱼 App 底部导航凸起按钮

Flutter FloatingActionButton 介绍

// FloatingActionButton 简称 FAB
// 它可以实现浮动按钮的效果
// 此外，还可以用它实现类似于"闲鱼"app的底部凸起导航效果

child               // 子视图，一般为 Icon，不推荐使用文字作为子视图
tooltip             // 当 FAB 被长按时显示的文本提示，同时也用于无障碍功能
backgroundColor     // FAB 的背景颜色
elevation           // 未点击时的阴影值
highlightElevation  // 点击时的阴影值，默认是 12.0
onPressed           // 点击事件的回调
shape               // 可以用来定义 FAB 的形状
mini                // 是否是 mini 类型，默认值为 false

FloatingActionButton 代码实现闲鱼 app底部凸起按钮

// 案例代码
floatingActionButton: Column(
  mainAxisAlignment: MainAxisAlignment.end,   // 对齐到底部
  children: <Widget>[
    Container(
      margin: EdgeInsets.only(bottom: 1),    // 设置下边距
      child: FloatingActionButton(           // 浮动按钮
        child: Icon(Icons.add),              // 添加图标
        onPressed: () {},                    // 点击事件
      ),
    ),
    Container(
      margin: EdgeInsets.only(bottom: 5),    // 设置下边距
      child: Text('发布',                    // 文本标签
        style: TextStyle(
          color: Colors.grey,
          fontSize: 13
        ),
      ),
    ),
  ],
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,  // 设置浮动按钮位置为底部中间