Keys are not tappable in custom keyboard in flutter Android

2 weeks ago 14
ARTICLE AD BOX

I have designed a custom keyboard in flutter in android and i have made the UI same like proper keyboard and its looking also same but when i tap on keys they are not tappable so why this is happening can anyone guide me in this

What i did is here

RewriterKeyboardService.kt package com.arleven.rephraseplus import android.inputmethodservice.InputMethodService import android.view.View import android.widget.Button import android.widget.FrameLayout import android.view.inputmethod.InputConnection import io.flutter.embedding.android.FlutterView import io.flutter.embedding.engine.FlutterEngine import io.flutter.embedding.engine.dart.DartExecutor import io.flutter.plugin.common.MethodChannel import io.flutter.FlutterInjector class RewriteKeyboardService : InputMethodService() { private var inputConnection: InputConnection? = null private lateinit var flutterEngine: FlutterEngine override fun onStartInput(attribute: android.view.inputmethod.EditorInfo?, restarting: Boolean) { super.onStartInput(attribute, restarting) inputConnection = currentInputConnection } override fun onCreateInputView(): View { val view = layoutInflater.inflate(R.layout.keyboard_view, null) val flutterContainer = view.findViewById<FrameLayout>(R.id.flutter_toolbar_container) attachFlutterToolbar(flutterContainer) setupKeyboard(view) return view } private fun setupKeyboard(view: View) { val letterKeys = listOf( "Q","W","E","R","T","Y","U","I","O","P", "A","S","D","F","G","H","J","K","L", "Z","X","C","V","B","N","M" ) letterKeys.forEach { key -> val resId = resources.getIdentifier( "key_${key.lowercase()}", "id", packageName ) if (resId != 0) { view.findViewById<Button>(resId)?.setOnClickListener { inputConnection?.commitText(key, 1) } } } // Space view.findViewById<Button>(R.id.key_space)?.setOnClickListener { inputConnection?.commitText(" ", 1) } // Backspace view.findViewById<Button>(R.id.key_backspace)?.setOnClickListener { inputConnection?.deleteSurroundingText(1, 0) } // Enter view.findViewById<Button>(R.id.key_enter)?.setOnClickListener { inputConnection?.sendKeyEvent( android.view.KeyEvent( android.view.KeyEvent.ACTION_DOWN, android.view.KeyEvent.KEYCODE_ENTER ) ) } } private fun attachFlutterToolbar(container: FrameLayout) { flutterEngine = FlutterEngine(this) flutterEngine.dartExecutor.executeDartEntrypoint( DartExecutor.DartEntrypoint( FlutterInjector.instance() .flutterLoader() .findAppBundlePath(), "keyboardToolbarMain" ) ) val flutterView = FlutterView(this) val density = resources.displayMetrics.density val toolbarHeightPx = (56 * density).toInt() flutterView.layoutParams = FrameLayout.LayoutParams( FrameLayout.LayoutParams.MATCH_PARENT, toolbarHeightPx ) // 🔥 THIS IS THE KEY FIX flutterView.setOnTouchListener { _, _ -> false // 👈 DO NOT CONSUME TOUCH EVENTS } flutterView.isClickable = false flutterView.isFocusable = false flutterView.isFocusableInTouchMode = false flutterView.attachToFlutterEngine(flutterEngine) container.addView(flutterView) } override fun onEvaluateFullscreenMode(): Boolean = false override fun onDestroy() { if (::flutterEngine.isInitialized) { flutterEngine.destroy() } super.onDestroy() } } styles.xml <?xml version="1.0" encoding="utf-8"?> <resources> <!-- Row container --> <style name="KeyRow"> <item name="android:layout_width">match_parent</item> <item name="android:layout_height">48dp</item> <item name="android:orientation">horizontal</item> <item name="android:gravity">center</item> <item name="android:layout_marginBottom">6dp</item> </style> <!-- Normal key --> <style name="Key"> <item name="android:layout_width">0dp</item> <item name="android:layout_weight">1</item> <item name="android:layout_height">match_parent</item> <item name="android:layout_margin">3dp</item> <!-- IMPORTANT --> <item name="android:clickable">true</item> <item name="android:focusable">true</item> <item name="android:focusableInTouchMode">true</item> <item name="android:background">@drawable/key_bg</item> <item name="android:textColor">#000000</item> <item name="android:textSize">16sp</item> </style> <!-- Shift / Backspace / Enter --> <style name="KeySpecial" parent="Key"> <item name="android:background">@drawable/key_bg_special</item> </style> <!-- Space key --> <style name="KeyWide" parent="Key"> <item name="android:layout_weight">5</item> <item name="android:background">@drawable/key_bg_wide</item> </style> <!-- Keyboard IME theme --> <style name="KeyboardTheme" parent="@android:style/Theme.DeviceDefault.Light"> <item name="android:windowIsTranslucent">false</item> <item name="android:windowNoTitle">true</item> <item name="android:windowActionBar">false</item> <item name="android:windowFullscreen">false</item> <item name="android:windowBackground">@android:color/transparent</item> </style> </resources> keyboard_view.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#E6E6E6" android:padding="6dp"> <!-- Flutter Toolbar --> <FrameLayout android:id="@+id/flutter_toolbar_container" android:layout_width="match_parent" android:layout_height="56dp" /> <!-- Number row --> <LinearLayout style="@style/KeyRow"> <Button style="@style/Key" android:text="1"/> <Button style="@style/Key" android:text="2"/> <Button style="@style/Key" android:text="3"/> <Button style="@style/Key" android:text="4"/> <Button style="@style/Key" android:text="5"/> <Button style="@style/Key" android:text="6"/> <Button style="@style/Key" android:text="7"/> <Button style="@style/Key" android:text="8"/> <Button style="@style/Key" android:text="9"/> <Button style="@style/Key" android:text="0"/> </LinearLayout> <!-- QWERTY --> <LinearLayout style="@style/KeyRow"> <Button style="@style/Key" android:text="Q"/> <Button style="@style/Key" android:text="W"/> <Button style="@style/Key" android:text="E"/> <Button style="@style/Key" android:text="R"/> <Button style="@style/Key" android:text="T"/> <Button style="@style/Key" android:text="Y"/> <Button style="@style/Key" android:text="U"/> <Button style="@style/Key" android:text="I"/> <Button style="@style/Key" android:text="O"/> <Button style="@style/Key" android:text="P"/> </LinearLayout> <!-- ASDF --> <LinearLayout style="@style/KeyRow" android:paddingHorizontal="12dp"> <Button style="@style/Key" android:text="A"/> <Button style="@style/Key" android:text="S"/> <Button style="@style/Key" android:text="D"/> <Button style="@style/Key" android:text="F"/> <Button style="@style/Key" android:text="G"/> <Button style="@style/Key" android:text="H"/> <Button style="@style/Key" android:text="J"/> <Button style="@style/Key" android:text="K"/> <Button style="@style/Key" android:text="L"/> </LinearLayout> <!-- Shift + Z row --> <LinearLayout style="@style/KeyRow"> <Button android:id="@+id/key_shift" style="@style/KeySpecial" android:text="↑"/> <Button style="@style/Key" android:text="Z"/> <Button style="@style/Key" android:text="X"/> <Button style="@style/Key" android:text="C"/> <Button style="@style/Key" android:text="V"/> <Button style="@style/Key" android:text="B"/> <Button style="@style/Key" android:text="N"/> <Button style="@style/Key" android:text="M"/> <Button android:id="@+id/key_backspace" style="@style/KeySpecial" android:text="⌫"/> </LinearLayout> <!-- Bottom row --> <LinearLayout style="@style/KeyRow"> <Button style="@style/KeySpecial" android:text="!#1"/> <Button android:id="@+id/key_space" style="@style/KeyWide" android:text="English (India)"/> <Button android:id="@+id/key_enter" style="@style/KeySpecial" android:text="↵"/> </LinearLayout> </LinearLayout>

first i tried adding only 4 keys which was much bigger I tried it for testing and they were working and also tappable so is this because in this keyboard the keys are small but in normal gboard the keys look like this only

Please let me know if i am missing something

Read Entire Article