单击后如何在按钮下方显示文本?

How can I show text under the button after is clicked?

我想在用户单击按钮后显示文本(“请检查您的电子邮件”),并使文本字段在颤振中为空。在将电子邮件发送给用户后,我尝试使用 then 但它没有显示任何内容,然后我添加了 setState,但仍然无法正常工作。请找到以下代码:

Theme(
                  data: ThemeData(hintColor: Colors.red),
                  child: Padding(
                    padding: EdgeInsets.only(top: 50),
                    child: TextFormField(
                      validator: (val) =>
                          val.isEmpty ? 'Enter your email' : null,
                      onChanged: (val) {
                        setState(() => email = val);
                      },
                      cursorColor: Colors.purple,
                      keyboardType: TextInputType.emailAddress,
                      textInputAction: TextInputAction.done,
                      style: TextStyle(color: Colors.black),
                      decoration: InputDecoration(
                        hintText: "Enter your email",
                        enabledBorder: UnderlineInputBorder(
                          borderSide: BorderSide(
                            color: Colors.black38,
                          ),
                        ),
                        focusedBorder: UnderlineInputBorder(
                          borderSide: BorderSide(color: Colors.purple),
                          //  when the TextFormField in focused
                        ),
                        hintStyle:
                            TextStyle(fontSize: 12.0, color: Colors.black38),
                      ),
                    ),
                  ),
                ),
                SizedBox(
                  height: 30,
                ),
                InkWell(
                  child: Container(
                    width: 160,
                    height: 60,
                    decoration: BoxDecoration(
                      gradient: LinearGradient(
                        colors: [
                          Color(0xffba68c8),
                          Color(0xFF9c27b0),
                        ],
                      ),
                      borderRadius: BorderRadius.circular(6.0),
                      boxShadow: [
                        BoxShadow(
                          color: Color(0xFF6078ea).withOpacity(0.3),
                          offset: Offset(0.0, 8.0),
                          blurRadius: 8.0,
                        )
                      ],
                    ),
                    child: Material(
                      color: Colors.transparent,
                      child: InkWell(
                        onTap: () async {
                          if (_formKey.currentState.validate()) {
                            FirebaseAuth.instance
                                .sendPasswordResetEmail(email: email)
                                .then((_) {
                              setState(() {
                                Center(child: Text('Check your email'));
                              });
                            });
                          }
                        },
                        child: Center(
                          child: Text(
                            'SEND EMAIL',
                            style: TextStyle(
                              color: Colors.white,
                              fontFamily: 'Anton',
                              fontSize: 18.0,
                              letterSpacing: 1.0,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                )

在 setState() 中使用小部件对您没有帮助,因为如果您观察代码,您会发现您只是在 setState() 中初始化小部件

要向用户显示消息,您可以在 setState() 中使用 SnackBar

示例小吃店:

Scaffold.of(context).showSnackBar(SnackBar(
      content: Text("Your message text"),
));

注意:有一个单独的 snackbar 方法并从 setState() 调用它总是好的。