一颗牛肉丸
0%

flutter多个底部浮动按钮

发表于 更新于 分类于 Disqus：

就是底部按钮点一下后弹出多个。

原文链接

效果图

1568541573994

引入 unicorndial

在 pubspec.yaml 中添加以下内容:

1
2
3
4
dependencies:
  flutter:
    sdk: flutter
  unicorndial:

现在很方便, 不需要写版本.

在要实现这个效果的界面引入:

1
import 'package:unicorndial/unicorndial.dart';

创建一个用来添加子图标的方法 addOption

1
2
3
4
5
6
7
8
9
  Widget _addOption({IconData iconData, Function onPressed}) {//传入子图标图标和点击事件
  return UnicornButton(//返回 UnicornButton
      currentButton: FloatingActionButton(
    backgroundColor: Colors.purple[500],
    mini: true,//小尺寸
    child: Icon(iconData),
    onPressed: onPressed,
  ));
}

创建一个用来获取子图标的方法 getAddMenu

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
List<UnicornButton> getAddMenu() {
    List<UnicornButton> children = [];//返回 UnicornButton 列表

    // 在这里添加子图标
    children.add(_addOption(iconData: Icons.person, 
      onPressed: (){
          //点击事件
    }));
    children.add(_addOption(iconData: Icons.photo_size_select_large,
      onPressed:() {
          //点击事件
    }));

	return children;
}

在页面中添加 UnicornDialer

1
2
3
4
5
6
floatingActionButton: UnicornDialer(//UnicornDialer
    parentButtonBackground: Colors.purple[700],
    orientation: UnicornOrientation.VERTICAL,//弹出子图标的方向
    parentButton: Icon(Icons.add),
    childButtons: getAddMenu(),//点击时调用 getAddMenu()
),

完整 main.dart 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:unicorndial/unicorndial.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SQFlite Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {

  // reference to our single class that manages the database
  final dbHelper = DatabaseHelper.instance;

  // homepage layout
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // appBar: AppBar(
      //   title: Text('sqflite'),
      // ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
          ],
        ),
      ),
      floatingActionButton: UnicornDialer(
        parentButtonBackground: Colors.purple[700],
        orientation: UnicornOrientation.VERTICAL,
        parentButton: Icon(Icons.add),
        childButtons: getAddMenu(),
      ),
    );
  }

  List<UnicornButton> getAddMenu() {
    List<UnicornButton> children = [];

    // Add Children here
    children.add(_addOption(iconData: Icons.person, 
      onPressed: (){
    }));
    children.add(_addOption(iconData: Icons.photo_size_select_large,
      onPressed:() {
    }));

    return children;
  }

  Widget _addOption({IconData iconData, Function onPressed}) {
  return UnicornButton(
      currentButton: FloatingActionButton(
    backgroundColor: Colors.purple[500],
    mini: true,
    child: Icon(iconData),
    onPressed: onPressed,
  ));
}
}