Flutter textfield on fireOS firetv/firestick on top of textfield

Question

When calling textfield on flutter in fireOS in the fire tv devices, to do a search for example the fireOS virtual keyboard pops on top of textfield and doesnt work like on other android devices where the keyboard is on the bottom and textfield is visible.

On android legacy for example i can use edittext widget and the same keyboard pops on top but whatever i type with the controller updates on the virtual keyboard itself, because the keyboard has its own textfield or edittext. So my problem is how could i update the edittext on firetv virtual keyboard with flutter.

score 1 · Accepted Answer · answered May 01 '20 at 17:42

Okay, so I didnt find an answer anywhere so I had to do some hacky stuff heres how i got it to work since flutter is a no go.

Solution Overview:

1.- So first check is you are running on Android, you can do this with if (Platform.isAndroid) on flutter.

2.- If you are actually running on android you can then open a platform channel to native android to check the actual manufacturer(I will post how to code below).

3.- Check manufacturer or device name for "Amazon" or "Kindle" or whatever an if(string.contains("")) will do the trick.

4.- Open again a platform channel to Native Android and open an Alert Dialog with an Edittext, capture the resulting string and return it to flutter.

And thats how i got firetv's keyboard to work under flutter.

    if (Platform.isAndroid){

      checkOs().then((String osName){
        print("Device running on: $osName");
        if(osName.contains("Amazon") || osName.contains("AFTN")){
          fireTvKeyboardInput().then((String result){
            buscarTitulo(result);
          });
        }else{
          _showDialog(); // Keyboard for NON FIREOS devices on Android.
        }
      });

    }else{
      //IF Device is not Android Eg. IOS
      _showDialog();
    }

Now theres two functions i used "checkOs" and "fireTvKeyboardInput" heres the code:

Future<String> checkOs() async {
  String myResult = "";
  try {
    myResult = await platform.invokeMethod("checkOS", <String, dynamic>{
      'param1': "hello",
    });
  }catch (e){
    print ("exception: $e");
  }
  return myResult;
}

Future<String> fireTvKeyboardInput() async {
  String myResult = "";
  try {
    myResult = await platform.invokeMethod("fireKeyBoard", <String, dynamic>{
      'param1': "hello",
    });
  }catch (e){
    print ("exception: $e");
  }
  return myResult;
}

On Native Android heres the code:

                    if(call.method == "checkOS"){
                    val operatingSystem = android.os.Build.MANUFACTURER + "- " + android.os.Build.MODEL
                    result.success(operatingSystem)
                }

                if(call.method == "fireKeyBoard"){

                        val alert = AlertDialog.Builder(this)
                        alert.setMessage("Search")
                        // Set an EditText view to get user input
                        val input = EditText(this)
                        input.hint = "Enter Text"
                        input.inputType = InputType.TYPE_CLASS_TEXT
                        alert.setView(input)
                        input.setOnKeyListener { view, keyCode, keyEvent ->
                            if (keyCode == 66) {
                                val imm = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
                                imm.hideSoftInputFromWindow(input.windowToken, 0)
                            }
                            false
                        }
                        alert.setPositiveButton("Ok") { dialog, whichButton ->
                            result.success(input.text.toString());
                        }
                        alert.setNegativeButton("Cancel") { dialog, whichButton ->
                            // Canceled.
                        }
                        alert.show()

                }

Flutter textfield on fireOS firetv/firestick on top of textfield

1 Answers1

Linked