Hey there! I get it—spending hours hunting for the right input widget that handles multi-line text, has proper editor tools, and works smoothly on Flutter Web can be super frustrating. Let’s break down your current setup and fix that broken editor tool issue.

Your Current Setup Analysis #

You’re using flutter_markdown for preview and markdown_editable_textinput for the input field. While these work for basic Markdown support, the editor toolbar functionality (like bold/italic/list buttons) often breaks on Flutter Web because markdown_editable_textinput isn’t fully optimized for web environments.

Recommended Solution: Use flutter_quill #

flutter_quill is a robust, well-maintained rich text editor that natively supports Markdown, works seamlessly on Flutter Web, and comes with a fully functional toolbar out of the box. It handles multi-line input perfectly and gives you all the editor tools you need.

Step 1: Add the Dependency

First, update your pubspec.yaml with the latest version:

dependencies:
  flutter_quill: ^latest_version # Grab the newest version from pub.dev

Step 2: Implement the Editor and Preview

Replace your existing code with this setup:

// Initialize a controller to manage the editor content
final QuillController _quillController = QuillController.basic();

// The editor with a functional toolbar
final _contextMissionEditor = Padding(
  padding: EdgeInsets.only(top: 24.0, bottom: 12.0),
  child: Column(
    children: [
      // Customizable editor toolbar
      QuillToolbar.basic(controller: _quillController),
      // Multi-line input area
      Container(
        height: 220, // Adjust to your preferred height
        padding: EdgeInsets.all(8.0),
        decoration: BoxDecoration(
          border: Border.all(color: Colors.grey.shade300),
          borderRadius: BorderRadius.circular(8.0),
        ),
        child: QuillEditor.basic(
          controller: _quillController,
          readOnly: false, // Set to true for preview mode
        ),
      ),
    ],
  ),
);

// Markdown preview (convert Quill content to Markdown)
final _contextMissionPreview = Padding(
  padding: EdgeInsets.only(top: 24.0, left: 12.0),
  child: FutureBuilder<String>(
    future: _quillController.document.toMarkdown(),
    builder: (context, snapshot) {
      if (snapshot.hasData) {
        return MarkdownBody(data: snapshot.data!);
      }
      return const CircularProgressIndicator();
    },
  ),
);

Step 3: Sync Content with Your Model

To keep your model updated with the editor content, add a listener to the controller:

@override
void initState() {
  super.initState();
  _quillController.addListener(() {
    // Convert current editor content to Markdown and update your model
    _quillController.document.toMarkdown().then((markdownContent) {
      model.setOnTextChangedContext(markdownContent);
    });
  });
}

Why This Works for Flutter Web #

• Full web compatibility: Toolbar buttons, text formatting, and multi-line input all work as expected on web browsers.
• Markdown support: You can import/export Markdown content seamlessly, so you don’t have to switch away from your preferred syntax.
• Customizable toolbar: Add or remove buttons (like headings, links, or code blocks) based on your app’s needs.

If You Want to Stick with Your Current Packages #

If you’d rather not switch, try these quick fixes first:

• Ensure you’re using the latest versions of flutter_markdown and markdown_editable_textinput.
• Check the GitHub issues for markdown_editable_textinput—there might be web-specific workarounds shared by the community.
• Test with a minimal Flutter Web project to rule out conflicts with other dependencies in your app.

That said, flutter_quill is the most reliable choice for a production-ready, web-compatible Markdown editor in my experience.

内容的提问来源于stack exchange，提问作者MayuriXx