Flutter随机数键盘插件random_number_keypad的使用

发布于 1周前 作者 songsunli 来自 Flutter

Flutter随机数键盘插件random_number_keypad的使用

Flutter随机数键盘插件random_number_keypad的使用

标题：Flutter随机数键盘插件random_number_keypad的使用

内容如下：

<section class="tab-content detail-tab-readme-content -active markdown-body"><h1 class="hash-header" id="randomnumberkeypad">RandomNumberKeypad <a href="#randomnumberkeypad" class="hash-link">#</a></h1>
<p><code>RandomNumberKeypad</code>  is a customizable Flutter widget that provides a secure numeric keypad for PIN input. It features an optional randomization of keys to enhance user security, shuffling the keypad layout after every use when enabled. The widget supports masked or visible PIN entry, allows various PIN lengths, and provides extensive customization options for appearance and behavior.</p>
<h2 class="hash-header" id="features">Features <a href="#features" class="hash-link">#</a></h2>
<ul>
<li>Numeric keypad with random key positions.</li>
<li>Customizable PIN length (default is 4).</li>
<li>Option to show or hide PIN input (masked input).</li>
<li>Other customisation options.</li>
</ul>
<h2 class="hash-header" id="installation">Installation <a href="#installation" class="hash-link">#</a></h2>
<p>Add the widget file <code>random_number_keypad.dart</code> to your project and import it:</p>
<pre><code class="language-dart">import 'package:random_number_keypad/random_number_keypad.dart';
</code></pre>
<h2 class="hash-header" id="usage">Usage <a href="#usage" class="hash-link">#</a></h2>
<h3 class="hash-header" id="basic-example">Basic Example <a href="#basic-example" class="hash-link">#</a></h3>
<pre><code class="language-dart">import 'package:flutter/material.dart';
import 'package:random_number_keypad/random_number_keypad.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Random Number Keypad')),
        body: Center(
          child: RandomNumberKeypad(
            pinLength: 4,
            onComplete: (pin) {
              print('Entered PIN: $pin');
            },
            showInput: false, // Set to true to show PIN input
          ),
        ),
      ),
    );
  }
}
</code></pre>
<h3 class="hash-header" id="parameters">Parameters <a href="#parameters" class="hash-link">#</a></h3>
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>pinLength</code></td>
<td><code>int</code></td>
<td><code>4</code></td>
<td>The length of the PIN to be entered.</td>
</tr>
<tr>
<td><code>buttonColor</code></td>
<td><code>Color</code></td>
<td><code>Colors.blueAccent</code></td>
<td>Sets the background color of the keypad buttons.</td>
</tr>
<tr>
<td><code>buttonTextStyle</code></td>
<td><code>TextStyle</code></td>
<td><code>TextStyle(fontSize: 20, color: Colors.white)</code></td>
<td>Sets the text style of the keypad button labels.</td>
</tr>
<tr>
<td><code>inputShape</code></td>
<td><code>TextStyle</code></td>
<td><code>TextStyle(fontSize: 20, color: Colors.white)</code></td>
<td>Defines the shape of the input boxes.</td>
</tr>
<tr>
<td><code>inputTextStyle</code></td>
<td><code>TextStyle</code></td>
<td><code>TextStyle(fontSize: 20, color: Colors.white)</code></td>
<td>Sets the text style of the input text.</td>
</tr>
<tr>
<td><code>inputFillColor</code></td>
<td><code>TextStyle</code></td>
<td><code>TextStyle(fontSize: 20, color: Colors.white)</code></td>
<td>sets the fill color of input boxes when filled.</td>
</tr>
<tr>
<td><code>keypadBackgroundColor</code></td>
<td><code>TextStyle</code></td>
<td><code>TextStyle(fontSize: 20, color: Colors.white)</code></td>
<td>sets the background color of the keypad container.</td>
</tr>
<tr>
<td><code>doneButtonTextStyle</code></td>
<td><code>TextStyle</code></td>
<td><code>TextStyle(fontSize: 20, color: Colors.white)</code></td>
<td>Sets the text style of the "Done" button.</td>
</tr>
<tr>
<td><code>onComplete</code></td>
<td><code>Function(String)</code></td>
<td>Required</td>
<td>A callback function triggered when the user completes the PIN entry. The entered PIN is passed as a string.</td>
</tr>
<tr>
<td><code>showInput</code></td>
<td><code>bool</code></td>
<td><code>true</code></td>
<td>Determines whether the entered PIN should be visible (<code>true</code>) or masked (<code>false</code>).</td>
</tr>
<tr>
<td><code>isRandom</code></td>
<td><code>bool</code></td>
<td><code>true</code></td>
<td>Determines whether the keypad keys should be randomized.</td>
</tr>
</tbody>
</table>
<h2 class="hash-header" id="customization">Customization <a href="#customization" class="hash-link">#</a></h2>
<ul>
<li><strong>Randomized Keys:</strong> Each time the keyboard is shown, the numeric keys are shuffled to ensure secure PIN entry.</li>
<li><strong>Keyboard Overlay:</strong> The keyboard appears as a dismissible overlay, ensuring it doesn't interfere with the app's layout.</li>
</ul>
<h3 class="hash-header" id="example-of-masked-input">Example of Masked Input <a href="#example-of-masked-input" class="hash-link">#</a></h3>
<p>To hide the PIN input, set <code>showInput</code> to <code>false</code>:</p>
<pre><code class="language-dart">RandomNumberKeypad(
  pinLength: 6,
  onComplete: (pin) {
    print('Entered PIN: $pin');
  },
  showInput: false,
)
</code></pre>
<h2 class="hash-header" id="contributions">Contributions <a href="#contributions" class="hash-link">#</a></h2>
<p>Feel free to contribute by submitting issues or pull requests. All contributions are welcome!</p>
<h2 class="hash-header" id="license">License <<a href="#license" class="hash-link">#</a></h></h2>
<p>This widget is released under the MIT License.</p>
<hr>
<p>Happy coding with <code>RandomNumberKeypad</code>! 🎉</p>
</section>

