Qaid Markdown Editor #

A professional, modern, and highly customizable Markdown editor widget for Flutter, created by Saher Qaid.

Features #

• 📱 Responsive UI: Split-view for wide screens, tab view for narrow screens.
• 🎨 Syntax Highlighting: Comes with beautiful, modern themes for both light and dark modes.
• 🔧 Highly Customizable: Add custom action buttons, a title, and use your own TextEditingController.
• 📝 Built-in Templates: Quickly insert templates for tables, code blocks, and checklists.
• 🌐 GFM Support: Renders GitHub Flavored Markdown, including tables and task lists.
• 📖 Help Dialog: A built-in guide to Markdown syntax for your users.

Getting Started #

Add the package to your pubspec.yaml:

dependencies:
  qaid_markdown_editor: ^1.0.0 # Use the latest version from pub.flutter-io.cn

Then, import the library and use the widget in your app:

import 'package:flutter/material.dart';
import 'package:qaid_markdown_editor/qaid_markdown_editor.dart';

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

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: QaidMarkdownEditor(
        title: Text('My Document'),
        initialValue: '# Hello, from Qaid Markdown Editor!',
      ),
    );
  }
}

Customization Example #

You can easily customize the editor by passing additional parameters.

import 'package:flutter/material.dart';
import 'package:qaid_markdown_editor/qaid_markdown_editor.dart';
import 'package:google_fonts/google_fonts.dart';

class MyAdvancedEditorPage extends StatefulWidget {
  const MyAdvancedEditorPage({super.key});
  @override
  State<MyAdvancedEditorPage> createState() => _MyAdvancedEditorPageState();
}

class _MyAdvancedEditorPageState extends State<MyAdvancedEditorPage> {
  final _controller = TextEditingController();

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return QaidMarkdownEditor(
      controller: _controller, // Use your own controller
      title: Text(
        'My Custom Editor',
        style: GoogleFonts.dosis(fontWeight: FontWeight.w600),
      ),
      actions: [ // Add your own custom buttons to the AppBar
        IconButton(
          icon: const Icon(Icons.save),
          onPressed: () {
            final content = _controller.text;
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text('Content saved! Length: ${content.length}')),
            );
          },
        ),
      ],
    );
  }
}

Widget Properties (API) #

Here are the customizable properties of the QaidMarkdownEditor widget:

QaidMarkdownEditor({
  Key? key,
  TextEditingController? controller,
  String? initialValue,
  Widget? title,
  List<Widget>? actions,
  Map<String, TextStyle> lightCodeTheme,
  Map<String, TextStyle> darkCodeTheme,
})

Issues and Contributions #

If you find a bug or have a feature request, please file an issue on our GitHub repository. Contributions are also welcome!

Package created and maintained by Saher Qaid.