Giter Site home page Giter Site logo

flutter_verification_box's Introduction

引入

dependencies:
  flutter_verification_box: ^2.0.0

导入包:

import 'package:flutter_verification_box/verification_box.dart';

使用

Container(
  height: 45,
  child: VerificationBox(),
)

效果如下:

设置验证码的数量,比如设置4个:

VerificationBox(
  count: 4,
)

效果如下:

设置样式,包括边框的颜色、宽度、圆角:

VerificationBox(
  borderColor: Colors.lightBlue,
  borderWidth: 3,
  borderRadius: 50,
)

效果如下:

除了“盒子”样式,还支持下划线样式:

VerificationBox(
  type: VerificationBoxItemType.underline,
)

效果如下:

设置数字的样式:

VerificationBox(
  textStyle: TextStyle(color: Colors.lightBlue),
)

效果如下:

显示光标,设置光标样式:

VerificationBox(
  showCursor: true,
  cursorWidth: 2,
  cursorColor: Colors.red,
  cursorIndent: 10,
  cursorEndIndent: 10,
)

效果如下:

还可以设置光标为整个边框,如下:

VerificationBox(
  focusBorderColor: Colors.lightBlue,
)

效果如下:

终极大招,如果你觉得这个效果不好,你可以自定义decoration

VerificationBox(
    decoration: BoxDecoration(
      image: DecorationImage(image: AssetImage('images/box.png')),
    ),
    textStyle: TextStyle(color: Colors.lightBlue),
  ),
)

效果如下:

验证码输入完成后回调onSubmitted,用法如下:

VerificationBox(
  onSubmitted: (value){
    print('$value');
  },
)

输入完成后,默认键盘消失,设置为不消失,代码如下:

VerificationBox(
  unfocus: false,
)

flutter_verification_box's People

Contributors

laomengflutter avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

flutter_verification_box's Issues

报错

报错信息:
Error: The method 'WhitelistingTextInputFormatter' isn't defined for the class '_VerificationBox'.

  • '_VerificationBox' is from 'package:flutter_verification_box/src/verification_box.dart' ('/C:/SelfInstallSoftware/flutterSdk/flutter/.pub-cache/hosted/pub.flutter-io.cn/flutter_verification_box-2.0.0/lib/src/verification_box.dart').
    Try correcting the name to the name of an existing method, or defining a method named 'WhitelistingTextInputFormatter'.
    WhitelistingTextInputFormatter(RegExp("[0-9]")),
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

android会显示光标

Android手机,首次输入不显示光标,当输入错误时,重新唤起软键盘,删除重新输入验证码时,会出现光标

Flutter升级到2.8后编译出错了

Launching lib\main.dart on LIO AN00 in debug mode...
Running Gradle task 'assembleDebug'...
/C:/src/flutter/.pub-cache/hosted/pub.flutter-io.cn/flutter_verification_box-2.0.0/lib/src/verification_box.dart:196:9: Error: The method 'WhitelistingTextInputFormatter' isn't defined for the class '_VerificationBox'.

  • '_VerificationBox' is from 'package:flutter_verification_box/src/verification_box.dart' ('/C:/src/flutter/.pub-cache/hosted/pub.flutter-io.cn/flutter_verification_box-2.0.0/lib/src/verification_box.dart').
    Try correcting the name to the name of an existing method, or defining a method named 'WhitelistingTextInputFormatter'.
    WhitelistingTextInputFormatter(RegExp("[0-9]")),
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

FAILURE: Build failed with an exception.

  • Where:
    Script 'C:\src\flutter\packages\flutter_tools\gradle\flutter.gradle' line: 1070

  • What went wrong:
    Execution failed for task ':app:compileFlutterBuildDebug'.

Process 'command 'C:\src\flutter\bin\flutter.bat'' finished with non-zero exit value 1

  • Try:
    Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

  • Get more help at https://help.gradle.org

BUILD FAILED in 16s
Exception: Gradle task assembleDebug failed with exit code 1

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.