Flutter
Flutter: Menambahkan Speech to Text pada Quill
Faiq Himmah
18 August 2024
[ Gambar Post ]
Package yang dibutuhkan :
Untuk masing-masing package jika diperlukan semua pastikan install SECARA BERURUTAN. Karene Quill Extension dan Speech to Text memiliki package dependences yang sama.
Untuk compatibility antar package lebih baik install dengan perintah dibawah ini. karena perintah ini secara otamatis akan mencari versi package yang kompatibel
flutter pub add <nama_package>1 - Membuat Variabel dan Objek yang Diperlukan
class DiaryFormState extends State<DiaryFormPage>{
QuillController controllerQuill = QuillController.basic();
SpeechToText speechToText = SpeechToText();
bool speechEnable = false;
String lastWord = '';
}2 - Setting Permission Untuk Menggunakan Microphone dan Init Speech
Future<int> getPermissionMicrophone()async{
final status = await Permission.microphone.status;
if (status.isDenied) {
await Permission.microphone.request();
}else{
}
return 1;
}
void _initSpeech() async{
speechEnable = await speechToText.initialize();
setState(() {});
}Panggil method diatas di methot initState()
@override
void initState() {
super.initState();
getPermissionMicrophone();
if (!speechEnable) {
_initSpeech();
}
}Lalu buka file AndroidManifest.xml yang terletak di android/app/src/main . dan tambahkan dibawah ini
<manifest>
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<application>
......................
</application>
<queries>
<intent>
<action android:name="android.speech.RecognitionService" />
</intent>
</queries>
</manifest>3 - Membuat Method Untuk Start / Stop Listening
void _startListening()async{
await speechToText.listen(
onResult: (SpeechRecognitionResult result){
setState(() {
lastWord = result.recognizedWords;
controllerQuill.document.insert(controllerQuill.document.length-1, "$lastWord");
});
},
localeId: "id_ID",
listenOptions: SpeechListenOptions(
listenMode: ListenMode.confirmation,
cancelOnError: false,
partialResults: false,
)
);
setState(() {});
}
void _stopListening()async{
await speechToText.stop();
setState(() {});
}Setiap kali start listening maka outpunya ditambahkan ke editor quill. prosesnya ada di "onResult"
4 - Membuat Button Untuk Start/Stop Listening
Widget btnSpeech(){
return IconButton(
tooltip: "Speech to Text",
onPressed: speechToText.isNotListening?_startListening:_stopListening,
icon: Icon(speechToText.isNotListening ? Icons.mic_off_rounded : Icons.mic,size: 35,color: Colors.white,)
);
}5 - Contoh Kode Lengkap
Lihat di gitlab
flutter
quill
speech to text