How to make speech to text Icons toggle in all text fields of dynamic text fields

Viewed 77

I'm trying build a dynamic text fields with speech to text icon in each text field

When I click on the speech to text icon in the second text field, the toggle is applied on the icon in the first field. I want to toggle the icon that is in the same text field that I want to write the text. How can I do that?

This is my speechto text code:

import 'package:flutter/cupertino.dart';
import 'package:speech_to_text/speech_to_text.dart';

class SpeechApi {
  static final _speech = SpeechToText();

  static Future<bool> toggleRecording({
    @required Function(String text) onResult,
    @required ValueChanged<bool> onListening,
  }) async {
    if (_speech.isListening) {
      _speech.stop();
      return true;
    }

    final isAvailable = await _speech.initialize(
      onStatus: (status) => onListening(_speech.isListening),
      onError: (e) => print('Error: $e'),
    );

    if (isAvailable) {
      // it is for recognaization
      _speech.listen(onResult: (value) => onResult(value.recognizedWords));
    }

    return isAvailable;
  }
}

The dynamic text fields code:

 WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      _ingredientController.text = addRecipe.userIngredients[widget.index];
    });

    return TextFormField(
      controller: _ingredientController,
      decoration: InputDecoration(
          //============================
          suffixIcon: AvatarGlow(
            animate: isListening,
            endRadius: 25,
            glowColor: Colors.orange,
            child: IconButton(
              onPressed: toggleRecording,
              icon: Icon(
                isListening ? Icons.mic : Icons.mic_none,
                color: Color(0xFFeb6d44),
              ),
            ),
          ),
          //---------------------
          hintText: 'Enter an ingredient'), //errorText: _errorText
      onChanged: (value) {
        addRecipe.userIngredients[widget.index] = value;
      },
      validator: (value) {
        if (value.trim().isEmpty) {
          return 'Please enter an ingredient';
        }
        return null;
      },
    );
  }

  Future toggleRecording() => SpeechApi.toggleRecording(
      onResult: (text) =>
          setState(() => this._ingredientController.text = text),
      onListening: (isListening) {
        setState(() => this.isListening = isListening);
      });

This is a picture of the interface. As you can see, the cursor in the third field but the toggle always applies on the first field icon

0 Answers
Related