Detailed explanation of Flutter suspension button FloatingActionButton

Directory 1, General Usage 2. Modify the position of the suspension button 3. Modify the float button size 4. Remove the suspension button to switch animation Custom floating button style like 5 and 1 6. Thoroughly customize the floating button style

1. Common usage

floatingActionButton: FloatingActionButton(
    child: Icon(Icons.add),
      onPressed: (){
         print(' Don't ~');
      },
 ),

2. Modify the position of the suspension button

Inherit the FloatingActionButtonLocation class and override the corresponding method custom location

import 'package:flutter/material.dart';

class CustomFloatingActionButtonLocation extends FloatingActionButtonLocation {
  FloatingActionButtonLocation location;
  double offsetX;    // X Offset of direction 
  double offsetY;    // Y Offset of direction 
  CustomFloatingActionButtonLocation(this.location, this.offsetX, this.offsetY);

  @override
  Offset getOffset(ScaffoldPrelayoutGeometry scaffoldGeometry) {
    Offset offset = location.getOffset(scaffoldGeometry);
    return Offset(offset.dx + offsetX, offset.dy + offsetY);
  }
}

Use

floatingActionButtonLocation:CustomFloatingActionButtonLocation(
             FloatingActionButtonLocation.endFloat, 0, -DpUtils.setWidth(20)),

3. Modify the float button size

floatingActionButton: SizedBox(
  height: 100.0,
  width: 100.0,
  child:FloatingActionButton(
    child: Icon(Icons.add),
    onPressed: () {},
  ),
),

4. Remove the suspension button to switch animation

Inherit the FloatingActionButtonAnimator class and override the corresponding method

import 'package:flutter/material.dart';

class NoScalingAnimation extends FloatingActionButtonAnimator{
  double _x;
  double _y;
  @override
  Offset getOffset({Offset begin, Offset end, double progress}) {
    _x = begin.dx +(end.dx - begin.dx)*progress ;
    _y = begin.dy +(end.dy - begin.dy)*progress;
    return Offset(_x,_y);
  }

  @override
  Animation<double> getRotationAnimation({Animation<double> parent}) {
    return Tween<double>(begin: 1.0, end: 1.0).animate(parent);
  }

  @override
  Animation<double> getScaleAnimation({Animation<double> parent}) {
    return Tween<double>(begin: 1.0, end: 1.0).animate(parent);
  }
}

Use

floatingActionButtonAnimator: NoScalingAnimation(),

Custom floating button style like 5 and 1

@override
  Widget build(BuildContext context) {
    return Scaffold(
       floatingActionButton: FloatingActionButton(
          child: Container(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Image.asset(
                  "images/float_button.png",
                  width: DpUtils.setWidth(32),
                  height: DpUtils.setWidth(32),
                ),
                Text(
                  " Floating button ",
                  style: TextStyle(fontWeight: FontWeight.bold, 
                        fontSize: DpUtils.setSp(20), color: Colors.white),
                ),
              ],
            ),
          ),
          elevation: 0,
          onPressed: () {
            _doSome();
          },
          backgroundColor: Colors.black,
          heroTag: "floatHome",
        ),
    )
)}

6. Thoroughly customize the floating button style

In fact, floatingActionButton can be directly passed into ordinary widget. So do what you should do

@override
  Widget build(BuildContext context) {
    return Scaffold(
        floatingActionButton: Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Image.asset(
                "images/home_icon_publishing.png",
                width: DpUtils.setWidth(32),
                height: DpUtils.setWidth(32),
              ),
              Text(
                " Send a theme ",
                style: TextStyle(fontWeight: FontWeight.bold, 
                     fontSize: DpUtils.setSp(20), color: Colors.white),
              ),
            ],
          ),
        ),
    );
  }