Flutter - Save Password in Google Account

Last Updated : 14 Apr, 2025

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 it 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 a new Flutter Application

Create a new Flutter application using the command Prompt. To create a new app, write the below command and run it.

flutter create app_name

To know more about it refer this article: Creating a Simple Application in Flutter.

Step 2: Add TextFields and a Button

Inside your first screen's Scaffold, add two TextField widgets (e.g., for email and password), and one button for submission.

Dart

// Main app widget
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Save Password Google Flutter Template',
      
      // Hides the debug banner
      debugShowCheckedModeBanner: false,
      
      // Home screen of the app
      home: const MyWidget(), 
    );
  }
}

// Stateful widget for the UI and logic
class MyWidget extends StatefulWidget {
  const MyWidget({super.key});

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

// State class for MyWidget
class _MyWidgetState extends State<MyWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          
        // Sets app bar background color
        backgroundColor: Colors.green, 
        foregroundColor: Colors.white,
        title: const Text("Save Password Google Flutter"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0), 
        child: SingleChildScrollView(
          child: Column(
              
            // Center the column vertically
            mainAxisAlignment: MainAxisAlignment.center, 
            
            // Center the column horizontally
            crossAxisAlignment: CrossAxisAlignment.center, 
            children: [
              const Text("GFG Articles", style: TextStyle(fontSize: 20)), 
              
              // Adds vertical spacing
              const SizedBox(height: 10), 

              // Text field for username with autofill hint
                TextFormField(
                  decoration: InputDecoration(
                      border: OutlineInputBorder(),
                      labelText: 'E-mail',
                      hintText: 'Enter your E-mail',
                  ),
                ),
                
                // Adds vertical spacing
                SizedBox(height: 10), 

              // Text field for password with autofill hint
              TextFormField(
                decoration: InputDecoration(
                      border: OutlineInputBorder(),
                      labelText: 'password',
                      hintText: 'Enter your password',
                  ),
              ),

              // Adds vertical spacing
              const SizedBox(height: 10), 

              // Button to trigger saving autofill context
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.green, 
                  foregroundColor: Colors.white,
                ),
                onPressed: () {
                   // Code here
                },
                child: const Text("Save Password"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Step 3: Add Autofill Hints to TextFields

Use the autofillHints property to specify the kind of data each field should expect.

Dart

// Text field for username with autofill hint
TextFormField(
    autofillHints: const [AutofillHints.newUsername],
    decoration: InputDecoration(
        border: OutlineInputBorder(),
        labelText: 'E-mail',
        hintText: 'Enter your E-mail',
    ),
),

// Text field for password with autofill hint
TextFormField(
    autofillHints: const [AutofillHints.password],
    decoration: InputDecoration(
        border: OutlineInputBorder(),
        labelText: 'password',
        hintText: 'Enter your password',
    ),
),

Step 4: Handle Submission

On button tap, call the following method to finalize the autofill process:

Dart

TextInput.finishAutofillContext();

Explanation of the above Program:

You are good to go. You have successfully saved the password in your Google account login on 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 the 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';
// Required for TextInput.finishAutofillContext()
import 'package:flutter/services.dart'; 

void main() {
  runApp(const MyApp()); // Entry point of the app
}

// Main app widget
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Save Password Google Flutter Template',
      debugShowCheckedModeBanner: false, // Hides the debug banner
      home: const MyWidget(), // Home screen of the app
    );
  }
}

// Stateful widget for the UI and logic
class MyWidget extends StatefulWidget {
  const MyWidget({super.key});

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

// State class for MyWidget
class _MyWidgetState extends State<MyWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green, // Sets app bar background color
        foregroundColor: Colors.white,
        title: const Text("Save Password Google Flutter"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0), 
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center, // Center the column vertically
            crossAxisAlignment: CrossAxisAlignment.center, // Center the column horizontally
            children: [
              const Text("GFG Articles", style: TextStyle(fontSize: 20)), 
              const SizedBox(height: 10), // Adds vertical spacing

              // Text field for username with autofill hint
                TextFormField(
                  autofillHints: const [AutofillHints.newUsername],
                  decoration: InputDecoration(
                      border: OutlineInputBorder(),
                      labelText: 'E-mail',
                      hintText: 'Enter your E-mail',
                  ),
                ),
                SizedBox(height: 10), // Adds vertical spacing

              // Text field for password with autofill hint
              TextFormField(
                autofillHints: const [AutofillHints.password],
                decoration: InputDecoration(
                      border: OutlineInputBorder(),
                      labelText: 'password',
                      hintText: 'Enter your password',
                  ),
              ),

              const SizedBox(height: 10), // Adds vertical spacing

              // Button to trigger saving autofill context
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.green, 
                  foregroundColor: Colors.white,
                ),
                onPressed: () {
                  // Finishes the current autofill context and prompts to save credentials
                  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

How to Add Custom Markers on Google Maps in Flutter?

flutterwings

Improve

Article Tags :

Flutter - Save Password in Google Account

Step-by-Step Implementation

Step 1: Create a new Flutter Application

Step 2: Add TextFields and a Button

Step 3: Add Autofill Hints to TextFields

Step 4: Handle Submission

Output:

How autofill is save popup show

Similar Reads

Thank You!

What kind of Experience do you want to share?