Last Updated on 2021-10-16 by Clay
在 Flutter 中，若是我們想要設計一個彈出式的訊息框，那麼我們可以很簡單地調用 AlertDialog 這個元件來做到這件事。
我們會需要設定以下這些元件：
- 一個『彈出訊息框』的按鈕
- AlertDialog 本身的標題、返回按鈕（預設值其實是點擊 AlertDialog 外的空間便會自動返回）
- （Optional）加入動畫的彈出訊息框
那麼我們就開始吧。
AlertDialog 使用方法
以下我們簡單看個範例程式碼。
import 'package:flutter/material.dart';
// Main
void main() {
runApp(MaterialApp(
home: HomePage(),
));
}
// HomePage
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("AlertDialog Demo"),
),
body: Center(
child: ElevatedButton(
child: Text("Show AlertDialog"),
onPressed: () {
showAlertDialog(context);
},
),
),
);
}
}
// Show AlertDialog
showAlertDialog(BuildContext context) {
// Init
AlertDialog dialog = AlertDialog(
title: Text("AlertDialog component"),
actions: [
ElevatedButton(
child: Text("OK"),
onPressed: () {
Navigator.pop(context);
}
),
ElevatedButton(
child: Text("Cancel"),
onPressed: () {
Navigator.pop(context);
}
),
],
);
// Show the dialog
showDialog(
context: context,
builder: (BuildContext context) {
return dialog;
}
);
}
Output:
可以發現我在 actions 當中設置了兩個按鈕，這樣我們可以分別設置不同的操作。（雖然這個範例程式碼中兩個動作都是 pop()。）
加入動畫
要在彈出訊息框時加入動畫，最重要的就是使用 showGeneralDialog() 取代 showDialog()。
showGeneralDialog() 會需要設定以下參數：
- context
- pageBuilder
- transitionBuilder
- transitionDuration
其中，我們暫時不對 context 以及 pageBuilder 進行任何改動。最重要的是 transitionBuilder（動畫呈現效果）、transitionDuration（動畫週期）這兩項。
來將剛才的範例程式碼改寫（只有改動原本 showDialog() 的部分）：
import 'package:flutter/material.dart';
import 'package:vector_math/vector_math.dart' as math;
// Main
void main() {
runApp(MaterialApp(
home: HomePage(),
));
}
// HomePage
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("AlertDialog Demo"),
),
body: Center(
child: ElevatedButton(
child: Text("Show AlertDialog"),
onPressed: () {
showAlertDialog(context);
},
),
),
);
}
}
// Show AlertDialog
showAlertDialog(BuildContext context) {
// Init
AlertDialog dialog = AlertDialog(
title: Text("AlertDialog component"),
actions: [
ElevatedButton(
child: Text("OK"),
onPressed: () {
Navigator.pop(context);
}
),
ElevatedButton(
child: Text("Cancel"),
onPressed: () {
Navigator.pop(context);
}
),
],
);
// Show the dialog (showDialog() => showGeneralDialog())
showGeneralDialog(
context: context,
pageBuilder: (context, anim1, anim2) {return Wrap();},
transitionBuilder: (context, anim1, anim2, child) {
return Transform(
transform: Matrix4.translationValues(
0.0,
(1.0-Curves.easeInOut.transform(anim1.value))*400,
0.0,
),
child: dialog,
);
},
transitionDuration: Duration(milliseconds: 400),
);
}
Output:
可以看到，現在彈出訊息框時，會有上下滑動的效果。當然，除了上下滑動之外，我們還可以透過 Transform 進行其他效果，比方說旋轉。這點就讓大家自由嘗試了。
References
- https://stackoverflow.com/questions/65932691/flutter-error-a-non-null-value-must-be-returned-since-the-return-type-widget/65934380
- https://stackoverflow.com/questions/55655934/how-to-fix-position-matrix-translationvalues-in-transform-animation-flutter
- https://stackoverflow.com/questions/55549828/how-to-set-duration-of-transform-translate-animation-in-flutter
- https://medium.com/flutter-community/how-to-animate-dialogs-in-flutter-here-is-answer-492ea3a7262f