How to Enable Autofill Username/Password in Flutter

In this example, you will learn to autofill username or password TextField in the Login form in Flutter. When you enable autofill, whenever the user logins, the app will show a dialog to save the username and password like in a browser, and store the credentials in a password manager.

AutofillGroup(
  child:Column(
    children: [
        TextField(
            autofillHints: [AutofillHints.username],
            decoration: InputDecoration(
              hintText: "Username"
            ),
        ),

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

You can enable Autofill on any kind of form with AutofillGroup() widget. And you have to set the individual AutofillHints to TextField or TextFormField, to let know the OS what kind of data it is to save.

TextField(
     autofillHints: [AutofillHints.password],
)

Now to Trigger the Save dialog with a button click, use either method:

TextInput.finishAutofillContext();

This code helps to trigger the Save password dialog programmatically.

OR, you can navigate with pushReplacement(), and the OS will trigger the save dialog automatically.

Navigator.pushReplacement(context, MaterialPageRoute(builder: (context){
    return NewPage();
}));

Password Save triggered Screen:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return  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: (){
                          //--- trigger Password Save
                          TextInput.finishAutofillContext();
                          
                          //--- OR ----
                          Navigator.pushReplacement(context, MaterialPageRoute(builder: (context){
                              return Panel();
                          })); 
                      }, 
                      child:Text("Log In")
                   )
                ],
              )
            ),
        ),
    );
  }
}

class Panel extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
         title: Text("Admin Panel"),
       ),
     );
  }
}