1.概要

如果说，需求想要在页面中增加一个悬浮于页面的按钮，如下所示：

image.png

那么，这个需求Flutter可很快帮你实现，使用Scaffold的floatingActionButton属性，传给他一个FloatingActionButton即可。

2.源码

FloatingActionButton({
    Key key,
    // 按钮子Widget，一般是个Icon
    this.child,
    // 长按提示内容
    this.tooltip,
    // 前景色
    this.foregroundColor,
    // 背景色
    this.backgroundColor,
    // 成为焦点时颜色
    this.focusColor,
    // 悬停时颜色
    this.hoverColor,
    // 飞溅效果颜色
    this.splashColor,
    // 按钮的hero标签
    this.heroTag = const _DefaultHeroTag(),
    // 按钮高度
    this.elevation,
    // 焦点时高度
    this.focusElevation,
    // 悬停时高度
    this.hoverElevation,
    // 长按时高度
    this.highlightElevation,
    // 不能点击时高度
    this.disabledElevation,
    // 点击时回调
    @required this.onPressed,
    // 光标样式
    this.mouseCursor,
    // 按钮大小，默认56*56，mini时是40*40
    this.mini = false,
    // 按钮形状
    this.shape,
    // 裁剪方式
    this.clipBehavior = Clip.none,
    // 焦点节点
    this.focusNode,
    // 自动聚焦
    this.autofocus = false,
    // 点击区域大小，padded为48*48，skrinkWrap时为实际大小
    this.materialTapTargetSize,
    // 当继承FloatingActionButton时，需要设置为true
    this.isExtended = false,
  })

3.示例

class MyHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.forward),
      ),
    );
  }
}

image.png
此时，如果我们底部有Tabbar，效果会是这样。
image.png
在Flutter中，FloatingActionButton可以和BottomNavigationBar有一个神奇的配合，他们两个可以组合到一起。只需要设置Scaffold的floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,即可。效果：
image.png

floatingActionButtonLocation属性有很多种组合方式，例如将按钮放到中间等等，这里就不仔细说了。

最终示例代码：

class MyHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.forward),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.fire_extinguisher_sharp),
              label: "第一个"
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.fire_extinguisher_sharp),
              label: "第二个"
          ),
        ],
        currentIndex: 0,
        onTap: (index) {
          print("点击$index");
        },
      ),
    );
  }
}