如何在用户单击 flutter 中的按钮后显示警告对话框

Question

我是 flutter 的新手，如果用户单击“计算”按钮，我会尝试显示结果的对话框警报。我想将“文本”结果更改为对话框警报，例如“（总天数）的预测是（结果）”任何人都可以帮助我如何做到这一点？我找不到合适的资源，谢谢

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

calculate 调用后，您可以在 onPressed 函数中显示这样的对话框。

showDialog(
  context: context,
  builder: (context) => AlertDialog(
    title: Text('Result'),
    content: Text('Result is $_result'),
    actions: [
      ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go Back'))
    ],
  ),
);