Flutter TextField set textAlign for each line separately

Question

In flutter, Is there any way to set textAlign for each line separately? I want something like telegram app text input:

In telegram, if the line starts with a rtl language, text align is right otherwise it is left.

I try these ways so far:

1- auto_direction package

2- Checking text with intl.Bidi.detectRtlDirectionality and set textAlign dynamically.

But all of these ways sets the textAlign for all lines, I want to set it separately for each line.

Answer 1

By default, TextField widget aligns the text input horizontally to the left. However, you can set the textAlign property to adjust the alignment of the text within the text field.

Unfortunately, there is no built-in way to set the textAlign property for each line separately.

One workaround is to use a TextEditingController to listen to changes in the text field and split the text into lines using the split method. Then, you can iterate through the lines and use the intl.Bidi.detectRtlDirectionality method to determine the directionality of each line and set the textAlign property accordingly.

Here's an example of how you can achieve this:

TextEditingController _controller = TextEditingController();

@override
Widget build(BuildContext context) {
  return TextField(
    controller: _controller,
    textAlign: TextAlign.start,
    onChanged: (text) {
      List<String> lines = text.split('\n');
      for (int i = 0; i < lines.length; i++) {
        String line = lines[i];
        if (intl.Bidi.detectRtlDirectionality(line)) {
          _controller.selection = TextSelection(
            baseOffset: _controller.value.text.indexOf(line),
            extentOffset: _controller.value.text.indexOf(line) + line.length,
          );
          _controller.text = _controller.text.replaceAll(line, '\u202B$line\u202C');
        }
      }
    },
  );
}

In this example, we are using the onChanged callback to listen to changes in the text field. We split the text into lines using the split method and iterate through each line. If the line is RTL, we select the text within the line and wrap it with the Unicode bidi control characters \u202B and \u202C to indicate the start and end of the RTL text. Finally, we replace the original line with the wrapped line in the text field.

Note that this is just a workaround and may not be optimal for all use cases. It also has some limitations, such as not handling bidirectional text that spans multiple lines.

To know more about Flutter, join our Flutter Course today.