2023-10-29 SteemLife Development Journal

I'm currently developing a markdown editor for the writing screen in Flutter. To achieve this, I searched pub.dev for Flutter editor libraries and found some useful packages.

markdown_editable_textinput

markdown_editable_textinput is one of the simplest packages to implement. However, it has limited customization options.

Here's an example of its usage:

import 'package:markdown_editable_textinput/format_markdown.dart';
import 'package:markdown_editable_textinput/markdown_text_input.dart';

class PostWritePage extends StatelessWidget {
  const PostWritePage({super.key});

  @override
  Widget build(BuildContext) { 
    return MarkdownTextInput(
      (String value) {
        // your code here
      }, 
      label: 'Tell me your story',
      markdown,
      actions: MarkdownType.values,
      controller: contentController,
      textStyle: TextStyle(fontSize: 16),
    );
  }
}

Here's a demo screen of this package:

I initially considered using this package but eventually gave up due to its lack of customization.

simple_markdown_editor

Simple_markdown_editor has not received updates since March 12, 2022, and installation fails due to a conflict with the markdown package version.

Below is a screenshot of the failed installation:

There was also a modified version called simple_markdown_editor_plus, but it faced the same installation issues.

I briefly contemplated forking this package and making modifications but abandoned the idea after discovering the markdown_toolbar package.

markdown_toolbar

I anchored it to the bottom of the screen using markdown_toolbar and crafted a Markdown Editor Toolbar tailored to my specific button requirements.

Here's a code snippet to integrate markdown_toolbar:

MarkdownToolbar(
  useIncludedTextField: false,
  controller: contentController,
  focusNode: contentFocusNode,
  collapsable: false,
  iconSize: 18.0,
  width: MediaQuery.of(context).size.width / 9 - 2.0,
  height: 40,
  spacing: 0.0,
  runSpacing: 0.0,
  hideCode: true,
  hideCheckbox: true,
  hideNumberedList: true,
  hideStrikethrough: true,
  alignment: WrapAlignment.spaceBetween,
  iconColor: Theme.of(context).colorScheme.onSurface,
  dropdownTextColor: Theme.of(context).colorScheme.onSurface,
  backgroundColor: Theme.of(context).colorScheme.surface,
);

Below is an image of a markdown toolbar created with markdown_toolbar:

Conclusion

On mobile platforms, a writing editor may not require an extensive set of features. A simple and user-friendly design is essential for a mobile editor. The combination of markdown_editable_textinput and markdown_toolbar can be an excellent choice to meet these requirements. Specifically, markdown_editable_textinput offers a straightforward implementation, while markdown_toolbar effectively provides the necessary core functionality.

Compared to other editors with numerous options and complex layouts, these packages enable users to write and publish quickly. I aim is to provide a stress-free writing experience for mobile users.

---

I'm a full-stack developer, working on various apps and projects.
And I'm constantly sharing articles related to development.
If you're curious about the project, you can learn more about it through the following links: [Steemlife] Dreaming of a free life on Steem

Posted through the ECblog app (https://blog.etain.club)