Flutter 强随机密码生成器

image

猫哥说

有的时候手机上也需要强密码生成器,这样就不用再 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

参考

正文

image

只是让我对你能够有效地做到的令人愉快的用户界面感兴趣,而且显然,它允许你同时为两个平台创建。存在的重要原因是用小部件构造应用程序。它描述了您的应用程序视图应该如何看待它们的当前设置和状态。当您修改代码时,小部件通过计算过去和当前小部件之间的对比来重新构建它的描述,以确定在应用程序的 UI 中呈现的可忽略的更改。

在这个博客中,我们将探索在 Flutter 中生成强随机密码。我们将实现一个生成随机密码演示程序,并了解如何创建一个强大的随机密码产生您的 Flutter 应用程序。

生成随机密码

毫无疑问,我们可以创建复杂的密码,并用于您的客户端帐户。选择长度和字符,以利用和生成您的密码安全。

image

这个演示视频展示了如何在一次 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('');
}

当我们运行应用程序时,我们应该得到屏幕的输出,就像下面的屏幕截图一样。

image

代码

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,457评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,837评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,696评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,183评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,057评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,105评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,520评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,211评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,482评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,574评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,353评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,897评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,489评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,683评论 2 335

推荐阅读更多精彩内容