Flutter strong random password generator

Brother Cat said

Sometimes a strong password generator is also needed on the mobile phone, so you don't have to copy it after generating it on the PC. Use Flutter to create one yourself.

Old iron remember to forward, Brother Mao will present more Flutter good articles~~~~

WeChat group ducafecat

b station https://space.bilibili.com/404904528

original

https://medium.com/flutterdevs/generate-strong-random-password-in-flutter-723e631727cc

Code

https://github.com/flutter-devs/flutter_generate_strong_random_password_demo

reference

text

It just made me interested in a pleasant user interface that you can do effectively, and obviously, it allows you to create for both platforms at the same time. The important reason for existence is to construct applications with widgets. It describes how your application views should view their current settings and status. When you modify the code, the widget reconstructs its description by calculating the comparison between the past and the current widget to determine the negligible changes presented in the UI of the application.

In this blog, we will explore generating strong random passwords in Flutter. We will implement a demonstration program for generating random passwords and learn how to create a strong random password to generate your Flutter application.

Generate random password

There is no doubt that we can create complex passwords and use them for your client accounts. Choose the length and characters to use and generate your password security.

This demo video shows how to create a strong random password in Flutter. It shows how to generate a strong random password will work in your Flutter application. When the user clicks the button, then the password will be generated with a combination of length, characters, numbers, special, lower letters, and upstream alphabets. It will be generated on the text form field, and the user will also copy the generated password. It will be displayed on your device.

How to implement the code in the dart file

You need to implement it in your code separately:

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

In the main part, we will add Container. Internally, we will add a Column widget. In this widget, we will add mainAxisAlignmnet and crossAxisAlignmnet. We will add text and wrap it into rows.

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 the variable of \_ contoller equal to TextEditingController ().

final _controller = TextEditingController();

We will be truly read-only because the password was not edited when it was 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 will add IconButton (). We will add a copy icon and onPressed method. In the onPressed method, we will add the final data equal to the clipboard data, and in brackets, we will 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 "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 () and an elevation button () will be returned inside. In this button, we will add the style of the title button and add sub-attributes. We will add the text "Password Generate" and add the onPressed function to the child attribute. In this function, we will add a final password equal to generatePassword (). We will describe in depth in generatePassword () below. Add \_ controller. The 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 describe generatePassword () in depth:

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

We will create a String generatePassword () method. Internally, we will add the final length equal to 20, letterLowerCase, letterUpperCase, number, special characters. When we use a strong password, then the real bool letters, isNumber, and isSpecial. Add string characters and return to List. generate(). Adding final indexRandom is equal to 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, just like 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),)
    );
  }

}

Concluding remarks

In this article, I explained the basic structure of generating a strong random password, you can modify this code according to your choice. This is a small introduction to generating strong random password user interaction from my side, it works using Flutter.

I hope this blog will provide you with sufficient information about trying to generate strong random passwords in your Flutter project. We will show you what is generating a random password? . Make a demo program that works to generate a strong random password, it will show when the user clicks the button, and then the password will be generated by the length, characters, numbers, special, low letters and upstream letter combinations. It will generate text form fields and users also copy the generated passwords in your Flutter application. So please try it.

https://ducafecat.tech/

https://github.com/ducafecat