Flutter悬浮按钮FloatingActionButton使用详解

1、普通用法

1 2 3 4 5 6

floatingActionButton: FloatingActionButton(     child: Icon(Icons.add),       onPressed: (){          print('不要啊~');       },  ),

2、修改悬浮按钮位置

继承FloatingActionButtonLocation类，重写对应方法自定义位置

1 2 3 4 5 6 7 8 9 10 11 12 13 14

import 'package:flutter/material.dart'; class CustomFloatingActionButtonLocation extends FloatingActionButtonLocation {   FloatingActionButtonLocation location;   double offsetX;    // X方向的偏移量   double offsetY;    // Y方向的偏移量   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);   } }

使用

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

3、修改悬浮按钮大小

1 2 3 4 5 6 7 8

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

4、去除悬浮按钮切换动画

继承FloatingActionButtonAnimator类并重写对应的方法

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

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);   } }

使用

1	floatingActionButtonAnimator: NoScalingAnimation(),

5、一般的自定义悬浮按钮样式

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

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

6、彻底的自定义悬浮按钮样式

其实，floatingActionButton 可以直接传入普通的widget。所以该干嘛干嘛咯

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

@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(                 "发主题",                 style: TextStyle(fontWeight: FontWeight.bold,                      fontSize: DpUtils.setSp(20), color: Colors.white),               ),             ],           ),         ),     );   }