Flutter密码显示隐藏插件show_hide_password的使用

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

Flutter密码显示隐藏插件show_hide_password的使用

插件简介

show_hide_password 是一个Flutter插件，提供了一种简单的方法来在Flutter应用程序中实现密码显示/隐藏功能。该插件允许通过简单的布尔状态切换密码字段的可见性。此外，它还包括一个Flutter Widget，提供了一个带有内置密码切换功能和自定义选项的文本框组件。

demo

平台支持

Android iOS Web MacOS Linux Windows
✅ ✅ ✅ ✅ ✅ ✅

功能特性

  • 在文本框中切换密码的隐藏与显示。
  • 自定义密码可见性切换按钮的图标和大小。
  • 支持自定义 TextField, TextFormField 或其他自定义小部件。
  • 提供带有内置显示/隐藏切换功能的自定义 TextField。
  • 可以根据应用的设计自定义文本框和密码切换按钮的外观。

安装

要在项目中使用此插件，请在 pubspec.yaml 文件中添加 show_hide_password 作为依赖项：

dependencies:
  show_hide_password: ^0.0.2

然后运行 flutter pub get 来安装包。

使用方法

首先，在Dart代码中导入包：

import 'package:show_hide_password/show_hide_password.dart';

ShowHidePassword

ShowHidePassword 组件用于在您的小部件树中实现密码显示/隐藏功能。下面是一个基本用法示例：

ShowHidePassword(
    passwordField: (bool hidePassword){
      return TextField(
        obscureText: hidePassword, // 使用hidePassword状态来切换可见性
      );
    }
)

您可以进一步自定义切换按钮，并提供初始的切换布尔状态。例如：

ShowHidePassword(
  hidePassword: false,
  passwordField: (hidePassword){
      return TextField(
        keyboardType: TextInputType.text,
        controller: controller,
        obscureText: hidePassword,
        decoration: InputDecoration(
          hintText: 'Enter the password',
          enabledBorder: OutlineInputBorder(
            borderSide: BorderSide(color: Colors.black12),
            borderRadius: BorderRadius.circular(12),
          ),
          focusedBorder: OutlineInputBorder(
            borderSide: BorderSide(color: Colors.black38),
            borderRadius: BorderRadius.circular(12),
          ),
        ),
      );
  },
  iconSize: 18,
  visibleOffIcon: Iconsax.eye_slash,
  visibleOnIcon: Iconsax.eye,
)

ShowHidePasswordTextField

ShowHidePasswordTextField 组件是带有内置显示/隐藏切换功能的自定义文本框。使用方式如下：

TextEditingController controller = TextEditingController();

ShowHidePasswordTextField(
  controller: controller,
)

您可以通过各种属性来自定义文本框的外观。例如：

ShowHidePasswordTextField(
  controller: controller,
  fontStyle: const TextStyle(fontSize: 14),
  textColor: Colors.blue,
  hintColor: Colors.lightBlueAccent,
  iconSize: 20,
  visibleOffIcon: Iconsax.eye_slash,
  visibleOnIcon: Iconsax.eye,
  decoration: InputDecoration(
    hintText: 'Enter the password',
    enabledBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.black12),
      borderRadius: BorderRadius.circular(12),
    ),
    focusedBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.black38),
      borderRadius: BorderRadius.circular(12),
    ),
  ),
)

示例Demo

