Flutter just intrigued me with the pleasant UI stuff you could do effectively, and obviously, it permits you to create for both platforms simultaneously. The focal reason for existing is to construct the application out of widgets. It portrays how your application view should look with their present setup and state. When you modified the code, the widget rebuilt its depiction by computing the contrast between the past and current widget to decide the negligible changes for rendering in the UI of the application.
In this blog, we will explore the Generate Strong Random Password In Flutter. We will implement a generated random password demo program and learn how to create a strong random password generate in your flutter applications.
Table Of Contents::
Generate Random Password:
We can undoubtedly create complex passwords and use them for your client accounts. Pick length and chars to be utilized and produce your passwords securely.
Demo Module :
This demo video shows how to create a generate strong random password in a flutter. It shows how the generate strong random password will work in your flutter applications. When the user taps the button then, the password will generate with the combination of length, character, number, special, lower alphabet, and upper alphabet. It will generate on the text form field and the user also copies the generated password. It will be shown on your device.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called generate_password.dart inside the lib folder.
In the body part, we will add Container. Inside, we will add a Column widget. In this widget, we will add mainAxisAlignmnet and crossAxisAlignmnet was center. We will add text and wrap it to the row.
Container(
padding: EdgeInsets.all(32),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(
children: [
Text("Generate Strong Random Password",style: TextStyle(
fontSize: 18, fontWeight: FontWeight.bold
),),
],
SizedBox(height: 15,),
TextFormField(),
SizedBox(height: 15,),
buildButtonWidget()
),
],
),),
Now we will add TextFormFeld, we will make a variable of _contoller is equal to the TextEditingController().
final _controller = TextEditingController();
We will true read-only because the password was generated not editing. We will false the enableInteractiveSelection and add InputDecoration for border.
TextFormField(
controller: _controller,
readOnly: true,
enableInteractiveSelection: false,
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.cyan,),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.cyan),
),
),
),
We will also create a dispose() method to dispose the controller
@override
void dispose() {
_controller.dispose();
super.dispose();
}
In TextFormField, we will also create a suffixIcon. Inside, we will add the IconButton(). We will add a copy icon and onPressed method. In the onPressed method, we will add final data is equal to the ClipboardData and in the bracket, we will add _controller. text and set the data on the clipboard. We will show a snackbar when the copy icon is pressed then show a message was “Password Copy”.
suffixIcon: IconButton(
onPressed: (){
final data = ClipboardData(text: _controller.text);
Clipboard.setData(data);
final snackbar = SnackBar(
content: Text("Password Copy"));
ScaffoldMessenger.of(context)
..removeCurrentSnackBar()
..showSnackBar(snackbar);
},
icon: Icon(Icons.copy))
Now we will create a buildButtonWidget()
We will create buildButtonWidget(), Inside we will return a ElevatedButton(). In this button, we will add the style of ElevatedButton and add the child property. We will add the text “Password Generate” and add the onPressed function in the child property. In this function, we will add a final password is equal to the generatePassword(). We will deeply describe below the generatePassword(). Add the _controller. text is equal to the password.
Widget buildButtonWidget() {
return ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.black
),
onPressed: (){
final password = We will deeply describe;
_controller.text = password;
},
child: Text("Password Generate",style: TextStyle(color: Colors.white),)
);
}
We will deeply describe generatePassword():
Create a new dart file called custom.dart inside the lib folder.
We will create a String generatePassword()method. Inside, we will add final length is equal to the 20, letterLowerCase, letterUpperCase, number, special character. When we use a strong password then true all bool letters, isNumber, and isSpecial. Add String chars and return List. generate(). Add final indexRandom is equal to the Random.secure().nextInt(chars.length) and return chars [indexRandom].
import 'dart:math';
String generatePassword({
bool letter = true,
bool isNumber = true,
bool isSpecial = true,
}) {
final length = 20;
final letterLowerCase = "abcdefghijklmnopqrstuvwxyz";
final letterUpperCase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
final number = '0123456789';
final special = '@#%^*>\$@?/[]=+';
String chars = "";
if (letter) chars += '$letterLowerCase$letterUpperCase';
if (isNumber) chars += '$number';
if (isSpecial) chars += '$special';
return List.generate(length, (index) {
final indexRandom = Random.secure().nextInt(chars.length);
return chars [indexRandom];
}).join('');
}
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_generate_strong_random/custom.dart';
class GeneratePassword extends StatefulWidget {
@override
_GeneratePasswordState createState() => _GeneratePasswordState();
}
class _GeneratePasswordState extends State<GeneratePassword> {
final _controller = TextEditingController();
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) =>
Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
backgroundColor: Colors.cyan,
title: Text('Flutter Generate Random Password'),
),
body: Container(
padding: EdgeInsets.all(32),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(
children: [
Text("Generate Strong Random Password",style: TextStyle(
fontSize: 18, fontWeight: FontWeight.bold
),),
],
),
SizedBox(height: 15,),
TextFormField(
controller: _controller,
readOnly: true,
enableInteractiveSelection: false,
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.cyan,),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.cyan),
),
suffixIcon: IconButton(
onPressed: (){
final data = ClipboardData(text: _controller.text);
Clipboard.setData(data);
final snackbar = SnackBar(
content: Text("Password Copy"));
ScaffoldMessenger.of(context)
..removeCurrentSnackBar()
..showSnackBar(snackbar);
},
icon: Icon(Icons.copy))
),
),
SizedBox(height: 15,),
buildButtonWidget()
],
),
),
);
Widget buildButtonWidget() {
return ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.black
),
onPressed: (){
final password = generatePassword();
_controller.text = password;
},
child: Text("Password Generate",style: TextStyle(color: Colors.white),)
);
}
}
Conclusion:
In the article, I have explained the Generate Strong Random Password of the basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Generate Strong Random Password On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying up the Generate Strong Random Password in your flutter projects. We will show you what the Generate Random Password is?. Make a demo program for working Generate Strong Random Password and It displays When the user taps the button then, the password will generate with the combination of length, character, number, special, lower alphabet, and upper alphabet. It will generate on the text form field and the user also copies the generated password in your flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
find the source code of the Flutter Generate Strong Random Password Demo:
flutter-devs/flutter_generate_strong_random_password_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com
Explore Clean Architecture In Flutter
Clean architecture has been around for quite a while yet similarly as with all ‘best practice’ it’s get deciphered from…medium.comFeel 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! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
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.
