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
Contact Us