Getting started with 1Password for your growing team, or refining your setup? Our Secured Success quickstart guide is for you.
Forum Discussion
seankang
13 days agoNew Contributor
flutter login example
Hello I am building a flutter app that integrates with AWS cognito. In my custom Login Screen, I use flutter TextFormField and specify : TextFormField(.... autofillHints: const [AutofillHints.us...
1P_Phil
Moderator
12 days agoHi seankang​
I'm not a Flutter developer but I came across the groupBy option. Have you tried using this when creating the form?
I found this over on StackOverflow - https://stackoverflow.com/questions/68296566/flutter-how-to-groupby-two-or-more-fields
Cheers,
Phil
- seankang12 days agoNew Contributor
You're right --
I also searched it on chatgpt.
I have to use a parent object called AutofillGroup
```
class LoginScreen extends StatelessWidget {
final emailCtrl = TextEditingController();
final pwCtrl = TextEditingController();
final otpCtrl = TextEditingController();LoginScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Sign in')),
body: Padding(
padding: const EdgeInsets.all(16),
child: AutofillGroup(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
TextFormField(
controller: emailCtrl,
keyboardType: TextInputType.emailAddress,
textInputAction: TextInputAction.next,
autofillHints: const [AutofillHints.username, AutofillHints.email],
decoration: const InputDecoration(labelText: 'Email'),
autocorrect: false,
textCapitalization: TextCapitalization.none,
),
const SizedBox(height: 12),
TextFormField(
controller: pwCtrl,
obscureText: true,
textInputAction: TextInputAction.done,
autofillHints: const [AutofillHints.password],
decoration: const InputDecoration(
labelText: 'Password',
suffixIcon: Icon(Icons.key_outlined), // add your show/hide logic
),
onEditingComplete: () => TextInput.finishAutofillContext(),
),
const SizedBox(height: 12),
TextFormField(
controller: otpCtrl,
keyboardType: TextInputType.number,
autofillHints: const [AutofillHints.oneTimeCode],
decoration: const InputDecoration(labelText: '6-digit code'),
),
const SizedBox(height: 20),
FilledButton(
onPressed: () async {
// 1) Your password login flow
// 2) After success:
TextInput.finishAutofillContext();
},
child: const Text('Sign in'),
),
const SizedBox(height: 12),
OutlinedButton.icon(
icon: const Icon(Icons.fingerprint),
label: const Text('Sign in with a passkey'),
onPressed: () async {
// Call your server to get WebAuthn "get" options then use `passkeys.get(...)`
},
),
],
),
),
),
);
}
}```
- 1P_Phil11 days ago
Moderator
Hi seankang​ ,
Doing my best Napoleon Dynamite, "Yesss" right now! I'm glad it worked for you!
Drop by any time :D
Phil