The cat said

Sometimes you need a strong password generator on your phone so that you don’t have to copy it on your PC. Use Flutter to build your own password generator.

Be sure to retweet brother for more Flutter posts at ~~~~

Ducafecat WeChat group

B stationhttps://space.bilibili.com/40…

The original

https://medium.com/flutterdev…

code

https://github.com/flutter-de…

reference

The body of the

It just makes me interested in having a pleasant user interface that you can do effectively, and obviously, it allows you to build for both platforms at the same time. An important reason for existence is to construct applications with widgets. It describes how your application view should view their current Settings and state. As you modify the code, the widget reconstructs its description by calculating a comparison between past and current widgets to determine the negligible changes rendered in the UI of the application.

In this blog, we’ll explore generating strong random passwords in Flutter. We will implement a Random Password Generator demo program and learn how to create a powerful Random Password Generator for your Flutter application.

Generate a random password

No doubt we can create complex passwords and use them for your client account. Select the length and character to utilize and generate your password securely.

This demo video shows how to create a strong random password in a Flutter. It shows how generating strong random passwords will work in your Flutter application. When the user clicks the button, then the password will be generated by a combination of length, character, number, special, low letter, and upstream alphabet. It will be generated on the text form field, and the user will also copy the generated password. It will show up on your device.

How do I implement the code in a DART file

You need to implement it separately in your code:

Create a new DART file named generate \_ password.dart in the lib folder.

In the body, we’ll add the Container. Inside, we’ll add a Column widget. In this widget, we will add MainAxisignmNet and CrossaxisignmNet. We’ll add the text and wrap it around the line.

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’ll add TextFormfeld, and we’ll make the variable \_ Contoller equal to TextedItingController ().

final _controller = TextEditingController();

We will be truly read-only, because there is no editing when the password is generated. We will assume enableInteractiveSelection and add InputDecoration as a 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 release the controller

@override
void dispose() {
  _controller.dispose();
  super.dispose();
}

In TextFormField, we will also create a suffix icon. Inside, we’ll add iconButton (). We’ll add a copy icon and the onPressed method. In the onPressed method, we’ll add the final data equal to Clipboard data, and in parentheses, we’ll add \_ controller. Text and set data on the clipboard. We will display a snackbar when the copy icon is pressed and then display a message that is “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’ll create a buildButtonWidget ()

We’ll create buildButtonWidget (), which returns a elevation button () inside. In this button, we will add the style of the title button and add the child properties. 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 equal to generatePassword (). We describe this in depth in generatePassword () below. Add \_ controller. Text equals 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’ll describe generatePassword () in depth:

Create a new DART file named custom.dart in the lib folder.

We will create a String generatePassword () method. Inside, we’re going to add the final length equal to 20, letterLowerCase, letterUpperCase, number, special characters. When we use a strong password, then true all the bool letters, isNumber, and isSpecial. Add a string character and return a List. Generate (). Adding Final IndexRandom equals 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 should get the output of the screen as shown in the screenshot below.

code

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 this article, I explained the basic structure for generating strong random passwords, which you can modify if you choose. This is a small introduction to generating strong random password user interaction from my side, which works using Flutter.

I hope this blog will provide you with sufficient information on trying to generate strong random passwords in your Flutter project. We’ll show you what it is to generate a random password? Make a demo program that works to generate a strong random password, it will show when the user clicks the button, then the password will generate the length, character, number, special, low letter and upstream letter combinations. It will generate the text form fields and the user will also copy the generated password in your Flutter application. So give it a try.


The elder brother of the © cat

https://ducafecat.tech/

https://github.com/ducafecat

The issue of

Open source

GetX Quick Start

https://github.com/ducafecat/…

News Client

https://github.com/ducafecat/…

Strapi manual translation

https://getstrapi.cn

WeChat discussion group Ducafecat

A series of collections

The translation

https://ducafecat.tech/catego…

The open source project

https://ducafecat.tech/catego…

DART programming language basics

https://space.bilibili.com/40…

Flutter Zero Basics Beginners

https://space.bilibili.com/40…

Flutter combat news client from scratch

https://space.bilibili.com/40…

Flutter component development

https://space.bilibili.com/40…

Flutter Bloc

https://space.bilibili.com/40…

Flutter Getx4

https://space.bilibili.com/40…

Docker Yapi

https://space.bilibili.com/40…