Code Editor extension

Edit syntax-highlighted source code and handle value, selection, and focus changes.

Enable the extension

Add the extension key to ruflet.yaml:

extensions:
  - code_editor

Run ruflet run during development or ruflet build <target> for a release. Extension packages are compiled into the Ruflet client, so rebuild the client after changing this list.

Ruby DSL example

status = text(value: "Start typing Ruby")
editor = code_editor(
  value: "puts :hello",
  language: "ruby",
  expand: true,
  on_change: ->(event) { page.update(status, value: event.value.to_s) }
)
page.add(column(children: [editor, status]))

API provided

• Extension key: code_editor
• Flet package: flet_code_editor
• Kind: Editing control
• CodeEditor control reference — complete helpers, properties, events, and methods.

Permissions and platforms

No protected service declaration is added automatically. Platform support still follows the underlying Flet extension, so test every target you ship.

Build behavior

Ruflet resolves the extension key to flet_code_editor and includes that Flet package through the client extension pipeline. Application code uses the Ruby DSL shown above; do not add the package directly to your app's Flutter dependencies.