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, 2023 in Flutter by Ashwini
• 5,430 points
1,685 views

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

@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.

answered Apr 11, 2023 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, 2023 in Flutter by vishalini
2,299 views
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, 2023 in Flutter by Tej
7,259 views
0 votes
1 answer

How to scan for bluetooth printers and print pdf or image via bluetooth in flutter?

The user wants to scan for Bluetooth ...READ MORE

answered Apr 4, 2023 in Flutter by seena
1,579 views
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, 2023 in Flutter by Anitha
5,274 views
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
961 views
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
1,121 views
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
1,570 views
0 votes
1 answer

Flutter Http line not getting executed

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

answered Apr 12, 2023 in Flutter by pooja
773 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP