Flutter Web:
I want only the TextField to move the focus.
down key: aaa > bbb > ccc > ddd
up key: ddd > ccc > bbb > aaa
The result for this sample goes from a to c . I want to override the focus of the two icons in front of the textfield.
- How to move focus to TextField only?
- onKey: focusNode
- Can you tell which TextField is focused?
class TextBlockSample extends StatefulWidget {
const TextBlockSample({Key? key}) : super(key: key);
@override
State<TextBlockSample> createState() => _TextBlockSampleState();
}
class _TextBlockSampleState extends State<TextBlockSample> {
late List<TextEditingController> _textControllers;
late List<FocusNode> _textFocusNodes;
List<String> users = ['aaa', 'bbb', 'ccc', 'ddd', 'eee'];
int _currentFieldindex = 0;
@override
void initState() {
_textControllers =
List.generate(5, (index) => TextEditingController(text: users[index]));
_textFocusNodes = List.generate(5, (index) => FocusNode());
super.initState();
}
@override
void dispose() {
_textControllers.map((e) => e.dispose()).toList();
_textFocusNodes.map((e) => e.dispose()).toList();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Focus(
onKey: (FocusNode focusNode, RawKeyEvent event) {
focusNode.unfocus();
int _focusIndex =
_textFocusNodes.indexWhere((element) => element.hasFocus);
if (event.logicalKey == LogicalKeyboardKey.arrowDown) {
focusNode.requestFocus(_textFocusNodes[_focusIndex + 1]);
return KeyEventResult.handled;
}
if (event.logicalKey == LogicalKeyboardKey.arrowUp) {
focusNode.requestFocus(_textFocusNodes[_focusIndex - 1]);
}
return KeyEventResult.ignored;
},
child: FocusScope(
child: Container(
child: Column(
children:
users.mapIndexed((index, user) => inputText(index)).toList(),
),
),
),
);
}
Widget inputText(int index) {
return Container(
height: 60,
width: 500,
child: Row(
children: [
IconButton(
icon: const Icon(Icons.star),
onPressed: () {},
),
IconButton(
icon: const Icon(Icons.label_important_outline),
onPressed: () {},
),
Container(
width: 300,
height: 50,
child: TextFormField(
controller: _textControllers[index],
focusNode: _textFocusNodes[index],
textInputAction: TextInputAction.next,
onChanged: (v) {
print('changed:$v');
},
onTap: () {
_currentFieldindex = index;
},
),
)
],
),
);
}
}
