注意：無特殊說明，Flutter版本及Dart版本如下：
- Flutter版本： 1.12.13+hotfix.5
- Dart版本： 2.7.0
當應用程式進行重要操作時經常需要使用者進行2次确認，以避免使用者的誤操作，比如删除檔案時，一般會彈出提示“是否要删除目前檔案”，使用者點選确認後才會進行删除操作，這時我們可以使用提示框（AlertDialog或者CupertinoAlertDialog）。
根據設計的不同，我們可以選擇Material風格的AlertDialog或者Cupertino（ios）風格的CupertinoAlertDialog，
Material風格基礎用法如下：
RaisedButton(
child: Text('切換'),
onPressed: () {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text('提示'),
content: Text('确認删除嗎？'),
actions: <Widget>[
FlatButton(child: Text('取消'),onPressed: (){},),
FlatButton(child: Text('确認'),onPressed: (){},),
],
);
});
},
) Material風格效果：
Cupertino（ios）風格基礎用法如下：
RaisedButton(
child: Text('切換'),
onPressed: () {
showCupertinoDialog(
context: context,
builder: (context) {
return CupertinoAlertDialog(
title: Text('提示'),
content: Text('确認删除嗎？'),
actions: <Widget>[
CupertinoDialogAction(child: Text('取消'),onPressed: (){},),
CupertinoDialogAction(child: Text('确認'),onPressed: (){},),
],
);
});
},
) Cupertino（ios）風格效果如下：
showDialog
和
AlertDialog
配合使用展示Material風格對話框，
showCupertinoDialog
CupertinoAlertDialog
配合使用展示iOS風格對話框，
showCupertinoDialog
點選空白處是無法退出對話框的，而
showDialog
點選空白處預設退出對話框，
barrierDismissible
屬性控制點選空白處的行為，用法如下：
showDialog(
barrierDismissible: false,
) AlertDialog的屬性相對比較豐富，可以設定title樣式、content樣式、背景顔色、陰影值，設定是形狀：
AlertDialog(
title: Text('提示'),
content: Text('确認删除嗎？'),
backgroundColor: Colors.lightBlueAccent,
elevation: 24,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(50)),
actions: <Widget>[
FlatButton(child: Text('取消'),onPressed: (){},),
FlatButton(child: Text('确認'),onPressed: (){},),
],
) 使用者點選“取消”或者“确定”按鈕後退出對話框，App需要知道知道使用者選擇了哪個選項，用法如下：
RaisedButton(
child: Text('切換'),
onPressed: () async {
var result = await showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text('提示'),
content: Text('确認删除嗎？'),
actions: <Widget>[
FlatButton(
child: Text('取消'),
onPressed: () {
Navigator.of(context).pop('cancel');
},
),
FlatButton(
child: Text('确認'),
onPressed: () {
Navigator.of(context).pop('ok');
},
),
],
);
});
print('$result');
},
) 如果你覺得系統提供的這2個風格的對話框不夠個性，你可以試試SimpleDialog，用法和AlertDialog基本相同，如下：
SimpleDialog(
title: Text('提示'),
children: <Widget>[
Container(
height: 80,
alignment: Alignment.center,
child: Text('确認删除嗎？'),
),
Divider(height: 1,),
FlatButton(
child: Text('取消'),
onPressed: () {
Navigator.of(context).pop('cancel');
},
),
Divider(height: 1,),
FlatButton(
child: Text('确認'),
onPressed: () {
Navigator.of(context).pop('ok');
},
),
],
) 效果如下：
如果你覺得這還是不夠個性，那可以祭出終極大法了，直接使用Dialog，Dialog可以定制任何對話框，隻需将對話框的内容給child屬性：
Dialog(
child: MyDialog(),
); 當然一般情況下，系統提供的對話框就夠用了，這幾個對話框元件用法基本一樣，不同的地方僅僅是靈活性和使用簡易程度的不要，Dialog最靈活，但使用起來比AlertDialog複雜一些，AlertDialog使用起來非常簡單，但布局和基本樣式都已經固定好，不如Dialog靈活。
今天的文章對大家是否有幫助？如果有，請在文章底部留言和點贊，以表示對我的支援，你們的留言、點贊和轉發關注是我持續更新的動力！
更多相關閱讀：
- Flutter系列文章總覽
- Flutter Widgets 之 Expanded和Flexible
- Flutter Widgets 之 AnimatedList
Flutter Widgets 對話框-Dialog
RaisedButton(
child: Text('切換'),
onPressed: () {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text('提示'),
content: Text('确認删除嗎？'),
actions: <Widget>[
FlatButton(child: Text('取消'),onPressed: (){},),
FlatButton(child: Text('确認'),onPressed: (){},),
],
);
});
},
) RaisedButton(
child: Text('切換'),
onPressed: () {
showCupertinoDialog(
context: context,
builder: (context) {
return CupertinoAlertDialog(
title: Text('提示'),
content: Text('确認删除嗎？'),
actions: <Widget>[
CupertinoDialogAction(child: Text('取消'),onPressed: (){},),
CupertinoDialogAction(child: Text('确認'),onPressed: (){},),
],
);
});
},
) showDialog
AlertDialog
showCupertinoDialog
CupertinoAlertDialog
showCupertinoDialog
showDialog
barrierDismissible
showDialog(
barrierDismissible: false,
) AlertDialog(
title: Text('提示'),
content: Text('确認删除嗎？'),
backgroundColor: Colors.lightBlueAccent,
elevation: 24,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(50)),
actions: <Widget>[
FlatButton(child: Text('取消'),onPressed: (){},),
FlatButton(child: Text('确認'),onPressed: (){},),
],
) RaisedButton(
child: Text('切換'),
onPressed: () async {
var result = await showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text('提示'),
content: Text('确認删除嗎？'),
actions: <Widget>[
FlatButton(
child: Text('取消'),
onPressed: () {
Navigator.of(context).pop('cancel');
},
),
FlatButton(
child: Text('确認'),
onPressed: () {
Navigator.of(context).pop('ok');
},
),
],
);
});
print('$result');
},
) SimpleDialog(
title: Text('提示'),
children: <Widget>[
Container(
height: 80,
alignment: Alignment.center,
child: Text('确認删除嗎？'),
),
Divider(height: 1,),
FlatButton(
child: Text('取消'),
onPressed: () {
Navigator.of(context).pop('cancel');
},
),
Divider(height: 1,),
FlatButton(
child: Text('确認'),
onPressed: () {
Navigator.of(context).pop('ok');
},
),
],
) Dialog(
child: MyDialog(),
);