Build a code editor with syntax highlighter using TextField in Flutter

Question

I am trying to build Code Editor in Flutter app using TextField, I tried using flutter_syntax_view but the problem is, it only accept code as a predefined string text and it does not have any option to write a code.

This is what I have tried:

Used TextField with maxLines 10
If we can show number of lines on left like code editor

Open for suggestions, appreciate the help

implement `TextEditingController.buildTextSpan`, like here: https://stackoverflow.com/a/59773962/2252830 — pskink, Sep 09 '21 at 07:21
Hey, that will be for highlighting the syntax, how we can get number on left side like a code editor — Indrajeet Singh, Sep 09 '21 at 07:39

score 1 · Accepted Answer · answered Mar 14 '22 at 04:57

See my work on github: http://github.com/icedman/flutter_editor

It uses flutter_highlight, multicursor edits, minimap, line number gutter. Under development - you may want to contribute to that project.

I also wrote an article on creating an editor under 1000 lines of code in Flutter - wherein i explained why i ditched the textfield and made my own widget:

https://levelup.gitconnected.com/build-a-text-editor-with-flutter-ui-under-1000-lines-of-code-5a9dd2a053da

Build a code editor with syntax highlighter using TextField in Flutter

1 Answers1