Flutter – Save Password in Google Account

When you are using different websites and apps you can see there is an option available to store the password in Google. So that you can use that in the future and don’t need to remember it. You can fill many things from autofill in Google for future reference. We can do this from the flutter built-in function. No external package is required. It is liked by most of the users. So this is a simple way where you can get benefit. Today we will learn how to do the same thing in Flutter with different -different platforms from just a single code.

Step-by-Step Implementation

Step 1: Create 1 simple project using the command

Dart

flutter create myapp

Step 2: Add two text fields and 1 button in the scaffold widget of the first screen

Dart

class MyWidget extends StatefulWidget {
  const MyWidget({super.key});

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green,
        title:const Text("Save Password Google Flutter"), ),
      body:
    Padding(
      padding: const EdgeInsets.all(8.0),
      child: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
        const    Text("GFG Articles", style: TextStyle(fontSize: 20), ),  const SizedBox(height: 10, ),
         TextFormField(
            decoration: InputDecoration(hintText: "User Name"),
      ),  TextFormField(
                      decoration: InputDecoration(hintText: "Password"),
        ),
           const SizedBox(height: 10, ),
            ElevatedButton(onPressed: (){


            }, child:const Text("Save Password"))
          ],
        ),
      ),
    ), );
  }
}

Step 3: Add autofills in both the text field according to data you will add

Dart

TextFormField(
            decoration: InputDecoration(hintText: "User Name"),
              autofillHints: const [ AutofillHints.newUsername],
            // Autofill Hints where you want to store
              // the data of this textfiled
            // We are considering  this as username, email
            ),  TextFormField(
                      decoration: InputDecoration(hintText: "Password"),
              autofillHints:const [AutofillHints.password],
            // Autofill Hints where you want to store
              // the data of this textfiled
            // We are considering  this as password
            ),

Step 4: Add the following code on button tap

Dart

ElevatedButton(onPressed: (){
               TextInput.finishAutofillContext();
            // To store all the autofills in googles
              // according to autofill selected
            }, child:const Text("Save Password"))

Explanation:

You are good to go. You have successfully saved the password in your google account login in your device. Using this you can also able to see the suggestion of your password saved and also what you have typed last time. For learning more on autofill you can explore this article Autofill Hints Suggestion List in Flutter. We have autofill hints list in textfield which is used to store the previous typed data or suggest some value from google. On Button Tap we have added 1 function TextInput.finishAutofillContext(); which will store the password in google. firstly it will ask you whether you wanna store value or not.

Complete Code

Dart

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Save Password Google Flutter Template',
      theme: ThemeData(

        colorScheme: ColorScheme.fromSeed(seedColor: Colors.green),
        useMaterial3: true,
      ),
      home: const MyWidget(),
    );
  }
}

class MyWidget extends StatefulWidget {
  const MyWidget({super.key});

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green,
        title:const Text("Save Password Google Flutter"), ),
      body:
    Padding(
      padding: const EdgeInsets.all(8.0),
      child: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
        const    Text("GFG Articles", style: TextStyle(fontSize: 20), ),  const SizedBox(height: 10, ),
            TextFormField(
              autofillHints: const [ AutofillHints.newUsername],
            ),  TextFormField(
              autofillHints:const [AutofillHints.password],
            ),
           const SizedBox(height: 10, ),
            ElevatedButton(onPressed: (){
               TextInput.finishAutofillContext();

            }, child:const Text("Save Password"))
          ],
        ),
      ),
    ), );
  }
}

Output:

1. Flutter Web

2. Android

a) When autofills details is not saved

b) When autofills details is saved and you are using it

How autofill is save popup show

Note: You should use autofills in your textfield. It is user friendly feature which you can do easily with just few lines. There is advantage and disadvantage of this. So Please use it carefully