การใช้งาน Text to Speech ข้อความเป็นเสียงด้วย Flutter TTS

  flutter_tts: ^4.0.2

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-permission android:name="android.permission.INTERNET" />
     ..........
    <application
        android:label="Demo App"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher">
        <activity
            android:name=".MainActivity"
     ..........
    </application>
 
    <queries>
        <intent>
            <action android:name="android.intent.action.PROCESS_TEXT"/>
            <data android:mimeType="text/plain"/>
        </intent>
         <intent>
            <action android:name="android.intent.action.TTS_SERVICE" />
        </intent>    
    </queries>
     ..........
     .......
</manifest>

import 'package:flutter/material.dart';
import 'package:flutter/services.dart'; // สำหรับ Clipboard
import 'package:flutter_tts/flutter_tts.dart';

/*
ตัวแปร enum  คือ ชนิดข้อมูลพิเศษ ที่ใช้ในการกำหนดชุดของค่าคงที่ที่เกี่ยวข้องกัน 
ซึ่งแต่ละค่าภายใน enum จะมีชื่อและมีการระบุไว้อย่างชัดเจน ทำให้สามารถใช้งานได้สะดวกมากขึ้น
ในกรณีที่ต้องการกำหนดตัวเลือกที่มีค่าแน่นอน เช่น สถานะต่าง ๆ, ระดับความยาก, หรือประเภทของข้อมูล  
*/
// กำหนดสถานะการทำงานของของ tts (text to speech)
enum TtsState { playing, stopped, paused, continued }
  
class Ttssimple extends StatefulWidget {
    static const routeName = '/ttssimple';
 
    const Ttssimple({Key? key}) : super(key: key);
  
    @override
    State<StatefulWidget> createState() {
        return _TtssimpletState();
    }
}
  
class _TtssimpletState extends State<Ttssimple> {
  // กำหนด tts แบบเรียกใช้งานได้ทันที่ จากค่าเริ่มค้น
  FlutterTts flutterTts = FlutterTts();
  // ส่วนสำหรับกำหนดการควบคุมข้อความ
  TextEditingController _controller = TextEditingController();
  late FocusNode _focusNode; // กำหนด focus โหนด
  bool _isFocused = false;  // ตัวแปรค่าโฟกัส

  // กำหนดสถานะของ tts เริ่มต้นเป็น stopped
  TtsState ttsState = TtsState.stopped;

  // สร้างตัวแปรแบบ getter เพื่อกำหนดสถานะ
  bool get isPlaying => ttsState == TtsState.playing;
  bool get isStopped => ttsState == TtsState.stopped;
  bool get isPaused => ttsState == TtsState.paused;
  bool get isContinued => ttsState == TtsState.continued;  

  @override
  initState() {
    super.initState();
    _voiceConfig(); // เรียกใช้งานตั้งค่าเสียง TTS
    _focusNode = FocusNode(); // กำหนดค่าให้โฟกัสโหนด

    // ตรวจจับการโฟกัสที่กล่องแก้ไขข้อความ focused/unfocused
    _focusNode.addListener(() {
      setState(() {
        // แล้วอัปเดทสถาานะการโฟกัส
        _isFocused = _focusNode.hasFocus;
      });
    });    
    
  }

  // ฟังก์ชั่นตั้งค่าเสียง TTS
  void _voiceConfig() async {
    await flutterTts.setLanguage("th-TH"); // กำหนดภาษา th-TH
    await flutterTts.setPitch(1.0);        // กำหนด pitch ของเสียง (1.0 คือปกติ 0.5-2.0)
    await flutterTts.setSpeechRate(0.5);   // กำหนด speed ของเสียง (0.5 คือปกติ 0.0-1.0) 

    // เรียกใช้ฟังก์ชั่นให้รอจนกว่าการพูดด้วย Flutter TTS จะจบก่อนที่จะดำเนินการต่อไป
    _setAwaitOptions();

    // เมื่อการเริ่มเล่นเสียงถูกเรียกใช้งาน
    flutterTts.setStartHandler(() {
      setState(() {
        print("Playing");
        ttsState = TtsState.playing; // อัปเดทสถานะเป็นกำลังเล่น
      });
    });

    // เมื่อการเล่นเสียงสิ้นสุด ถูกเรียกใช้งาน
    flutterTts.setCompletionHandler(() {
      setState(() {
        print("Complete");
        ttsState = TtsState.stopped; // อัปเดทสถานะเป็นหยุด
      });
    });

    // เมื่อการยกเลิก ถูกเรียกใช้งาน
    flutterTts.setCancelHandler(() {
      setState(() {
        print("Cancel");
        ttsState = TtsState.stopped; // อัปเดทสถาานะเป็นหยุด
      });
    });

    // เมื่อการหยุดชั่วคราว ถูเรียกใช้งาน
    flutterTts.setPauseHandler(() {
      setState(() {
        print("Paused");
        ttsState = TtsState.paused; // อัปเดทสถานะเป็นหยุดชั่วคราว
      });
    });

    // เมื่อการเริ่มเล่นเสียงต่อ ถูกเรียกใช้งาน
    flutterTts.setContinueHandler(() {
      setState(() {
        print("Continued");
        ttsState = TtsState.continued; // อัปเดทสถานะเป็นเล่นต่อ
      });
    });

    // เมื่อเกิด error ขึ้น
    flutterTts.setErrorHandler((msg) {
      setState(() {
        print("error: $msg");
        ttsState = TtsState.stopped; // อัปเดทสถานะเป็นหยุด
      });
    });

  }

