【笔记】Flutter的弹窗

发表于 更新于 分类于 阅读次数：

前言

Flutter的弹窗学习笔记

弹出提示窗

barrierDismissible：点击灰色背景后弹窗是否消失，缺省值为true会自动消失
title：弹窗标题
content：弹窗主体
actions：定义按钮组
Navigator.of(context).pop();：被点击后弹窗消失

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
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text("文本内容"),
      ),
      body: const App(),
    ),
  ));
}

class App extends StatefulWidget {
  const App({super.key});

  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        showDialog(
          barrierDismissible: true,
          context: context,
          builder: (context) {
            return AlertDialog(
              title: const Text("标题"),
              content: const Text("主体"),
              actions: [
                TextButton(onPressed: () {
                  Navigator.of(context).pop();
                }, child: const Text("按钮"))
              ],
            );
          }
        );
      },
      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
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text("文本内容"),
      ),
      body: const App(),
    ),
  ));
}

class App extends StatefulWidget {
  const App({super.key});

  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {

  void _alertDialog() async {
    // 2. 获取返回值
    var result = await showDialog(context: context, builder: (context) {
      return AlertDialog(
        title: const Text("标题"),
        content: const Text("主体"),
        actions: [
          TextButton(onPressed: () {
            // 1. 传递返回值
            Navigator.of(context).pop("返回值");
          }, child: const Text("按钮"))
        ],
      );
    });

    print(result);
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        _alertDialog();
      },
      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
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text("文本内容"),
      ),
      body: const App(),
    ),
  ));
}

class App extends StatefulWidget {
  const App({super.key});

  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        showDialog(
          barrierDismissible: true,
          context: context,
          builder: (context) {
            return SimpleDialog(
              title: const Text("标题"),
              children: [
                SimpleDialogOption(
                  onPressed: () {
                    Navigator.pop(context);
                  },
                  child: const Text("选项"),
                ),
                SimpleDialogOption(
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                  child: const Text("选项"),
                ),
              ],
            );
          }
        );
      },
      child: const Text("文本内容"),
    );
  }
}

获取弹窗内按钮被点击的返回值

  • 如果点击空白处，返回值为null
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
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text("文本内容"),
      ),
      body: const App(),
    ),
  ));
}

class App extends StatefulWidget {
  const App({super.key});

  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {

  void _simpleDialog() async {
    // 2. 获取返回值
    var result = await showDialog(
      context: context,
      builder: (context) {
        return SimpleDialog(
          title: const Text("标题"),
          children: [
            SimpleDialogOption(
              onPressed: () {
                // 1. 传递返回值
                Navigator.pop(context, "返回值");
              },
              child: const Text("选项"),
            ),
            SimpleDialogOption(
              onPressed: () {
                // 1. 传递返回值
                Navigator.of(context).pop("返回值");
              },
              child: const Text("选项"),
            ),
          ],
        );
      }
    );

    print(result);
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        _simpleDialog();
      },
      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
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text("文本内容"),
      ),
      body: const App(),
    ),
  ));
}

class App extends StatefulWidget {
  const App({super.key});

  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        showModalBottomSheet(
            context: context,
            builder: (context) {
              return const Text("文本内容");
            }
        );
      },
      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
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text("文本内容"),
      ),
      body: const App(),
    ),
  ));
}

class App extends StatefulWidget {
  const App({super.key});

  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {

  void _showModalBottomSheet() async {
    // 2. 获取返回值
    var result = await showModalBottomSheet(
        context: context,
        builder: (context) {
          return ElevatedButton(
            onPressed: () {
              // 1. 传递返回值
              Navigator.pop(context, "返回值");
            },
            child: const Text("文本内容"),
          );
        }
    );

    print(result);
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        _showModalBottomSheet();
      },
      child: const Text("文本内容"),
    );
  }
}

弹出提示气泡

  • 提示气泡采用第三方插件

下载依赖

1
flutter pub add fluttertoast

引入依赖

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

弹出提示气泡

msg：提示内容
toastLength：提示时间，针对于Android

Toast.LENGTH_SHORT：1秒
Toast.LENGTH_LONG：5秒

gravity：弹出位置
timeInSecForIosWeb：提示时间，仅针对于IOS和Web
backgroundColor：背景颜色
textColor：文字颜色
fontSize：文字大小

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
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text("文本内容"),
      ),
      body: const App(),
    ),
  ));
}

class App extends StatefulWidget {
  const App({super.key});

  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        Fluttertoast.showToast(
          msg: "文本内容",
          toastLength: Toast.LENGTH_SHORT,
          gravity: ToastGravity.TOP,
          timeInSecForIosWeb: 1,
          backgroundColor: Colors.black,
          textColor: Colors.white,
          fontSize: 16,
        );
      },
      child: const Text("文本内容"),
    );
  }
}

自定义弹窗

封装自定义弹窗

MaterialType.transparency：设置透明背景

lib/widget/myDialog.dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import 'package:flutter/material.dart';

class MyDialog extends Dialog {
  const MyDialog({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Material(
      type: MaterialType.transparency,
      child: Center(
        child: Container(
          width: 200,
          height: 200,
          color: Colors.white,
        ),
      ),
    );
  }
}

使用自定义弹窗

lib/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
import 'package:flutter/material.dart';
import 'package:flutterproject/widget/myDialog.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text("文本内容"),
      ),
      body: const App(),
    ),
  ));
}

class App extends StatefulWidget {
  const App({super.key});

  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {

  void myDialog() {
    showDialog(context: context, builder: (context) {
      return const MyDialog();
    });
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: myDialog,
      child: Text("文本内容"),
    );
  }
}

完成

参考文献

哔哩哔哩——筱筱知晓