Comment activer le remplissage automatique du nom d'utilisateur/mot de passe dans Flutter

Dans ce didacticiel, vous apprendrez à remplir automatiquement le nom d'utilisateur ou le mot de passe TextField dans le formulaire de connexion dans Flutter. Lorsque vous activez le remplissage automatique, chaque fois que l'utilisateur se connecte, l'application affiche une boîte de dialogue pour enregistrer le nom d'utilisateur et le mot de passe comme dans un navigateur, et stocke les informations d'identification dans un gestionnaire de mots de passe.

Activer le remplissage automatique sur le formulaire :

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

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

Vous pouvez activer le remplissage automatique sur tout type de formulaire avec AutofillGroup()widget. Et vous devez définir les AutofillHints individuels sur TextField ou TextFormField, pour indiquer au système d'exploitation le type de données à enregistrer.

TextField(
     autofillHints: [AutofillHints.password],
)

Maintenant, pour déclencher la boîte de dialogue Enregistrer en cliquant sur un bouton, utilisez l'une ou l'autre des méthodes :

TextInput.finishAutofillContext();

Ce code aide à déclencher la boîte de dialogue Enregistrer le mot de passe par programmation. 

OU, vous pouvez naviguer avec pushReplacement(), et le système d'exploitation déclenchera automatiquement la boîte de dialogue d'enregistrement.

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

Écran déclenché par l'enregistrement du mot de passe :

Exemple d'application complète :

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"),
       ),
     );
  }
}