kawa.dev

BlogSlide
CodePenのデモコードについておわりに

FlutterでMarkDown Editorを作る

2020-12-23

Flutter

/

Markdown

今回の記事の趣旨は,文字入力エリア(TextEdditingController)のカスタマ イズです.Flutterで開発をしていると,Widgetが豊富でどれを継承すれば良いのか分からないことがありました. 文字入力については,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); 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クラスを眺め続けて少しハマりまってました.

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