Making button disabled if some date is fetched in flutter

Issue

I want to disabled the submit button of my form when data is fetched in a TextFormField.

Above the TextFormField I have a datePicker, and if there is data in DB for the particular date selected in the datePicker, the TextFormFilled is filled with this data and disabled.

Here is how I do this using a FutureBuilder :

FutureBuilder<double?>(
                              future: getTimes(selectedDate),
                              builder: (BuildContext context, AsyncSnapshot snapshot) {
                                if (snapshot.hasData){
                                  return TextFormField(
                                    controller: _timeController,
                                    textAlign: TextAlign.center,
                                    enabled: false,
                                    decoration: InputDecoration(
                                      hintText: snapshot.data.toString() + " h",
                                      contentPadding: EdgeInsets.zero,
                                      filled: true,
                                      fillColor: Colors.white
                                    ),
                                  );
                                } 
                                else {
                                  return TextFormField(
                                    controller: _timeController,
                                    textAlign: TextAlign.center,
                                    enabled: true,
                                    decoration: InputDecoration(
                                      hintText: "0 h",
                                      contentPadding: EdgeInsets.zero,
                                      filled: true,
                                      fillColor: Colors.white
                                    ),
                                  );
                                }
                              }
                            )

The thing is I also want to disabled the submit button of my form, so I created a _isButtonDisabled variable,

Here is my button’s code :

ElevatedButton(
                              onPressed: _isButtonDisabled == true ? null : () async {postTimes(await convertDate(selectedDate), convertTime(_timeController.text));},
                              child: Text("Submit")
                            ),

I tried to set this variable to true if data is fetched in my futureBuilder, by using the setState method :

FutureBuilder<double?>(
                              future: getTimes(selectedDate),
                              builder: (BuildContext context, AsyncSnapshot snapshot) {
                                if (snapshot.hasData){
                                  setState(() {
                                    _isButtonDisabled = true;
                                  });
                                  return TextFormField(...

Which return me this error : FlutterError (setState() or markNeedsBuild() called during build.

I tried to encapsulate the setState method by using some function examples in this topic but it didn’t really worked as the content of the TextFormField was constantly flashing between the fetched data and the default text, instead of just displaying the fetched data.

Thanks for helping,

Solution

You dont need to call setState in your case: You dont need to rebuild the widget.
FutureBuider will automatically rebuild it for you when it receives the new data.

The only thing you need to do is ensure that your ElevatedButton is inside FutureBuilder.

change this:

if (snapshot.hasData){
                                  setState(() {
                                    _isButtonDisabled = true;
                                  });

into this:

                                _isButtonDisabled = true;
                     

Answered By – Canada2000

Answer Checked By – Marie Seifert (FlutterFixes Admin)