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…