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
• 推薦指數：★★★★
• 常用指數：★★★
• 效果預覽：

  

安裝

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);
            },
        ),
    ],
),
複製程式碼

結尾

• 輪子倉庫地址：pub.flutter-io.cn/packages/fl…
• 系列演示demo原始碼：github.com/826327700/f…