A Flutter based code editor

Overview

rich_code_editor

A simple package that supports creating code editors in Flutter.

Flutter version supported: Flutter 1.22.5

Getting Started

There are two main components of the rich code editor:

  1. Editor
  2. Syntax Highlighter

The editor is a text area which is identical to Flutter's TextField widget. However, unlike a regular TextField the editor uses an instance of syntax highlighter object to parse and highlight code syntax.

Since the editor itself is independent of the syntax highlighting rules, the same editor can be used for any other programming langugages. Only the syntax highlighter implementation needs to be created separately for each new programming language.

The example demo uses a dummy syntax highlighter implementation DummySyntaxHighlighter.

Get Started by creating your own implementation for SyntaxHighlighterBase class.

The syntax highlight logic part is not much implemented in this package as that will change as per the choice of programming language.

Comments
  • Migrate to flutter 2.2 (null-safe)

    Migrate to flutter 2.2 (null-safe)

    This still leaves some deprecated APIs, but at least it builds ands seems to work. Bonus: also adds a macOS app to the example (used that for testing).

    Most of this work is done by the migration tool, but had to tweak a few things here and there. It's possible more things have been marked as non-nullable than should be, please check.

    opened by zefhemel 4
  • Text manipulation gestures (e.g. double tap, tap & hold) do not seem to work on Android.

    Text manipulation gestures (e.g. double tap, tap & hold) do not seem to work on Android.

    Hello

    I have noticed that text manipulation gestures do not seem to work on Android. For example, double tapping a word on the default material TextField highlights that word. On a CodeTextField, the cursor just moves to the beginning of the word without highlighting it. Similarly, tapping and holding a word does nothing but move the cursor to the beginning.

    Also, this may be Android related only, but on some keyboards there are text gestures such as: Sliding across the spacebar to move the cursor and dragging the backspace to the left to delete multiple words. The functionality works (sliding the the spacebar does move the cursor's underlying position, and sliding the backspace does delete multiple words) however there's no visual feedback.

    Sliding backspace should highlight words-to-be-deleted before it deletes them, and sliding across the spacebar should move the blinking cursor as its position is being changed.

    I was using my own Highlighter, but tested with the provided DummyHighlighter and the behaviour is still missing. Any thoughts?

    Thanks for the great work by the way!

    rich_code_editor version: 0.2.9 flutter version: 1.7.8+hotfix 3 device: Pixel 2XL running Android 10 (QP1A. 191105)

    flutter doctor -v:

    PS C:\Development\Flutter\project> flutter doctor -v
    [√] Flutter (Channel stable, v1.7.8+hotfix.3, on Microsoft Windows [Version 10.0.18362.476], locale en-GB)
        • Flutter version 1.7.8+hotfix.3 at C:\sdk\flutter
        • Framework revision b712a172f9 (5 months ago), 2019-07-09 13:14:38 -0700
        • Engine revision 54ad777fd2
        • Dart version 2.4.0
    
    
    [!] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
        • Android SDK at C:\Program Files (x86)\Android\android-sdk
        • Android NDK location not configured (optional; useful for native profiling support)
        • Platform android-28, build-tools 28.0.3
        • Java binary at: c:\programdata\Oracle\Java\javapath\java.exe
        • Java version Java(TM) SE Runtime Environment (build 1.8.0_121-b13)
        ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
    
    [!] Android Studio (not installed)
        • Android Studio not found; download from https://developer.android.com/studio/index.html
          (or visit https://flutter.dev/setup/#android-setup for detailed instructions).
    
    [√] VS Code (version 1.40.1)
        • VS Code at C:\Users\Faris\AppData\Local\Programs\Microsoft VS Code
        • Flutter extension version 3.6.0
    
    [√] Connected device (1 available)
        • Pixel 2 XL • 711KPPB0677296 • android-arm64 • Android 10 (API 29)
    
    ! Doctor found issues in 2 categories.
    

    Edit

    So I dug a bit into the code and found that the library has its own implementation of TextSelectionControls, and nothing but Paste is supported, how come? What's the reason behind this?

    enhancement 
    opened by fadulalla 4
  • Implementation missing for the class RichCodeEditingController.

    Implementation missing for the class RichCodeEditingController.

    Error: The non-abstract class 'RichCodeEditingController' is missing implementations for these members:
     - TextEditingController.isSelectionWithinTextBounds
    Try to either
     - provide an implementation,
     - inherit an implementation from a superclass or mixin,
     - mark the class as abstract, or
     - provide a 'noSuchMethod' implementation.
    
    class RichCodeEditingController extends ValueNotifier<TextEditingValue> implements TextEditingController {
          ^^^^^^^^^^^^^^^^^^^^^^^^^
    /D:/flutter/packages/flutter/lib/src/widgets/editable_text.dart:225:8: Context: 'TextEditingController.isSelectionWithinTextBounds' is defined `here.`
      bool isSelectionWithinTextBounds(TextSelection selection) {
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^``
    
    opened by hipoojan 3
  • RenderEditable.obscuringCharacter

    RenderEditable.obscuringCharacter

    /C:/package/flutter/.pub-cache/hosted/pub.dartlang.org/rich_code_editor-1.0.0/lib/rich_code_controller.dart:6:7: Error: The non-abstract class 'RichCodeEditingController' is missing implementations for these members:

    • TextEditingController.isSelectionWithinTextBounds Try to either
    • provide an implementation,
    • inherit an implementation from a superclass or mixin,
    • mark the class as abstract, or
    • provide a 'noSuchMethod' implementation.

    class RichCodeEditingController extends ValueNotifier implements TextEditingController { ^^^^^^^^^^^^^^^^^^^^^^^^^ /C:/package/flutter/packages/flutter/lib/src/widgets/editable_text.dart:229:8: Context: 'TextEditingController.isSelectionWithinTextBounds' is defined here.

    bool isSelectionWithinTextBounds(TextSelection selection) { ^^^^^^^^^^^^^^^^^^^^^^^^^^^ /C:/package/flutter/.pub-cache/hosted/pub.dartlang.org/rich_code_editor-1.0.0/lib/rich_editable_code.dart:1617:34: Error: Too few positional arguments: 2 required, 1 given. ? () => controls.handleCopy(this) ^ /C:/package/flutter/.pub-cache/hosted/pub.dartlang.org/rich_code_editor-1.0.0/lib/rich_editable_code.dart:1705:29: Error: Getter not found: 'obscuringCharacter'. text = RenderEditable.obscuringCharacter * text.length; ^^^^^^^^^^^^^^^^^^ 2

    FAILURE: Build failed with an exception.

    opened by Akashkumar201 2
  • The getter 'kMinInteractiveSize' isn't defined for the class 'CodeEditableTextState

    The getter 'kMinInteractiveSize' isn't defined for the class 'CodeEditableTextState

    Compiler message:
    ../../../../soft/flutter/.pub-cache/hosted/pub.dartlang.org/rich_code_editor-0.2.8/lib/code_editor/widgets/code_editable_text.dart:1388:11: Error: Getter not found: 'kMinInteractiveSize'.
              kMinInteractiveSize,
              ^^^^^^^^^^^^^^^^^^^
    ../../../../soft/flutter/.pub-cache/hosted/pub.dartlang.org/rich_code_editor-0.2.8/lib/code_editor/widgets/code_editable_text.dart:1388:11: Error: The getter 'kMinInteractiveSize' isn't defined for the class 'CodeEditableTextState'.
     - 'CodeEditableTextState' is from 'package:rich_code_editor/code_editor/widgets/code_editable_text.dart' ('../../../../soft/flutter/.pub-cache/hosted/pub.dartlang.org/rich_code_editor-0.2.8/lib/code_editor/widgets/code_editable_text.dart').
    Try correcting the name to the name of an existing getter, or defining a getter or field named 'kMinInteractiveSize'.
              kMinInteractiveSize,
              ^^^^^^^^^^^^^^^^^^^
    
    opened by shuvojit007 2
  • (Flutter beta) NoSuchMethodError: The getter 'hasFloatingPlaceholder was called on null.

    (Flutter beta) NoSuchMethodError: The getter 'hasFloatingPlaceholder was called on null.

    I/flutter (30091): Receiver: null
    I/flutter (30091): Tried calling: hasFloatingPlaceholder
    I/flutter (30091): 
    I/flutter (30091): User-created ancestor of the error-causing widget was:
    I/flutter (30091):   CodeTextField
    I/flutter (30091): 
    I/flutter (30091): When the exception was thrown, this was the stack:
    I/flutter (30091): #0      Object.noSuchMethod (dart:core-patch/object_patch.dart:50:5)
    I/flutter (30091): #1      _InputDecoratorState.initState (package:flutter/src/material/input_decorator.dart:1851:33)
    I/flutter (30091): #2      StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:4060:58)
    I/flutter (30091): #3      ComponentElement.mount (package:flutter/src/widgets/framework.dart:3911:5)
    I/flutter (30091): #4      Element.inflateWidget (package:flutter/src/widgets/framework.dart:3093:14)
    I/flutter (30091): #5      Element.updateChild (package:flutter/src/widgets/framework.dart:2896:12)
    ...
    
    

    Flutter doctor output:

    Doctor summary (to see all details, run flutter doctor -v):
    [√] Flutter (Channel beta, v1.8.3, on Microsoft Windows [Version 10.0.18362.295], locale en-GB)
    
    [√] Android toolchain - develop for Android devices (Android SDK version 29.0.1)
    [√] Android Studio (version 3.4)
    [√] Android Studio (version 3.5)
    [!] IntelliJ IDEA Ultimate Edition (version 2019.1)
        X Flutter plugin not installed; this adds Flutter specific functionality.
        X Dart plugin not installed; this adds Dart specific functionality.
    [√] Connected device (1 available)
    
    ! Doctor found issues in 1 category.
    
    opened by kubastick 2
  • Is it possible to manipulate the wrapping/overflow behavior of the text within the editor?

    Is it possible to manipulate the wrapping/overflow behavior of the text within the editor?

    I am trying to manipulate this so that the code does NOT wrap automatically, and instead overflows horizontally so that a user can scroll horizontally.

    opened by kenzieshimrock 0
  • Editing huge chunk of code makes editor slow

    Editing huge chunk of code makes editor slow

    While editing a huge chunk of code, the editor becomes quite slow, probably due to the fact that on every keyPress/change, the syntax highlighting is recalculated for the whole text.

    opened by subhamayd2 0
Owner
Sovit
Full stack developer, Cofounder @Truenary. Currently working with .NET Core & Flutter
Sovit
A flutter plugin about qr code or bar code scan , it can scan from file、url、memory and camera qr code or bar code .Welcome to feedback your issue.

r_scan A flutter plugin about qr code or bar code scan , it can scan from file、url、memory and camera qr code or bar code .Welcome to feedback your iss

PengHui Li 112 Nov 11, 2022
Rich text editor for Flutter based on Delta format (Quill fork)

Visual Editor Visual Editor is a Rich Text editor for Flutter originally forked from Flutter Quill. The editor is built around the powerful Delta docu

Visual Space 190 Jan 7, 2023
WYSIWYG editor for Flutter with a rich set of supported formatting options. (WIP)

✨ rich_editor WYSIWYG editor for Flutter with a rich set of supported formatting options. Based on https://github.com/dankito/RichTextEditor, but for

Festus Olusegun 116 Dec 27, 2022
A Flutter material theme editor

Flutter Theme ⚠️ WARNING: This app is still under development so please expect bugs and missing features in the app. ⚠️ Inspired by Panache, a Flutter

null 0 Jan 2, 2022
A lightweight HTML-Richtext editor for Flutter

Flutter HTML Editor Flutter HTML Editor is a simple HTML-based Richtext editor, which is able to edit and parse a selected set of HTML tags into a Flu

Herry 14 Oct 19, 2022
A Flutter package that provides a WYSIWYG editor backed by flutter_inappwebview and the Summernote library.

Flutter Html Editor - Enhanced Flutter HTML Editor Enhanced is a text editor for Android, iOS, and Web to help write WYSIWYG HTML code with the Summer

Tanay Neotia 200 Dec 31, 2022
🎨 Flutter Material Theme editor

?? Panache A Flutter Material Theme editor. Panache helps you to create beautiful Material themes for your Flutter applications. Customize widgets col

Erick Ghaumez 1.7k Dec 30, 2022
Rich text editor for Flutter

A rich text editor for Flutter FlutterQuill is a rich text editor and a Quill component for Flutter. This library is a WYSIWYG editor built for the mo

X Code 1.7k Jan 4, 2023
An online Dart editor with support for console, web, and Flutter apps

DartPad DartPad is a free, open-source online editor to help developers learn about Dart and Flutter. You can access it at dartpad.dev. What is it? Wh

Dart 1.4k Jan 4, 2023
Panache - 🎨 Flutter Material Theme editor

?? Panache A Flutter Material Theme editor. Panache helps you to create beautiful Material themes for your Flutter applications. Customize widgets col

Erick Ghaumez 1.7k Jan 3, 2023
An Instagram like text editor Flutter widget that helps you to change your text style.

TextEditor An instagram like text editor widget for flutter Show some ❤️ and star the repo to support the project Features Edit TextStyle object font

Mehdi Zarepour 68 Dec 16, 2022
FLUTTER API: Video Editor allows trim, crop, rotate and scale video with a super flexible UI Design

video_editor My other APIs Scroll Navigation Video Viewer Helpers Features Super flexible UI Design. Support actions: Crop Trim Scale Rotate Cover sel

Luis Felipe Murguia Ramos 214 Dec 26, 2022
Umbra - visual editor for shaders in Flutter

Umbra Generated by the Very Good CLI ?? Umbra, visual editor for shaders in Flutter. Getting Started ?? This project contains 3 flavors: development s

Jochum van der Ploeg 189 Dec 14, 2022
MathCanvas - Graphical Math Equation Editor made by Flutter

Graphical Math Equation Editor made by Flutter. My goal is to provide a keyboard typing experience like a calculator. Test Web Page: https:

GongBJ 3 Jun 3, 2022
A simple tag editor for inputing tags in Flutter.

Super Tag Editor A simple tag editor for inputting tags with suggestion box Supported suggestion box Screen Shot 1 Screen Shot 2 ) Usage Add the packa

dab 4 Dec 6, 2022
Megalinks is an android app where we provide free resources available for video editing, like Scenepacks, project files of the big editor, tutorials, etc...

MegaLinks Megalinks is an android app where we provide free resources available for video editing, like Scenepacks, project files of the big editor, t

Vishal Rajesh Karangale 3 Jul 8, 2022
camilo velandia 69 Dec 30, 2022
A completely Responsive Image Editor App- Works on Android & iOS

Image Editor App Developed using Flutter with No Plugins (except for picking and saving images)

Rivaan Ranawat 20 Dec 16, 2022
A pattern editor, in the "style" of a Tracker, for the Korg Electribe 2's (synth, sampler, hacktribe).

elfer A pattern editor, in the "style" of a Tracker, for the Korg Electribe 2's (synth, sampler, hacktribe). Status This is very much a WORK-IN-PROGRE

Maksim Lin 14 Dec 5, 2022