TextField is focused after second "click" #35694
Description
Hello.
There is a list of TextFields on the screen. When a user enters a number the application will shift focus to another TextField. It is clear for me how to change focus, but I faced with the next issue, please look on the screenshot.
The first TextInput has autofocus: True, others - False.
When we open the screen the first TextInput as focused and keyboard is opening, but "underline" is not "blue".
Then I start to enter values and get the result as on the screenshot - the focus has been shifted, on the first TextInput I have "blinking" cursor, the second input has "blue" underling and "blinking" cursor. If I will continue - the first TextField will continue to be problematic.
if I will "click" a second time on the first TextField - the "underline" will become blue and "duplicated" cursor will disappear.
This is the code for TextFields Row:
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class Code extends StatelessWidget {
Code({int numberOfInputs, Function action}) {
_number = numberOfInputs;
for (var i = 0; i < numberOfInputs; i++) {
_widgets.add(OneDigitInput(
focusNodes: _focusNodes,
index: i,
validate: check,
));
_focusNodes.add(FocusNode());
_values.add('');
_action = action;
}
}
Function _action;
int _number;
List<Widget> _widgets = new List();
List<FocusNode> _focusNodes = new List();
List<String> _values = new List();
List<Widget> getWidgets() {
return _widgets;
}
setAction(Function action) {
_action = action;
}
check(BuildContext context, int index, String newValue) {
String concat = '';
_values[index] = newValue;
for (var j = 0; j < _values.length; j++) {
String value = _values[j];
concat += value;
}
if (concat.length == _number) {
_action();
} else {
if (index < _number + 1) {
_focusNodes[index].unfocus();
FocusScope.of(context).requestFocus(_focusNodes[index + 1]);
}
}
}
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: _widgets,
);
}
}
class OneDigitInput extends StatelessWidget {
OneDigitInput({List<FocusNode> focusNodes, int index, Function validate}) {
_focusNodes = focusNodes;
_validate = validate;
_index = index;
}
int _index;
final _textFieldController = TextEditingController();
Function _validate;
List<FocusNode> _focusNodes;
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Container(
width: 20,
child: TextField(
controller: _textFieldController,
onChanged: (String value) {
_validate(context, _index, _textFieldController.text);
},
autofocus: _index == 0 ? true : false,
focusNode: _focusNodes[_index],
textAlign: TextAlign.center,
textInputAction: TextInputAction.unspecified,
style: TextStyle(
fontSize: 20,
),
decoration: InputDecoration(contentPadding: EdgeInsets.all(1)),
inputFormatters: [
LengthLimitingTextInputFormatter(1),
],
keyboardType: TextInputType.number,
),
),
);
}
}