Flutter登录表单：如何通过Provider仅在登录成功时触发密码保存

核心思路是手动控制AutofillGroup的凭据保存触发时机，只在登录成功时调用commit()方法触发系统的保存提示，避免默认的自动触发逻辑。

步骤1：在ViewModel中添加登录成功状态 #

修改LoginViewModel，新增登录成功的状态标记，登录流程结束后更新该状态：

class LoginViewModel extends ChangeNotifier {
  // 现有成员变量：loginFormKey、autoFillGroupKey、isBusy、控制器等...
  bool isLoginSuccess = false;

  Future<void> login() async {
    isBusy = true;
    notifyListeners();

    try {
      // 执行登录请求逻辑
      final loginResult = await yourLoginApiCall(
        username: usernameTextEditingController.text,
        password: passwordTextEditingController.text,
      );

      if (loginResult.isSuccess) {
        // 登录成功，标记状态
        isLoginSuccess = true;
      } else {
        isLoginSuccess = false;
      }
    } catch (e) {
      // 捕获异常，标记登录失败
      isLoginSuccess = false;
    } finally {
      isBusy = false;
      notifyListeners();
    }
  }
}

步骤2：监听登录成功状态，手动触发凭据保存 #

在页面的表单外层添加Selector监听isLoginSuccess状态，当登录成功时调用AutofillGroupState.commit()触发系统保存提示：

Widget _buildLoginAutofillForm() {
  final viewModel = context.read<LoginViewModel>();

  return Selector<LoginViewModel, bool>(
    selector: (_, vm) => vm.isLoginSuccess,
    builder: (context, isSuccess, child) {
      if (isSuccess) {
        // 等待UI帧更新完成后执行，确保AutofillGroup状态可用
        WidgetsBinding.instance.addPostFrameCallback((_) {
          viewModel.autoFillGroupKey.currentState?.commit();
          // 重置成功状态，避免重复触发提示
          viewModel.isLoginSuccess = false;
          viewModel.notifyListeners();
        });
      }
      return child!;
    },
    child: Form(
      key: viewModel.loginFormKey,
      child: AutofillGroup(
        key: viewModel.autoFillGroupKey,
        child: Column(
          // 原有列子元素保持不变...
        ),
      ),
    ),
  );
}

步骤3：避免不必要的Autofill触发 #

1. 合并重复的isBusy监听：将三个独立的Selector合并为一个，减少表单元素的重建次数，避免因状态频繁变化误触Autofill提示：

// 合并后的Selector示例
Selector<LoginViewModel, bool>(
  selector: (_, vm) => vm.isBusy,
  builder: (context, isBusy, child) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        TextFormField(
          // 原有属性...
          enabled: !isBusy,
        ),
        TextFormField(
          // 原有属性...
          enabled: !isBusy,
        ),
        FilledButton(
          onPressed: isBusy ? null : () => _subimtLoginForm(viewModel),
          // 原有属性...
        ),
      ],
    );
  },
)

2. 控制键盘收起时机：不要在登录失败时调用FocusScope.of(context).unfocus()，如果必须收起键盘，仅在登录成功后执行，避免误触Autofill的自动触发逻辑。

原理说明 #

Flutter的AutofillGroup默认会在表单字段失去焦点、状态变更（如enabled切换）时自动向系统请求保存凭据。通过手动调用commit()方法，我们可以完全控制触发时机，只有在确认登录成功后才触发保存提示，解决了当前无论登录结果如何都会弹出提示的问题。

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