Flutter中输入正确密码后如何关闭passCodeScreen验证页面

问题原因 #

passcode_screen插件本身不会自动关闭密码验证页面，你当前代码中的isValidCallback为空函数，没有实现页面退出的逻辑，这是输入正确密码后页面无响应的核心原因。

解决步骤 #

1. 补全isValidCallback逻辑，校验成功后主动调用路由pop方法关闭页面
2. 可选：补全cancelCallback逻辑，实现点击取消按钮也可以退出密码页
3. 可选：按照Dart语法规范调整类名为大驼峰格式，避免潜在的命名问题

修正后完整代码 #

passcode_screen_bloc.dart 无需修改，原有逻辑正确 #

import 'dart:async';

class PasscodeScreenBloc {
  String isValidPasscode = "123456";

  final StreamController<bool> verificationNotifier =
      StreamController<bool>.broadcast();

  void onPasscodeEntered(String enteredPasscode) {
    bool isValid = isValidPasscode == enteredPasscode;
    verificationNotifier.add(isValid);
  }

  void dispose() {
    verificationNotifier.close();
  }
}

修正后的passcode页面代码 #

import 'package:flutter/material.dart';
import 'package:passcode_screen/passcode_screen.dart';
import 'passcode_screen_bloc.dart';

// 调整为大驼峰命名符合Dart规范
class PasscodeScreenPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _PasscodeScreenPageState();
  }
}

class _PasscodeScreenPageState extends State<PasscodeScreenPage> {
  final PasscodeScreenBloc passcodeScreenBloc = PasscodeScreenBloc();

  @override
  Widget build(BuildContext context) {
    return PasscodeScreen(
      title: const Text("请输入密码"),
      passwordEnteredCallback: passcodeScreenBloc.onPasscodeEntered,
      cancelButton: const Text("取消"),
      deleteButton: const Text("删除"),
      shouldTriggerVerification: passcodeScreenBloc.verificationNotifier.stream,
      backgroundColor: Colors.white,
      // 补全校验成功的回调
      isValidCallback: () {
        // 关闭当前密码页面，可带参数返回给上一级页面
        Navigator.of(context).pop(true);
      },
      // 补全取消按钮的回调
      cancelCallback: () {
        Navigator.of(context).pop(false);
      },
    );
  }

  @override
  void dispose() {
    passcodeScreenBloc.dispose();
    super.dispose();
  }
}

内容的提问来源于stack exchange，提问作者phạm Tiến