activate text field using button, getX

Issue

How to activated the textField and showing up keyboard using button or GestureDetector, i already create the code, but when i click the button or gestureDetector for the second time the keyboard is not showingup, and the cursor on the textFiled is still there

i am using getX

GestureDetector

GestureDetector(
      onTap: () {
        FocusScope.of(context).requestFocus(controller.textFieldFocus);
      },
      child: Container(
        // height: 25.0,
        margin: EdgeInsets.symmetric(horizontal: 20.0),
        padding:
            EdgeInsets.only(left: 5.0, right: 240.0, top: 5.0, bottom: 5.0),
        decoration: Ui.getBoxDecoration(
          color: Get.theme.primaryColor,
          border: Border.all(
            color: Color.fromRGBO(149, 151, 161, 1),
            width: 1.0,
          ),
          radius: 14.0,
        ),

        child: Text(
          "reply the comment...",
          style: TextStyle(
            color: Color.fromRGBO(149, 151, 161, 1),
            fontFamily: 'Roboto',
            fontSize: 12,
            letterSpacing: 0,
            fontWeight: FontWeight.normal,
            height: 1,
          ),
        ),
      ),
    );

TextField

TextField(
                  controller: controller.textEditingController,
                  onSubmitted: (value) {
                    //
                  },
                  focusNode: controller.textFieldFocus, //i using getX
                  style: TextStyle(
                    color: Color.fromRGBO(149, 151, 161, 1),
                    fontFamily: 'Roboto',
                    fontSize: 12,
                    letterSpacing: 0,
                    fontWeight: FontWeight.normal,
                    height: 1,
                  ),
                  autofocus: false,
                  cursorColor: Get.theme.focusColor,
                  decoration: Ui.getInputDecoration(
                    hintText: "add a comment...".tr,
                  ),
                  keyboardType: TextInputType.multiline,
                  maxLines: null,
                  expands: true,
                ),

Solution

this Flutter cookbook article describes how to pass focus to a textfield when tapping a button, and should solve your problem.

Answered By – Bram

Answer Checked By – David Goodson (FlutterFixes Volunteer)