前言
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 { var result = await showDialog(context: context, builder: (context) { return AlertDialog( title: const Text("标题"), content: const Text("主体"), actions: [ TextButton(onPressed: () { 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("文本内容"), ); } }
|
获取弹窗内按钮被点击的返回值
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 { var result = await showDialog( 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("选项"), ), ], ); } );
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 { var result = await showModalBottomSheet( context: context, builder: (context) { return ElevatedButton( onPressed: () { 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.dart1 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.dart1 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("文本内容"), ); } }
|
完成
参考文献
哔哩哔哩——筱筱知晓