quill_native_bridge: Mastering Native Clipboard & Rich Text in Flutter

Building document editors, note-taking apps, or chat clients in Flutter often leads developers straight into a frustrating hurdle: the default Flutter Clipboard API only supports plain UTF-8 text.

When users copy formatted text from Microsoft Word, Safari, or Chrome, they expect bold headings, hyperlinks, bulleted lists, and inline images to paste seamlessly. Enter quill_native_bridge, a specialized native interop package designed to bring rich multi-format clipboard operations to Flutter.

The Clipboard Dilemma in Standard Flutter

By default, Flutter’s built-in Clipboard.getData(Clipboard.kTextPlain) strips all HTML, RTF, and image data:

// Flutter default clipboard only reads plain text
ClipboardData? data = await Clipboard.getData(Clipboard.kTextPlain);
print(data?.text); // Stripped of all bold, links, tables, and images!

For rich-text editors like Flutter Quill or custom markdown editors, losing structure ruins the user experience.

Solving It with quill_native_bridge

quill_native_bridge interfaces directly with platform clipboard systems:

• macOS / iOS: NSPasteboard / UIPasteboard reading public.html, public.rtf, and image representations.
• Windows: Win32 Ole clipboard reading CF_HTML and bitmap handles.
• Linux: X11 and Wayland MIME type targets (text/html, image/png).
• Web: Standard async browser navigator.clipboard API.

dependencies:
  quill_native_bridge: ^0.2.0

Reading HTML and Images from the Clipboard

import 'package:quill_native_bridge/quill_native_bridge.dart';

Future<void> handlePaste() async {
  final bridge = QuillNativeBridge();

  // Check available MIME types on the system clipboard
  final formats = await bridge.getClipboardFormats();

  if (formats.contains(ClipboardFormat.html)) {
    final String? htmlContent = await bridge.getClipboardHtml();
    print('Pasted rich HTML: $htmlContent');
  } else if (formats.contains(ClipboardFormat.image)) {
    final Uint8List? imageBytes = await bridge.getClipboardImage();
    print('Pasted image bytes length: ${imageBytes?.length}');
  } else {
    final String? plainText = await bridge.getClipboardText();
    print('Pasted plain text: $plainText');
  }
}

Key Takeaway

If your Flutter application deals with content authoring, documents, or rich messaging across desktop and mobile, integrating quill_native_bridge provides the native clipboard fidelity users expect.