Flutter show Auto fill password prompt after api success

Question

Flutter autofill with keychain of iOS app wants to show the Save or update password prompt after the API request done, not on text field submission or on button tap.

I have a Flutter app with a login page.

The login page has text fields for email address and password, as well as a login API call.The credentials are are filled from the keychain..However, when the user picks credentials from the keychain and edits the password field, the API request is initiated. The Update password prompt appears; however, I want to show the Save password or Update password prompt only when the API request is complete.

ElevatedButton(
              onPressed: (){
        try {
                await makeLogin();
                TextInput.finishAutofillContext();  //--- want to save or update password after api success.
                //--- OR Your Navigation----
                  Navigator.pushReplacement(context,              MaterialPageRoute(builder: (context){
                      return Panel();
                  })
              } catch (e) {
                TextInput.finishAutofillContext(shouldSave:false);
              //--- dont want save or update password if api fails.
              }

);

Answer 1

please use below code.

Scaffold(
    appBar: AppBar( 
        title: Text("Password Autofill"),
        backgroundColor: Colors.deepPurpleAccent,
    ),
    body: Container(
        padding: EdgeInsets.all(30),
        child: AutofillGroup(
          child:Column(
            children: [
                
                TextField(
                   autofillHints: [AutofillHints.username],
                   decoration: InputDecoration(
                     hintText: "Username"
                   ),
                ),

                TextField(
                   obscureText: true,
                   autofillHints: [AutofillHints.password],
                   decoration: InputDecoration(
                     hintText: "Password"
                   ),
                ),

                ElevatedButton(
                  onPressed: (){
                     makeLogin();
                  }, 
                  child:Text("Log In")
               )
            ],
          )
        ),
    ),
)

login method

    void makeLogin() async {
    try {
      //rest code
      if(response.statusCode==200){
        TextInput.finishAutofillContext();
      }else{
        TextInput.finishAutofillContext(shouldSave: false);
      }
    } catch (e) {
      print('Error : $e')
      TextInput.finishAutofillContext(shouldSave: false);
    }
  }

make sure that use have not cleared your textfields. like textController.clear();

i hope it will help Answer reference.

Please also check this answer.