dart - How to listen for Text-Change in Quill text Editor (Flutter)

Question

I am only familiar with HTML/CSS/JS, and basics of dart/flutter

Developer Level: Beginner
Project type & language: I am developing a notes app for myself, using flutter.

My aim is to save my note, as soon as I update the text... for which I need to use a dart Function to run on every 'text-change' event..

How do I use the Text-Changes event of Quill Editor to detect changes in the Content

THE EQUIVALENT OF THIS IN JAVASCRIPT IS GIVEN BELOW , BUT I DON'T KNOW HOW TO DO IT DART & FLUTTER.

quill.on('text-change', function(delta, oldDelta, source) {
  if (source == 'api') {
    console.log("An API call triggered this change.");
  } else if (source == 'user') {
    console.log("A user action triggered this change.");
  }
});

Answer 1

You can listen to quill document changes stream and handle it accordingly.

_controller.document.changes.listen((event) {
  print(event.item1); //Delta
  print(event.item2); //Delta
  print(event.item3); //ChangeSource
});

Answer 2

I am also run into this issue. After some hours of research, I found a solution. You habe to add a listener to your QuillController, which will be called on each editor event, like pressed keys or toolbar actions. Use the initState() method in your State class for adding a listener.

class _TextEditorState extends State<TextEditor> {

  final QuillController _controller = QuillController.basic();

  @override
  void initState() {
      _controller.addListener(() {
      print('Here I am, rock me like a hurricane!!!');
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    // Build your Widget with QuillToolbar and QuillEditor here...
  }
});