flutter_code_input_fields 1.0.0
flutter_code_input_fields: ^1.0.0 copied to clipboard
Split box-style text fields controlled by a single controller
import 'package:flutter/material.dart';
import 'package:flutter_code_input_fields/flutter_code_input_fields.dart';
void main() => runApp(FlutterCodeInputFieldsDemo());
class FlutterCodeInputFieldsDemo extends StatefulWidget {
FlutterCodeInputFieldsDemo({Key? key}) : super(key: key);
@override
State<FlutterCodeInputFieldsDemo> createState() =>
_FlutterCodeInputFieldsDemoState();
}
class _FlutterCodeInputFieldsDemoState
extends State<FlutterCodeInputFieldsDemo> {
final TextEditingController controller = TextEditingController();
var text = '';
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
backgroundColor: Colors.white,
title: const Text(
'flutter_code_input_fields',
),
),
body: Center(
child: Column(
spacing: 24,
children: [
CodeInputFields(
length: 5,
controller: controller,
onChanged: (value) {
text = value;
setState(() {});
},
spacing: 16,
autofocus: true,
borderRadius: 4,
cursorColor: Colors.black,
activeBorderColor: Colors.green,
enabledBorderColor: Colors.grey,
style: const TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
Text(
text,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.normal,
),
),
],
),
),
),
);
}
}