How to show an alert dialog after the user click the button in flutter - flutter

Question

I'm new in flutter and I'm trying to show a dialog alert for the result if the user click on "Calculate" button. I want to change the "Text" result into the dialog alert like "The prediction of (total days) is (result)" Anyone can help me how to do this? I can't find any suitable resource for this, Thank you
class TransactionYearly extends StatefulWidget {
#override
_TransactionYearlyState createState() => _TransactionYearlyState();
}
class _TransactionYearlyState extends State<TransactionYearly> {
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
final TextEditingController amount = new TextEditingController();
final TextEditingController day = new TextEditingController();
double _result;
#override
void initState() {
super.initState();
}
#override
void dispose() {
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(getTranslated(context, 'prediction_calculation'),),
elevation: 0,
brightness: Brightness.light,
backgroundColor: primary,
leading: IconButton(
onPressed: (){
Navigator.pop(context, MaterialPageRoute(builder: (context) => Transactions()));
},
icon: Icon(Icons.arrow_back_ios,
size: 20,
color: Colors.black,),
),
),
body: SingleChildScrollView(
child: Container(
child: Column(
children: <Widget>[
Container(
height: 300,
child: Image(
image: AssetImage("assets/girlsave.png"),
fit: BoxFit.contain,
),
),
Container(
child: Form(
key: _formKey,
child: Column(
children: <Widget>[
Container(
child: TextFormField(
validator: (input) {
if (input.isEmpty) return 'Please fill up the text fields';
},
controller: amount,
decoration: InputDecoration(
labelText: getTranslated(context, 'amount_text'),
labelStyle: TextStyle(color: Colors.grey),
prefixIcon: Icon(
Icons.attach_money,
color: secondary,
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: secondary),
),
),
keyboardType: TextInputType.number,
),
),
Container(
child: TextFormField(
validator: (input) {
if (input.isEmpty)
return 'Please fill up the text fields';
},
controller: day,
decoration: InputDecoration(
labelText: getTranslated(context, 'day_text'),
labelStyle: TextStyle(color: Colors.grey),
prefixIcon: Icon(
Icons.date_range_outlined,
color: secondary,
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: secondary),
),
),
keyboardType: TextInputType.number,
),
),
SizedBox(height: 20),
Container(
padding: EdgeInsets.only(
top: 25.0, left: 20.0, right: 20.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget> [
Expanded (
child: ElevatedButton(
onPressed: () {
if(!_formKey.currentState.validate()){
return;
}
_formKey.currentState.save();
calculate();
},
child: Text(getTranslated((context), "calculate_button").toUpperCase(), style: TextStyle (
fontSize: 14,
)),
style: ButtonStyle(
padding: MaterialStateProperty.all<EdgeInsets>(EdgeInsets.all(15)),
foregroundColor: MaterialStateProperty.all<Color>(Colors.white),
backgroundColor: MaterialStateProperty.all<Color>(Colors.pink),
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
side: BorderSide(color: secondary)
),
),
),
),
),
SizedBox(width: 20, height: 10),
Expanded(
child: ElevatedButton(
onPressed: () {
amount.clear();
day.clear();
},
child: Text(getTranslated((context), "clear_button").toUpperCase(), style: TextStyle (
fontSize: 14
)),
style: ButtonStyle(
padding: MaterialStateProperty.all<EdgeInsets>(EdgeInsets.all(15)),
foregroundColor: MaterialStateProperty.all<Color>(Colors.white),
backgroundColor: MaterialStateProperty.all<Color>(Colors.pink),
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
side: BorderSide(color: secondary)
),
),
),
),
)
],
)
),
Text(
_result == null ? "Enter amount" : "$_result",
)
],
),
),
),
],
),
),
));
}
void calculate(){
double amounts = double.parse(amount.text);
double days = double.parse(day.text);
double result = amounts * days;
_result = result;
setState(() {
});
}
}

Answer 1

After calculate call you can show dialog like this in the onPressed function.
showDialog(
context: context,
builder: (context) => AlertDialog(
title: Text('Result'),
content: Text('Result is $_result'),
actions: [
ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Go Back'))
],
),
);