Flutter中如何使用pinput: ^5.0.2插件

在Flutter项目中集成pinput: ^5.0.2插件时遇到问题，具体表现为：

  1. 按照文档添加依赖后，运行项目提示版本冲突
  2. 尝试自定义输入框样式时，OTP验证码无法正确显示
  3. 监听onCompleted事件时回调不触发
    请问该如何正确配置这个插件？是否需要额外设置MaterialApp或CupertinoApp的某些参数？求完整的使用示例代码
2 回复

在Flutter中使用pinput插件，首先在pubspec.yaml中添加依赖：

dependencies:
  pinput: ^5.0.2

然后运行flutter pub get。在代码中导入：

import 'package:pinput/pinput.dart';

使用示例：

Pinput(
  length: 6,
  onCompleted: (pin) {
    print(pin);
  },
)

主要属性：length（长度）、onCompleted（完成回调）、obscureText（隐藏输入）等。

更多关于Flutter中如何使用pinput: ^5.0.2插件的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中使用 pinput: ^5.0.2 插件可以创建美观的PIN码输入框。以下是基本使用方法：

1. 添加依赖

在 pubspec.yaml 中添加：

dependencies:
  pinput: ^5.0.2

然后运行 flutter pub get

2. 基本使用示例

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

class PinInputExample extends StatefulWidget {
  @override
  _PinInputExampleState createState() => _PinInputExampleState();
}

class _PinInputExampleState extends State<PinInputExample> {
  final pinController = TextEditingController();
  final focusNode = FocusNode();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Pinput(
          length: 6, // PIN码长度
          controller: pinController,
          focusNode: focusNode,
          onCompleted: (pin) {
            print('输入的PIN码: $pin');
            // 处理完成的PIN码
          },
        ),
      ),
    );
  }
}

3. 自定义样式

Pinput(
  length: 4,
  defaultPinTheme: PinTheme(
    width: 56,
    height: 56,
    textStyle: TextStyle(
      fontSize: 20,
      color: Colors.black,
      fontWeight: FontWeight.w600,
    ),
    decoration: BoxDecoration(
      border: Border.all(color: Colors.grey),
      borderRadius: BorderRadius.circular(8),
    ),
  ),
  focusedPinTheme: PinTheme(
    width: 56,
    height: 56,
    decoration: BoxDecoration(
      border: Border.all(color: Colors.blue),
      borderRadius: BorderRadius.circular(8),
    ),
  ),
  submittedPinTheme: PinTheme(
    width: 56,
    height: 56,
    decoration: BoxDecoration(
      border: Border.all(color: Colors.green),
      borderRadius: BorderRadius.circular(8),
    ),
  ),
)

4. 常用属性说明

  • length: PIN码长度
  • controller: 文本控制器
  • focusNode: 焦点控制
  • onCompleted: 输入完成回调
  • obscureText: 是否隐藏输入内容
  • keyboardType: 键盘类型
  • validator: 验证函数

这个插件提供了丰富的自定义选项，可以根据应用主题灵活调整样式。

回到顶部