DOCSEARCHbyAlgolia
Submit Docs

Flutter Quill

repository·master·Indexed 25 days ago

https://github.com/singerdmx/flutter-quill

A rich text editor and Quill component for Flutter providing a WYSIWYG editing experience across Android, iOS, web, and desktop. It uses the Quill Delta format for document persistence and includes extensions for embedding images and videos, as well as a dedicated testing package, flutter_quill_test, for interacting with the QuillEditor in widget tests.

Tokens
28K
Snippets
71
Records
148
Agent score
81%

What's inside flutter-quill

  1. Understand Delta and Operations

    master

    Delta is a structured format used to represent text editing operations consistently and efficiently. It is composed of a list of Operation objects that describe changes to a document. Each operation is executed sequentially to transform the document's state.

    To use Delta and Operation classes, import the following package:

    import 'package:flutter_quill/quill_delta.dart';

  2. Install flutter_quill_extensions

    master

    Add flutter_quill_extensions to your project to enable support for embedding images and videos in flutter_quill. You can install it via pub or by referencing the git repository directly.

    flutter pub add flutter_quill_extensions

    OR

    dependencies:
  flutter_quill_extensions:
    git:
      url: https://github.com/singerdmx/flutter-quill.git
      ref: v<latest-version-here>
      path: flutter_quill_extensions

  3. Platform-specific requirements for Web and Desktop

    master

    Web

    • Enable web support via flutter config --enable-web.
    • You must provide an EmbedBuilder (e.g., defaultEmbedBuilderWeb).
    • You must provide a webImagePickImpl for image handling.

    Desktop

    • You must provide a filePickImpl to enable file picking functionality in the toolbar.

  4. Enable clipboard action buttons in QuillSimpleToolbar

    master

    In version 11.x.x, clipboard action buttons (showClipboardCut, showClipboardCopy, and showClipboardPaste) are disabled by default to improve performance and UI space usage. To display them, explicitly set these properties to true in your QuillSimpleToolbarConfig.

    QuillSimpleToolbar(
  config: QuillSimpleToolbarConfig(
    showClipboardCut: true,
    showClipboardCopy: true,
    showClipboardPaste: true,
  )
)

  6. Add custom buttons to QuillSimpleToolbar

    master

    You can extend the QuillSimpleToolbar by adding custom buttons to the end of the toolbar using the customButtons option within QuillSimpleToolbarConfig. This option accepts a List of QuillToolbarCustomButtonOptions objects.

    QuillSimpleToolbar(
  controller: _controller,
  config: QuillSimpleToolbarConfig(
    customButtons: [
      QuillToolbarCustomButtonOptions(
        icon: const Icon(Icons.ac_unit),
        onPressed: () {
          debugPrint('button pressed');
        },
      ),
    ],
  ),
),

  7. Configure platform setup for images and videos

    master

    The extension relies on several underlying plugins that require platform-specific setup:

    1. quill_native_bridge: Required for saving images. Follow the quill_native_bridge setup guide.
    2. image_picker: Required for picking images. Follow the image_picker installation guide.
    3. video_player: Required for video playback. Follow the video_player setup guide.

    Loading Images from the Internet

    Android

    • Add necessary permissions to AndroidManifest.xml. Internet permission is included by default for debugging but must be explicitly added for release versions.
    • If you need to support HTTP (non-HTTPS), you must adjust your app settings for release mode (see Android Cleartext/Plaintext HTTP guide).

    macOS

    • Include a key in your Info.plist file to enable internet access.

  8. Configure search for Embed objects

    master

    By default, the content of Embed objects is excluded from searches. To include them, configure the searchEmbedMode within the searchConfig property of QuillEditorConfig inside your QuillEditor.

    QuillEditor.basic(
  controller: _controller,
  config: QuillEditorConfig(
    searchConfig: const QuillSearchConfig(
      searchEmbedMode: SearchEmbedMode.plainText,
    ),
  ),
  ...
),

  9. Integrate a Toolbar with QuillEditor

    master

    A Toolbar can be connected to a QuillController. The toolbar commands the controller, which in turn updates the document and the renderer.

    • Customization: You can customize the toolbar to show all or only specific editing controls.
    • Embed Callbacks: The toolbar provides callbacks for reacting to the addition of images or videos.
    • Custom Embeds: For custom embeds, you do not need to define extra callbacks in the toolbar context; instead, you can host the logic within your own custom embed implementations.

  10. Migrate from QuillToolbar to Custom Toolbars in v11.x.x

    master

    In version 11.0.0 and later, the QuillToolbar widget has been removed. It was previously used as a non-visual provider for localization and toolbar settings.

    For QuillSimpleToolbar, no action is required as it handles these internally.

    For custom toolbars, you must now:

    1. Add the required localization delegate in your app widget.
    2. Remove the QuillToolbar wrapper.
    3. Configure buttons individually using their specific constructors instead of using QuillToolbarConfigurations.

    To customize buttons from the flutter_quill library within your custom toolbar, pass QuillToolbarBaseButtonOptions to each button's baseOptions parameter.

    final QuillController _controller = QuillController.basic();
final QuillToolbarBaseButtonOptions _baseOptions = QuillToolbarBaseButtonOptions(
  afterButtonPressed: () {
    // Do something
  }
);

YourCustomToolbar(
  buttons: [
    QuillToolbarToggleStyleButton(
      controller: _controller,
      baseOptions: _baseOptions,
      attribute: Attribute.bold,
    ),
    QuillToolbarClearFormatButton(
      controller: _controller,
      baseOptions: _baseOptions,
    ),
    QuillToolbarFontSizeButton(
      controller: _controller,
      baseOptions: _baseOptions,
      options: const QuillToolbarFontSizeButtonOptions(
        items: {'Small': '8', 'Medium': '24.5', 'Large': '46'},
      ),
    )
  ],
);

  12. Customize iOS Launch Screen Assets

    master

    To customize the iOS launch screen for your Flutter project, you can either replace the image files directly in the example/ios/Runner/Assets.xcassets/LaunchImage.imageset/ directory or use Xcode for a more visual approach.

    Using Xcode:

    1. Open your Flutter project's iOS workspace using the command: open ios/Runner.xcworkspace.
    2. In the Xcode Project Navigator, navigate to Runner/Assets.xcassets.
    3. Drag and drop your desired images into the asset catalog.
    open ios/Runner.xcworkspace