浮动按钮，一般用于Scaffold中，可摆放在特定位置。可盛放一个子组件，接收点击、可定义颜色、形状等。

相关组件

Scaffold

FloatingActionButton点击事件

【child】: 子组件 【Widget】
【tooltip】: 长按时提示文字 【String】
【backgroundColor】: 背景色 【Color】
【foregroundColor】: 前景色 【Color】
【elevation】: 影深 【double】
【onPressed】: 点击事件 【Function】
21.gif

  1. import 'package:flutter/material.dart';
  2. class CustomFAB extends StatelessWidget {
  3.   @override
  4.   Widget build(BuildContext context) {
  5.     var data = {
  6.       Colors.red: Icons.add,
  7.       Colors.blue: Icons.bluetooth,
  8.       Colors.green: Icons.android,
  9.     };
  10.     return Wrap(
  11.         spacing: 20,
  12.         children: data.keys
  13.             .map((e) => FloatingActionButton(
  14.           heroTag: e.toString()+"a",
  15.           onPressed: () {},
  16.           backgroundColor: e,
  17.           foregroundColor: Colors.white,
  18.           child: Icon(data[e]),
  19.           tooltip: "android",
  20.           elevation: 5, //z-阴影盖度
  21.         ))
  22.             .toList());
  23.   }
  24. }

mini属性

【mini】: 是否是迷你 【bool】

image.png
动态效果参考图一

import 'package:flutter/material.dart';
class MiniFAB extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var data = {
      Colors.red: Icons.add,
      Colors.blue: Icons.bluetooth,
      Colors.green: Icons.android,
    };
    return Wrap(
        spacing: 20,
        children: data.keys
            .map((e) => FloatingActionButton(
          heroTag:  e.toString()+"b",
          onPressed: () {},
          backgroundColor: e,
          mini: true,
          foregroundColor: Colors.white,
          child: Icon(data[e]),
          tooltip: "android",
          elevation: 5, //z-阴影盖度
        ))
            .toList());
  }
}

shape属性

【shape】: 形状 【ShapeBorder】
image.png
动态效果参考图一

import 'dart:math';
import 'package:flutter/material.dart';
import '../../../../app/utils/pather.dart';
class ShapeFAB extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var data = {
      Colors.red: Icons.add,
      Colors.blue: Icons.bluetooth,
      Colors.green: Icons.android,
    };
    return Wrap(
        spacing: 20,
        children: data.keys
            .map((e) => FloatingActionButton(
          heroTag:  e.toString()+"c",
          onPressed: () {},
          backgroundColor: e,
          shape: StarBorder(),
          foregroundColor: Colors.white,
          child: Icon(data[e]),
          tooltip: "android",
          elevation: 5,
        ))
            .toList());
  }
}

/// 边线形状类
class StarBorder extends ShapeBorder {
  @override
  EdgeInsetsGeometry get dimensions => null;

  @override
  Path getInnerPath(Rect rect, {TextDirection textDirection}) {
    return null;
  }

  @override
  Path getOuterPath(Rect rect, {TextDirection textDirection}) {
    return Pather.create.nStarPath(20, 25, 25 * cos((360 / 9 / 2) * pi / 180),
        dx: rect.height / 2, dy: rect.width / 2);
  }

  @override
  void paint(Canvas canvas, Rect rect, {TextDirection textDirection}) {}

  @override
  ShapeBorder scale(double t) {
    return null;
  }
}