1, common usage

FloatingActionButton: floatingActionButton (child: Icon(icon.add), onPressed: (){print(' no ~'); },),Copy the code

2, modify, suspend button position Inheritance FloatingActionButtonLocation class, rewrite the corresponding method of custom location

import 'package:flutter/material.dart'; class CustomFloatingActionButtonLocation extends FloatingActionButtonLocation { FloatingActionButtonLocation location; double offsetX; // Double offsetY; / / Y direction of the offset CustomFloatingActionButtonLocation (enclosing the location, enclosing offsetX, enclosing offsetY); @override Offset getOffset(ScaffoldPrelayoutGeometry scaffoldGeometry) { Offset offset = location.getOffset(scaffoldGeometry); return Offset(offset.dx + offsetX, offset.dy + offsetY); }}Copy the code

use

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

3. Modify the size of the hover button

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

4, remove suspended button switch animation inherited FloatingActionButtonAnimator class and write 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). The animate (parent); } @override Animation<double> getScaleAnimation({Animation<double> parent}) {return Tween<double>(begin: 1.0, end: 1.0). The animate (parent); }}Copy the code

use

floatingActionButtonAnimator: NoScalingAnimation(),
Copy the code

5, general custom hover button style

@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(" float button ", style: TextStyle(fontWeight: FontWeight.bold, fontSize: DpUtils.setSp(20), color: Colors.white), ), ], ), ), elevation: 0, onPressed: () { _doSome(); }, backgroundColor: Colors.black, heroTag: "floatHome", ), ) )}Copy the code

6. Thoroughly custom hover button style

In fact, the floatingActionButton can be passed directly into a normal widget. So let’s just do what we have to 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 theme ", style: TextStyle(fontWeight: fontweight.bold, fontSize: dputils.setsp (20), color: Colors.white), ), ], ), ), ); }Copy the code