Autofill Username & Password In Flutter

This article will explore the Autofill Username & Password In Flutter. We see how to execute a demo program. We will tell you the best way to enable autofill username & password in your Flutter applications.

If you’re looking for the best Flutter app development company for your mobile application then feel free to contact us at — support@flutterdevs.com.

Table Of Contents::

Introduction

Code Implement

Code File

Conclusion

Introduction:

The demo video below shows how to create an autofill username & password in Flutter and how an autofill username & password in your Flutter applications. When you enable autofill, at whatever point the user logs in, the application will show a dialog to save the username and password in a browser and store the credentials in a password manager. It will be shown on your device.

Demo Module::

Code Implement:

Create a new dart file called main.dart inside the lib folder.

In the main .dart file. We will create a new class AutofillDemo(). In this class, we will define a Container widget on a body. Inside the widget, we will add the AutofillGroup() method. In this method, we will add the Column widget.

Container(
padding: const EdgeInsets.all(30),
child: AutofillGroup(
child: Center(
child: Column(
children: [
const SizedBox(
height: 30,
),
Image.asset(
"assets/images/logo.png",
height: 100,
),
const SizedBox(
height: 30,
),
const TextField(
autofillHints: [AutofillHints.username],
decoration: InputDecoration(hintText: "Username"),
),
const SizedBox(
height: 10,
),
const TextField(
obscureText: true,
autofillHints: [AutofillHints.password],
decoration: InputDecoration(hintText: "Password"),
),
const SizedBox(
height: 30,
),
ElevatedButton(
onPressed: () {
TextInput.finishAutofillContext();
Navigator.pushReplacement(context,
MaterialPageRoute(builder: (context) {
return const HomeScreen();
}));
},
child: const Text("Log In"))
],
),
)),
)

In this widget, we will add two TextFields for Username and Password with autofillHints. Also, we will create an ElevatedButton(). In this button, we will add TextInput.finishAutofillContext(); for password save, and navigate to the home screen and wrap to the onPressed() function. Also, we will add the text “Log In”.

When we run the application, we ought to get the screen’s output like the underneath screen capture.

The same dart file called main.dart inside the lib folder.

In the main .dart file. We will create a new class HomeScreen(). In this class, we will define a Column widget on a body. In this widget, we will add an image and ElevatedButton() for logout.

Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
"assets/images/logo.png",
height: 100,
),
const SizedBox(
height: 100,
),
ElevatedButton(
onPressed: () {
Navigator.pushReplacement(context,
MaterialPageRoute(builder: (context) {
return const AutofillDemo();
}));
},
child: const Text("Log Out"))
],
),

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Code File:

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

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

@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: Splash(),
);
}
}

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

@override
_AutofillDemoState createState() => _AutofillDemoState();
}

class _AutofillDemoState extends State<AutofillDemo> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
title: const Text(
"Flutter Autofill Username & Password Demo",
style: TextStyle(fontSize: 18),
),
backgroundColor: Colors.cyan,
),
body: Container(
padding: const EdgeInsets.all(30),
child: AutofillGroup(
child: Center(
child: Column(
children: [
const SizedBox(
height: 30,
),
Image.asset(
"assets/images/logo.png",
height: 100,
),
const SizedBox(
height: 30,
),
const TextField(
autofillHints: [AutofillHints.username],
decoration: InputDecoration(hintText: "Username"),
),
const SizedBox(
height: 10,
),
const TextField(
obscureText: true,
autofillHints: [AutofillHints.password],
decoration: InputDecoration(hintText: "Password"),
),
const SizedBox(
height: 30,
),
ElevatedButton(
onPressed: () {
TextInput.finishAutofillContext();
Navigator.pushReplacement(context,
MaterialPageRoute(builder: (context) {
return const HomeScreen();
}));
},
child: const Text("Log In"))
],
),
)),
),
);
}
}

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

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
title: const Text("Home Page"),
backgroundColor: Colors.cyan,
),
body: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
"assets/images/logo.png",
height: 100,
),
const SizedBox(
height: 100,
),
ElevatedButton(
onPressed: () {
Navigator.pushReplacement(context,
MaterialPageRoute(builder: (context) {
return const AutofillDemo();
}));
},
child: const Text("Log Out"))
],
),
),
);
}
}

Conclusion:

In the article, I have explained the Autofill Username & Password In Flutter; you can modify this code according to your choice. This was a small introduction to the Autofill Username & Password In Flutter User Interaction from my side, and it’s working using Flutter.

I hope this blog will provide you with sufficient information on Trying Autofill Username & Password in your Flutter projects. We will show you what the Introduction is. Make a demo program for working on the Autofill Username & Password in your Flutter applications. So please try it.

❤ ❤ Thanks for reading this article ❤❤

If I need to correct something? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally rich apps. Hire a Flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! For any flutter-related queries, you can connect with us on Facebook, GitHub, Twitter, and LinkedIn.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.