Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I add line numbers to TextField on Flutter?

I am trying to add line numbers to text field on Flutter, like on any text editors. I have text that overflows to next line, so I want to show where lines start and end.

First way that came to my mind was to separate the screen into two columns, one for line numbers on left and one for right for the textfield. However, due to screen size differences, I can't know when a line will overflow.

Is there any more formal way to do it?

like image 607
Alp Avatar asked Jan 27 '20 07:01

Alp


People also ask

How do you customize a TextField in Flutter?

In Flutter, this can be done using TextEditingController . First, create a TextEditingController and set it as a controller property of your TextField widget. In this example, I have added an extra Button and Text widget which will show the added text when you click the “Show Text” button.

How do you make multi line TextField in Flutter?

Step 1: Inside the TextField, add the minLines parameter and set it to 1. Step 2: Add one more parameter as maxLines and set it to 5. This will make sure that the TextField shows a full message till it reaches the 5th line. Step 3: Run the app.


1 Answers

First, initialize a List of TextField and an currentLine integer variables. TextField must contain properties named textInputAction and onEditingComplete. So each time you press enter, it is considered as finished with current TextField, creating a new TextField and add it into List of TextField and will move the focus to the new TextField. Line numbers will be coming from inputDecoration of each TextField and the value will be from currentLine variable. curentLine++ also ran inside onEditingComplete.

like image 131
willypede Avatar answered Nov 02 '22 19:11

willypede