以下是一个完整的示例程序，演示如何在实际应用中使用 show_hide_password 插件：

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:iconsax/iconsax.dart';
import 'package:show_hide_password/show_hide_password.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Show Hide Password Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(useMaterial3: true, textTheme: GoogleFonts.latoTextTheme()),
      home: const MyHomePage(title: 'Create Your Password'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  TextEditingController controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: [
          SizedBox(height: size.height * 0.01),
          SizedBox(
            width: size.width * 0.9,
            child: Text(
              'Set a Password',
              style: Theme.of(context).textTheme.titleLarge!.copyWith(fontWeight: FontWeight.w600),
            ),
          ),
          SizedBox(height: size.height * 0.02),
          SizedBox(
            width: size.width * 0.9,
            child: Text(
              'Please create a secure password including the following criteria below',
              style: Theme.of(context).textTheme.titleMedium,
            ),
          ),
          SizedBox(height: size.height * 0.02),
          SizedBox(
            width: size.width * 0.9,
            child: ShowHidePasswordTextField(
              controller: controller,
            ),
          ),
          SizedBox(height: size.height * 0.02),
          SizedBox(
            width: size.width * 0.9,
            child: ShowHidePasswordTextField(
              controller: controller,
              fontStyle: const TextStyle(fontSize: 14, height: 1.4),
              textColor: Colors.blue,
              hintColor: Colors.lightBlueAccent,
              iconSize: 20,
              visibleOffIcon: Iconsax.eye_slash,
              visibleOnIcon: Iconsax.eye,
              decoration: InputDecoration(
                isDense: true,
                hintText: 'Enter the password',
                hintStyle: Theme.of(context).textTheme.labelMedium!.copyWith(
                    color: Colors.black38,
                    fontWeight: FontWeight.w500,
                    fontSize: 12),
                enabledBorder: OutlineInputBorder(
                  borderSide: const BorderSide(color: Colors.black12, width: 1),
                  borderRadius: BorderRadius.circular(12),
                ),
                focusedBorder: OutlineInputBorder(
                  borderSide: const BorderSide(color: Colors.black38, width: 1),
                  borderRadius: BorderRadius.circular(12),
                ),
              ),
            ),
          ),
          const SizedBox(height: 16),
          SizedBox(
            width: size.width * 0.9,
            child: ShowHidePassword(
              hidePassword: false,
              passwordField: (hidePassword) {
                return TextField(
                  keyboardType: TextInputType.text,
                  controller: controller,
                  obscureText: hidePassword,
                  decoration: InputDecoration(
                    isDense: true,
                    hintText: 'Enter the password',
                    hintStyle: Theme.of(context).textTheme.labelMedium!.copyWith(
                          color: Colors.black38,
                          fontWeight: FontWeight.w500,
                        ),
                    enabledBorder: OutlineInputBorder(
                      borderSide: const BorderSide(color: Colors.black12, width: 1),
                      borderRadius: BorderRadius.circular(12),
                    ),
                    focusedBorder: OutlineInputBorder(
                      borderSide: const BorderSide(color: Colors.black38, width: 1),
                      borderRadius: BorderRadius.circular(12),
                    ),
                    counterText: "",
                    contentPadding: EdgeInsets.symmetric(
                        vertical: size.height * 0.018,
                        horizontal: size.width * 0.04),
                  ),
                  style: Theme.of(context).textTheme.labelMedium!.copyWith(
                        color: Colors.black87,
                        fontWeight: FontWeight.w500,
                      ),
                );
              },
              iconSize: 18,
              visibleOffIcon: Iconsax.eye_slash,
              visibleOnIcon: Iconsax.eye,
            ),
          )
        ],
      ),
    );
  }
}

这个示例展示了如何创建一个包含密码输入框的应用界面，用户可以点击眼睛图标来切换密码的显示与隐藏。希望这段代码能够帮助您更好地理解和使用 show_hide_password 插件。如果您有任何问题或建议，请随时查阅GitHub仓库并提交反馈。


更多关于Flutter密码显示隐藏插件show_hide_password的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter密码显示隐藏插件show_hide_password的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter中使用show_hide_password插件来实现密码显示和隐藏功能的示例代码。这个插件允许你在密码输入框旁边添加一个按钮，用于切换密码的可见性。

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

dependencies:
  flutter:
    sdk: flutter
  show_hide_password: ^3.0.0  # 请确保版本号是最新的

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

接下来，你可以在你的Flutter项目中按照以下方式使用ShowHidePassword组件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Password Show/Hide Example'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              TextField(
                decoration: InputDecoration(
                  labelText: 'Email',
                ),
              ),
              SizedBox(height: 16),
              ShowHidePassword(
                obscureText: true, // 初始状态为隐藏密码
                controller: TextEditingController(),
                decoration: InputDecoration(
                  labelText: 'Password',
                  suffixIcon: Icon(Icons.visibility_outlined), // 这里通常放置默认图标，实际图标由ShowHidePassword管理
                ),
                onChanged: (value) {
                  // 可以在这里处理密码文本的变化，如果需要的话
                },
                onSuffixTap: () {
                  // 这里的回调是可选的，通常不需要，因为ShowHidePassword会处理图标的点击事件
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个示例中，ShowHidePassword组件被用来替代标准的TextField。它接受几个参数：

  • obscureText: 一个布尔值，表示初始时密码是否隐藏。
  • controller: 一个TextEditingController，用于管理文本输入。
  • decoration: InputDecoration，用于定义输入框的外观，比如标签文本和图标（尽管图标的显示和隐藏由ShowHidePassword自动处理）。
  • onChanged: 一个可选的回调，当文本改变时被调用。
  • onSuffixTap: 一个可选的回调，当点击后缀图标时被调用（通常不需要，因为ShowHidePassword已经处理了图标的点击事件）。

这个插件会自动处理密码可见性的切换，并且会在输入框的右侧添加一个切换密码可见性的图标。

希望这个示例能帮助你理解如何在Flutter项目中使用show_hide_password插件来实现密码显示和隐藏功能。

回到顶部