Code Input Fields

A Flutter widget that provides split box-style text input fields controlled by a single controller. Perfect for verification codes, PIN inputs, and other multi-digit input scenarios.

Features

  • 🔢 Split Box Input: Individual input fields that work as a single unit
  • 🎯 Auto Focus Management: Automatic focus movement between fields
  • 📱 Flexible Configuration: Customizable styling, spacing, and behavior
  • ⚡ Performance Optimized: Efficient rendering with border caching
  • 🎨 Customizable Design: Border colors, widths, radius, and spacing
  • ⌨️ Keyboard Support: Configurable keyboard types and input formatters

Demo

CodeInputFields Demo 1
 CodeInputFields Demo 2

Installation

Flutter pub add:

flutter pub add flutter_code_input_fields

or

Add this package to your pubspec.yaml:

dependencies:
  flutter_code_input_fields: ^1.0.0

Then run:

flutter pub get

Usage

Basic Usage

import 'package:flutter_code_input_fields/flutter_code_input_fields.dart';

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  final TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return CodeInputFields(
      length: 6,
      controller: _controller,
      onChanged: (value) {
        print('Entered code: $value');
      },
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

Custom Styling

CodeInputFields(
  length: 4,
  controller: _controller,
  onChanged: (value) => print('Code: $value'),
  activeBorderColor: Colors.blue,
  enabledBorderColor: Colors.grey,
  borderWidth: 2.0,
  borderRadius: 8.0,
  spacing: 12.0,
  boxWidth: 50.0,
  style: TextStyle(
    fontSize: 18,
    fontWeight: FontWeight.bold,
  ),
)

Numeric Input

CodeInputFields(
  length: 6,
  controller: _controller,
  onChanged: (value) => print('PIN: $value'),
  keyboardType: TextInputType.number,
  inputFormatters: [
    FilteringTextInputFormatter.digitsOnly,
  ],
  activeBorderColor: Colors.green,
  enabledBorderColor: Colors.grey.shade300,
)

Auto Focus

CodeInputFields(
  length: 8,
  controller: _controller,
  onChanged: (value) => print('Code: $value'),
  autofocus: true,
  cursorColor: Colors.blue,
)

How It Works

  • Single Controller: All input fields are managed by one TextEditingController
  • Auto Focus Movement: When 2 characters are entered in a field (except the last), focus automatically moves to the next field
  • Backward Navigation: When a field is cleared, focus moves to the previous field
  • Performance Optimization: Border styles are cached to prevent unnecessary rebuilds

Parameters

Parameter Description Type Required Default
length Number of input fields (1-8) int ✅ -
controller TextEditingController that manages all fields TextEditingController ✅ -
onChanged Callback function when text changes void Function(String)? ✅ -
keyboardType Keyboard type for input fields TextInputType? ❌ null
autofocus Whether to auto-focus on the first field bool? ❌ false
style Text style for input fields TextStyle? ❌ null
inputFormatters List of input formatters List<TextInputFormatter>? ❌ null
activeBorderColor Border color when field has content Color? ❌ Colors.blue
enabledBorderColor Border color when field is empty Color? ❌ Colors.grey
borderWidth Width of the border double? ❌ 2.0
borderRadius Border radius for rounded corners double? ❌ 0.0
spacing Spacing between input fields double? ❌ 8.0
boxWidth Width of each input field double? ❌ 40.0
cursorColor Color of the text cursor Color? ❌ null

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

If you encounter any issues or have questions, please file an issue on the GitHub repository.

Libraries

flutter_code_input_fields