Making button disabled if some date is fetched in flutter

Question

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,

Is this connected to your [last question](https://stackoverflow.com/q/69711477/10157127)? — Md. Yeasin Sheikh, Oct 25 '21 at 22:45

score -1 · Accepted Answer · answered Oct 25 '21 at 23:12

-1

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 Oct 25 '21 at 23:12

Canada2000

1,688
6
14

I put my button inside another FutureBuilder with the same function and it works very well, thanks – JS1 Oct 27 '21 at 13:05
You cannot call setState() in the builder of a FutureBuilder. First because you update the state before the build method ends and second because the future could be called an undefined number of times (i.e. if snapshot.hasData is true the widget rebuilds, the future is called and if snapshot.hasData is true the widget is rebuild etc.) – g. tu May 05 '23 at 10:42

Making button disabled if some date is fetched in flutter

1 Answers1