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);


  @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クラスを眺め続けて少しハマりまってました.

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