前言

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

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

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

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

正文

轮子

轮子名称：flutter_speed_dial
轮子概述：flutter可展开选项的浮动按钮.
轮子作者：[email protected]
推荐指数：★★★★
常用指数：★★★
效果预览：

安装

dependencies:
 flutter_speed_dial: ^1.2.4

import 'package:flutter_speed_dial/flutter_speed_dial.dart';

使用方法

最简单的使用：

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'),
 ),
 ]
 ),
);

可以配置的所有选项：

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

玖叶教程网

前端编程开发入门

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

前言

正文