Flutter: Menambahkan Embed Video, Image & Sticker di Quill
Package yang dibutuhkan :
Salah satu kelebihan Flutter Quill adalah dimana editor dan toolbar-nya terletak di widget yang berbeda sehingga secara layouting kita bebas meletakkan editor dan toolbar.
- QuillEditor adalah Widget untuk editor quill
- QuillToolbar adalah Widget untuk toolbar quill
1 - Embed Video & Image
Kode untuk menampilkan toolbar embed video & image terletak di bagian "embedBuilders:"
QuillEditor.basic(
controller: controllerQuill,
configurations: QuillEditorConfigurations(
placeholder: "Text Here...",
customStyles: const DefaultStyles(
paragraph: DefaultTextBlockStyle(
TextStyle(fontFamily: MyFunction.FONT_2ST,fontSize: 18,fontWeight: FontWeight.bold,color: Colors.black),
HorizontalSpacing(5, 5),
VerticalSpacing(2, 2),
VerticalSpacing(2,2),
BoxDecoration())
),
embedBuilders: kIsWeb ? FlutterQuillEmbeds.editorWebBuilders() : FlutterQuillEmbeds.editorBuilders(),
sharedConfigurations: const QuillSharedConfigurations(
extraConfigurations: {
QuillSharedExtensionsConfigurations.key : QuillSharedExtensionsConfigurations(assetsPrefix: "assets/image/")
}
)
),
)Berikut adalah contoh kode untuk kustomisasi toolbar IMAGE. dan juga bisa diterapkan pada button video. kodenya terletak di "imageButtonOptions"
QuillToolbar.simple(
controller: controllerQuill,
configurations: QuillSimpleToolbarConfigurations(
embedButtons: FlutterQuillEmbeds.toolbarButtons(
imageButtonOptions: const QuillToolbarImageButtonOptions(
iconData: Icons.image,
iconSize: 25,
iconTheme: QuillIconTheme(
iconButtonUnselectedData: IconButtonData(
color: Colors.white,
)
)
)
),
)
)2 - Menambahkan Sticker
Disini untuk stickernya diambil dari sticker yang sudah disediakan oleh aplikasi. Sebelum itu kita buat dulu file json untuk menyimpan gambar. Bagaimana caranya ? tentu saja file gambar itu kita rubah dalam format base64 sehingga dapat disimpan dalam bentuk String. untuk cara convert buka website ini . Buat file json dan simpan file ini di folder root project misal "assets" dengan nama misal sticker.json. Contoh isi file json seperti dibawah ini
{
"items":[
{
"id": 1,
"kategori": "face",
"stickers": [
{
"id": 1,
"name": "sedih",
"base64": "" //Letakkan base 64 disini
},
{
"id": 2,
"name": "bahagia",
"base64": "" //Letakkan base 64 disini
},
]
},
]
}Kemudia daftarkan file sticker.json ke pubspec.yaml agar bisa dikenali oleh aplikasi
assets:
- assets/stickers.json
- assets/images/Jadi disini skenarioanya adalah
- Pada halaman edotor Quill ketika diklik icon sticker maka akan diarahkan ke suatu page yang menampilkan pilihan stiker
- Selanjutnya ketika sticker dipilih atau diklik maka akan kembali ke halaman editor quill dan gambar akan langsung muncul di editor quill
Maka selanjutnya kita harus membuat page untuk menampilkan sticker dari file json. Berikut contoh kodenya
Pada saat sticker diklik tambahkan kode dibawah ini untuk mengirim data ke halaman sebelumnya dalam hal ini halaman editor quill
onTap: (){
//variabel imgStr berisi string base64 yang akan dikirim ke halaman editor quill
Navigator.pop(context,imgStr);
},Pada halaman Editor Quill kita buat button yang berfungsi untuk masuk ke halaman sticker sekalugus menerima data kembalian dari halaman sticker. kode untuk insert stiker terletak di blok "then()"
Widget btnSticker(){
return IconButton(
tooltip: "Insert sticker",
onPressed: (){
Navigator.push(context, MaterialPageRoute(builder: (context)=>const DiaryStickersPage())).then((data){
if(data!=null){
controllerQuill.insertImageBlock(imageSource: data);
}
});
},
icon: const Icon(Icons.sticky_note_2,size: 40,color: Colors.white,)
);
}