Writing an EditableText widget from scratch

[u/eibaan]

I wrote a tutorial how to create a simple version of an EditableText from scratch, because I wanted to learn how to do this. And yes, it was me and it took like 8h hours which seems to be wasteful in the age of AI. But I used to like to write deep-dives like this, so I did it anyway.

---

For a bit of retro fun, I created an AText widget that paints a text using a crisp pixel font without antialiasing, something Text isn't capable of. Here's the API:

class AText(
  final String data, {
  final TextStyle? style,
})

For compatibility, I support a TextStyle but ignore everything but the color property. The font has a width and height of 8 pixels.

Now I want to also create an AEditableText widget for text input. The original EditableText plus its RenderEditable clocks at over 10000 lines of code. Obviously, I can't use it because because it uses the usual font rendering mechanism. So, how to approach this?

Here's the API I came up with:

class AEditableText({
  super.key,
  required final TextEditingController controller,
  required final FocusNode focusNode,
  final TextStyle? style,
  final Color? cursorColor,
}) extends StatefulWidget {
  ...
}

I'll only support a single line of text which cannot scroll. I'll probably also only support a subset of keyboard shortcuts and minimal mouse interaction.

Continued here.

I accidentally broke web support, but I might be inclined to fix that and provide a demo DartPad.

[u/eibaan]

Here's → a working demo.