How to prevent TextField widget's cursor from jittering? - Flutter

Question

https://imgur.com/X2gEMqO

Check out the video to see what I'm talking about ⤴

Before I start making custom widgets I wanted to see if anyone knew a way to fix this with vanilla Flutter. It seems to be something related to the TextEditingController but I'm not entirely sure.

When the TextField is set to centre or right align it seems to work just fine, but when on left / start / justify it always seems to have that slight jitter.

Thanks in advance! ~ I may post this to the Github repository as well

---

Edit: You can see that the cursor jitters only when it moves to the left of the textfield. When it is moving within the string it does not jitter at all. I was testing this on a simulated iPhone 11

Answer 1

This problem has two parts to it. First, the cursorOffset of the text_field.dart for whatever reason has a negative x value.

This causes the cursor to be jammed into it's container making the width look weird. Second, the TextStyle.height property causes the cursor to jump.

I figured out how to fix this thanks to Pavel!

TextField - Font Size 50.0 / Height 1.30
https://imgur.com/gallery/G9bkcIf

TextField - Font Size 20.0 / Height 1.30
https://imgur.com/gallery/x7a5nzM

---

Fix Cursor Offset

1. The cursorOffset value is stored within the text_field.dart file. In order to edit it, you should probably create a duplicate of the text_field.dart file to customize. Here's how to do that, although you might find better answers with a Google

2. Once you have the file ready to edit navigate to cursorOffset within TargetPlatform.iOS. It should be around line 924-ish if your file is unmodified.

3. Change the values of Offset(...) to 0 & 0 (x, y) respectively or whatever you think is appropriate.

4. If you duplicated the text_field.dart file correctly then it should be working right away!

Fix Cursor Jump

1. This fix is a lot less work. Simply add in a TextStyle widget to the style: property of a TextField widget.

2. Then, just fill in the height property of your TextStyle widget with whatever you think! I found 1.3 was a good median but pick the best height for your fontSize. Here's some information on height:

---

Github Issue Regarding This

https://github.com/flutter/flutter/issues/31661