1

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();
  }
}
pratik97179
  • 133
  • 1
  • 2
  • 12
  • Could you add the code from the `AddFacilityProvider` class? – Rukka Mar 30 '22 at 07:24
  • @Rukka I have included the code from ```AddFacilityProvider``` class. – pratik97179 Mar 30 '22 at 07:37
  • I believe you need a ChangeNotifierProvider widget is your tree, but I'm not too familiar with Provider so I'm not sure – Rukka Mar 30 '22 at 07:40
  • In Dialogue and Bottomsheet not changes there state using simple state. I don't have any idea about provider but you check below link for simple setstate https://stackoverflow.com/questions/51962272/how-to-refresh-an-alertdialog-in-flutter – Ravi Limbani Mar 30 '22 at 09:14

0 Answers0