Flutter密码确认样式插件`password_confirmation_style`的使用

概述

password_confirmation_style 包可以帮助你验证密码是否匹配，并在不匹配时禁用登录按钮。

如何使用

1. 在你的项目中添加依赖

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  password_confirmation_style: &lt;latest&gt;

2. 安装依赖

从命令行运行以下命令来安装依赖：

flutter pub get

3. 使用插件

导入包

首先，在你的 Dart 文件中导入包：

import 'package:password_confirmation_style/password_confirmation_style.dart';

调用组件

然后，在你的类中调用 PasswordConfirmationStyle 组件：

PasswordConfirmationStyle(
    passwordConfirmationController: _confirmPasswordController,
    passwordController: _passwordController,
    isTrue: _getComparaison,
),

所有属性

以下是 PasswordConfirmationStyle 的所有属性：

[passwordController]: 管理密码文本框的控制器。
[passwordConfirmationController]: 管理确认密码文本框的控制器。
[iconColorMatched]: 匹配字符的颜色（默认为绿色）。
[iconColorUnMatched]: 不匹配字符的颜色（默认为红色）。
[iconColorInitial]: 输入前的初始颜色（默认为透明）。
[icon]: 每个字符的图标（默认为一个圆圈）。
[iconSize]: 图标的大小（默认为9.0）。
[iconPaddingVertical]: 图标的垂直填充（默认为1.0）。
[iconPaddingHorizontal]: 图标的水平填充（默认为1.0）。
[isTrue]: 返回布尔值的回调函数，指示密码是否匹配。
[stylePassword]: 密码文本框的样式。
[stylePasswordConfirmation]: 确认文本框的样式。
[inputDecorationPassword]: 密码字段的装饰。
[inputDecorationPasswordConfirmation]: 确认字段的装饰。
[validatorPassword]: 密码字段的验证器。
[validatorPasswordConfirmation]: 确认字段的验证器。
[onChangedPassword]: 密码更改的回调。
[onChangedPasswordConfirmation]: 确认更改的回调。
[onTapPassword]: 密码字段点击的回调。
[onTapPasswordConfirmation]: 确认字段点击的回调。
[onEditionCompletePassword]: 密码编辑完成的回调。
[onEditionCompletePasswordConfirmation]: 确认编辑完成的回调。
[onFieldSubmittedPassword]: 密码提交的回调。
[onFieldSubmittedPasswordConfirmation]: 确认提交的回调。
[maxLengthPassword]: 密码输入的最大长度。
[obscuringCharacterPassword]: 隐藏密码使用的字符。
[obscuringCharacterPasswordConfirmation]: 隐藏确认使用的字符。
[obscureTextPassword]: 是否隐藏密码文本（默认为false）。
[obscureTextPasswordConfirmation]: 是否隐藏确认文本（默认为false）。
[focusNodePassword]: 密码字段的焦点节点。
[focusNodePasswordConfirmation]: 确认字段的焦点节点。
[showCursorPassword]: 是否在密码字段中显示光标。
[showCursorPasswordConfirmation]: 是否在确认字段中显示光标。
[enabledPassword]: 密码字段是否启用。
[enabledPasswordConfirmation]: 确认字段是否启用。
[cursorWidthPassword]: 密码字段光标的宽度。
[cursorWidthPasswordConfirmation]: 确认字段光标的宽度。
[cursorHeightPassword]: 密码字段光标的高度。
[cursorHeightPasswordConfirmation]: 确认字段光标的高度。
[cursorColorPassword]: 密码字段光标的颜色。
[cursorColorPasswordConfirmation]: 确认字段光标的颜色。
[scrollPaddingPassword]: 密码字段滚动填充。
[scrollPaddingPasswordConfirmation]: 确认字段滚动填充。

示例项目

你可以使用以下示例项目来查看如何使用它：示例项目

它受到以下组件的启发：Assisted Password Confirmation，该组件由 Leonel Ngoya 开发。

示例代码

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

/// 主应用的入口点。
void main() {
  runApp(const MyApp());
}

