Wrap text in a TextField flutter without creating a newline - flutter

Question

Using the maxLines = null property, I can make the text wrap in a TextField. However, this also uses the Enter to create newlines.
I don't want that - I want to reserve the Enter key to onSubmitted() function. How do I do that?

Answer 1

You can achieve this with the onKey of either the TextField's FocusNode (WidgetOne) or a RawKeyboardListener (WidgetTwo):
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
void main() {
runApp(
MaterialApp(
title: 'Wrapping Single Line Text Fields',
home: _Page(),
),
);
}
class _Page extends HookWidget {
const _Page({
Key key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
final result = useState('');
return Scaffold(
body: Padding(
padding: const EdgeInsets.all(32.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
_WidgetOne(onSubmitted: (value) => result.value = value),
_WidgetTwo(onSubmitted: (value) => result.value = value),
Container(
margin: const EdgeInsets.all(15.0),
padding: const EdgeInsets.all(3.0),
decoration:
BoxDecoration(border: Border.all(color: Colors.black)),
child: Text('Result: ${result.value}')),
],
),
),
);
}
}
class _WidgetOne extends StatelessWidget {
final ValueChanged<String> onSubmitted;
const _WidgetOne({Key key, this.onSubmitted}) : super(key: key);
#override
Widget build(BuildContext context) {
final _controller = TextEditingController();
final _focusNode = FocusNode(onKey: (node, event) {
if (event.isKeyPressed(LogicalKeyboardKey.enter)) {
onSubmitted(_controller.text);
node.unfocus();
return true;
}
return false;
});
return TextField(
decoration: InputDecoration(hintText: 'With FocusNode onKey'),
controller: _controller,
focusNode: _focusNode,
maxLines: null,
);
}
}
class _WidgetTwo extends StatelessWidget {
final ValueChanged<String> onSubmitted;
const _WidgetTwo({Key key, this.onSubmitted}) : super(key: key);
#override
Widget build(BuildContext context) {
final _controller = TextEditingController();
final _focusNode = FocusNode(onKey: (node, event) {
if (event.isKeyPressed(LogicalKeyboardKey.enter)) {
onSubmitted(_controller.text);
node.unfocus();
return true;
}
return false;
});
return RawKeyboardListener(
focusNode: _focusNode,
onKey: (event) {
if (event.isKeyPressed(LogicalKeyboardKey.enter)) {
onSubmitted(_controller.text);
}
},
child: TextField(
decoration: InputDecoration(hintText: 'With RawKeyboardListener onKey'),
controller: _controller,
maxLines: null,
),
);
}
}