Flutter 強隨機密碼生成器

阿新 • • 發佈：2021-06-29

貓哥說

有的時候手機上也需要強密碼生成器，這樣就不用再 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