Flutter如何实现好用的富文本输入框

在Flutter中想实现一个支持富文本编辑的输入框，类似头条或知乎的发布功能，能插入图片、调整文字样式和排版。试过几个插件但效果不理想：

  • zefyr编辑器的图片上传功能不稳定
  • flutter_quill在移动端滚动时容易卡顿
  • 自定义TextField又难以实现复杂格式

请问有没有成熟方案或优化建议？希望达到流畅的编辑体验，并支持以下功能：

  1. 图文混排
  2. 粗体/斜体/标题等基础样式
  3. 本地图片插入后能同步上传到服务器
2 回复

使用flutter_quill库，它基于Quill.js，支持富文本编辑、图片插入、格式调整等功能。集成简单，可自定义工具栏，满足大多数富文本输入需求。

更多关于Flutter如何实现好用的富文本输入框的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现功能丰富的富文本输入框，可以通过以下方式：

1. 使用官方 TextField 和 TextFormField

基础文本输入框，支持基本的文本输入：

TextField(
  decoration: InputDecoration(
    hintText: '请输入内容',
    border: OutlineInputBorder(),
  ),
  maxLines: 5,
  minLines: 1,
)

2. 使用 flutter_quill 库（推荐）

这是最流行的富文本编辑器库：

import 'package:flutter_quill/flutter_quill.dart';

class RichTextEditor extends StatefulWidget {
  @override
  _RichTextEditorState createState() => _RichTextEditorState();
}

class _RichTextEditorState extends State<RichTextEditor> {
  final QuillController _controller = QuillController.basic();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        QuillToolbar.basic(controller: _controller),
        Expanded(
          child: QuillEditor(
            controller: _controller,
            scrollController: ScrollController(),
            scrollable: true,
            padding: EdgeInsets.all(16),
            autoFocus: false,
            readOnly: false,
          ),
        ),
      ],
    );
  }
}

3. 使用 super_editor 库

另一个强大的选择，提供类似Notion的编辑体验：

import 'package:super_editor/super_editor.dart';

SuperEditor(
  editor: DocumentEditor(
    document: MutableDocument(
      nodes: [
        ParagraphNode(
          id: DocumentEditor.createNodeId(),
          text: AttributedText(text: '开始编辑...'),
        ),
      ],
    ),
  ),
)

4. 自定义富文本功能

如果需要简单自定义，可以结合多个TextField：

Column(
  children: [
    // 工具栏
    Row(
      children: [
        IconButton(icon: Icon(Icons.format_bold), onPressed: () {}),
        IconButton(icon: Icon(Icons.format_italic), onPressed: () {}),
      ],
    ),
    // 文本输入区域
    Expanded(
      child: TextField(
        maxLines: null,
        decoration: InputDecoration(
          hintText: '开始输入...',
          border: InputBorder.none,
        ),
      ),
    ),
  ],
)

推荐方案

对于大多数应用场景，推荐使用 flutter_quill，因为它：

  • 功能完整（粗体、斜体、下划线、列表、图片等）
  • 社区活跃，文档完善
  • 支持自定义扩展
  • 跨平台兼容性好

在 pubspec.yaml 中添加：

dependencies:
  flutter_quill: ^8.0.0

这样就能快速实现功能强大的富文本输入框了。

回到顶部