Flutter - How to update value of textfield

SunnatAmirov
December 20, 2023
248 views
1 vote
2 Answers

I am creating flutter application. Also I am using GetX for state management. I created custom textfield to meet my expectations. Here I created two textfields next to each other and want to update their value when picture is pressed. Values are changing correctly, but here is the problem whenever I start writing cursor is not conitinue after each letter it is starting from starting point after each letter.

But if I remove obx nothing happens, cursor is behaving correctly, however UI is not updating.

Here is relevant part of code to this problem:

Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                SizedBox(
                  height: Dimensions.height50,
                  width: Dimensions.width130,
                  child: Obx(
                    () => CustomTextField(
                      onChanged: (value) => searchCargoesController
                          .fromWhereController.value = value,
                      hintText: "from".tr,
                      textEditingController: TextEditingController(
                        text: searchCargoesController
                            .fromWhereController.value,
                      ),
                      textInputType: TextInputType.streetAddress,
                    ),
                  ),
                ),
                InkWell(
                  onTap: () {
                    var from =
                        searchCargoesController.fromWhereController.value;
                    var to =
                        searchCargoesController.toWhereController.value;
                    searchCargoesController.fromWhereController.value = to;
                    searchCargoesController.toWhereController.value = from;
                    searchCargoesController.update();
                  },
                  child: SizedBox(
                    width: Dimensions.width20,
                    child: SvgPicture.asset("assets/icons/from_to1.svg"),
                  ),
                ),
                SizedBox(
                  height: Dimensions.height50,
                  width: Dimensions.width130,
                  child: Obx(
                    () => CustomTextField(
                      onChanged: (value) => searchCargoesController
                          .toWhereController.value = value,
                      hintText: "to".tr,
                      textEditingController: TextEditingController(
                        text:
                            searchCargoesController.toWhereController.value,
                      ),
                      textInputType: TextInputType.streetAddress,
                    ),
                  ),
                ),
                Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(
                      Dimensions.radius10,
                    ),
                    gradient: const LinearGradient(
                      colors: [
                        Colors.amber,
                        Colors.yellow,
                      ],
                      begin: Alignment.topLeft,
                      end: Alignment.bottomRight,
                    ),
                  ),
                  child: IconButton(
                    onPressed: () {},
                    icon: Icon(
                      Icons.search_outlined,
                      color: Colors.white,
                      size: Dimensions.icon20,
                    ),
                  ),
                ),
              ],
            ),

Can someone knows how I can fix it ?

Answers

Chosen as BEST ANSWER

I found the answer, instead of using Obx straight away I can use GetBuilder to manage any changes within controller value. Here is how I managed to handle value setting and assigning:

GetBuilder<SearchCargoesController>(
              builder: (controller) {
                return Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    SizedBox(
                      height: Dimensions.height50,
                      width: Dimensions.width130,
                      child: CustomTextField(
                        onChanged: (value) => searchCargoesController
                            .fromWhereController.value = value,
                        hintText: "from".tr,
                        textEditingController: TextEditingController(
                          text: searchCargoesController
                              .fromWhereController.value,
                        ),
                        textInputType: TextInputType.streetAddress,
                      ),
                    ),
                    InkWell(
                      onTap: () {
                        var from = searchCargoesController
                            .fromWhereController.value;
                        var to =
                            searchCargoesController.toWhereController.value;
                        searchCargoesController.fromWhereController.value =
                            to;
                        searchCargoesController.toWhereController.value =
                            from;
                        searchCargoesController.update();
                      },
                      child: SizedBox(
                        width: Dimensions.width20,
                        child:
                            SvgPicture.asset("assets/icons/from_to1.svg"),
                      ),
                    ),
                    SizedBox(
                      height: Dimensions.height50,
                      width: Dimensions.width130,
                      child: CustomTextField(
                        onChanged: (value) => searchCargoesController
                            .toWhereController.value = value,
                        hintText: "to".tr,
                        textEditingController: TextEditingController(
                          text: searchCargoesController
                              .toWhereController.value,
                        ),
                        textInputType: TextInputType.streetAddress,
                      ),
                    ),
                    Container(
                      height: Dimensions.height50,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(
                          Dimensions.radius10,
                        ),
                        gradient: const LinearGradient(
                          colors: [
                            Colors.amber,
                            Colors.yellow,
                          ],
                          begin: Alignment.topLeft,
                          end: Alignment.bottomRight,
                        ),
                      ),
                      child: IconButton(
                        onPressed: () {},
                        icon: Icon(
                          Icons.search_outlined,
                          color: Colors.white,
                          size: Dimensions.icon20,
                        ),
                      ),
                    ),
                  ],
                );
              },
            ),

(Edit)

Ensure that each CustomTextField has a unique key. If keys are not provided or are not unique, it might cause unexpected behavior. if this doesn’t fixes, provide more code related to CustomTextField

// Assuming you have GetX controllers like this:
class SearchCargoesController extends GetxController {
  final fromWhereController = "".obs;
  final toWhereController = "".obs;
}

// CustomTextField usage in your widget:
Obx(
  () => CustomTextField(
    onChanged: (value) => searchCargoesController.fromWhereController.value = value,
    // Other properties...
  ),
),
InkWell(
  onTap: () {
    var from = searchCargoesController.fromWhereController.value;
    var to = searchCargoesController.toWhereController.value;
    searchCargoesController.fromWhereController.value = to;
    searchCargoesController.toWhereController.value = from;
    searchCargoesController.update(); // Ensure you update the controller after changing the values.
  },
  child: SvgPicture.asset("assets/icons/from_to1.svg"),
),
Obx(
  () => CustomTextField(
    onChanged: (value) => searchCargoesController.toWhereController.value = value,
    // Other properties...
  ),
),

Please signup or login to give your own answer.

Click here to cancel reply.

Flutter – How to update value of textfield

Answers