  // ฟังก์ชั่น บอกให้โปรแกรมรอจนกว่าการพูดด้วย Flutter TTS จะจบก่อนที่จะดำเนินการต่อไป
  Future<void> _setAwaitOptions() async {
    await flutterTts.awaitSpeakCompletion(true);
  }

  // ฟังก์ชันสำหรับแปลงข้อความเป็นเสียง
  Future _speak(String text) async {
    await flutterTts.speak(text); // เริ่มพูดข้อความ
  }

  // ฟังก์ชั่นสำหรับหยุดอ่านออกเสียง
  Future<void> _stop() async {
    var result = await flutterTts.stop(); // ทำคำสังหยุด
    if (result == 1) setState(() => ttsState = TtsState.stopped); // อัปเดทสถานะ
  }

  // ฟังก์ชั่นสำหรับหยุดอ่านออกเสียงชั่วคราว
  Future<void> _pause() async {
    var result = await flutterTts.pause(); // ทำคำสังหยุดชั่วคราว
    if (result == 1) setState(() => ttsState = TtsState.paused); // อัปเดทสถานะ
  }  

  // ฟังก์ชันสำหรับการวางข้อความจาก Clipboard
  Future<void> pasteFromClipboard() async {
    ClipboardData? clipboardData = await Clipboard.getData('text/plain');
    if (clipboardData != null) {
      setState(() {
        _controller.text = clipboardData.text!;
      });
    }
  }  

