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?
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.
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.
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
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With