chrome Credentials Management API flutter

Question

i want to store login credential in google password manager in flutter web my login page code here

@override
  Widget build(BuildContext context) {
    return Form(
        key: _mobileKey,
        child: Column(crossAxisAlignment: CrossAxisAlignment.center, children: [
          TextFormField(
            controller: mobileController,
            autofocus: true,
            textInputAction: TextInputAction.next,
            keyboardType: TextInputType.phone,
            decoration: const InputDecoration(
              border: InputBorder.none,
              hintText: "Enter Your Mobile Number",
            ),
          ),
          TextFormField(
            controller: passwordController,
            autofocus: true,
            key: _passwordKey,
            maxLength: 30,
            keyboardType: TextInputType.visiblePassword,
            decoration: const InputDecoration(
              border: InputBorder.none,
              hintText: "Enter Your Password",
            ),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 16.0),
            child: ElevatedButton(
                onPressed: () async {
                    await loginuser(mobileController.text.toString(),
                            passwordController.text.toString())
                        .then((result) {
                      ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
                        content: Text('Failed'),
                      ));

                      context.go('/Home');
                    }).onError((error, stackTrace) {
                      print(error);
                    });
                  }
                  await _secureStorage
                      .setUserName(mobileController.text.toString());
                  await _secureStorage
                      .setPassWord(passwordController.text.toString());

                  print('start');
                },
                child: const Text('Submit')),
          ),
        ]));
  }
}

the flutter password_credential dependencie is used to store password i need guidance to implement this in my code i am beginner in programming. help me

Answer 1

Use autofillgroup to save your Credential in browser and sync with your google account.

return Form(
      
        key: _mobileKey,
        child: AutofillGroup(
            child: FocusScope(
                child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
              TextFormField(
                controller: mobileController,
                autofillHints: const [AutofillHints.telephoneNumber],

                autofocus: true,
                maxLength: 10,
                inputFormatters: [
                  FilteringTextInputFormatter.digitsOnly,
                  LengthLimitingTextInputFormatter(10),
                ],
                textInputAction: TextInputAction.next,
                keyboardType: TextInputType.phone,
                // move to the next field
                // onEditingComplete: _node.nextFocus,
                decoration: const InputDecoration(
                  border: InputBorder.none,
                  hintText: "Enter Your Mobile Number",
                ),
                // The validator receives the text that the user has entered.
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter your mobile number';
                  } else if (value.length < 10) {
                    return 'Enter Valid mobile number';
                  } else {
                    return null;
                  }
                },
              ),
]))));

you can use it for specified builtin keyword. example

autofillHints: const [AutofillHints.email],
autofillHints: const [AutofillHints.password],
autofillHints: const [AutofillHints.name] 

remember you cant use your own keyword