フラッタ付きシンプルなマークダウンエディタの構築

私は現在Goryonと呼ばれるアプリに取り組んでいる- twtxtモバイルアプリ.アプリのいくつかの機能の一つは、それはあなたのTwitterの(あなたのTwitterのメッセージのようなkindaを構成することができますが、それはMarkdownを使用することができます).

我々の建物

始めましょう

そのためにはTextEditingControllerに接続されているTextFieldが必要になるでしょう

_textController = TextEditingController()


....

TextFormField(
                        autofocus: true,
                        maxLines: 8,
                        controller: _textController
                        )

それから、私はマークダウン構文でテキストボックスで強調表示されたテキストを囲む機能をつくりました

  void _surroundTextSelection(String left, String right) {
    final currentTextValue = _textController.value.text;
    final selection = _textController.selection;
    final middle = selection.textInside(currentTextValue);
    final newTextValue = selection.textBefore(currentTextValue) +
        '$left$middle$right' +
        selection.textAfter(currentTextValue);

    _textController.value = _textController.value.copyWith(
      text: newTextValue,
      selection: TextSelection.collapsed(
        offset: selection.baseOffset + left.length + middle.length,
      ),
    );
  }

左側は左側の文字列です.右側は右側の文字列です.
テキストを太字にするには、次のようにします.

_surroundTextSelection('**', '**')

コードブロックの追加

_surroundTextSelection('```

', '

```')

画像の追加

_surroundTextSelection('![](https://', ')'),

このrepoのフルコードをチェックしてください.それは今のすべてです!