flutter quill editor provider 적용/ 저장했던 글 불러오기

저번 포스팅에서는 quill editor에 대해서 알아보았다.

오늘은 quill editor에 provider를 적용하는 방법에 대해서 알아보겠다.

사실 다른 provider 적용방법과 다르지 않다.

그냥 quill controller만 모델부분에서 정의해주고, class 만들어준다음에 screen 부분에서 불러와서 쓰면 된다..!

 

toolbar(screen) 부분

class Toolbar extends StatelessWidget {
  late QuillModel quillmodel;

  Toolbar({Key? key}) : super(key: key);
  Future<String> _onImagePickCallback(File file) async {
    // Copies the picked file from temporary cache to applications directory
    final appDocDir = await getApplicationDocumentsDirectory();
    final copiedFile =
        await file.copy('${appDocDir.path}/${basename(file.path)}');
    return copiedFile.path.toString();
  }

  @override
  Widget build(BuildContext context) {
    quillmodel = Provider.of<QuillModel>(context);

    return SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: quill.QuillToolbar.basic(
          controller: quillmodel.quillController,
          onImagePickCallback: _onImagePickCallback,
        ));
  }
}

editor(screen) 부분

class Editor extends StatelessWidget {
  late QuillModel quillmodel;

  Editor({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    quillmodel = Provider.of<QuillModel>(context);

    return Expanded(
      child: Container(
          child: quill.QuillEditor(
        controller: quillmodel.quillController,
        scrollable: true,
        scrollController: ScrollController(),
        focusNode: FocusNode(),
        padding: EdgeInsets.all(5),
        autoFocus: false,
        readOnly: false,
        expands: false,
        placeholder: "본문에 내용을 입력하세요",
      )),
    );
  }
}

 

model 부분

class QuillModel extends ChangeNotifier {
  quill.QuillController _quillController = quill.QuillController.basic();

  get quillController => _quillController;
}

결과 화면:

 

그리고, 기존에 저장했던 글을 불러오는 방법에 대해서도 알아보겠다.

 

모델부분 :

텍스트를 저장했던 곳에서 불러와서 모델을 부르고, 텍스트를 quill controller에 저장해준다. (나는 서버에 저장되어있던 텍스트를 받아왔다)

class modifyQuillModel extends ChangeNotifier {
  quill.QuillController _quillController = quill.QuillController.basic();
  String get text_contents => _text_contents!;
  
  modifyQuillModel(String text_contents) {
    _quillController = quill.QuillController(
        document: quill.Document.fromJson(jsonDecode(text_contents)),
        selection: TextSelection.collapsed(offset: 0));
  }

  get quillController => _quillController;
}

스크린 부분은 quill model 불러오는 부분만 modifyquillmodel 을 불러오면 된다!