Connecting multiple text fields to act like a single field in Flutter - flutter

Question

We are busy creating a mobile application in Flutter that relates to credit cards. In our design, we have planned to capture the numeric fields for the card in VIN number and expiry date using 4 separate fields, as shown in the below image (I am sure you have seen similar implementations on other apps):
What is important here is that these 4 fields still need to act like a single field, namely if you type it needs to jump to the next one, if you delete or press left it needs to jump to the previous one.
We have tried two different approaches that are both giving us issues:
Use four different fields - This worked somewhat well, but became buggy really fast when the user deletes or tried to navigate between numbers.
Use a single input field with expanded letterSpacing four lines drawn underneath - This again works somewhat well, but since the font we are using is not monospaced (letters and numbers that are all the same size) the numbers do not really line up properly with the lines underneath, making it look rather terrible.
I have done some searching, but have yet to find someone who has done something similar that have posted about it online. It is somewhat difficult to make Google understand what I am asking, which is also adding to the difficulty in finding a solution.
Does anyone know of an example out there that might point me in the right direction, or does anyone on here perhaps have any clever ideas about how this might be achieved? Any advice would be greatly appreciated!
PS:
Although it is a but convoluted, please see our multiple input field code below:
Multiple texts fields:
import 'package:creditcardcurator/widgets/textFields/single_number_textfield.dart';
import 'package:flutter/material.dart';
import 'package:print_color/print_color.dart';
var focusNodes;
bool getFirstFieldFocus = true;
class ExpiryDateTextField extends StatefulWidget {
final List<TextEditingController> controllers;
final Function onChangeF;
final Function onComplete;
final bool startFocus;
final FocusNode focusNode;
final bool isDisbaled;
void requestFocus() {
Print.red(getFirstFieldFocus.toString());
if (getFirstFieldFocus) focusNodes[0].requestFocus();
}
ExpiryDateTextField(
{this.controllers,
this.onChangeF,
this.onComplete,
this.startFocus = false,
this.focusNode,
this.isDisbaled = false});
#override
_ExpiryDateTextFieldState createState() => _ExpiryDateTextFieldState();
}
class _ExpiryDateTextFieldState extends State<ExpiryDateTextField> {
#override
void dispose() {
// TODO: implement dispose
super.dispose();
}
#override
void initState() {
super.initState();
focusNodes = [
widget.focusNode,
FocusNode(),
FocusNode(),
FocusNode(),
];
getFirstFieldFocus = true;
if (widget.startFocus) widget.requestFocus();
}
#override
Widget build(BuildContext context) {
if (widget.startFocus) widget.requestFocus();
bool onSwitchChanged(value, context, index) {
getFirstFieldFocus = false;
if (index == 4) {
//if it is on the last text box, do nothing
} else {
if (widget.controllers[index].text.length > 0) {
index++;
FocusScope.of(context).requestFocus(focusNodes[index]);
widget.controllers[index].selection = TextSelection(
baseOffset: 0,
extentOffset: widget.controllers[index].text.length);
// FocusScope.of(context).focus
}
}
return true;
}
return Row(
children: <Widget>[
Expanded(
flex: 1,
child: SingleDigitTextField(
isDisbaled: widget.isDisbaled,
onChangedF: (value) {
widget.onChangeF(value, 0);
// print(this.toString(minLevel: DiagnosticLevel.debug));
onSwitchChanged(value, context, 0);
},
fNode: focusNodes[0],
cController: widget.controllers[0]),
),
Expanded(
flex: 1,
child: SingleDigitTextField(
isDisbaled: widget.isDisbaled,
onChangedF: (value) {
widget.onChangeF(value, 1);
onSwitchChanged(value, context, 1);
},
fNode: focusNodes[1],
cController: widget.controllers[1]),
),
Expanded(
flex: 1,
child: Text("/",
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.display2),
),
Expanded(
flex: 1,
child: SingleDigitTextField(
isDisbaled: widget.isDisbaled,
onChangedF: (value) {
widget.onChangeF(value, 2);
onSwitchChanged(value, context, 2);
},
fNode: focusNodes[2],
cController: widget.controllers[2]),
),
Expanded(
flex: 1,
child: SingleDigitTextField(
isDisbaled: widget.isDisbaled,
onChangedF: (value) {
widget.onChangeF(value, 3);
if (value != null && value.length != 0) {
try {
widget.onComplete();
} catch (e) {
print(e.toString());
}
}
onSwitchChanged(value, context, 3);
},
fNode: focusNodes[3],
cController: widget.controllers[3],
onComplete: widget.onComplete,
),
),
],
);
}
}
Single text field:
import 'package:creditcardcurator/utils/page_utils.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class SingleDigitTextField extends StatelessWidget {
final Function onChangedF;
final FocusNode fNode;
final TextEditingController cController;
final Function onComplete;
final bool isDisbaled;
// final Widget child;
// DollarTextField({this.child});
SingleDigitTextField(
{this.onChangedF,
this.fNode,
this.cController,
this.onComplete,
this.isDisbaled = false});
void defaultFunction() {
print("default function actioned");
}
#override
Widget build(BuildContext context) {
return Container(
// margin: const EdgeInsets.all(8.0),
padding: const EdgeInsets.fromLTRB(16.0, 0.0, 16.0, 0.0),
width: 50,
child: TextField(
enabled: !isDisbaled,
inputFormatters: [
WhitelistingTextInputFormatter(new RegExp('[0-9,.]'))
],
controller: cController,
onTap: () {
// this.cController.selection = TextSelection.fromPosition(
// TextPosition(offset: this.cController.text.length)); //cursor to end of textfield
cController.selection = TextSelection(
baseOffset: 0,
extentOffset: cController.text.length); //to begining of textfield
},
focusNode: fNode,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: getd3FontSize(context),
fontFamily: getFontFamily(context),
color: Colors.white,
),
maxLength: 1,
decoration: InputDecoration(
contentPadding: EdgeInsets.only(bottom: -20),
counter: null,
helperStyle: TextStyle(
color: Colors.transparent,
), //hiding the max length hint text
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
),
keyboardType:
TextInputType.numberWithOptions(signed: true, decimal: true),
// keyboardType: TextInputType.number,
onChanged: (e) {
onChangedF(e);
},
onEditingComplete: () {
try {
onComplete();
} catch (e) {
print(e.toString());
}
},
),
);
}
}