/// 应用程序的根部件。
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // 使用带有种子颜色的颜色方案以实现一致的主题。
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const TestPage(),
    );
  }
}

/// 用于演示 [PasswordConfirmationStyle] 小部件的使用。
///
/// 此页面包含两个密码输入字段，允许用户输入密码和确认密码。它根据密码是否匹配更新UI，提供用户交互的视觉反馈。
///
/// [TestPage] 小部件使用 [PasswordConfirmationStyle] 来管理密码确认，并且根据匹配状态更改按钮的颜色。
class TestPage extends StatefulWidget {
  /// 创建一个 [TestPage] 小部件。
  const TestPage({super.key});

  [@override](/user/override)
  State<TestPage> createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {
  /// 密码文本框的控制器。
  final TextEditingController _passwordController = TextEditingController();

  /// 确认密码文本框的控制器。
  final TextEditingController _confirmPasswordController = TextEditingController();

  /// 指示密码和确认是否匹配。
  bool _isTrue = false;

  /// 根据密码比较结果更新 [_isTrue] 状态。
  ///
  /// 此方法由 [PasswordConfirmationStyle] 小部件调用，当密码比较发生变化时更新UI。
  void _getComparaison(bool isTrue) {
    setState(() {
      _isTrue = isTrue;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: [
          // 密码确认小部件
          PasswordConfirmationStyle(
            passwordConfirmationController: _confirmPasswordController,
            passwordController: _passwordController,
            isTrue: _getComparaison,
          ),
          // 根据密码匹配状态更改颜色的按钮
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
            height: 44,
            decoration: BoxDecoration(
              color: _isTrue ? const Color(0xFF007A77) : Colors.grey,
              border: Border.all(color: _isTrue ? const Color(0xFF007A77) : Colors.grey),
              borderRadius: BorderRadius.circular(8),
            ),
            child: const Center(
              child: Text(
                "Connect",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 15,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

更多关于Flutter密码确认样式插件password_confirmation_style的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

yuanlaile 1楼

更多关于Flutter密码确认样式插件password_confirmation_style的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

在Flutter中，password_confirmation_style 是一个用于处理密码确认输入样式的插件。它通常用于确保用户在注册或更改密码时，两次输入的密码一致，并提供相应的样式反馈。

安装插件

首先，你需要在 pubspec.yaml 文件中添加 password_confirmation_style 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  password_confirmation_style: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

使用插件

以下是一个简单的示例，展示了如何使用 password_confirmation_style 插件来创建一个带有密码确认功能的表单。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Password Confirmation Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: PasswordConfirmationScreen(),
    );
  }
}

class PasswordConfirmationScreen extends StatefulWidget {
  [@override](/user/override)
  _PasswordConfirmationScreenState createState() => _PasswordConfirmationScreenState();
}

class _PasswordConfirmationScreenState extends State<PasswordConfirmationScreen> {
  final _formKey = GlobalKey<FormState>();
  final _passwordController = TextEditingController();
  final _confirmPasswordController = TextEditingController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Password Confirmation'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: <Widget>[
              TextFormField(
                controller: _passwordController,
                obscureText: true,
                decoration: InputDecoration(
                  labelText: 'Password',
                ),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter a password';
                  }
                  return null;
                },
              ),
              SizedBox(height: 16.0),
              PasswordConfirmationTextField(
                passwordController: _passwordController,
                confirmPasswordController: _confirmPasswordController,
                obscureText: true,
                decoration: InputDecoration(
                  labelText: 'Confirm Password',
                ),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please confirm your password';
                  }
                  if (value != _passwordController.text) {
                    return 'Passwords do not match';
                  }
                  return null;
                },
              ),
              SizedBox(height: 24.0),
              ElevatedButton(
                onPressed: () {
                  if (_formKey.currentState!.validate()) {
                    // If the form is valid, display a Snackbar.
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(content: Text('Processing Data')),
                    );
                  }
                },
                child: Text('Submit'),
              ),
            ],
          ),
        ),
      ),
    );
  }

  [@override](/user/override)
  void dispose() {
    _passwordController.dispose();
    _confirmPasswordController.dispose();
    super.dispose();
  }
}