Flutter Code Editor

Named sections allow you to target specific parts of the code.

1. Define in code: Use comments like // [START section_name] and // [END section_name].
2. Parse in controller: Pass a parser like BracketsStartEndNamedSectionParser to the CodeController.

Sections can be used to make specific parts of the code read-only or to hide everything except that section.

final text = '''
class MyClass {
    // [START section1]
    void myMethod() {}
    // [END section1]
}
''';

final controller = CodeController(
  text: text,
  language: java,
  namedSectionParser: const BracketsStartEndNamedSectionParser(),
);

The CodeController extends TextEditingController, but its properties behave differently when code is folded:

• text: Returns/sets the visible text (excludes folded blocks).
• value: Returns/sets the TextEditingValue of the visible text.
• fullText: Returns/sets the entire text, including folded blocks and hidden service comments.

The editor supports several standard keyboard shortcuts for text manipulation:

• Indent: Tab
• Outdent: Shift-Tab
• Comment/Uncomment: Control-/ (toggles commenting for the selected text or line)

When upgrading from version 0.1 to 0.2 of flutter-code-editor, apply the following breaking changes:

1. Text Access: Replace the use of rawText with text.
2. CodeController Configuration: Remove the webSpaceFix parameter from the CodeController constructor.
3. Indentation API: Rename IntendModifier to IndentModifier.

Themes are applied using the CodeTheme widget.

Pre-defined Themes: Use themes from the flutter_highlight package by passing them to CodeThemeData(styles: ...).

Custom Themes: Create a map of styles following the structure of existing themes in flutter_highlight.

CodeTheme(
  data: CodeThemeData(styles: monokaiSublimeTheme),
  child: CodeField(controller: controller),
)

To use the editor, initialize a CodeController with your initial text and language, then wrap a CodeField widget inside a CodeTheme widget to provide syntax highlighting styles. The CodeController manages the state and content of the editor.

import 'package:flutter/material.dart';
import 'package:flutter_code_editor/flutter_code_editor.dart';
import 'package:flutter_highlight/themes/monokai-sublime.dart';
import 'package:highlight/languages/java.dart';

final controller = CodeController(
  text: '...', // Initial code
  language: java,
);

// In your widget tree:
CodeTheme(
  data: CodeThemeData(styles: monokaiSublimeTheme),
  child: CodeField(
    controller: controller,
  ),
)

Syntax highlighting is powered by the highlight package. You select a language by passing a language variable (e.g., python, java, go) to the CodeController. You can change the language dynamically using controller.setLanguage().

import 'package:highlight/languages/python.dart';

// Set language on initialization
final controller = CodeController(
  text: '...', 
  language: python,
);

// Change language dynamically
controller.setLanguage(go, DefaultLocalAnalyzer());

If you are migrating from the code_text_field package to flutter-code-editor (v0.1 and later), follow these steps to ensure compatibility and avoid UI bugs:

1. Update Dependencies: Replace the code_text_field package with flutter_code_editor in your pubspec.yaml.
2. Fix Layout Issues: Do not use the CodeField.expands property. Using expands causes the code to scroll while the line numbers remain frozen. Instead, wrap the entire editor widget in an Expanded widget to handle layout.
3. Update Theme Implementation: Instead of passing a theme directly to the CodeController, use the CodeTheme widget to provide the theme to the editor.

// Instead of:
// CodeController(theme: myTheme)

// Use:
CodeTheme(
  data: myTheme,
  child: CodeField(
    controller: myController,
  ),
)

You can update the syntax highlighting and visual style of the editor at runtime by modifying the language and theme properties provided to the controller or widget. This allows users to switch between different programming languages or visual modes (e.g., Light vs Dark) while editing.

// Example pattern for dynamic updates:
// Update the language and theme properties to change the editor's appearance.

The CodeField widget is the primary high-level component for a full editor experience. It automatically includes:

• A gutter (for line numbers and markers)
• Code folding capabilities
• Basic autocompletion support

// Use the CodeField widget to enable gutter, folding, and autocompletion.
CodeField(
  controller: controller,
  // ... other properties
)

For a lightweight implementation, you can use a CodeController in conjunction with a standard Flutter TextField. This approach provides the core logic for code handling without the full UI features of the CodeField widget.

// Refer to the minimal implementation pattern:
// Use CodeController with an ordinary TextField.