flutter好用的轮子推荐十三-flutter可展开选项的浮动按钮

前言

Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。

IT界著名的尼古拉斯·高尔包曾说:轮子是IT进步的阶梯!热门的框架千篇一律,好用轮子万里挑一!Flutter作为这两年开始崛起的跨平台开发框架,其第三方生态相比其他成熟框架还略有不足,但轮子的数量也已经很多了。本系列文章挑选日常app开发常用的轮子分享出来,给大家提高搬砖效率,同时也希望flutter的生态越来越完善,轮子越来越多。

本系列文章准备了超过50个轮子推荐,工作原因,尽量每1-2天出一篇文章。

tip:本系列文章合适已有部分flutter基础的开发者,入门请戳:flutter官网

正文

轮子

  • 轮子名称:flutter_speed_dial
  • 轮子概述:flutter可展开选项的浮动按钮.
  • 轮子作者:dario.ielardi@gmail.com
  • 推荐指数:★★★★
  • 常用指数:★★★
  • 效果预览:
    效果图

安装

1
2
dependencies:
flutter_speed_dial: ^1.2.4
1
import 'package:flutter_speed_dial/flutter_speed_dial.dart';

使用方法

最简单的使用:

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
return Scaffold(
body: Container(),
floatingActionButton: SpeedDial(
child: Icon(Icons.add),
children:[
SpeedDialChild(
child: Icon(Icons.accessibility),
backgroundColor: Colors.red,
label: '第一个按钮',
labelStyle: TextStyle(fontSize: 18.0),
onTap: () => print('FIRST CHILD')
),
SpeedDialChild(
child: Icon(Icons.brush),
backgroundColor: Colors.orange,
label: '第二个按钮',
labelStyle: TextStyle(fontSize: 18.0),
onTap: () => print('SECOND CHILD'),
),
SpeedDialChild(
child: Icon(Icons.keyboard_voice),
backgroundColor: Colors.green,
label: '第三个按钮',
labelStyle: TextStyle(fontSize: 18.0),
onTap: () => print('THIRD CHILD'),
),
]
),
);

可以配置的所有选项:

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
floatingActionButton: SpeedDial(
marginRight: 25,//右边距
marginBottom: 50,//下边距
animatedIcon: AnimatedIcons.menu_close,//带动画的按钮
animatedIconTheme: IconThemeData(size: 22.0),
visible: isShow,//是否显示按钮
closeManually: false,//是否在点击子按钮后关闭展开项
curve: Curves.bounceIn,//展开动画曲线
overlayColor: Colors.black,//遮罩层颜色
overlayOpacity: 0.5,//遮罩层透明度
onOpen: () => print('OPENING DIAL'),//展开回调
onClose: () => print('DIAL CLOSED'),//关闭回调
tooltip: 'Speed Dial',//长按提示文字
heroTag: 'speed-dial-hero-tag',//hero标记
backgroundColor: Colors.blue,//按钮背景色
foregroundColor: Colors.white,//按钮前景色/文字色
elevation: 8.0,//阴影
shape: CircleBorder(),//shape修饰
children: [//子按钮
SpeedDialChild(
child: Icon(Icons.accessibility),
backgroundColor: Colors.red,
label: '第一个按钮',
labelStyle: TextStyle(fontSize: 18.0),
onTap: (){
onButtonClick(1);
}
),
SpeedDialChild(
child: Icon(Icons.brush),
backgroundColor: Colors.orange,
label: '第二个按钮',
labelStyle: TextStyle(fontSize: 18.0),
onTap: (){
onButtonClick(2);
},
),
SpeedDialChild(
child: Icon(Icons.keyboard_voice),
backgroundColor: Colors.green,
label: '第三个按钮',
labelStyle: TextStyle(fontSize: 18.0),
onTap: (){
onButtonClick(3);
},
),
],
),

结尾

文章作者: 小包子
文章链接: http://www.xbzweb.com/2019/11/13/flutter好用的轮子推荐十三-flutter可展开选项的浮动按钮/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 小包子的博客
承接软件开发外包:网站开发、iOS开发、Android开发、微信小程序、桌面软件开发,效率高,价格优。点击进入小包子工作室