{"id":24926150,"url":"https://github.com/akvelon/flutter-code-editor","last_synced_at":"2025-05-15T19:07:04.638Z","repository":{"id":42399145,"uuid":"481655426","full_name":"akvelon/flutter-code-editor","owner":"akvelon","description":"Flutter Code Editor is a multi-platform code editor supporting syntax highlighting, code blocks folding, autocompletion, read-only code blocks, hiding specific code blocks, themes, and more.","archived":false,"fork":false,"pushed_at":"2025-03-25T13:35:49.000Z","size":4363,"stargazers_count":234,"open_issues_count":79,"forks_count":68,"subscribers_count":12,"default_branch":"main","last_synced_at":"2025-04-19T02:12:39.592Z","etag":null,"topics":["code-blocks","code-editor","code-editor-mobile","code-editor-online","code-folding","code-hiding","flutter","syntax-highlighting","theme"],"latest_commit_sha":null,"homepage":"https://akvelon.com","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/akvelon.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-04-14T15:27:45.000Z","updated_at":"2025-04-14T14:06:18.000Z","dependencies_parsed_at":"2024-06-19T09:16:17.096Z","dependency_job_id":"1a799588-c103-41a7-9258-0ed1c63fd055","html_url":"https://github.com/akvelon/flutter-code-editor","commit_stats":{"total_commits":147,"total_committers":9,"mean_commits":"16.333333333333332","dds":0.653061224489796,"last_synced_commit":"dc2b466b7ae1023b6f13d2a8574c0276c21ffcf0"},"previous_names":[],"tags_count":36,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akvelon%2Fflutter-code-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akvelon%2Fflutter-code-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akvelon%2Fflutter-code-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akvelon%2Fflutter-code-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/akvelon","download_url":"https://codeload.github.com/akvelon/flutter-code-editor/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254404356,"owners_count":22065641,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["code-blocks","code-editor","code-editor-mobile","code-editor-online","code-folding","code-hiding","flutter","syntax-highlighting","theme"],"created_at":"2025-02-02T12:26:04.045Z","updated_at":"2025-05-15T19:07:04.613Z","avatar_url":"https://github.com/akvelon.png","language":"Dart","readme":"# Flutter Code Editor\n\n[![Pub Version](https://img.shields.io/pub/v/flutter_code_editor)](https://pub.dev/packages/flutter_code_editor)\n[![CodeFactor](https://img.shields.io/codefactor/grade/github/akvelon/flutter-code-editor?style=flat-square)](https://www.codefactor.io/repository/github/akvelon/flutter-code-editor)\n[![codecov](https://codecov.io/gh/akvelon/flutter-code-editor/branch/main/graph/badge.svg?token=3IL0R2PK2Y)](https://codecov.io/gh/akvelon/flutter-code-editor)\n\nFlutter Code Editor is a multi-platform code editor supporting:\n\n- Syntax highlighting for over 100 languages,\n- Code blocks folding,\n- Autocompletion,\n- Read-only code blocks,\n- Hiding specific code blocks,\n- Themes,\n- And many other features.\n\n![Basic example](https://raw.githubusercontent.com/akvelon/flutter-code-editor/main/example/images/main.gif)\n\n\n## Basic Usage\n\n```dart\nimport 'package:flutter/material.dart';\nimport 'package:flutter_code_editor/flutter_code_editor.dart';\nimport 'package:flutter_highlight/themes/monokai-sublime.dart';\nimport 'package:highlight/languages/java.dart';\n\nvoid main() {\n  runApp(const CodeEditor());\n}\n\nfinal controller = CodeController(\n  text: '...', // Initial code\n  language: java,\n);\n\nclass CodeEditor extends StatelessWidget {\n  const CodeEditor();\n\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      home: Scaffold(\n        body: CodeTheme(\n          data: CodeThemeData(styles: monokaiSublimeTheme),\n          child: SingleChildScrollView(\n            child: CodeField(\n              controller: controller,\n            ),\n          ),\n        ),\n      ),\n    );\n  }\n}\n```\n\nSee the full runnable example [here](https://github.com/akvelon/flutter-code-editor/blob/main/example/lib/02.code_field.dart).\n\n\n## Languages\n\n### Syntax Highlighting\n\nFlutter Code Editor supports\n[over a hundred languages](https://github.com/git-touch/highlight.dart/tree/master/highlight/lib/languages),\nrelying on the [highlight](https://pub.dev/packages/highlight) package for parsing code.\n\nTo select a language, use a\n[corresponding variable](https://github.com/git-touch/highlight.dart/tree/master/highlight/lib/languages):\n\n```dart\nimport 'package:highlight/languages/python.dart'; // Each language is defined in its file.\n\nfinal controller = CodeController(\n  text: '...', // Initial code\n  language: python,\n);\n```\n\nLanguage can be dynamically changed on a controller:\n\n```dart\ncontroller.setLanguage(go, DefaultLocalAnalyzer());\n```\n\n\n### Code Blocks Folding \n\nFlutter Code Editor can detect and fold code blocks. Code blocks folding is supported for the following languages:\n- Dart\n- Go\n- Java\n- Python\n- Scala\n\n![Foldable blocks example](https://raw.githubusercontent.com/akvelon/flutter-code-editor/main/example/images/foldable_blocks_example.gif)\n\nCode blocks folding may support other languages in experimental mode.\n\n\n## Code Analysis\n\nThe editor supports pluggable analyzers to highlight errors and show error messages:\n\n![DartPadAnalyzer](https://raw.githubusercontent.com/akvelon/flutter-code-editor/main/example/images/dartpad-analyzer.png)\n\n\nWe ship the following analyzers:\n\n- `DefaultLocalAnalyzer` highlights unmatched pair characters for supported languages.\n  It works on the client locally,\n  and is selected by default on `CodeController` if no other analyzer is specified.\n- `DartPadAnalyzer` for Dart language, calls upon the [DartPad](https://dartpad.dev) backend for analysis.\n\nFor other languages, you can write custom analyzers that access your backend.\nSee the code for `DartPadAnalyzer` for the implementation example.\n\nTo set the analyzer, call any of the following:\n\n```dart\ncodeController = CodeController(language: dart, analyzer: DartPadAnalyzer());\ncodeController.analyzer = DartPadAnalyzer();\ncodeController.setLanguage(dart, analyzer: DartPadAnalyzer());\n```\n\n**Note:** Code analysis is an experimental feature.\nWe may introduce breaking changes to `Analyzer` subclasses without following the semver contract.\nIf you only use the analyzers we ship, then this will not affect you.\n\n\n## Themes\n\n### Pre-defined Themes\n\nFlutter Code Editor supports themes from the [highlight](https://pub.dev/packages/flutter_highlight) package —\nsee the full list of the pre-defined themes\n[here](https://github.com/git-touch/highlight.dart/tree/master/flutter_highlight/lib/themes).\n\nUse `CodeTheme` widget to set the theme for underlying editors:\n\n```dart\nreturn MaterialApp(\n  home: Scaffold(\n    body: CodeTheme(\n      data: CodeThemeData(styles: monokaiSublimeTheme), // \u003c= Pre-defined in flutter_highlight.\n      child: SingleChildScrollView(\n        child: CodeField(\n          controller: controller,\n        ),\n      ),\n    ),\n  ),\n);\n```\n\n### Custom Themes\n\nTo use a custom theme, create a map of styles under the pre-defined class names —\nsee [this example](https://github.com/git-touch/highlight.dart/blob/master/flutter_highlight/lib/themes/monokai-sublime.dart).\n\n\n## Hiding Line Numbers, Errors, and Folding Handles\n\nA lot of styling can be tuned with a `GutterStyle` object passed to a `CodeField` widget.\nSee\n[this example](https://github.com/akvelon/flutter-code-editor/tree/main/example/lib/03.change_language_theme)\nthat dynamically changes the properties listed here.\n\n```dart\nCodeField(\n  gutterStyle: GutterStyle(\n    showErrors: false,\n    showFoldingHandles: false,\n    showLineNumbers: false,\n  ),\n  // ...\n),\n```\n\nIf you want to hide the entire gutter, use `GutterStyle.none` constant instead:\n\n```dart\nCodeField(\n  gutterStyle: GutterStyle.none,\n  // ...\n),\n```\n\n## Accessing the Text\n\n`CodeController` extends the Flutter's built-in `TextEditingController` and is immediately\nusable as one. However, code folding and other features have impact on built-in properties:\n\n- `text` returns and sets the visible text. If any code is folded, it will not be returned.\n- `value` returns and sets the `TextEditingValue` with the visible text and selection.\n  If any code is folded, it will not be returned.\n- `fullText` returns and sets the entire text, including any folded blocks and hidden\n  service comments (see below).\n\n\n## Named Sections\n\nTo manipulate parts of the source code, Flutter Code Editor supports *named sections*.\nThey are defined in the code by adding tags that Flutter Code Editor recognizes.\n\nTo define a named section in your source code, add comments to tag the start and the end of the section:\n1. Add comment `[START section_name]` to tag the beginning of the section.\n2. Add comment `[END section_name]` to tag the end of the section.\n\nHere is an example to define a named section `section1`:\n\n```dart\nfinal text = '''\nclass MyClass {\n    public static void main(String[] args) {// [START section1]\n        int num = 5;\n        System.out.println(\"Factorial of \" + num + \" is \" + factorial(5));\n    }// [END section1]\n}\n''';\n```\n\nTo process named sections in the Flutter Code Editor,\npass the named section parser to the controller:\n\n```dart\nfinal controller = CodeController(\n  text: text,\n  language: java,\n  namedSectionParser: const BracketsStartEndNamedSectionParser(), // NEW\n);\n```\n\nThe example above creates a section named `section1`.\nThe built-in `BracketsStartEndNamedSectionParser` class is designed to parse sections\nfrom the code comments using the above syntax.\nIt also hides any single-line comment that has a section tag with the above syntax,\nalthough such comments are still present in the editor's hidden state\nand will be revealed when copying the text.\n\nTo customize section parsing using any other syntax, subclass `AbstractNamedSectionParser`.\n\n\n## Read-Only Code Blocks\n\nFlutter Code Editor allows you to define read-only code blocks.\nThis may be useful for learning use cases when users are guided to modify certain code blocks\nwhile other code is meant to be protected from changes. \n\nTo make a named section read-only, pass a set of named sections to the `controller.readOnlySectionNames`:\n\n```dart\ncontroller.readOnlySectionNames = {'section1'};\n```\n\nThis locks the given sections from modifications in the Flutter Code Editor.\nAny non-existent section names in this set are ignored.\nTo make the code editable again, pass an updated set to `controller.readOnlySectionNames`.\n\nWhen using this feature, `text` and `value` properties cannot be used to change the text\nprogrammatically because they have the same effect as the user input.\nThis means that locking affects them as well.\n\nTo change a partially locked controller, set the `fullText` property.\n\n![Readonly blocks example](https://raw.githubusercontent.com/akvelon/flutter-code-editor/main/example/images/readonly-sections-example.gif)\n\n\n## Advanced Code Blocks Folding\n\n### Folding the First Comment/License\n\nMany code snippets contain a license as their first comment, which can distract readers.\nTo fold the first comment, use:\n\n```dart\ncontroller.foldCommentAtLineZero();\n```\n\nThis method has no effect if there is no comment starting at the first line.\n\n### Folding Imports\n\nIn many languages, the editor recognizes sequential import lines\nand an optional package line as one foldable block.\nTo fold such blocks:\n\n```dart\ncontroller.foldImports();\n```\n\n### Named Sections\n\nThe editor supports folding all blocks except for specific named sections.\nThis helps the user focus on those sections while\nall source code is still there and can be expanded and copied by the user.\n\nTo fold all blocks except those overlapping with the given named sections:\n\n```dart\ncontroller.foldOutsideSections(['section1']);\n```\n\n### Folding Specific Blocks\n\nTo fold and unfold blocks at a given line number:\n\n```dart\ncontroller.foldAt(1);\ncontroller.unfoldAt(1);\n```\n\nIf there is no block at a given line, this has no effect.\n\n**Note:** For the controller, line numbers start at `0` although\nthe widget displays them starting at `1`.\n\n### Accessing Folded Blocks\n\nTo get the currently folded blocks, read `controller.code.foldedBlocks`.\n\n\n## Hiding Text\n\nThe editor allows you to completely hide all code except for a specific named section.\nThis is useful to achieve even more focus than with folding.\n\nTo hide all the code except the given named section:\n\n```dart\ncontroller.visibleSectionNames = {'section1'};\n```\n\n![visibleSectionNames](https://raw.githubusercontent.com/akvelon/flutter-code-editor/main/example/images/visible-section-names.png)\n\nWhen hiding text, the full text is still preserved\nand available via `fullText` property in the Flutter Code Editor.\n\nHiding text preserves line numbering, which is not possible by just showing a cropped snippet.\nPreserving hidden text is also useful if you later need to send\nthe full code for further processing but still want to hide\nnon-informative parts.\n\nHiding text also makes the entire editor read-only\nto prevent users from modifying the code, adding imports, etc.\nwhich may conflict with the hidden parts.\n\nOnly one visible section at a time is currently supported. The behavior of passing more than\none section is undefined.\n\n\n## Autocompletion\n\nThe editor suggests words as they are typed. Suggested words are:\n\n- All keywords of the current language.\n- All words already in the text.\n- Words set with `controller.autocompleter.setCustomWords(['word1', 'word2'])`\n\nAll those words are merged into an unstructured dictionary.\nThe editor does not perform any syntax analysis, so it cannot tell if a given class really has\nthe method the user is typing. This feature is meant to simplify typing, but should not be relied on\nwhen exploring classes and methods.\n\n![Suggestions example](https://raw.githubusercontent.com/akvelon/flutter-code-editor/main/example/images/suggestions_example.gif)\n\nTo disable autocompletion:\n\n```dart\ncontroller.popupController.enabled = false;\n```\n\n\n## Shortcuts\n\n- Indent (Tab)\n- Outdent (Shift-Tab)\n\n![indent outdent example](https://raw.githubusercontent.com/akvelon/flutter-code-editor/main/example/images/tab-shift-tab_example.gif)\n\n- Comment out (Control-/)\n- Uncomment (Control-/)\n\n![comment out uncomment example](https://raw.githubusercontent.com/akvelon/flutter-code-editor/main/example/images/comment_out_example.gif)\n\n\n## Migration Guides\n\n- [Migrating from code_text_field to 0.1](https://github.com/akvelon/flutter-code-editor/blob/main/doc/migrating/0.1.md)\n- [Migrating from 0.1 to 0.2](https://github.com/akvelon/flutter-code-editor/blob/main/doc/migrating/0.2.md)\n\n\n## Contact Us\n\n* [Get in touch with us](https://akvelon.com/contact-us/).\n* [Request a custom feature](https://akvelon.com/contact-us/).\n* [Request custom Flutter, Web, Mobile application development](https://akvelon.com/contact-us/).\n* [Share about your use case for the Flutter Code Editor](https://akvelon.com/contact-us/).\n* [Report an issue](https://github.com/akvelon/flutter-code-editor/issues).\n\n\n## Contribution Guide\n\nTo get involved with Flutter Code Editor, submit your contribution as a PR,\n[contact us](https://akvelon.com/contact-us/) with a feature request or question,\nor [report an issue](https://github.com/akvelon/flutter-code-editor/issues).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakvelon%2Fflutter-code-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fakvelon%2Fflutter-code-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakvelon%2Fflutter-code-editor/lists"}