前言
Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面糠馆。
IT界著名的尼古拉斯·高爾包曾說：輪子是IT進(jìn)步的階梯！熱門的框架千篇一律盈电，好用輪子萬里挑一芍阎！Flutter作為這兩年開始崛起的跨平臺開發(fā)框架叫编，其第三方生態(tài)相比其他成熟框架還略有不足辖佣，但輪子的數(shù)量也已經(jīng)很多了。本系列文章挑選日常app開發(fā)常用的輪子分享出來搓逾，給大家提高搬磚效率卷谈，同時(shí)也希望flutter的生態(tài)越來越完善，輪子越來越多霞篡。
本系列文章準(zhǔn)備了超過50個(gè)輪子推薦世蔗，工作原因，盡量每1-2天出一篇文章寇损。
tip:本系列文章合適已有部分flutter基礎(chǔ)的開發(fā)者凸郑，入門請戳：flutter官網(wǎng)
正文
輪子
- 輪子名稱：flutter_speed_dial
- 輪子概述：flutter可展開選項(xiàng)的浮動按鈕.
- 輪子作者：dario.ielardi@gmail.com
- 推薦指數(shù)：★★★★
- 常用指數(shù)：★★★
-
效果預(yù)覽：
效果圖
安裝
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: '第一個(gè)按鈕',
labelStyle: TextStyle(fontSize: 18.0),
onTap: () => print('FIRST CHILD')
),
SpeedDialChild(
child: Icon(Icons.brush),
backgroundColor: Colors.orange,
label: '第二個(gè)按鈕',
labelStyle: TextStyle(fontSize: 18.0),
onTap: () => print('SECOND CHILD'),
),
SpeedDialChild(
child: Icon(Icons.keyboard_voice),
backgroundColor: Colors.green,
label: '第三個(gè)按鈕',
labelStyle: TextStyle(fontSize: 18.0),
onTap: () => print('THIRD CHILD'),
),
]
),
);
可以配置的所有選項(xiàng)：
floatingActionButton: SpeedDial(
marginRight: 25,//右邊距
marginBottom: 50,//下邊距
animatedIcon: AnimatedIcons.menu_close,//帶動畫的按鈕
animatedIconTheme: IconThemeData(size: 22.0),
visible: isShow,//是否顯示按鈕
closeManually: false,//是否在點(diǎn)擊子按鈕后關(guān)閉展開項(xiàng)
curve: Curves.bounceIn,//展開動畫曲線
overlayColor: Colors.black,//遮罩層顏色
overlayOpacity: 0.5,//遮罩層透明度
onOpen: () => print('OPENING DIAL'),//展開回調(diào)
onClose: () => print('DIAL CLOSED'),//關(guān)閉回調(diào)
tooltip: 'Speed Dial',//長按提示文字
heroTag: 'speed-dial-hero-tag',//hero標(biāo)記
backgroundColor: Colors.blue,//按鈕背景色
foregroundColor: Colors.white,//按鈕前景色/文字色
elevation: 8.0,//陰影
shape: CircleBorder(),//shape修飾
children: [//子按鈕
SpeedDialChild(
child: Icon(Icons.accessibility),
backgroundColor: Colors.red,
label: '第一個(gè)按鈕',
labelStyle: TextStyle(fontSize: 18.0),
onTap: (){
onButtonClick(1);
}
),
SpeedDialChild(
child: Icon(Icons.brush),
backgroundColor: Colors.orange,
label: '第二個(gè)按鈕',
labelStyle: TextStyle(fontSize: 18.0),
onTap: (){
onButtonClick(2);
},
),
SpeedDialChild(
child: Icon(Icons.keyboard_voice),
backgroundColor: Colors.green,
label: '第三個(gè)按鈕',
labelStyle: TextStyle(fontSize: 18.0),
onTap: (){
onButtonClick(3);
},
),
],
),
