FlutterでMarkDown Editorを作る

2020/12/23

Dart

目次

目次

  1. はじめに
  2. CodePen のデモ
  3. コードについて
  4. おわりに

はじめに

今回の記事の趣旨は，文字入力エリア(TextEdditingController)のカスタマ イズです。Flutter で開発をしていると，ウィジェット が豊富でどれを継承すれば良いのか分からないことがありました。 文字入力については，TextEdditingController をオーバライドすれば良いという結論に至ったので，TextEdditingController について解説します。

※）Markdown を実装したい場合は，素直に Package を使うべきです。

CodePen のデモ

codepen で公開しているので，もし良かったら遊んでみてください！

code pen

コードについて

TextStyle textStyle(String text) {
  String _textTag = text.split(" ").first;


  TextStyle _h1 = TextStyle(color: Colors.black, fontSize: 32);
  TextStyle _h2 = TextStyle(color: Colors.black, fontSize: 26);
  TextStyle _p = TextStyle(color: Colors.black, fontSize: 16);

 switch (_textTag) {
	 case "#":
	   return _h1;
	   break;
	 case "##":
	   return _h2;
	   break;
	 default:
	  return _p;
 }
}


class CustomTextEditingController extends TextEditingController {
  CustomTextEditingController({String text}) : super(text: text);


  @override
  TextSpan buildTextSpan({TextStyle style, bool withComposing}) {
    List _splitTextList = text.split("\n");


    return TextSpan(
        children: <TextSpan>[
          for (String item in _splitTextList)
            TextSpan(
              text: item + "\n",
              style: textStyle(item),
            ),
        ]
      );
   }
}

TextEditingControllerを継承したCustomTextEditingControllerクラスを作ります。

文字入力の表示をしている部分は，buildTextSpan メソッドなのでこちらをオーバライドして，TextSpan 型で返してあげれば OK です！

textStyle メソッドでは，予め Markdown の Tag と対応した TextStyle を定義しています。String 型の値を渡すと，Tag とマッチした TextStyle が返ってきます。

おわりに

実は，私自身が TextField クラスを眺め続けて少しハマりまってました。

どこに書いてあるのか分かればシンプルなのですが。