Flutter密码输入插件fl_pin_code的使用

Flutter密码输入插件fl_pin_code的使用

fl_pin_code 插件帮助你在 Flutter 应用程序中显示 PIN 码。

特性 👇👇

• 隐藏支持
• 自动移动焦点
• 字段形状（框、下划线）
• null 安全

安装 🔧

安装 fl_pin_code 的最新版本。

1. 添加依赖

在你的项目 pubspec.yaml 文件中添加以下依赖：

dependencies:
  fl_pin_code: ^0.0.9

2. 获取依赖

你可以通过命令行来安装包：

flutter packages get

或者，如果你使用的是编辑器，可能支持 flutter packages get。请查看你的编辑器文档以了解更多详情。

3. 导入插件

在 Dart 代码中导入 fl_pin_code：

import 'package:fl_pin_code/fl_pin_code.dart';

使用示例

以下是使用 fl_pin_code 的一些示例代码：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'fl_pin_code demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Home Page'),
    );
  }
}

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

  final String? title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _passwordObscureText = true;

  void showModalPinBottomSheet() {
    showModalBottomSheet(
      isScrollControlled: true,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(25),
          topRight: Radius.circular(25),
        ),
      ),
      context: context,
      builder: (_) {
        return Container(
          padding: EdgeInsets.only(bottom: 5),
          margin: EdgeInsets.symmetric(horizontal: 20),
          child: SingleChildScrollView(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                SizedBox(height: 10),
                PinCode(
                  numberOfFields: 5,
                  fieldWidth: 40.0,
                  style: TextStyle(color: Colors.black, fontSize: 15),
                  fieldStyle: PinCodeStyle.box,
                  onCompleted: (text) {
                    if (text.trim() == "11111") {
                      setState(() {
                        _passwordObscureText = false;
                      });
                    } else {
                      ScaffoldMessenger.of(context).showSnackBar(
                        SnackBar(content: Text('Please insert 11111 to unlock')),
                      );
                    }
                    Navigator.of(context).pop();
                  },
                ),
              ],
            ),
          ),
        );
      },
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title!),
      ),
      body: Padding(
        padding: EdgeInsets.all(10),
        child: Builder(
          builder: (context) {
            return Form(
              key: UniqueKey(),
              child: SingleChildScrollView(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    SizedBox(height: 20),
                    TextFormField(
                      readOnly: true,
                      showCursor: false,
                      obscureText: _passwordObscureText,
                      initialValue: 'A_asdw[jd%_*klmdn',
                      decoration: InputDecoration(
                        suffixIcon: IconButton(
                          onPressed: () {
                            setState(() {
                              if (_passwordObscureText) {
                                showModalPinBottomSheet();
                              } else {
                                _passwordObscureText = true;
                              }
                            });
                          },
                          icon: Icon(
                            _passwordObscureText
                                ? Icons.visibility_off
                                : Icons.visibility,
                          ),
                          iconSize: 18.0,
                        ),
                      ),
                    ),
                    SizedBox(height: 15),
                  ],
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}