Flutter验证码输入插件auth_code_textfield的使用

Flutter验证码输入插件auth_code_textfield的使用

简介

flutter_auth_code_textfield 是一个用于在 Flutter 应用中实现验证码输入功能的自定义 Widget。它支持 Android 和 iOS 平台，并且提供了两种不同的样式：单个项目的模式（类似于 Keep）和底部线模式（类似于钉钉）。

使用方法

单个项目模式（Single Item Mode）

这种模式下的验证码输入框看起来像 Keep 的验证码输入框。

AuthCodeTextfield(
  mode: AuthCodeMode.singleItem,
  itemWidth: 50,
  itemHeight: 50,
  itemSpacing: 35 * scaleWidth,
  itemBackgroundColor: Color.fromRGBO(120, 114, 127, 1),
  textColor: Colors.white,
  cursorColor: Color.fromRGBO(94, 178, 138, 1),
  onChanged: (s) {
    setState(() {
      _inputText = s;
    });
  },
)

底部线模式（Bottom Line Mode）

这种模式下的验证码输入框看起来像钉钉的验证码输入框。

AuthCodeTextfield(
  mode: AuthCodeMode.bottomLine,
  itemWidth: 50,
  itemHeight: 60,
  itemSpacing: 35 * scaleWidth,
  itemBottomLineColor: Color.fromRGBO(229, 231, 233, 1),
  cursorWidth: 1,
  cursorHeight: 30,
  onChanged: (s) {
    _inputText = s;
    if (s.toString().length >= 4 && widget.onSubmited != null) {
      widget.onSubmited(_inputText);
      Navigator.pop(context);
    }
  },
)

安装与配置

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

   dependencies:
     auth_code_textfield: ^0.0.2
   

   如果你需要支持 Flutter 2.0 的 null safety，可以使用以下版本：

   dependencies:
     auth_code_textfield: ^2.0.0
   

2. 在你的项目中导入并使用该库：

   import 'package:flutter/material.dart';
   import 'package:flutter/services.dart';
   import 'package:flutter_auth_code_textfield/auth_code_textfield.dart';
   

示例代码

下面是一个完整的示例代码，展示了如何在 Flutter 应用中使用 flutter_auth_code_textfield 插件。

import 'package:flutter/material.dart';
import 'package:flutter_auth_code_textfield/auth_code_textfield.dart';
import 'package:flutter/services.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo 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> {
  String _receiveCode = '';

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        brightness: Brightness.dark,
        title: Text(widget.title ?? ""),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Receive code : $_receiveCode'),
            SizedBox(height: 20),
            Container(
              width: 200,
              height: 44,
              child: ElevatedButton(
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (_) => ItemLoginDemoPage(
                        onSubmited: (s) {
                          _receiveCode = s;
                          setState(() {});
                        },
                      ),
                    ),
                  );
                },
                child: Text('Item Mode Demo'),
              ),
            ),
            SizedBox(height: 20),
            Container(
              width: 200,
              height: 44,
              child: ElevatedButton(
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (_) => BottomLineLoginPage(
                        onSubmited: (s) {
                          _receiveCode = s;
                          setState(() {});
                        },
                      ),
                    ),
                  );
                },
                child: Text('Bottom Line Mode Demo'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}