A code editor (dart, js, html, ...) for Flutter with syntax highlighting and custom theme.


The editor displays the contents of fictitious "files" that correspond to a FileEditor, each file has properties such as its name (index.html), its content and the language this file uses.

In other words, with this code editor, you can edit files, wich contain code. You can switch between the files in the navigation bar to edit their content with tools that make writing easier. Once editing is complete, the code is highlighted according to the imposed theme (by default a custom one). You can choose your theme or create your own by checking at "import 'package:flutter_highlight/themes/github.dart';"

example-1 example-2 example-3


It's very easy to install :

  • Add in the pubspec.yaml file
  code_editor: ^1.0.0
  • Don't forget to update the modifications of the pubspec.yaml file
$ flutter pub get
  • Finally, use code_editor in your flutter project
import 'package:code_editor/code_editor.dart';


After importing the package into your project, you can initiliaze an EditorModel to control the editor :

class HomePage extends StatelessWidget {
  Widget build(BuildContext context) {
    // example of a easier way to write code instead of writing it in a single string
    List<String> contentOfPage1 = [
      "<!DOCTYPE html>",
      "<html lang='fr'>",
      "\t\t<a href='page2.html'>go to page 2</a>",

    // The files displayed in the navigation bar of the editor.
    // You are not limited.
    // By default, [name] = "file.${language ?? 'txt'}", [language] = "text" and [code] = "",
    List<FileEditor> files = [
      new FileEditor(
        name: "page1.html",
        language: "html",
        code: contentOfPage1.join("\n"), // [code] needs a string
      new FileEditor(
        name: "page2.html",
        language: "html",
        code: "<a href='page1.html'>go back</a>",
      new FileEditor(
        name: "style.css",
        language: "css",
        code: "a { color: red; }",
    // The model used by the CodeEditor widget, you need it in order to control it.
    // But, since 1.0.0, the model is not required inside the CodeEditor Widget.
    EditorModel model = new EditorModel(
      files: files, // the files created above
      // you can customize the editor as you want
      styleOptions: new EditorModelStyleOptions(
        fontSize: 13,
    return Scaffold(
      appBar: AppBar(title: Text("code_editor example")),
      body: SingleChildScrollView( // /!\ important because of the telephone keypad which causes a "RenderFlex overflowed by x pixels on the bottom" error
        // display the CodeEditor widget
          model: model, // the model created above, not required since 1.0.0
          edit: false, // can edit the files ? by default true
          disableNavigationbar: false, // hide the navigation bar ? by default false
          onSubmit: (String language, String value) {}, // when the user confirms changes in one of the files

For the style options, you have a lot of possibilites :

// the class, to show you what you can change
class EditorModelStyleOptions {
  final EdgeInsets padding;
  final double heightOfContainer;
  final Map<String, TextStyle> theme;
  final String fontFamily;
  final double letterSpacing;
  final double fontSize;
  final double lineHeight;
  final int tabSize;
  final double fontSizeOfFilename;
  final Color editorColor;
  final Color editorBorderColor;
  final Color editorFilenameColor;
  final Color editorToolButtonColor;
  final Color editorToolButtonTextColor;
  final TextStyle textStyleOfTextField;

In order to modify the edit button, use :

// into EditorModelStyleOptions : 
(void) defineEditButtonProperties(color:, textColor: Colors.white, text: "Edit")

You can also change the position of the edit button

// into EditorModelStyleOptions :
(void) defineEditButtonPosition(bottom: 10, right: 15) // default values

// if top < 50 => top = 50
// minimum value of top is 50 because of the height of the navbar

The default values of EditorModelStyleOptions are :

padding = const EdgeInsets.all(15.0),
heightOfContainer = 300,
theme: myTheme, // the custom theme
fontFamily: "monospace", // "Poppins" is a good font family too
fontSize: 15,
lineHeight: 1.6,
tabSize: 2, // do not use a to high number
fontSizeOfFilename: null,
editorColor: Color(0xff2E3152),
editorBorderColor: Color(0xFF3E416E), // the color of the borders between elements in the editor
editorFilenameColor: Color(0xFF6CD07A), // the color of the file's name
editorToolButtonColor:  Color(0xFF4650c7), // the tool's buttons
editorToolButtonTextColor: Colors.white
textStyleOfTextField: TextStyle(
  color: Colors.black87,
  fontSize: 16,
  letterSpacing: 1.25,
  fontWeight: FontWeight.w500,

// with defineEditButtonProperties()
editButtonName: "Edit"

// with defineEditButtonPosition()
editButtonPosBottom: 10,
editButtonPosRight: 15

Notable issue

For the moment, I haven't been able to fix a slight bug that occurs when there is a lot of code. Indeed, when the code goes out of the text field, and the user clicks on it to be able to write in it, he can't go all the way down because of the phone keyboard.

Internal dependencies

code_editor uses the following dependencies to work :

  1. flutter_highlight
  2. font_awesome_flutter


Do not hesitate to contribute to the project, I just begin :)


MIT License