示例代码

import 'package:flutter/material.dart';
import 'package:random_number_keypad/random_number_keypad.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Random Number Keypad Example',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const RandomPinExample(),
    );
  }
}

class RandomPinExample extends StatelessWidget {
  const RandomPinExample({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.lightGreen,
      appBar: AppBar(title: const Text('Random PIN Keyboard')),
      body: Center(
        child: RandomNumberKeypad(
          inputFillColor: Colors.white,
          inputTextStyle:
              const TextStyle(color: Colors.red, fontWeight: FontWeight.bold),
          doneButtonTextStyle: const TextStyle(color: Colors.deepOrange),
          pinLength: 4,
          inputShape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(50),
          ),
          showInput: true,
          buttonColor: Colors.red,
          buttonTextStyle: const TextStyle(
            fontWeight: FontWeight.bold,
            color: Colors.white,
          ),
          onComplete: (pin) {
            print('Entered PIN: $pin');
            // Add PIN validation logic here.
          },
        ),
      ),
    );
  }
}

更多关于Flutter随机数键盘插件random_number_keypad的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter随机数键盘插件random_number_keypad的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter项目中使用random_number_keypad插件的示例代码。这个插件允许你创建一个带有随机数字生成的键盘，用户可以从生成的数字中选择。

首先，确保你已经在pubspec.yaml文件中添加了random_number_keypad依赖：

dependencies:
  flutter:
    sdk: flutter
  random_number_keypad: ^最新版本号  # 请替换为实际的最新版本号

然后，运行flutter pub get来获取依赖。

接下来是一个完整的示例代码，展示了如何使用random_number_keypad插件：

import 'package:flutter/material.dart';
import 'package:random_number_keypad/random_number_keypad.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Random Number Keypad Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: RandomNumberKeypadScreen(),
    );
  }
}

class RandomNumberKeypadScreen extends StatefulWidget {
  @override
  _RandomNumberKeypadScreenState createState() => _RandomNumberKeypadScreenState();
}

class _RandomNumberKeypadScreenState extends State<RandomNumberKeypadScreen> {
  String selectedNumber = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Random Number Keypad Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Selected Number: $selectedNumber',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 24),
            Expanded(
              child: RandomNumberKeypad(
                onNumberSelected: (String number) {
                  setState(() {
                    selectedNumber = number;
                  });
                },
                // 可选参数，自定义键盘外观和行为
                keypadBackgroundColor: Colors.grey[200],
                buttonBackgroundColor: Colors.blue,
                buttonTextColor: Colors.white,
                buttonSize: 50.0,
                buttonSpacing: 10.0,
                numberOfButtons: 6, // 每行显示的按钮数量
              ),
            ),
          ],
        ),
      ),
    );
  }
}

代码解释：

  1. 依赖导入：

    • 导入random_number_keypad包以及其他必要的Flutter包。

  2. 主应用入口：

    • MyApp是一个无状态组件，它定义了应用程序的主题和主页。

  3. 主页：

    • RandomNumberKeypadScreen是一个有状态组件，用于管理用户选择的数字。
    • selectedNumber字符串用于存储用户从键盘选择的数字。

  4. UI布局：

    • 使用Scaffold创建一个基本的页面布局，包含应用栏和主体内容。
    • 使用Column布局显示选择的数字和键盘。
    • Text组件用于显示当前选择的数字。
    • Expanded组件用于让键盘占据剩余的空间。

  5. 键盘配置：

    • RandomNumberKeypad组件用于显示随机数字键盘。
    • onNumberSelected回调用于处理用户选择的数字。
    • 你可以自定义键盘的外观，如背景颜色、按钮颜色和大小等。

运行这个示例代码，你会看到一个简单的Flutter应用，包含一个显示选定数字的文本和一个随机数字键盘。当用户点击键盘上的数字时，选定的数字会更新显示在屏幕上。

回到顶部