1. 基本介绍

FloatingActionButton 是一个悬浮在屏幕上方的按钮，常用于 Scaffold.floatingActionButton。

2. 示例代码

代码下载地址 。如果对你有帮助的话记得给个关注，代码会根据 我的 Flutter 专题 不断更新。

3. 属性介绍

4. FloatingActionButton 组件

4.1 容器创建

优雅的编程，首先创建一个 floatingActionButton.dart 文件。我们创建一个底部带 BottomAppBar 的页面。

import 'package:flutter/material.dart';
class FMFloatingActionButtonVC extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("FloatingActionButton"),
      floatingActionButton: _floatingActionButton(),
      // floatingActionButton: _customFloatingActionButton(),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling,
      bottomNavigationBar: _bottomAppBar(),
  FloatingActionButton _floatingActionButton(){
    return FloatingActionButton(
      child: Icon(Icons.ac_unit),
  FloatingActionButton _customFloatingActionButton(){
    return FloatingActionButton.extended(
        onPressed: null, 
        icon: Icon(Icons.ac_unit),
        label: Text("悬浮按钮"),
  BottomAppBar _bottomAppBar(){
    return BottomAppBar(
      child: Container(
        height: 50,
        child: Row(
          children: [
            Expanded(
                child: Container(
                  child: Text("底"),
                  alignment: Alignment.center,
            Expanded(
              child: Container(
                child: Text("部"),
                alignment: Alignment.center,
            Expanded(
              child: Container(
                child: Text("按"),
                alignment: Alignment.center,
            Expanded(
              child: Container(
                child: Text("钮"),
                alignment: Alignment.center,
FloatingActionButton 有两种样式，圆形与自适应。
4.2.1 圆形样式
最简单常用的样式，child 可以给任意 widget，但是不会改变大小与形状。当 child 尺寸超出时会抛出异常。
  FloatingActionButton _floatingActionButton(){
    return FloatingActionButton(
      child: Icon(Icons.ac_unit),
基于 Text 的自适应按钮。
  FloatingActionButton _customFloatingActionButton(){
    return FloatingActionButton.extended(
        onPressed: null, 
        icon: Icon(Icons.ac_unit),
        label: Text("悬浮按钮"),
4.2.3 样式差异
我们来看一下 FloatingActionButton 与 FloatingActionButton.extended 源码。
FloatingActionButton 源码。
  const FloatingActionButton({
    Key key,
    this.child,
    this.tooltip,
    this.foregroundColor,
    this.backgroundColor,
    this.focusColor,
    this.hoverColor,
    this.splashColor,
    this.heroTag = const _DefaultHeroTag(),
    this.elevation,
    this.focusElevation,
    this.hoverElevation,
    this.highlightElevation,
    this.disabledElevation,
    @required this.onPressed,
    this.mouseCursor,
    this.mini = false,
    this.shape,
    this.clipBehavior = Clip.none,
    this.focusNode,
    this.autofocus = false,
    this.materialTapTargetSize,
    this.isExtended = false,
FloatingActionButton.extended 源码。
  FloatingActionButton.extended({
    Key key,
    this.tooltip,
    this.foregroundColor,
    this.backgroundColor,
    this.focusColor,
    this.hoverColor,
    this.heroTag = const _DefaultHeroTag(),
    this.elevation,
    this.focusElevation,
    this.hoverElevation,
    this.splashColor,
    this.highlightElevation,
    this.disabledElevation,
    @required this.onPressed,
    this.mouseCursor = SystemMouseCursors.click,
    this.shape,
    this.isExtended = true,
    this.materialTapTargetSize,
    this.clipBehavior = Clip.none,
    this.focusNode,
    this.autofocus = false,
    Widget icon,
    @required Widget label,
不难看出，extended 方法增加 icon 与 label 两个属性，注意 label 使用 @required 修饰的，也就是使用 extended 方法时，必须传入 label 入参。
4.3 自适应按钮边框的不规则 BottomAppBar。
作为题外话插一下，不规则 bottomAppBar 的使用，根据 FloatingActionButton 外围，来挤开 bottomAppBar，完成按钮悬浮，且挤开 BottomAppBar 的效果。
  BottomAppBar _bottomAppBar(){
    return BottomAppBar(
      shape: CircularNotchedRectangle(),
      elevation: 20,
      notchMargin: 12,
      child: Container(
        height: 50,
        child: Row(
          children: [
            Expanded(
                child: Container(
                  child: Text("底"),
                  alignment: Alignment.center,
            Expanded(
              child: Container(
                child: Text("部"),
                alignment: Alignment.center,
            Expanded(
              child: Container(
                child: Text("按"),
                alignment: Alignment.center,
            Expanded(
              child: Container(
                child: Text("钮"),
                alignment: Alignment.center,
简单介绍一下相关属性
BottomAppBar属性
具体描述见上方属性介绍，这里把改过的颜色与效果展示一下。
  FloatingActionButton _floatingActionButton(){
    return FloatingActionButton(
      child: Icon(Icons.ac_unit),
      tooltip: "我就简单的介绍一下吧",
      foregroundColor: Colors.pink,
      backgroundColor: Colors.yellow,
      splashColor: Colors.blue,
4.5 形状与边框
更多样式可以参考 Flutter 组件之 RaisedButton 详解 3.3，此处不做详解。
  FloatingActionButton _floatingActionButton(){
    return FloatingActionButton(
      child: Icon(Icons.ac_unit),
      tooltip: "我就简单的介绍一下吧",
      foregroundColor: Colors.pink,
      backgroundColor: Colors.yellow,
      splashColor: Colors.blue,
      onPressed: (){
        print("test");
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15),
        side: BorderSide(
          width: 2,
          color: Colors.red,
4.6 点击事件
使用 onPressed 属性为 FloatingActionButton 添加一个点击事件，上述均有点击事件，不做过多介绍。
注意：onPressed == null 时，splashColor 不会产生效果。
5. 技术小结