TextField value only updated when hovered

Question

I have a Category TextField with a controller. The controller value is updated onChange of a Product Dropdown. What I expect is upon onChange the value of the categoryField should be updated. However, I can only see the update on the TextField once I hover on it.

Category TextField

 var productCategory = Column(
              children: [
                TextField(
                  controller: categoryController,
                  enabled: false,
                  focusNode: categoryFocusNode,
                ),
                const Padding(
                    padding: EdgeInsets.all(5.0), child: SizedBox(width: 200)),
              ],
            );

Product Dropdown onChange

void onChange<Product>(prod) {
 
  BlocProvider.of<InvoiceCubit>(context).updateProduct(prod);
  categoryController.text = prod.category.categoryName.toString();

}

Answer 1

I have finally figured it out. Since I am using a rxdart stream, I created both the Product dropdown and Category on the StreamBuilder. Then I created the categoryController within the builder itself with text value from the product category. Below is my code:

var productDropdownField = StreamBuilder<Product>(
                stream: BlocProvider.of<InvoiceCubit>(context).productStream,
                builder: (context, snapshot) {
                  final categoryController = TextEditingController();
                  categoryController.text = snapshot.hasData
                      ? snapshot.data!.category.categoryName
                      : "";

                  var productCategory = Column(
                    children: [
                      CustomTextField(
                        labelText: "Category",
                        controller: categoryController,
                        enabled: false,
                      ),
                      const Padding(
                          padding: EdgeInsets.all(10.0),
                          child: SizedBox(width: 200)),
                    ],
                  );
                  return StreamBuilder<Object>(
                      stream:
                          BlocProvider.of<InvoiceCubit>(context).priceStream,
                      builder: (context, snapshot) {
                        return Column(
                          children: [
                            BlocBuilder<ProductsCubit, ProductsState>(
                              builder: (context, state) {
                                if (state is ProductsLoaded) {
                                  List<DropdownMenuItem<Product>>
                                      dropDownItems = state.products
                                          .map((e) => DropdownMenuItem<Product>(
                                                value: e,
                                                child: Text(
                                                  e.productName,
                                                  style: const TextStyle(
                                                      color: Colors.black,
                                                      fontWeight:
                                                          FontWeight.w900),
                                                ),
                                              ))
                                          .toList();

                                  if (invoiceItem == null &&
                                      prodSelected == false) {
                                    onChange<Product>(state.products.first);
                                    prodSelected = true;
                                  }

                                  return CustomDropdown<Product>(
                                    labelText: "Product",
                                    value:
                                        BlocProvider.of<InvoiceCubit>(context)
                                            .getProduct(),
                                    items: dropDownItems,
                                    context: context,
                                    onChanged: onChange,
                                  );
                                }
                                return const SizedBox(
                                    width: 100, child: Text("Error"));
                              },
                            ),
                            productCategory,
                          ],
                        );
                      });
                });

categoryController won't be updated via onChange but will be updated based on the snapshot.data