Build a code editor with syntax highlighter using TextField in Flutter

Issue

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

Solution

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

Answered By – Marvin Sanchez

Answer Checked By – David Goodson (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *