CodeEditor control

.github/workflows/ci.yml

@@ -713,6 +713,7 @@ jobs:
             flet-audio
             flet-audio-recorder
             flet-charts
+            flet-code-editor
             flet-color-pickers
             flet-datatable2
             flet-flashlight
@@ -825,14 +826,15 @@ jobs:
           for pkg in \
             flet \
             flet_cli \
-            flet_color_pickers \
             flet_desktop \
             flet_desktop_light \
             flet_web \
             flet_ads \
             flet_audio \
             flet_audio_recorder \
             flet_charts \
+            flet_code_editor \
+            flet_color_pickers \
             flet_datatable2 \
             flet_flashlight \
             flet_geolocator \

client/lib/main.dart

@@ -17,6 +17,7 @@ import 'package:flet_permission_handler/flet_permission_handler.dart'
     as flet_permission_handler;
 import 'package:flet_secure_storage/flet_secure_storage.dart'
     as flet_secure_storage;
+import 'package:flet_code_editor/flet_code_editor.dart' as flet_code_editor;
 // --FAT_CLIENT_START--
 // --RIVE_IMPORT_START--
 import 'package:flet_rive/flet_rive.dart' as flet_rive;
@@ -54,6 +55,7 @@ void main([List<String>? args]) async {
     flet_charts.Extension(),
     flet_color_picker.Extension(),
     flet_secure_storage.Extension(),
+    flet_code_editor.Extension(),
     // --FAT_CLIENT_START--
     // --RIVE_EXTENSION_START--
     flet_rive.Extension(),

client/pubspec.lock

@@ -81,6 +81,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "4.2.1"
+  autotrie:
+    dependency: transitive
+    description:
+      name: autotrie
+      sha256: "55da6faefb53cfcb0abb2f2ca8636123fb40e35286bb57440d2cf467568188f8"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.0.0"
   battery_plus:
     dependency: transitive
     description:
@@ -113,6 +121,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.4.0"
+  charcode:
+    dependency: transitive
+    description:
+      name: charcode
+      sha256: fb0f1107cac15a5ea6ef0a6ef71a807b9e4267c713bb93e00e92d737cc8dbd8a
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.4.0"
   checked_yaml:
     dependency: transitive
     description:
@@ -332,6 +348,10 @@ packages:
       relative: true
     source: path
     version: "0.1.0"
+  flet_code_editor:
+    dependency: "direct main"
+    description:
+      path: "../sdk/python/packages/flet-code-editor/src/flutter/flet_code_editor"
   flet_color_pickers:
     dependency: "direct main"
     description:
@@ -414,6 +434,14 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  flutter_code_editor:
+    dependency: transitive
+    description:
+      name: flutter_code_editor
+      sha256: "9af48ba8e3558b6ea4bb98b84c5eb1649702acf53e61a84d88383eeb79b239b0"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.3.5"
   flutter_colorpicker:
     dependency: transitive
     description:
@@ -679,6 +707,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "0.7.0"
+  hive:
+    dependency: transitive
+    description:
+      name: hive
+      sha256: "8dcf6db979d7933da8217edcec84e9df1bdb4e4edc7fc77dbd5aa74356d6d941"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.2.3"
   hooks:
     dependency: transitive
     description:
@@ -764,6 +800,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "3.0.2"
+  linked_scroll_controller:
+    dependency: transitive
+    description:
+      name: linked_scroll_controller
+      sha256: e6020062bcf4ffc907ee7fd090fa971e65d8dfaac3c62baf601a3ced0b37986a
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.2.0"
   lints:
     dependency: transitive
     description:
@@ -916,6 +960,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.0.0"
+  mocktail:
+    dependency: transitive
+    description:
+      name: mocktail
+      sha256: "890df3f9688106f25755f26b1c60589a92b3ab91a22b8b224947ad041bf172d8"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.4"
   msgpack_dart:
     dependency: transitive
     description:
@@ -1340,6 +1392,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "3.0.0"
+  scrollable_positioned_list:
+    dependency: transitive
+    description:
+      name: scrollable_positioned_list
+      sha256: "1b54d5f1329a1e263269abc9e2543d90806131aa14fe7c6062a8054d57249287"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.3.8"
   sensors_plus:
     dependency: transitive
     description:

client/pubspec.yaml

@@ -82,6 +82,9 @@ dependencies:
   flet_webview:
     path: ../sdk/python/packages/flet-webview/src/flutter/flet_webview
 
+  flet_code_editor:
+    path: ../sdk/python/packages/flet-code-editor/src/flutter/flet_code_editor
+
   cupertino_icons: ^1.0.6
   wakelock_plus: ^1.4.0
   package_info_plus: ^9.0.0

sdk/python/examples/controls/code_editor/example_1.py

@@ -0,0 +1,46 @@
+import flet_code_editor as fce
+
+import flet as ft
+
+CODE = """import flet as ft
+
+def main(page: ft.Page):
+    counter = ft.Text("0", size=50, data=0)
+
+    def btn_click(e):
+        counter.data += 1
+        counter.value = str(counter.data)
+        counter.update()
+
+    page.floating_action_button = ft.FloatingActionButton(
+        icon=ft.Icons.ADD, on_click=btn_click
+    )
+    page.add(
+        ft.SafeArea(
+            ft.Container(
+                counter,
+                alignment=ft.Alignment.CENTER,
+                expand=True,
+            ),
+            expand=True,
+        ),
+    )
+
+ft.run(main)
+"""
+
+
+def main(page: ft.Page):
+    page.add(
+        fce.CodeEditor(
+            language="python",
+            code_theme="atom-one-light",
+            # text_style=ft.TextStyle(font_family="monospace", size=14),
+            text=CODE,
+            expand=True,
+            on_change=lambda e: print("Changed:", e.data),
+        )
+    )
+
+
+ft.run(main)

sdk/python/examples/controls/code_editor/example_2.py

@@ -0,0 +1,74 @@
+import flet_code_editor as fce
+
+import flet as ft
+
+DART_SAMPLE = """import 'package:flutter/material.dart';
+
+void main() {
+  runApp(const MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  const MyApp({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const MaterialApp(
+      home: Scaffold(
+        body: Center(child: Text('Hello CodeEditor')),
+      ),
+    );
+  }
+}
+"""
+
+
+def main(page: ft.Page):
+    theme = fce.CodeTheme(
+        styles={
+            "keyword": ft.TextStyle(
+                color=ft.Colors.INDIGO_600, weight=ft.FontWeight.W_600
+            ),
+            "string": ft.TextStyle(color=ft.Colors.RED_700),
+            "comment": ft.TextStyle(color=ft.Colors.GREY_600, italic=True),
+        }
+    )
+
+    text_style = ft.TextStyle(
+        font_family="monospace",
+        height=1.2,
+    )
+
+    gutter_style = fce.GutterStyle(
+        text_style=ft.TextStyle(
+            font_family="monospace",
+            height=1.2,
+        ),
+        show_line_numbers=True,
+        show_folding_handles=True,
+        # background_color=ft.Colors.GREY_200,
+        # padding=ft.Padding.symmetric(horizontal=8),
+        width=180,
+    )
+
+    page.add(
+        ft.Text("Dart Code Editor Example", size=20),
+        fce.CodeEditor(
+            language="dart",
+            code_theme=theme,
+            autocompletion_enabled=True,
+            autocompletion_words=[
+                "MaterialApp",
+                "Scaffold",
+                "StatelessWidget",
+                "Widget",
+            ],
+            text=DART_SAMPLE,
+            text_style=text_style,
+            gutter_style=gutter_style,
+            expand=True,
+        ),
+    )
+
+
+ft.run(main)

sdk/python/examples/controls/code_editor/example_3.py

@@ -0,0 +1,43 @@
+import flet_code_editor as fce
+
+import flet as ft
+
+CODE = """# 1
+# 2
+# 3
+import json
+import textwrap
+
+print("Folding demo")
+"""
+
+
+def main(page: ft.Page):
+    editor = fce.CodeEditor(
+        language="python",
+        value=fce.TextEditingValue(
+            text=CODE,
+            selection=ft.TextSelection(base_offset=31, extent_offset=39),
+        ),
+        expand=True,
+        on_selection_change=lambda e: print("Selection:", e),
+    )
+
+    async def fold_imports():
+        await editor.fold_imports()
+
+    async def fold_comment():
+        await editor.fold_comment_at_line_zero()
+
+    page.add(
+        ft.Row(
+            [
+                ft.Button("Fold imports", on_click=fold_imports),
+                ft.Button("Fold comment", on_click=fold_comment),
+            ]
+        ),
+        editor,
+    )
+
+
+ft.run(main)

sdk/python/packages/flet-code-editor/CHANGELOG.md

@@ -0,0 +1,10 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
+and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
+
+## 0.1.0
+
+Initial release.