Flutter中实现邮箱跳转至忘记密码页与重置页的技术咨询

一、完整页面跳转链路梳理 #

1. 登录/邮箱页面：点击「忘记密码」按钮，跳转到忘记密码页面
2. 忘记密码页面：用户输入邮箱，点击「发送验证码」，验证邮箱后跳转到重置密码页面（携带邮箱信息）
3. 重置密码页面：用户输入OTP和新密码，点击「修改密码」，完成后跳回登录页面

二、各页面核心代码实现 #

1. 登录页（邮箱入口）跳转至忘记密码页 #

在登录页的「忘记密码」按钮添加跳转逻辑：

TextButton(
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => const ForgotPasswordPage()),
    );
  },
  child: const Text("忘记密码？"),
)

2. 忘记密码页面（发送OTP后跳转至重置页） #

class ForgotPasswordPage extends StatefulWidget {
  const ForgotPasswordPage({super.key});

  @override
  State<ForgotPasswordPage> createState() => _ForgotPasswordPageState();
}

class _ForgotPasswordPageState extends State<ForgotPasswordPage> {
  final TextEditingController _emailController = TextEditingController();

  // 替换为实际发送OTP的后端接口调用
  Future<bool> sendOtpToEmail(String email) async {
    await Future.delayed(const Duration(seconds: 1));
    return true;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("忘记密码")),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _emailController,
              keyboardType: TextInputType.emailAddress,
              decoration: const InputDecoration(labelText: "输入注册邮箱"),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                String email = _emailController.text.trim();
                if (email.isEmpty) {
                  Fluttertoast.showToast(msg: "请输入邮箱");
                  return;
                }
                bool isOtpSent = await sendOtpToEmail(email);
                if (isOtpSent) {
                  // 携带邮箱跳转到重置密码页面
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => ResetPasswordPage(email: email),
                    ),
                  );
                } else {
                  Fluttertoast.showToast(msg: "发送验证码失败，请重试");
                }
              },
              child: const Text("发送验证码"),
            ),
          ],
        ),
      ),
    );
  }
}

3. 重置密码页面（修正按钮逻辑） #

你的原有代码存在逻辑错误（同时触发成功/失败提示），以下是修正后的完整代码：

class ResetPasswordPage extends StatefulWidget {
  final String email; // 从忘记密码页传递的邮箱
  const ResetPasswordPage({super.key, required this.email});

  @override
  State<ResetPasswordPage> createState() => _ResetPasswordPageState();
}

class _ResetPasswordPageState extends State<ResetPasswordPage> {
  final TextEditingController _otpController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("重置密码")),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _otpController,
              keyboardType: TextInputType.number,
              decoration: const InputDecoration(labelText: "输入验证码"),
            ),
            const SizedBox(height: 16),
            TextField(
              controller: _passwordController,
              obscureText: true,
              decoration: const InputDecoration(labelText: "输入新密码"),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                String otp = _otpController.text.trim();
                String newPassword = _passwordController.text.trim();
                String email = widget.email;

                // 校验输入完整性
                if (otp.isEmpty || newPassword.isEmpty) {
                  Fluttertoast.showToast(msg: "请填写完整信息");
                  return;
                }

                // 调用重置密码接口
                try {
                  List<UserLogin> res = await LoginController.createResentpassword(
                    email,
                    newPassword,
                    otp,
                  );
                  // 根据接口返回判断结果（需匹配实际接口逻辑）
                  if (res.isNotEmpty && res[0].userEmail == email) {
                    Fluttertoast.showToast(msg: "密码修改成功");
                    // 重置成功后返回登录页
                    Navigator.popUntil(context, (route) => route.isFirst);
                  } else {
                    Fluttertoast.showToast(msg: "密码修改失败，请检查验证码");
                  }
                } catch (e) {
                  Fluttertoast.showToast(msg: "网络异常，请重试");
                }
              },
              child: const Text("修改密码"),
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(
                  const Color.fromARGB(255, 3, 89, 168),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

三、关键修复点说明 #

1. 移除错误提示逻辑：原代码同时触发成功和失败Toast，现在根据接口返回分支处理
2. 修正跳转逻辑：密码重置成功后跳回登录页，使用Navigator.popUntil确保回到根页面
3. 添加输入校验：避免空值提交接口
4. 异常捕获：处理接口请求时的网络或其他异常
5. 页面参数传递：通过构造函数传递邮箱，避免用户重复输入

内容的提问来源于stack exchange，提问作者Swati Suryawanshi