开发攻略 – Flutter Dialogs 对话框
前语
Flutter 对话框是不可缺少的,本文将会通过几个比如来让你掌握如何开发一个对话框。
正文
对话框是窗口或屏幕上呈现的一种 widget ,它包括任何要害信息,或许能够要求作出任何决定。当弹出一个对话框时,所有其他函数将被禁用,直到您封闭该对话框或提供答案为止。为了在 flutter 中翻开对话框,咱们必须在按下的特点上调用它,咱们必须使用 flutter 的 showDialog widget 。它需求上下文和构建器。在构建器中,咱们为 Dialog widget 提供标题、内容(标题描述)和操作(是或否按钮) ,并且咱们的对话框已经能够使用了。
Basic AlertDialog 根底对话框
Basic AlertDialog 这个 Alert 告诉用户新的信息,比方应用程序的更改、新功能、需求承认的紧急情况,或许作为对用户某个操作成功与否的承认告诉。
代码
import 'package:flutter/material.dart';
showBasicAlertDialog(BuildContext context) {
// Create button
Widget okButton = MaterialButton(
color: Colors.green.shade900,
child: const Text(
"OK",
style: TextStyle(color: Colors.white),
),
onPressed: () {
Navigator.of(context).pop();
},
);
// Create AlertDialog
AlertDialog alert = AlertDialog(
title: const Text("Basic Alert Title"),
content: const Text("This is an basic alert message."),
actions: [
okButton,
],
);
// show the dialog
showDialog(
context: context,
builder: (BuildContext context) {
return alert;
},
);
}
需求承认的对话框
承认 Alert 对话框承认 Alert 对话框告诉用户在应用程序中继续前进之前承认某个特定选项。例如,当用户期望从通讯簿中删去或删去联系人时。
代码
import 'package:flutter/material.dart';
showConfirmationAlertDialog(BuildContext context) {
return showDialog(
context: context,
barrierDismissible: false, // user must tap button for close dialog!
builder: (BuildContext context) {
return AlertDialog(
title: const Text('Delete This Contact?'),
content: const Text('This will delete the contact from your device.'),
actions: <Widget>[
MaterialButton(
color: Colors.teal,
child: const Text(
'Cancel',
style: TextStyle(color: Colors.white),
),
onPressed: () {
Navigator.of(context).pop();
},
),
MaterialButton(
color: Colors.red,
child: const Text(
'Delete',
style: TextStyle(color: Colors.white),
),
onPressed: () {
Navigator.of(context).pop();
},
)
],
);
},
);
}
带选项的对话框
挑选 Option AlertDialog 这种类型的 Alert 对话框显现项目列表,挑选该对话框后当即采取举动。
代码
import 'package:flutter/material.dart';
// ignore: constant_identifier_names
enum Product { Apple, Samsung, Oppo, Redmi }
Future<Product?> showSelectOptionAlertDialog(BuildContext context) async {
return await showDialog<Product>(
context: context,
barrierDismissible: true,
builder: (BuildContext context) {
return SimpleDialog(
title: const Text('Select Product '),
children: <Widget>[
SimpleDialogOption(
onPressed: () {
Navigator.pop(context, Product.Apple);
},
child: const Text('Apple'),
),
SimpleDialogOption(
onPressed: () {
Navigator.pop(context, Product.Samsung);
},
child: const Text('Samsung'),
),
SimpleDialogOption(
onPressed: () {
Navigator.pop(context, Product.Oppo);
},
child: const Text('Oppo'),
),
SimpleDialogOption(
onPressed: () {
Navigator.pop(context, Product.Redmi);
},
child: const Text('Redmi'),
),
],
);
});
}
文字输入对话框
TextFeild Alert 对话框, 此 AlertDialog 使其能够承受用户输入。
代码
import 'package:flutter/material.dart';
TextEditingController _textFieldController = TextEditingController();
showTextFieldAlertDialog(BuildContext context) async {
return showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: const Text('TextField AlertDemo'),
content: TextField(
controller: _textFieldController,
decoration: const InputDecoration(hintText: "TextField in Dialog"),
),
actions: <Widget>[
MaterialButton(
color: Colors.teal,
child: const Text('SUBMIT'),
onPressed: () {
Navigator.of(context).pop();
},
)
],
);
});
}
创立自定义对话框
自定义对话框是什么意思?有时,Alert Dialog widget 或许不适合您在应用程序中处理的每个自定义场景。这时 Dialog widget 就派上用场了。
即使 Alert 对话框的 content 特点承受 widget 类型,建议只增加简略的对话框音讯,这意味着它不适合自定义对话框。另一方面,Dialog widget 能够根据需求创立对话框的自定义版本。我已经增加了一个 container 来控制对话框的高度,在 container 内部,有一个 Column widget 来垂直布局多个 widget 。您能够根据需求自定义这些 widget 。
比如
代码
import 'package:flutter/material.dart';
class CustomDialogBox extends StatefulWidget {
final String title, descriptions, text;
const CustomDialogBox({
Key? key,
required this.title,
required this.descriptions,
required this.text,
}) : super(key: key);
@override
_CustomDialogBoxState createState() => _CustomDialogBoxState();
}
class _CustomDialogBoxState extends State<CustomDialogBox> {
@override
Widget build(BuildContext context) {
return Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
elevation: 0,
backgroundColor: Colors.transparent,
child: contentBox(context),
);
}
contentBox(context) {
return Stack(
children: <Widget>[
Container(
padding:
const EdgeInsets.only(left: 25, top: 50, right: 25, bottom: 25),
margin: const EdgeInsets.only(top: 40),
decoration: BoxDecoration(
shape: BoxShape.rectangle,
color: Colors.white,
borderRadius: BorderRadius.circular(15),
boxShadow: const [
BoxShadow(
color: Colors.black, offset: Offset(0, 10), blurRadius: 10),
]),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
widget.title,
style:
const TextStyle(fontSize: 22, fontWeight: FontWeight.w600),
),
const SizedBox(
height: 15,
),
Text(
widget.descriptions,
style: const TextStyle(fontSize: 14),
textAlign: TextAlign.center,
),
const SizedBox(
height: 22,
),
Align(
alignment: Alignment.bottomRight,
child: MaterialButton(
color: Colors.teal,
onPressed: () {
Navigator.of(context).pop();
},
child: Text(
widget.text,
style: const TextStyle(fontSize: 18, color: Colors.white),
)),
),
],
),
),
const Positioned(
left: 30,
right: 30,
top: 1,
child: CircleAvatar(
backgroundColor: Colors.pink,
radius: 40,
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(25)),
// child: Image.asset("assets/model.jpeg")
),
),
),
],
);
}
}
创立全屏对话框
比如
代码
import 'package:flutter/material.dart';
Future<Object?> showFullScreenDialog(BuildContext context) {
return showGeneralDialog(
context: context,
transitionDuration: const Duration(milliseconds: 400),
pageBuilder: (bc, ania, anis) {
return SizedBox.expand(
child: Container(
color: Colors.white70,
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const FlutterLogo(
size: 200,
),
const Text(
"This is a Full Screen Dialog",
style: TextStyle(
fontSize: 20, decoration: TextDecoration.none),
),
ElevatedButton(
onPressed: () {
Navigator.of(context).pop();
},
child: const Text("Close"))
],
),
),
),
);
});
}
结束语
如果本文对你有帮助,请转发让更多的朋友阅览。
也许这个操作只要你 3 秒钟,对我来说是一个激励,感谢。
祝你有一个夸姣的一天~
猫哥
-
微信 ducafecat
-
wiki.ducafecat.tech
-
video.ducafecat.tech