simple_markdown_editor_plus

Description:

simple markdown editor plus

simple_markdown_editor_plus #
This is a fork of simple_markdown_editor by zahnia88



Simple markdown editor library For flutter.
For demo video, you can see it at this url Demo
What's new (03/12/2022) #

Update Dependencies to fix markdown and flutter_markdown conflict.

Features #

✅ Convert to Bold, Italic, Strikethrough
✅ Convert to Code, Quote, Links
✅ Convert to Heading (H1, H2, H3).
✅ Convert to unorder list and checkbox list
✅ Support multiline convert
✅ Support auto convert emoji

Usage #
Add dependencies to your pubspec.yaml
dependencies:
simple_markdown_editor_plus: ^0.2.7
copied to clipboard
Run flutter pub get to install.
How it works #
Import library
import 'package:simple_markdown_editor_plus/simple_markdown_editor_plus.dart';
copied to clipboard
Initialize controller and focus node. These controllers and focus nodes are optional because if you don't create them, the editor will create them themselves
TextEditingController _controller = TextEditingController();
FocusNode _focusNode = FocusNode();
copied to clipboard
Show widget for editor
// editable text with toolbar
MarkdownFormField(
controller: _controller,
enableToolBar: true,
emojiConvert: true,
autoCloseAfterSelectEmoji: false,
)

// editable text without toolbar
MarkdownField(
controller: _controller,
emojiConvert: true,
)
copied to clipboard
if you want to parse text into markdown you can use the following widget:
String data = '''
**bold**
*italic*

#hashtag
@mention
'''

MarkdownParse(
data: data,
onTapHastag: (String name, String match) {
// name => hashtag
// match => #hashtag
},
onTapMention: (String name, String match) {
// name => mention
// match => #mention
},
)
copied to clipboard
Make sure to enable toolbar enableToolBar: true, in order to set the colors
MarkdownFormField(
controller: _controller,
enableToolBar: true,
emojiConvert: true,
autoCloseAfterSelectEmoji: false,
// toolbar's background color, text color will be based on theme
toolbarBackground: Colors.blue,
// toolbar's expandable widget colors like headings, ordering
expandableBackground: Colors.blue[200],
)
copied to clipboard