How to create a simple markdown editor using Flutter

Hello everyone!👋

I am writing this article for coders who like Flutter. Through this article, I hope to discuss how to create a simple markdown editor using flutter for mobile applications.

What is Flutter and why use Flutter?🤔

Flutter is an open-source and free mobile UI framework that allows you to create a native mobile application with only one code base. I am using flutter here because flutter is a modern framework, and it is easy to create a mobile application with it. Additionally, it has good documentation. Every time one of my widgets in my code has given me trouble, I’ve been able to check the documentation and find the solution. In addition, it has a good growing community, and it support VS code.

What is Markdown and why use markdown?🤔

Markdown is a simple markup language used to format text using a plain-text editor. Markdown-based content is supported by almost every operating system and it can be uploaded to any repository. Also, it can be opened using any kind of editor. And there are not any difficulties when moving the content among operating systems, documentation software, or content management system. It is very easy to share content among disparate systems when you are working with a team. Additionally, Markdown enables collaboration on content between developers and authors, who usually have different levels of technical expertise. Also, files generated in the Markdown editor can be simply synced and shared to WordPress, Google Drive, and Dropbox.

Due to its adaptability, Markdown is becoming more and more popular among authors, developers, and content writers. You can format plain text and output different results using this free markup language. It means that it is no longer necessary to buy expensive software to create and publish various content. That’s why I chose the Markdown editor for this app, and I thought it would be helpful for mobile app developers.

Cool!😎 Let’s create our application.

First, you should create a new flutter app.

flutter create markdown_editor

Then create a file called home.dart and edit your main.dart file as follows.

Run this command in the terminal to add the simple markdown editor library to your application.

flutter pub add simple_markdown_editor

It adds a new line to the dependencies of your pubspec.yaml file.

dependencies:
simple_markdown_editor: ^0.2.0

Now you can import the simple markdown editor package in your home.dart file. This is optional because if you don’t import this package the editor will import it itself.

import 'package:simple_markdown_editor/simple_markdown_editor.dart';

This simple markdown editor library has many features.

· convert text to bold, Italic, and Strikethrough

· convert text to code, Quote, and links

· Convert text to heading (H1, H2, H3)

· Convert text to unorder list and checkbox list

· Support multiline convert

· Support auto-convert emoji

Now you can add the markdown form field to your code.

MarkdownFormField(
controller: _textController,
emojiConvert: true,
),

However, one may argue that clicking the “bold” button is simpler than typing a list of special characters, and in most cases, they would be correct. Sometimes, the markdown editor is not very user-friendly, as users need to be well-versed in the Markdown language to edit the text. For example,

#Heading 1

#Heading 1

##Heading 2

**bold text**

_italic text_

Therefore, it is quite difficult for a user. That’s why the simple markdown editor package gives you a toolbar.😍 So, it is no longer an inconvenience to the user and they also can easily click on the “bold” button and bold the text.

This is the code for editable text with a toolbar,

MarkdownFormField(
controller: _textController,
enableToolBar: true,
emojiConvert: true,
),

After enabling the toolbar, you can see a toolbar above the keyboard. Now you can add your own text here as desired.

The toolbar offers many options and formatting a text will be easy with the help of this toolbar. Let’s identify the options in the toolbar.

If you want to see a preview after adding the text you can add a preview tab other than the editor tab. Also, you need to add a flutter markdown library for the application. Run the following command on your terminal,

flutter pub add flutter_markdown

This line will add a line to the dependencies of your pubspec.yaml file.

dependencies:
flutter_markdown: ^0.6.9+1

Now you can import the flutter markdown package in your home.dart file.

import 'package:flutter_markdown/flutter_markdown.dart';

Using the MarkdownBody widgets is simple, just pass in the source markdown as a string. You can pass the “text” as the source markdown.

MarkdownBody(data: text),

Now you can see a preview of added text in the preview tab. Wow!! It is awesome🤩…

This is the complete code for home.dart file,

Try this code yourself and enjoy the output.

We have reached the end of the article and I hope you got something useful from this article.😃 Thanks for reading❤️!