Flutter 速度拨号

用于渲染 Material Design Speed Dial 的 Flutter 插件。

Flutter-Speed-Dial

用法

SpeedDial 小部件旨在放置在 Scaffold.floatingActionButton 参数中。
但是，无法使用 Scaffold.floatingActionButtonLocation 参数设置其位置。
与 Scaffold.bottomNavigationBar 一起使用是可能的，但浮动按钮将放置在栏的上方，因此 BottomAppBar.hasNotch 应为 false。

标签

每个子按钮都可以有一个 label，可以通过提供 labelStyle 来自定义。如果未提供 label 参数，则不会渲染标签。

动画图标

主浮动操作按钮子项可以通过 child 参数设置，但是为了方便使用 AnimatedIcon，有两个特定参数：

  • animatedIcon 接受一个 AnimatedIconData 小部件
  • animatedIconTheme 接受其主题

该包将自行处理动画。

滚动时隐藏

另一种可能性是使用曲线动画使按钮在滚动时隐藏，并使用 visible 参数根据滚动方向动态设置。有关更多信息，请参阅 示例项目。

类 API 文档

用法示例

Widget build(BuildContext context) {
    return Scaffold(
        floatingActionButton: SpeedDial(
          animatedIcon: AnimatedIcons.menu_close,
          animatedIconTheme: IconThemeData(size: 22.0),
          // this is ignored if animatedIcon is non null
          // child: Icon(Icons.add),
          visible: _dialVisible,
          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',
          backgroundColor: Colors.white,
          foregroundColor: Colors.black,
          elevation: 8.0,
          shape: CircleBorder(),
          children: [
            SpeedDialChild(
              child: Icon(Icons.accessibility),
              backgroundColor: Colors.red,
              label: 'First',
              labelStyle: TextTheme(fontSize: 18.0),
              onTap: () => print('FIRST CHILD')
            ),
            SpeedDialChild(
              child: Icon(Icons.brush),
              backgroundColor: Colors.blue,
              label: 'Second',
              labelStyle: TextTheme(fontSize: 18.0),
              onTap: () => print('SECOND CHILD'),
            ),
            SpeedDialChild(
              child: Icon(Icons.keyboard_voice),
              backgroundColor: Colors.green,
              label: 'Third',
              labelStyle: TextTheme(fontSize: 18.0),
              onTap: () => print('THIRD CHILD'),
            ),
          ],
        ),
    );
}

GitHub

https://github.com/darioielardi/flutter_speed_dial