  @override
  void dispose() {
    // ล้างค่าส่วนใช้งานต่างๆ ก่อน
    _controller.dispose();  // ล้างค่าตัวควบคุม
    _focusNode.dispose(); // ล้างค่าตัวเชื่อมโฟกัส
    flutterTts.stop();      // หยุดการดำเนินการของ TTS ทั้งหมด

    // ควรเรียกใช้ super.dispose() หลังสุด
    super.dispose();
  }  

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("TTS Example"),
        actions: [
          // ปุ่มเคลียร์ข้อความ แสดงเมื่อข้อความไม่ว่าง
          if(_controller.text.isNotEmpty) 
          TextButton(
            onPressed: (){
              setState(() {
                _controller.text = '';
              });
            }, 
            child: const Text('Clear'),
          ),
          // สำหรับปุ่มวางข้อความจาก clipboard
          IconButton(
            icon: const Icon(Icons.paste),
            onPressed: pasteFromClipboard, // เรียกฟังก์ชันวางข้อความจาก Clipboard
          ),
        ],
      ),
      body: Stack(
        children: [
          // ส่วนของช่องกรอกข้อความ
          TextField(
            controller: _controller, // เชื่อมกับตัวควบคุม
            focusNode: _focusNode, // เชื่อมกับตัวควบคุมการโฟกัส
            style: TextStyle(
              fontSize: 20,
            ),              
            maxLines: 50, // บรรทัดสูงสุดไม่เกิน
            keyboardType: TextInputType.multiline, // แป้นพิมพ์รองรับปุ่มขึ้นบรรทัดใหม่
            decoration: InputDecoration(
              border: InputBorder.none, // ไม่มีขอบ
              hintText: "กรอกข้อความตรงนี้", // ข้อความช่วยเหลือ ข้อความแนะนำ
              hintStyle: TextStyle( // กำหนดรูปแบบสี ขนาด
                color: Colors.grey[500],
              ),
              fillColor: Color(0xFFfdf8ef), // สีพื้นหลัง
              filled: true, // การเติมสี
            ),              
          ),
          // แสดงเมื่อกำลังแก้ไขข้อความอยู่่
          // ใช้ซ่อนแป้นพิมพ์ หรืออกจากโหมดแก้ไขข้อความ เมือกด
          if(_isFocused)
          Positioned(
            bottom: 16,
            left: 16,
            child: FloatingActionButton(
              elevation: 0, // Set elevation to 0 to remove shadow
              mini: true,
              onPressed: () {
                // ซ่อนแป้นพิมพ์ ออกจากแก้ไขข้อความ
                _focusNode.unfocus();
              },
              heroTag: 'done_btn', // Set a unique tag ต้องกำหนด
              child: const Icon(Icons.arrow_drop_down),
            ),
          ),    
          // ส่วนของกรแสดงปุ่มหยุดโดยเฉพาะ แสดงเมื่อ กำลังเล่น หยุดชั่วคราว และกำลังเล่นต่อ
          if(isPlaying || isPaused || isContinued)   
          Positioned(
            bottom: 16,
            right: 80,
            child: FloatingActionButton(
              backgroundColor: Colors.red,
              elevation: 0, // กำหนดการยกเสูงเป็น 0 เพื่อไม่แสดงเงา
              shape: const CircleBorder(),
              onPressed: () {
                _focusNode.unfocus(); // ซ่อนแป้นพิมพ์ ออกจากแก้ไขข้อความ
                // ถ้ากำลังเล่น หยุดชั่วคราว และกำลังเล่นต่อ ถ้ากดหยุด 
                if(isPlaying || isPaused || isContinued){
                  _stop(); // ให้ทำคำสั่งหยุดอ่านออกเสียง
                }
              },
              heroTag: 'stop_btn', // Set a unique tag ต้องกำหนด
              child: const Icon(Icons.stop),
            ),
          ),      
          // แสดงปุ่มเมื่อมีข้อความ หรือไม่เป็นค่าว่าง         
          if(_controller.text.isNotEmpty)      
          Positioned(
            bottom: 16,
            right: 16,
            child: FloatingActionButton(
              elevation: 0, // กำหนดการยกเสูงเป็น 0 เพื่อไม่แสดงเงา
              shape: const CircleBorder(),
              onPressed: () {
                _focusNode.unfocus(); // ซ่อนแป้นพิมพ์ ออกจากแก้ไขข้อความ
                // ถ้ากำลังเล่นหรือ กำลังเล่นต่อยู่ เมื่อกดให้ หยุดชั่วคราว
                if(isPlaying || isContinued){
                  _pause(); // ทำคำสั่งหยุดชั่วคราว
                }
                // ถ้าหยุดอยู่ หรือ หยุดชั่วคราว เมื่อกด ให้เล่น หรือเล่นต่อ
                if(isStopped || isPaused){
                  String text = _controller.text;
                  if(text.isNotEmpty){
                    _speak(text); // ทำคำสั่งอ่านออกเสียงต่อ
                  }
                }
              },
              heroTag: 'play_pause_btn', // Set a unique tag ต้องกำหนด
              child: isPlaying || isContinued // ถ้ากำลังเล่น หรือเล่นต่อ
              ? const Icon(Icons.pause) // แสดงปุ่มหยุดชั่วคราว
              : const Icon(Icons.play_arrow), // เป็นอย่างอื่นแสดงปุ่มเล่น หรือเล่นต่อ
            ),
          ),          
        ],
      ),
    );
  }
}

import 'package:flutter/material.dart';
import 'package:flutter/services.dart'; // สำหรับ Clipboard
import 'package:flutter_tts/flutter_tts.dart';

/*
ตัวแปร enum  คือ ชนิดข้อมูลพิเศษ ที่ใช้ในการกำหนดชุดของค่าคงที่ที่เกี่ยวข้องกัน 
ซึ่งแต่ละค่าภายใน enum จะมีชื่อและมีการระบุไว้อย่างชัดเจน ทำให้สามารถใช้งานได้สะดวกมากขึ้น
ในกรณีที่ต้องการกำหนดตัวเลือกที่มีค่าแน่นอน เช่น สถานะต่าง ๆ, ระดับความยาก, หรือประเภทของข้อมูล  
*/
// กำหนดสถานะการทำงานของของ tts (text to speech)
enum TtsState { playing, stopped, paused, continued }
  
class Ttssimple extends StatefulWidget {
    static const routeName = '/ttssimple';
 
    const Ttssimple({Key? key}) : super(key: key);
  
