Last Updated on 2021-10-16 by Clay
in Flutter, if we want to design a pop-up message box, we can use AlertDialog to do it.
We need to build the following components:
- A button for pop-up message box
- Title, return button of AlertDialog
- (Optional) Add animated pop-up message box
Let’s getting start.
The usage of AlertDialog
Let’s take a sample code:
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:
It can be found that I have set two buttons in the action, so that can set different actions respectively.
Add animation
if we want to add an animation for box pop-up, we need to use showGeneralDialog() to instead of showDialog().
showGeneralDialog() will need to set the following parameters:
- context
- pageBuilder
- transitionBuilder
- transitionDuration
We do not make any changes to the context and pageBuilder.
The most important are the two parameters of transitionBuilder (animation rendering effect) and transitionDuration (animation period).
Let’ edit the sample code (only the showDialog() part)
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:
As you can see, when the message box pops up, there will be an effect of sliding up and down.
We can also perform other effects via Transform, such as rotation.
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