Flutter Quill text editor

플러터에는 여러가지 text editor가 존재한다.

대표적인게 quill,  zefyr, richeditor이다. 

그중에서 quill이 사람들이 가장 많이 사용하고 있어서, quill에 대해서 설명해보려고 한다. 

 

먼저, pubspec.yaml에서 dependencies에 추가해준다.

참고로, flutter 3.0이상인 경우만 지원을 null safety를 지원해줘서 이참에 업데이트를 했다.

(flutter 2.x 버전에서는 디버깅 오류났음)

 

dependencies:
  flutter:
    sdk: flutter
  flutter_quill: ^5.0.2

 

그리고 quill 패키지를 로드해준다. quill 패키지 안에 Text가 존재하는데, 이게 충돌이 나서 as quill로 불러왔다.

 

import 'package:flutter_quill/flutter_quill.dart' as quill;

 

 

class _recordInputFormAdd extends State<recordInputFormAdd> {

	//state class내에서 controller를 초기화해서 불러온다.
	quill.QuillController quillController = quill.QuillController.basic();
    ...
    return Scaffold(
    body:Column(children:[ 
    
    ...
    //tool bar
    SingleChildScrollView(
    	scrollDirection: Axis.horizontal,
        child: quill.QuillToolbar.basic(
        	controller: quillController,
            onImagePickCallback: _onImagePickCallback,//갤러리에서 이미지 가져올때 사용
    )),
    
    //text editor
    Expanded(
          child: Container(
              child: quill.QuillEditor(
            controller: quillController,
            scrollable: true,
            scrollController: ScrollController(),
            focusNode: FocusNode(),
            padding: EdgeInsets.all(5),
            autoFocus: false,
            readOnly: false,
            expands: false,
            placeholder: "본문에 내용을 입력하세요",
          )),
        ),
     
     ...
     
     }
     ...
     //갤러리에서 이미지 가져오려면 이 함수를 사용해야한다.
     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();
  }