Wrap text in a TextField flutter without creating a newline

Issue

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?

Solution

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,
      ),
    );
  }
}

Answered By – Thierry

Answer Checked By – David Marino (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.