'Widget not reacting to real-time changes - Flutter

While displaying an Alert box, i'm trying to change the Box Shadow of saveButton widget which is simply a button. The button is expected to become active as soon as the TextFormField is populated. But the button does not become active or inactive until the user presses Done or Submit on the keyboard. Below is the video for better understanding and the code for the reference.

class AddFacilityEquipmentWidget extends StatelessWidget {
  final AddFacilityProvider provider;

  AddFacilityyEquipmentWidget({this.provider});

  @override
  Widget build(BuildContext context) {
    return equipmentTypesColumn(context);
  }

  Widget equipmentTypesColumn(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(Translations.of(context).getEquipment),
        addCustomEquipmentButton(context),
      ],
    );
  }

  Widget addCustomEquipmentButton(BuildContext context) {
    return GestureDetector(
      onTap: () {
        showDialog(
          context: context,
          barrierDismissible: false,
          builder: (context) => addEquipmentAlertWidget(context),
        );
      },
      child: Text("Add Custom Equipment"),
    );
  }

  Widget addEquipmentAlertWidget(BuildContext context) {
    return AlertDialog(
      contentPadding: EdgeInsets.zero,
      content: Container(
        child: Column(
          children: <Widget>[
            upperTitleWidget(context),
            SizedBox(height: d_50),
            equipmentNameField(context),
            SizedBox(height: d_50),
            saveButton(context)
          ],
        ),
      ),
    );
  }

  Widget upperTitleWidget(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text(
          Translations.of(context).getAddEquipment,
          style: d18fw700Black,
        ),
        Container(
          height: d_20,
          width: d_20,
          child: IconButton(
              padding: pd_0,
              icon: Icon(
                Icons.cancel,
                color: greyColor,
              ),
              onPressed: () {
                provider.isAddEquipmentButtonActive = false;
                provider.addNewEquipmentController.clear();

                Navigator.pop(context);
              }),
        )
      ],
    );
  }

  Widget equipmentNameField(BuildContext context) {
    return Container(
      child: TextFormField(
        controller: provider.addNewEquipmentController,
        keyboardType: TextInputType.text,
        onChanged: (text) {
          if (text.length > 0) {
            provider.isAddEquipmentButtonActive = true;
          } else {
            provider.isAddEquipmentButtonActive = false;
          }
        },
      ),
    );
  }

  Widget saveButton(BuildContext context) {
    return GestureDetector(
      onTap: () {},
      child: Container(
        decoration: BoxDecoration(
            boxShadow: [
              provider.isAddEquipmentButtonActive
                  ? BoxShadow() //Box Shadow 1
                  : BoxShadow(), // Box Shadow 2
            ],
            color: provider.isAddEquipmentButtonActive
                ? backgroundColor
                : deactivatButtonColor,
            borderRadius: BorderRadius.circular(d_100)),
        child: Text(
          Translations.of(context).getAddEquipment,
        ),
      ),
    );
  }
}

enter image description here

Edit: Below is the code of AddFacilityProvider class

class AddFacilityProvider extends ChangeNotifier {
  List<Facilities> _equipmentList = [
    Facilities(text: "Floodlights", key: "Floodlights", isOpen: false),
    Facilities(text: "Scoreboard", key: "Scoreboard", isOpen: false),
    Facilities(text: "Changing rooms", key: "Changing rooms", isOpen: false),
    Facilities(text: "Showers", key: "Showers", isOpen: false),
    Facilities(text: "Free parking", key: "Free parking", isOpen: false),
    Facilities(
        text: "Wheelchair friendly", key: "Wheelchair friendly", isOpen: false),
    Facilities(text: "Drinking water", key: "Drinking water", isOpen: false),
    Facilities(text: "Sports bar", key: "Sports bar", isOpen: false),
    Facilities(text: "Toilets", key: "Toilets", isOpen: false),
  ];
  TextEditingController _addNewEquipmentController =
      TextEditingController();
  bool _isEnableAddNewFacilityEquipment = false;
  bool _isAddEquipmentButtonActive = false;
  

  void toggleAddEquipmentActive(bool value) {
    _isAddEquipmentButtonActive = value;
    notifyListeners();
  }

  TextEditingController get addNewEquipmentController =>
      _addNewEquipmentController;

  set addNewEquipmentController(TextEditingController value) {
    _addNewEquipmentController = value;
    notifyListeners();
  }

  bool get isEnableAddNewFacilityEquipment => _isEnableAddNewFacilityEquipment;

  set isEnableAddNewFacilityEquipment(bool value) {
    _isEnableAddNewFacilityEquipment = value;
    notifyListeners();
  }

  bool get isAddEquipmentButtonActive => _isAddEquipmentButtonActive;

  set isAddEquipmentButtonActive(bool value) {
    _isAddEquipmentButtonActive = value;
    notifyListeners();
  }
}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source