    @override
    State<StatefulWidget> createState() {
        return _TtssimpletState();
    }
}
  
class _TtssimpletState extends State<Ttssimple> {
  // กำหนด tts แบบเรียกใช้งานได้ทันที่ จากค่าเริ่มค้น
  FlutterTts flutterTts = FlutterTts();
  // ส่วนสำหรับกำหนดการควบคุมข้อความ
  TextEditingController _controller = TextEditingController();
  late FocusNode _focusNode; // กำหนด focus โหนด
  bool _isFocused = false;  // ตัวแปรค่าโฟกัส

  // ส่วนกำหนดค่า สำหรับตั้งค่าต่างๆ 
  String? language; // ภาษาที่เรียกใช้งาน
  String? engine; // แพ็กเก็จหรือ engines ตัวจัดการเสียง
  double volume = 0.5; // ระดับความดังของเสียง
  double pitch = 1.0; // ระดับของโทนเสียง
  double rate = 0.5; // ระดับอัตราความเร็วของการพูดออกเสียง
  bool isCurrentLanguageInstalled = false; // สถานะของภาษาที่เลือกว่าติดตั้งแล้วหรือไม่

  // กำหนดสถานะของ tts เริ่มต้นเป็น stopped
  TtsState ttsState = TtsState.stopped;

  // สร้างตัวแปรแบบ getter เพื่อกำหนดสถานะ
  bool get isPlaying => ttsState == TtsState.playing;
  bool get isStopped => ttsState == TtsState.stopped;
  bool get isPaused => ttsState == TtsState.paused;
  bool get isContinued => ttsState == TtsState.continued;  

  @override
  initState() {
    super.initState();
    _voiceConfig(); // เรียกใช้งานตั้งค่าเสียง TTS
    _focusNode = FocusNode(); // กำหนดค่าให้โฟกัสโหนด

    // ตรวจจับการโฟกัสที่กล่องแก้ไขข้อความ focused/unfocused
    _focusNode.addListener(() {
      setState(() {
        // แล้วอัปเดทสถาานะการโฟกัส
        _isFocused = _focusNode.hasFocus;
      });
    });    
    
  }

  // ฟังก์ชั่นตั้งค่าเสียง TTS
  void _voiceConfig() async {
    await flutterTts.setLanguage("th-TH"); // กำหนดภาษา th-TH
    await flutterTts.setPitch(1.0);        // กำหนด pitch ของเสียง (1.0 คือปกติ 0.5-2.0)
    await flutterTts.setSpeechRate(0.5);   // กำหนด speed ของเสียง (0.5 คือปกติ 0.0-1.0) 

    // เรียกใช้ฟังก์ชั่นให้รอจนกว่าการพูดด้วย Flutter TTS จะจบก่อนที่จะดำเนินการต่อไป
    _setAwaitOptions();

    // เมื่อการเริ่มเล่นเสียงถูกเรียกใช้งาน
    flutterTts.setStartHandler(() {
      setState(() {
        print("Playing");
        ttsState = TtsState.playing; // อัปเดทสถานะเป็นกำลังเล่น
      });
    });

    // เมื่อการเล่นเสียงสิ้นสุด ถูกเรียกใช้งาน
    flutterTts.setCompletionHandler(() {
      setState(() {
        print("Complete");
        ttsState = TtsState.stopped; // อัปเดทสถานะเป็นหยุด
      });
    });

    // เมื่อการยกเลิก ถูกเรียกใช้งาน
    flutterTts.setCancelHandler(() {
      setState(() {
        print("Cancel");
        ttsState = TtsState.stopped; // อัปเดทสถาานะเป็นหยุด
      });
    });

    // เมื่อการหยุดชั่วคราว ถูเรียกใช้งาน
    flutterTts.setPauseHandler(() {
      setState(() {
        print("Paused");
        ttsState = TtsState.paused; // อัปเดทสถานะเป็นหยุดชั่วคราว
      });
    });

    // เมื่อการเริ่มเล่นเสียงต่อ ถูกเรียกใช้งาน
    flutterTts.setContinueHandler(() {
      setState(() {
        print("Continued");
        ttsState = TtsState.continued; // อัปเดทสถานะเป็นเล่นต่อ
      });
    });

    // เมื่อเกิด error ขึ้น
    flutterTts.setErrorHandler((msg) {
      setState(() {
        print("error: $msg");
        ttsState = TtsState.stopped; // อัปเดทสถานะเป็นหยุด
      });
    });

  }

