Flutter TextField set textAlign for each line separately

0 votes

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

enter image description here

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.

Apr 11 in Flutter by Ashwini
• 5,390 points

1 answer to this question.

0 votes

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();

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.

answered Apr 11 by Tej

Related Questions In Flutter

0 votes
1 answer

Multi-line TextField in Flutter

To create a multi-line TextField in Flutter, ...READ MORE

answered Mar 21 in Flutter by vishalini
0 votes
1 answer

How do you change the value inside of a textfield flutter?

To change the value inside a TextField ...READ MORE

answered Mar 26 in Flutter by Tej
0 votes
1 answer
0 votes
1 answer

How to disable bouncing animation for pageview in flutter

To disable bouncing animation for PageView in ...READ MORE

answered Apr 10 in Flutter by Anitha
0 votes
1 answer

What is the future of flutter?

Hi@MD, Flutter is a rather new cross-platform framework ...READ MORE

answered Jul 17, 2020 in Others by akhtar
• 38,230 points
0 votes
1 answer

What is Flutter?

Hi@akhtar, Flutter is an app SDK for building ...READ MORE

answered Jul 17, 2020 in Others by MD
• 95,440 points
0 votes
1 answer

How to install Flutter in Windows system?

Hi@akhtar, You can follow the below-given steps to ...READ MORE

answered Jul 17, 2020 in Others by MD
• 95,440 points
0 votes
1 answer

Flutter Http line not getting executed

The issue might be related to the ...READ MORE

answered Apr 12 in Flutter by pooja
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP