Flutter密码输入插件hb_password_input_textfield的使用

特性

开始使用

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

dependencies:
  hb_password_input_textfield: ^1.0.1

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

使用方法

完整示例代码

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // 这个小部件是你的应用的根节点。
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(
        title: "MyHomePage",
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  final TextEditingController _controller = TextEditingController();
  final FocusNode _node = FocusNode();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: GestureDetector(
          behavior: HitTestBehavior.opaque,
          onTap: () {
            _node.unfocus();
          },
          child: Container(
            margin: const EdgeInsets.only(top: 50),
            child: HBPasswordInputTextField(
              backgroundColor: Colors.white,
              fillColor: Colors.red,
              borderWidth: 0.5,
              borderRaiuds: 5,
              controller: _controller,
              node: _node,
              obscureText: true,
              obscureTextString: "🤪",
              boxWidth: 50,
              boxHeight: 50,
              type: HBPasswordInputTextFieldType.BOXES,
              length: 6,
              textStyle: const TextStyle(fontSize: 20),
              onChange: (text) {
                if (text.length == 6) {
                  _node.unfocus();
                }
              },
              borderColor: Colors.grey,
              spacing: 10,
            ),
          )),
    );
  }
}

代码解释

1. 导入必要的包

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

2. 创建应用入口

   void main() {
     runApp(const MyApp());
   }
   
   class MyApp extends StatelessWidget {
     const MyApp({Key? key}) : super(key: key);
   
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Flutter Demo',
         theme: ThemeData(
           primarySwatch: Colors.blue,
         ),
         home: const MyHomePage(
           title: "MyHomePage",
         ),
       );
     }
   }

3. 定义主页面

   class MyHomePage extends StatefulWidget {
     const MyHomePage({Key? key, required this.title}) : super(key: key);
   
     final String title;
   
     @override
     State<MyHomePage> createState() => _MyHomePageState();
   }

4. 实现主页面的状态管理

   class _MyHomePageState extends State<MyHomePage> {
     final TextEditingController _controller = TextEditingController();
     final FocusNode _node = FocusNode();
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text(widget.title),
         ),
         body: GestureDetector(
             behavior: HitTestBehavior.opaque,
             onTap: () {
               _node.unfocus();
             },
             child: Container(
               margin: const EdgeInsets.only(top: 50),
               child: HBPasswordInputTextField(
                 backgroundColor: Colors.white,
                 fillColor: Colors.red,
                 borderWidth: 0.5,
                 borderRaiuds: 5,
                 controller: _controller,
                 node: _node,
                 obscureText: true,
                 obscureTextString: "🤪",
                 boxWidth: 50,
                 boxHeight: 50,
                 type: HBPasswordInputTextFieldType.BOXES,
                 length: 6,
                 textStyle: const TextStyle(fontSize: 20),
                 onChange: (text) {
                   if (text.length == 6) {
                     _node.unfocus();
                   }
                 },
                 borderColor: Colors.grey,
                 spacing: 10,
               ),
             )),
       );
     }
   }