关于flutter:Flutter-强随机密码生成器

猫哥说

有的时候手机上也须要强明码生成器，这样就不必再 PC 上生成后复制过来了，用 Flutter 本人来打造一个吧。

老铁记得 转发，猫哥会出现更多 Flutter 好文~~~~

微信群 ducafecat

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

原文

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

代码

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

参考

注释

只是让我对你可能无效地做到的令人欢快的用户界面感兴趣，而且显然，它容许你同时为两个平台创立。存在的重要起因是用小部件结构应用程序。它形容了您的应用程序视图应该如何对待它们的以后设置和状态。当您批改代码时，小部件通过计算过来和以后小部件之间的比照来从新构建它的形容，以确定在应用程序的 UI 中出现的可疏忽的更改。

在这个博客中，咱们将摸索在 Flutter 中生成强随机明码。咱们将实现一个生成随机明码演示程序，并理解如何创立一个弱小的随机明码产生您的 Flutter 应用程序。

生成随机明码

毫无疑问，咱们能够创立简单的明码，并用于您的客户端帐户。抉择长度和字符，以利用和生成您的明码平安。

这个演示视频展现了如何在一次 Flutter 中创立一个弱小的随机明码。它显示了如何生成强随机明码将工作在您的 Flutter 应用程序。当用户点击按钮，而后，明码将产生的组合长度，字符，数字，非凡，低字母，和上游字母表。它将在文本表单字段上生成，用户还将复制生成的明码。它会显示在你的设施上。

如何实现 dart 文件中的代码

你须要别离在你的代码中实现它:

在 lib 文件夹中创立一个名为 generate \_ password. dart 的新 dart 文件。

在主体局部，咱们将增加 Container。在外部，咱们将增加一个 Column 小部件。在这个小部件中，咱们将增加 mainAxisAlignmnet 和 crossAxisAlignmnet。咱们将增加文本并将其包装到行中。

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()),
    ],
  ),),

当初咱们将增加 TextFormFeld，咱们将使 \_ contoller 的变量等于 TextEditingController ()。

final _controller = TextEditingController();

咱们将真正的只读，因为明码生成时没有编辑。咱们将假如 enableInteractiveSelection 并增加 InputDecoration 作为边框。

TextFormField(
  controller: _controller,
  readOnly: true,
  enableInteractiveSelection: false,
  decoration: InputDecoration(
      focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.cyan,),
      ),
      enabledBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.cyan),
      ),
  ),
),

咱们还将创立一个 dispose ()办法来开释控制器

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

在 TextFormField 中，咱们还将创立一个后缀图标。在外部，咱们将增加 IconButton ()。咱们将增加一个复制图标和 onPressed 办法。在 onPressed 办法中，咱们将增加最终数据等于 clipboard data，在括号中，咱们将增加 \_ controller。文本和设置剪贴板上的数据。咱们将显示一个 snackbar 时，复制图标按下，而后显示一个音讯是“明码复制”。

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))

当初咱们将创立一个 buildButtonWidget ()

咱们将创立 buildButtonWidget ()，外部将返回一个标高按钮 ()。在这个按钮中，咱们将增加题目按钮的款式并增加子属性。咱们将增加文本“Password Generate”，并在 child 属性中增加 onPressed 函数。在这个函数中，咱们将增加一个等于 generatePassword () 的最终明码。咱们将在上面的 generatePassword ()中进行深刻的形容。增加 \_ controller。文本等于明码。

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),)
  );
}

咱们将深刻形容 generatePassword () :

在 lib 文件夹中创立一个名为 custom.dart 的新 dart 文件。

咱们将创立一个 String generatePassword ()办法。在外部，咱们将增加最终长度等于 20，letterLowerCase，letterUpperCase，number，special 字符。当咱们应用一个强明码，而后真正的所有 bool 字母，isNumber，和 isSpecial。增加字符串字符并返回 List。生成 ()。增加 final indexRandom 等于 Random.secure ()。nextInt (chars.length) 和 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('');
}

当咱们运行应用程序时，咱们应该失去屏幕的输入，就像上面的屏幕截图一样。

代码

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),)
    );
  }

}

结语

在本文中，我解释了生成强随机明码的根本构造，您能够依据本人的抉择批改这个代码。这是一个小的介绍生成强随机明码用户交互从我这边，它的工作应用 Flutter。

我心愿这个博客将提供您尝试在您的 Flutter 我的项目生成强随机明码短缺的信息。咱们将向您展现生成随机明码是什么？. 制作一个工作生成强随机明码的演示程序，它会显示当用户点击按钮，而后，明码将生成的长度，字符，数字，非凡，低字母和上游字母组合。它将生成的文本表单字段和用户也复制生成的明码在您的 Flutter 应用程序。所以请尝试一下。

© 猫哥

https://ducafecat.tech/

https://github.com/ducafecat

往期

开源

GetX Quick Start

https://github.com/ducafecat/getx_quick_start

新闻客户端

https://github.com/ducafecat/flutter_learn_news

strapi 手册译文

https://getstrapi.cn

微信探讨群 ducafecat

系列汇合

译文

https://ducafecat.tech/categories/%E8%AF%91%E6%96%87/

开源我的项目

https://ducafecat.tech/categories/%E5%BC%80%E6%BA%90/

Dart 编程语言根底

https://space.bilibili.com/404904528/channel/detail?cid=111585

Flutter 零根底入门

https://space.bilibili.com/404904528/channel/detail?cid=123470

Flutter 实战从零开始 新闻客户端

https://space.bilibili.com/404904528/channel/detail?cid=106755

Flutter 组件开发

https://space.bilibili.com/404904528/channel/detail?cid=144262

Flutter Bloc

https://space.bilibili.com/404904528/channel/detail?cid=177519

Flutter Getx4

https://space.bilibili.com/404904528/channel/detail?cid=177514

Docker Yapi

https://space.bilibili.com/404904528/channel/detail?cid=130578