猫哥说
有的时候手机上也须要强明码生成器,这样就不必再 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 ()办法来开释控制器
@overridevoid 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