Flutter自定义密码键盘插件custom_pin_keyboard的使用

当然，下面是一个关于如何在Flutter项目中使用custom_pin_keyboard插件的代码示例。这个插件允许你创建一个自定义的密码键盘，非常适合需要PIN输入功能的场景，比如登录、支付确认等。

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

dependencies:
  flutter:
    sdk: flutter
  custom_pin_keyboard: ^x.y.z  # 请替换为最新版本号

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

接下来，在你的Flutter项目中创建一个新的Dart文件（例如pin_entry_screen.dart），并在其中实现自定义密码键盘。以下是一个简单的实现示例：

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

class PinEntryScreen extends StatefulWidget {
  @override
  _PinEntryScreenState createState() => _PinEntryScreenState();
}

class _PinEntryScreenState extends State<PinEntryScreen> {
  String _pin = '';
  final TextEditingController _pinController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('PIN Entry Screen'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Enter your PIN:',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 20),
            CustomPinKeyboard(
              pinLength: 6,
              controller: _pinController,
              onCompleted: (pin) {
                setState(() {
                  _pin = pin;
                });
                // 在这里处理PIN输入完成后的逻辑，比如验证PIN
                print('PIN entered: $_pin');
              },
              onDeleted: () {
                // 可选：处理删除逻辑
                print('PIN deleted');
              },
              onTextChanged: (text) {
                // 可选：处理文本变化逻辑
                print('PIN text changed: $text');
              },
              keyboardType: TextInputType.number,
              autoFocus: true,
              pinWidget: (
                context,
                pin,
                index,
                focused,
              ) {
                return Container(
                  margin: EdgeInsets.symmetric(horizontal: 4.0),
                  decoration: BoxDecoration(
                    border: Border.all(
                      color: focused ? Colors.blue : Colors.grey,
                      width: 2.0,
                    ),
                    borderRadius: BorderRadius.circular(8.0),
                  ),
                  constraints: BoxConstraints(
                    minWidth: 40,
                    minHeight: 40,
                  ),
                  alignment: Alignment.center,
                  child: Text(
                    pin.isEmpty ? '' : pin,
                    style: TextStyle(
                      fontSize: 24,
                      color: focused ? Colors.blue : Colors.black,
                    ),
                  ),
                );
              },
              buttonWidget: (
                context,
                index,
                isLast,
                onPressed,
              ) {
                return ElevatedButton(
                  onPressed: onPressed,
                  child: Text(
                    isLast ? 'Done' : index.toString(),
                    style: TextStyle(fontSize: 20),
                  ),
                  style: ButtonStyle(
                    shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                      RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(8.0),
                      ),
                    ),
                    backgroundColor: MaterialStateProperty.resolveWith<Color>(
                      (Set<MaterialState> states) {
                        if (states.contains(MaterialState.pressed)) {
                          return Colors.blue.withOpacity(0.8);
                        }
                        return Colors.blue;
                      },
                    ),
                  ),
                );
              },
              deleteButtonWidget: (
                context,
                onPressed,
              ) {
                return ElevatedButton(
                  onPressed: onPressed,
                  child: Icon(
                    Icons.backspace,
                    color: Colors.white,
                  ),
                  style: ButtonStyle(
                    shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                      RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(8.0),
                      ),
                    ),
                    backgroundColor: MaterialStateProperty.all<Color>(Colors.grey),
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个PinEntryScreen页面，其中包含了一个CustomPinKeyboard组件。我们定义了PIN的长度为6，并提供了PIN输入完成、删除和文本变化的回调函数。同时，我们还自定义了PIN输入框和按钮的样式。

最后，你需要在你的主页面（例如main.dart）中引入并使用这个PinEntryScreen：

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

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

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

这样，你就可以在你的Flutter应用中看到一个自定义的PIN键盘了。用户可以在这个键盘上输入PIN，并且你可以根据需要在回调函数中处理PIN输入的逻辑。