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