Building a Markdown Editor in Flutter: A Step-by-Step Guide

Markdown is a lightweight markup language that is widely used for formatting text. In this article, we will create a simple Markdown editor with live preview functionality using Flutter. We will use two packages: flutter_markdown for rendering Markdown text and markdown_toolbar for editing the text.

Getting Started

First, add the necessary dependencies to your pubspec.yaml file:

dependencies:
 flutter:
 sdk: flutter
 flutter_markdown: ^0.7.3
 markdown_toolbar: ^0.5.0
 get: ^4.6.6

Run flutter pub get to install the packages.

Setting Up the Project

I am using Getx for statemanagement. Create a new Flutter project and set up your main file (main.dart) to initialize the application with GetX for state management.

import 'package:flutter/material.dart';
import 'package:get/get.dart';
void main() {
 runApp(MyApp());
}
class MyApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return GetMaterialApp(
       title: 'Markdown Editor',
       home: MarkdownEditor(),
     );
   }
}

Creating the Markdown Editor

import 'package:flutter/material.dart';
import 'package:flutter_markdown/flutter_markdown.dart';
import 'package:get/get.dart';
import 'package:markdown_toolbar/markdown_toolbar.dart';
import 'markdown_editor_controller.dart';
class MarkdownEditor extends GetView<MarkdownEditorController> {
   const MarkdownEditor({super.key});
   static const String route = "/markdown-editor";
   @override
   Widget build(final BuildContext context) => Scaffold(
     appBar: AppBar(
     title: const Text('Markdown Editor'),
     ),
     body: DefaultTabController(
       length: 2,
       child: Column(
         children: <Widget>[                                                                                                                                                                                                                                                                                                                                                                  
           const TabBar(
           tabs: <Widget>[
             Tab(text: "Edit"),
             Tab(text: "Preview"),
             ],
           ),
           Expanded(
             child: TabBarView(
               children: <Widget>[
                 EditorTab(),
                 PreviewTab(),
               ],
             ),                                        
           ),                                                                                                                                                                                                                                                                                                                                                            ),
         ],
       ),
     ),
   );
}

In the provided code snippet, we’ve set up two tabs: one for editing Markdown content with Markdown formatting capabilities, and another tab for previewing the edited Markdown content.

Editor Tab:

class EditorTap extends GetView<MarkdownEditorController> {
   const EditorTap({super.key});
   @override
   Widget build(BuildContext context) {
     return Column(
       children: <Widget>[
         MarkdownToolbar(
           controller: controller.textEditingController,
           useIncludedTextField: false,
         ),
         Expanded(
           child: TextField(
             keyboardType: TextInputType.multiline,
             maxLines: null,
             decoration: const InputDecoration(
             border: InputBorder.none,
             hintText: "Enter Markdown text…",
             ),
             controller: controller.textEditingController,
           ),
         ),
       ],
     );
   }
}

In the provided code, the MarkdownToolbar widget offers a set of tools for editing Markdown content, while useIncludedTextField is set to false, indicating it doesn’t contain its own text field but instead relies on an external one. The TextField widget below it provides a multiline input field for editing Markdown text directly within the UI.

Preview tab:

class PreviewTab extends GetView<MarkdownEditorController>{
  const PreviewTab({super.key});
  @override
  Widget build(BuildContext context) {
    return Obx(() => Markdown(data: controller.text.value)
  }
}

In PreviewTab, we are using Markdown from flutter_markdown for renderig the text.

Putting it all together:

The MarkdownEditor widget sets up a tab view with two tabs: one for editing the Markdown text and one for previewing the rendered Markdown. The MarkdownToolbar widget provides an easy-to-use toolbar for formatting Markdown text, while the TextField widget is used for text input. The Markdown widget from flutter_markdown renders the Markdown text.

Conclusion

With the flutter_markdown and markdown_toolbar packages, you can easily implement a Markdown editor with a live preview in Flutter. The GetX package simplifies state management, making it easy to keep the editor and preview in sync. This setup provides a user-friendly interface for writing and previewing Markdown content directly within your Flutter application.

Thanks for reading this article ❤

If I got something wrong? Let me know in the comments. I would love to improve.

Until then Bye-Bye.