Flutter 操作提示栏

发表于 分类于

SnackBar 类似Android的Toast，作用是在屏幕底部导航栏上面显示一条消息。

第三方SnackBar

定义显示操作提示栏的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/// 显示操作提示栏
void showAppSnackBar(context) {
  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(
      content: const Text('提交成功'),
      action: SnackBarAction(
        label: '关闭',
        onPressed: () {},
      ),
      // 显示时间
      duration: const Duration(seconds: 3),
      // 拖动删除方向，默认是 up
      // dismissDirection: DismissDirection.down,
    ),
  );
}

调用方法

1
2
3
4
5
6
7
8
9
10
11
12
13
TextButton(
  onPressed: () async {
    // 显示对话框
    final result = await showAppAlertDialog(context);
    print('showAppAlertDialog: $result');

    // 显示操作提示栏
    if (result != null && result) {
      showAppSnackBar(context);
    }
  },
  child: const Text('提交'),
),

完整代码

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
72
73
74
75
76
77
import 'package:flutter/material.dart';

/// 底部弹出面板
class AppBottomSheet extends StatelessWidget {
  const AppBottomSheet({Key? key}) : super(key: key);

  // 显示对话框
  Future<bool?> showAppAlertDialog(context) {
    return showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text('确定提交'),
        content: const Text('提交以后无法恢复，确定提交吗？'),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context, false),
            child: const Text('取消'),
          ),
          TextButton(
            onPressed: () => Navigator.pop(context, true),
            child: const Text('确定'),
          ),
        ],
        // actionsAlignment: MainAxisAlignment.center,
      ),
    );
  }

  /// 显示操作提示栏
  void showAppSnackBar(context) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: const Text('提交成功'),
        action: SnackBarAction(
          label: '关闭',
          onPressed: () {},
        ),
        // 显示时间
        duration: const Duration(seconds: 3),
        // 拖动删除方向，默认是 up
        // dismissDirection: DismissDirection.down,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 350,
      decoration: BoxDecoration(
        color: Theme.of(context).colorScheme.background,
        boxShadow: const [
          BoxShadow(
            color: Colors.black12,
            offset: Offset(0, -20),
            blurRadius: 30,
          ),
        ],
      ),
      child: Center(
        child: TextButton(
          onPressed: () async {
            // 显示对话框
            final result = await showAppAlertDialog(context);
            print('showAppAlertDialog: $result');

            // 显示操作提示栏
            if (result != null && result) {
              showAppSnackBar(context);
            }
          },
          child: const Text('提交'),
        ),
      ),
    );
  }
}