  // ฟังก์ชั่น บอกให้โปรแกรมรอจนกว่าการพูดด้วย Flutter TTS จะจบก่อนที่จะดำเนินการต่อไป
  Future<void> _setAwaitOptions() async {
    await flutterTts.awaitSpeakCompletion(true);
  }

  // ฟังก์ชันสำหรับแปลงข้อความเป็นเสียง
  Future _speak(String text) async {
    await flutterTts.setVolume(volume); // ปรับค่าความดังของเสียงตามระดับที่ปรับ
    await flutterTts.setPitch(pitch);  // ปรับค่าระดับโทนเสียงตามค่าที่ปรับ  
    await flutterTts.setSpeechRate(rate); // ปรับค่าอัตราความเร็วของเสียงตามค่าที่ปรับ

    await flutterTts.speak(text); // เริ่มพูดข้อความ
  }

  // ฟังก์ชั่นสำหรับหยุดอ่านออกเสียง
  Future<void> _stop() async {
    var result = await flutterTts.stop(); // ทำคำสังหยุด
    if (result == 1) setState(() => ttsState = TtsState.stopped); // อัปเดทสถานะ
  }

  // ฟังก์ชั่นสำหรับหยุดอ่านออกเสียงชั่วคราว
  Future<void> _pause() async {
    var result = await flutterTts.pause(); // ทำคำสังหยุดชั่วคราว
    if (result == 1) setState(() => ttsState = TtsState.paused); // อัปเดทสถานะ
  }  

  // ฟังก์ชันสำหรับการวางข้อความจาก Clipboard
  Future<void> pasteFromClipboard() async {
    ClipboardData? clipboardData = await Clipboard.getData('text/plain');
    if (clipboardData != null) {
      setState(() {
        _controller.text = clipboardData.text!;
      });
    }
  }  

  // ฟังก์ชั่นดึงข้อมูลรายการภาษาที่รองรับของแพ็กเก็จที่เลือก
  Future<dynamic> _getLanguages() async => await flutterTts.getLanguages;

  // ฟังก์ชั่นดึงข้อมูลรายการแพ็กเก็จภาษาหรือ engines ภาษาที่ติดต้้งในเครื่อง ถ้ามี
  Future<dynamic> _getEngines() async => await flutterTts.getEngines;  

  // ฟังก์ชั่นแสดงลิสรายการแพ็กเก็จภาษาหรือ engines ภาษาที่ติดต้้งในเครื่อง ถ้ามี
  List<DropdownMenuItem<String>> getEnginesDropDownMenuItems(
      List<dynamic> engines) {
    var items = <DropdownMenuItem<String>>[];
    for (dynamic type in engines) {
      items.add(DropdownMenuItem(
          value: type as String?, child: Text((type as String))));
    }
    return items;
  }

  // ฟังก์ชั่นแสดงลิสรายการภาษาที่รองรับของแพ็กเก็จที่เลือก
  List<DropdownMenuItem<String>> getLanguageDropDownMenuItems(
      List<dynamic> languages) {
    var items = <DropdownMenuItem<String>>[];
    for (dynamic type in languages) {
      items.add(DropdownMenuItem(
          value: type as String?, child: Text((type as String))));
    }
    return items;
  }

