Code Fields πŸ”’

A package that allows you to create code fields with customization options for Flutter. It can be useful for OTP and other verification methods.


Example image

⚑️ Features

  • Automatically focuses the next field on typing.
  • Automatically focuses the previous field on deletation.
  • Controller to clear or set a code.
  • Option to change the length.
  • Option to change the height and width.
  • Default cursor support.
  • Default error message.
  • Form validation.
  • Autofocus option.
  • Auto close keyboard on finish option.
  • On change callback function.
  • On completed callback function.
  • And more!

πŸ“Œ Simple Usage

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text("CodeFields example"),
        ),
        body: Center(
          child: CodeFields(
            length: codeLength,
          ),
        ),
      ),
    );
  }

πŸ“Œ Custom Usage

Options that allow for more control:

PropertiesTypeDescription
lengthintCode length.
controllerCodeFieldsControllerAllows you to clear or set a code.
fieldWidthdoubleWidth of each TextFormField.
The default width is 60px.
fieldHeightdoubleHeight of each TextFormField.
The default width is 60px.
keyboardTypeTextInputTypeType of keyboard that shows up.
The default keyboard type is TextInputType.number.
inputDecorationInputDecorationAllows you to customize the TextFormFields.
textStyleTextStyleThe text style of the TextFormFields.
marginEdgeInsetsThe margin between each TextFormField.
The default margin is EdgeInsets.symmetric(horizontal: 8.0).
validatorFormFieldValidator<​String>An optional method that validates an input. Returns an error string to display if the input is invalid, or null otherwise.
The returned value is displayed in the center of all TextFormField.
onChangedFunction(String)The callback function that is executed when the entered code changes. Returns a string with the current code.
onCompletedFunction(String)The callback function that is executed when the length of the entered code is complete. Returns a string with the current code.
closeOnFinishboolOption that closes the keyboard when the code is finished entering. The default value is true.
autofocusboolSelect the first TextFormField and display the keyboard when it is built. The default value is false.

πŸ“Œ Changing the Style


Example image

You must change the inputDecoration property:

  CodeFields(
    length: 4,
    inputDecoration: InputDecoration(
      filled: true,
      fillColor: Colors.grey.withOpacity(0.2),
                    
      enabledBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(24.0),
        borderSide: BorderSide(color: Colors.transparent)
      ),

      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(24.0),
      ),
    ),
  )

πŸ“Œ Using the Validator


Example image

1. Create a function with the validation rules. Returns a string with the error or null for the normal state.

  String validateCode(String code){
    if(code.length < 4) return "Please complete the code";
    else{
      bool isNumeric = int.tryParse(code) != null;
      if(!isNumeric) return "Please enter a valid code";
    }
    return null;
  }

2. Wrap the CodeFields widget with a Form and define a key.

  final formKey = GlobalKey<FormState>();
  Form(
    key: formKey,
    child: CodeFields(
      length: 4,
    )
  )

3. Calls the form validation when the button is pressed.

  FlatButton(
    child: Text("Validate code"),
    onPressed: () {
      if(formKey.currentState.validate()){
        formKey.currentState.save();
      }
    },
  )

πŸ“Œ Using the CodeFieldsController

  final CodeFieldsController _controller = new CodeFieldsController();

FunctionsTypeDescription
clearCode()voidClear the code from all TextFields.
setCode()Function(int code)Set a code in all TextFields. The length of the code must be equal to that defined in the widget's length property.


βš™οΈ Installation

Add this to your package's pubspec.yaml file:

dependencies:
  code_fields: ^0.0.3

Install it:

$ flutter pub get

Import the package in your project:

import 'package:code_fields/code_fields.dart';

Libraries

code_fields