LoginSignup
0
1

[flutter] quill text editorでonChangeのようにtextの変化を感知できる関数を自作してみた。

Posted at

はじめに

こんにちは、quill text editorでは、textfieldのonChangedのような文字の変化を取得する関数は用意されてないみたいです。(自分調べ)

ですが、既存のquillが提供されているメゾットとstatefullWidgetのinitStateでなんやかんやすると同じような関数を自作することができましたのでご紹介します。

公式ドキュメント導入

quill公式ドキュメント

ライブラリの導入に関してはここでは割愛します。
上記からアクセスしてください。

controller参照

controller参照

class MyEditorPage extends StatefulWidget {
  @override
  _MyEditorPageState createState() => _MyEditorPageState();
}

class _MyEditorPageState extends State<MyEditorPage> {
quill.QuillController _controller = quill.QuillController.basic();
 

まずは上記のように、controllerを参照します。
ここではquillCOntrollerのbasicを参照していますが、ここはbasicのパラメータを参照しなくても全く問題ありません。

initState内にメゾットを記載

 @override
  void initState() {
    super.initState();

   _controller.document.changes.listen((event) {

  print(_controller.document.toPlainText().toString()); 

  print(_controller.document.toPlainText().length);  

    });
    
  }

上記コードで文字の変化を取得できるようになったはずです。

これで、文字数のバリデーションをリアルタイムで更新できたり色々便利!

何かご指摘等あればぜひコメントお願いします!

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1