  // ส่วนของการแสดงตัวตั้งค่าการอ่านออกเสียงผ่าน bottomsheet
  void _showBottomSheet(BuildContext context) {
    showModalBottomSheet(
      context: context,
      builder: (context) {
          return StatefulBuilder( // ใช้เพื่อส่งฟังก์ชั่น setState เข้าไปใช้งาน
          builder: (BuildContext context, StateSetter setState ) {
            return Padding(
              padding: const EdgeInsets.all(16.0),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Row(
                    children: [
                      const Text('Settings', style: TextStyle(
                        fontSize: 18, fontWeight: FontWeight.bold)),
                      const Spacer(),
                      TextButton( // ปุ่ม reset ค่าเพิ่มต้น
                        onPressed: (){
                          setState(() {
                            volume = 0.5;
                            pitch = 1.0;
                            rate = 0.5;
                            language = null;
                            engine = null;
                          });
                        }, 
                        child: const Text('Reset',style: TextStyle(
                          color: Colors.red,
                          fontSize: 18, fontWeight: FontWeight.bold)),
                      )
                    ],
                  ),
                  _engineSection(setState), // ส่วนเลือกแพ็กเก็จเสียงที่รองรับ
                  _futureBuilder(setState),  // ส่วนเลือกภาษา              
                  _buildSliders(setState), // แสดง slider ปรับค่าต่างๆ
                ],
              ),
            );
          });
      },
    );
  }

  @override
  void dispose() {
    // ล้างค่าส่วนใช้งานต่างๆ ก่อน
    _controller.dispose();  // ล้างค่าตัวควบคุม
    _focusNode.dispose(); // ล้างค่าตัวเชื่อมโฟกัส
    flutterTts.stop();      // หยุดการดำเนินการของ TTS ทั้งหมด

    // ควรเรียกใช้ super.dispose() หลังสุด
    super.dispose();
  }  

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("TTS Example"),
        actions: [
          // ปุ่มเคลียร์ข้อความ แสดงเมื่อข้อความไม่ว่าง
          if(_controller.text.isNotEmpty) 
          TextButton(
            onPressed: (){
              setState(() {
                _controller.text = '';
              });
            }, 
            child: const Text('Clear'),
          ),
          // สำหรับปุ่มวางข้อความจาก clipboard
          IconButton(
            icon: const Icon(Icons.paste),
            onPressed: pasteFromClipboard, // เรียกฟังก์ชันวางข้อความจาก Clipboard
          ),
          IconButton(
            onPressed: () {
              // แสดงการตั้งค่าผ่าน BottomSheet 
              // การใช้งาน BottomSheet จะทำให้เราจัดการค่า state โดยใช้ setstate โดยตรงไม่ได้
              // จึงมีการส่งฟังก์ชั้น setState เข้าไป
              _showBottomSheet(context); 
            },
            icon: Icon(Icons.settings),
          ),          
        ],
      ),
      body: Stack(
        children: [
          // ส่วนของช่องกรอกข้อความ
          TextField(
            controller: _controller, // เชื่อมกับตัวควบคุม
            focusNode: _focusNode, // เชื่อมกับตัวควบคุมการโฟกัส
            style: TextStyle(
              fontSize: 20,
            ),              
            maxLines: 50, // บรรทัดสูงสุดไม่เกิน
            keyboardType: TextInputType.multiline, // แป้นพิมพ์รองรับปุ่มขึ้นบรรทัดใหม่
            decoration: InputDecoration(
              border: InputBorder.none, // ไม่มีขอบ
              hintText: "กรอกข้อความตรงนี้", // ข้อความช่วยเหลือ ข้อความแนะนำ
              hintStyle: TextStyle( // กำหนดรูปแบบสี ขนาด
                color: Colors.grey[500],
              ),
              fillColor: Color(0xFFfdf8ef), // สีพื้นหลัง
              filled: true, // การเติมสี
            ),              
          ),
          // แสดงเมื่อกำลังแก้ไขข้อความอยู่่
          // ใช้ซ่อนแป้นพิมพ์ หรืออกจากโหมดแก้ไขข้อความ เมือกด
          if(_isFocused)
          Positioned(
            bottom: 16,
            left: 16,
            child: FloatingActionButton(
              elevation: 0, // Set elevation to 0 to remove shadow
              mini: true,
              onPressed: () {
                // ซ่อนแป้นพิมพ์ ออกจากแก้ไขข้อความ
                _focusNode.unfocus();
              },
              heroTag: 'done_btn', // Set a unique tag ต้องกำหนด
              child: const Icon(Icons.arrow_drop_down),
            ),
          ),    
          // ส่วนของกรแสดงปุ่มหยุดโดยเฉพาะ แสดงเมื่อ กำลังเล่น หยุดชั่วคราว และกำลังเล่นต่อ
          if(isPlaying || isPaused || isContinued)   
          Positioned(
            bottom: 16,
            right: 80,
            child: FloatingActionButton(
              backgroundColor: Colors.red,
              elevation: 0, // กำหนดการยกเสูงเป็น 0 เพื่อไม่แสดงเงา
              shape: const CircleBorder(),
              onPressed: () {
                _focusNode.unfocus(); // ซ่อนแป้นพิมพ์ ออกจากแก้ไขข้อความ
                // ถ้ากำลังเล่น หยุดชั่วคราว และกำลังเล่นต่อ ถ้ากดหยุด 
                if(isPlaying || isPaused || isContinued){
                  _stop(); // ให้ทำคำสั่งหยุดอ่านออกเสียง
                }
              },
              heroTag: 'stop_btn', // Set a unique tag ต้องกำหนด
              child: const Icon(Icons.stop),
            ),
          ),      
          // แสดงปุ่มเมื่อมีข้อความ หรือไม่เป็นค่าว่าง         
          if(_controller.text.isNotEmpty)      
          Positioned(
            bottom: 16,
            right: 16,
            child: FloatingActionButton(
              elevation: 0, // กำหนดการยกเสูงเป็น 0 เพื่อไม่แสดงเงา
              shape: const CircleBorder(),
              onPressed: () {
                _focusNode.unfocus(); // ซ่อนแป้นพิมพ์ ออกจากแก้ไขข้อความ
                // ถ้ากำลังเล่นหรือ กำลังเล่นต่อยู่ เมื่อกดให้ หยุดชั่วคราว
                if(isPlaying || isContinued){
                  _pause(); // ทำคำสั่งหยุดชั่วคราว
                }
                // ถ้าหยุดอยู่ หรือ หยุดชั่วคราว เมื่อกด ให้เล่น หรือเล่นต่อ
                if(isStopped || isPaused){
                  String text = _controller.text;
                  if(text.isNotEmpty){
                    _speak(text); // ทำคำสั่งอ่านออกเสียงต่อ
                  }
                }
              },
              heroTag: 'play_pause_btn', // Set a unique tag ต้องกำหนด
              child: isPlaying || isContinued // ถ้ากำลังเล่น หรือเล่นต่อ
              ? const Icon(Icons.pause) // แสดงปุ่มหยุดชั่วคราว
              : const Icon(Icons.play_arrow), // เป็นอย่างอื่นแสดงปุ่มเล่น หรือเล่นต่อ
            ),
          ),          
        ],
      ),
    );
  }

  // ส่วนของการดึงข้อมูลแพ็กเก็จเสียงที่มีในเครื่องมาแสดงให้เลือก
  Widget _engineSection(void Function(void Function()) parentSetState) {
    return FutureBuilder<dynamic>(
        future: _getEngines(), // ดังข้อมูลแพ็กเก็จเสียง
        builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
          if (snapshot.hasData) {
            // แสดงรายการแพ็กเก็จเสียงให้เลือกใน dropdown
            return _enginesDropDownSection(snapshot.data as List<dynamic>, parentSetState);
          } else if (snapshot.hasError) {
            return const Text('Error loading engines...'); // เกิดข้อผิดพลาดของการโหลด
          } else {
            return const Text('Loading engines...'); // กำลังโหลดรายการแอปแพ็กเก็จเสียง
          }         
        });
  }

  // ส่วนของการดึงข้อมูลภาษาที่รองรับของแพ็กเกิจเสียงที่เลือก  
  Widget _futureBuilder(void Function(void Function()) parentSetState) => FutureBuilder<dynamic>(
    future: _getLanguages(), // ดึงข้อมูลภาษาในแพ็กเก็จเสียง
    builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
      if (snapshot.hasData) {
        // มีข้อมูล แสดงรายการภาษาออกไปให้เลือกใน dropdown
        return _languageDropDownSection(snapshot.data as List<dynamic>, parentSetState);
      } else if (snapshot.hasError) {
        return const Text('Error loading languages...'); // เกิดข้อผิดพลาด
      } else{
        return const Text('Loading Languages...'); // กำหนดโหลดภาษาที่รองรับ
      }
  });

  // ส่วนของตัวจัดการแพ็กเก็จเสียงพูด ถ้าเป็นของ google มักจะเป็น com.google.android.tts
  Widget _enginesDropDownSection(List<dynamic> engines,
    void Function(void Function()) parentSetState) => Container(
        padding: const EdgeInsets.only(top: 10.0),
        child: DropdownButton(
          value: engine,
          items: getEnginesDropDownMenuItems(engines),
          onChanged: (selectedEngine) async {
            // ตั้งค่าเป็นแพ็กเก็จเสียงที่เลือก เพื่อใช้งาน
            await flutterTts.setEngine(selectedEngine!);
            language = null; // เมื่อเปลี่ยนแพ็กเก็จ ก็ให้ค่า ภาษาเป็น null เพื่อจะได้เลือกใหม่
            parentSetState(() {
              engine = selectedEngine;
              // กำหนดตัวแพ็กเก็จเสียงที่ใช้งาน
            });
          }
        ),
      );

  // ส่วนของการเลือกภาษาที่รองรับจาก และมีติดตั้งไว้แล้วหรือไม่เมื่อเลือกภาษานั้นๆ
  Widget _languageDropDownSection(List<dynamic> languages,
    void Function(void Function()) parentSetState) => Container(
      padding: const EdgeInsets.only(top: 10.0),
      child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [
        DropdownButton(
          value: language,
          items: getLanguageDropDownMenuItems(languages),
          onChanged: (selectedType){
            parentSetState(() {
              language = selectedType; // กำหนดภาษาจากที่เลือก
              flutterTts.setLanguage(language!); // ตั้งค่าเป็นภาษาที่เลือก
              // ตรวจสอบและคืนค่าว่าได้ติดตั้งไว้แล้วหรือไม่
              flutterTts
                  .isLanguageInstalled(language!)
                  .then((value) => isCurrentLanguageInstalled = (value as bool));
            });            
          }
        ),
        Text("Is installed: $isCurrentLanguageInstalled"), // แสดงว่าภาษาที่เลือกได้ติดตั้งแล้วหรือไม่
      ]));

  // ส่วนจัดการตัวควบคุมต่างๆ จริงๆ เราสามารถนำมาแทรกไว้ในนี้ทั้งหมด โดยไม่ต้องแยกก็ได้
  // แต่เมื่อเราทำแยกเป็นส่วนๆ พอมีการส่งค่าการกำหนด state เลยต้องส่งต่อเป็นทอดๆ เพื่อใช้งาน
  Widget _buildSliders(void Function(void Function()) parentSetState) {
    return Column(
      children: [
        _volume(parentSetState), // ตัวควบคุมความดังของเสียงพูด
        _pitch(parentSetState),  // ตัวควบคุมระดับโทนเสียง
        _rate(parentSetState)], // ตัวควบคุมอัตราเร็วการพูด
    );
  }

  // ส่วนของตัวควบคุมความดังของเสียง รับค่า state function เข้ามาใช้งาน
  Widget _volume(void Function(void Function()) parentSetState) {
        return Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text('0.0'),  // ค่าต่ำสุด
                Expanded(
                  child: Slider(
                    value: volume,
                    onChanged: (newVolume) {
                      // จำกัดทศนิยม 1 ตำแหน่ง
                      parentSetState(() => volume = double.parse(newVolume.toStringAsFixed(1)));  
                    },
                    min: 0.0,
                    max: 1.0,
                    divisions: 10,  // มีการแบ่งเป็น 10 ระดับ
                    label: "Volume: ${volume.toStringAsFixed(1)}",  // แสดงค่า volume ปัจจุบันใน label
                  ),
                ),
                Text('1.0'),  // ค่าสูงสุด
              ],
            ),
            Text('Current volume: ${volume.toStringAsFixed(1)}'),  // แสดงค่าปัจจุบันใต้ slider
          ],
        );        
  }

  // ส่วนของตัวควบคุมปรับระดับโทนเสียง รับค่า state function เข้ามาใช้งาน
  Widget _pitch(void Function(void Function()) parentSetState) {
    return Column(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text('0.5'),  // ค่าต่ำสุด
            Expanded(
              child: Slider(
                value: pitch,
                onChanged: (newPitch) {
                  // จำกัดทศนิยม 1 ตำแหน่ง
                  parentSetState(() => pitch = double.parse(newPitch.toStringAsFixed(1))); 
                },
                min: 0.5,
                max: 2.0,
                divisions: 15,  // มีการแบ่ง 15 ระดับ
                label: "Pitch: ${pitch.toStringAsFixed(1)}",  // แสดงค่าปัจจุบันในรูปทศนิยม 1 ตำแหน่ง
                activeColor: Colors.red,
              ),
            ),
            Text('2.0'),  // ค่าสูงสุด
          ],
        ),
        Text('Current pitch: ${pitch.toStringAsFixed(1)}'),  // แสดงค่าปัจจุบันใต้ slider
      ],
    );    
  }

  // ส่วนของตัวควบคุมกรปรับอัตราการเล่น รับค่า state function เข้ามาใช้งาน
  Widget _rate(void Function(void Function()) parentSetState) {
    return Column(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text('0.0'),  // ค่าต่ำสุด
            Expanded(
              child: Slider(
                value: rate,
                onChanged: (newRate) {
                  parentSetState(() => rate = newRate);
                },
                min: 0.0,
                max: 1.0,
                divisions: 10,
                label: "Rate: ${rate.toStringAsFixed(2)}",  // แสดงค่า rate ปัจจุบันใน slider
                activeColor: Colors.green,
              ),
            ),
            Text('1.0'),  // ค่าสูงสุด
          ],
        ),
        Text('Current rate: ${rate.toStringAsFixed(2)}'), // แสดงค่าปัจจุบันของ slider ด้านล่าง
      ],
    );

  }

}