📌
2020-12-23

FlutterでMarkDown Editorを作る

Flutter

Markdown

今回の記事の趣旨は,文字入力エリア(TextEdditingController)のカスタマイズです.Flutterで開発をしていると,Widgetが豊富でどれを継承すれば良いのか分からないことがありました.
文字入力については,TextEdditingControllerをオーバライドすれば良いという結論に至ったので,TextEdditingControllerについて解説します.
※)Markdownを実装したい場合は,素直にPackageを使うべきです.

CodePenのデモ

codepenで公開しているので,もし良かったら遊んでみてください!
https://codepen.io/kawa1214/pen/oNxgRpy

コードについて

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クラスを眺め続けて少しハマりまってました.
どこに書いてあるのか分かればシンプルなのですが...