Why is FutureBuilder called multiple times?

Question

Excuse the ignorance i am new to Flutter.

I am practicing on a course I did and I have the following scenario:

I have a view where I consume a web service in the method getDataArray (FutureBuilder), and I just want it to be done only once when this view is accessed.

I also have a TextField, FutureBuilder and the TextField is in thebuild(). My widget is a StatefulWidget because it needs to be redrawn to show the character counter of my TextField, so I think this is the reason that every time I type something the build runs and call the FutureBuilder again.

How can I solve that?

    class Pagina3 extends StatefulWidget {
    @override
    Pagina3State createState() {
        return Pagina3State();
    }
    }

    class Pagina3State extends State<Pagina3> {
    String _input = "";

    //returns a web service
    Future getDataArray() async {
        final dynamic resp =
            await web.http_Web(webservices.url["DATOS"], "POST", {}, context);
        return resp;
    }

    Pagina3() {}

    @override
    Widget build(BuildContext context) {
        var validators = new Validators();
        var utils = new Utils();
        return Scaffold(
        appBar: AppBar(
            title: Text('Page 3'),
        ),
        body: SafeArea(
            child: Center(
            child: Form(
                child: Padding(
                padding: EdgeInsets.symmetric(horizontal: 10),
                child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                    TextFormField(
                        decoration: InputDecoration(
                        counter: Text('Letras ${_input.length.toString()}'),
                        icon: Icon(Icons.alternate_email),
                        hintText: '[email protected]',
                        labelText: 'Correo electrónico',
                        ),
                        validator: (value) => validators
                            .fn_checkValidation([validators.required(value)]),
                        onChanged: (valor) {
                        setState(() {
                            _input = valor;
                        });
                        },
                    ),
                    Container(
                        child: FutureBuilder(
                            future: getDataArray(),
                            builder: (context, AsyncSnapshot<dynamic> snapshot) {
                            if (snapshot.hasData) {
                                if (snapshot.data["ok"] == false) {
                                return Text("ha ocurrido un problema");
                                }
                                return (Text("Exito"));
                            } else {
                                return Center(child: CircularProgressIndicator());
                            }
                            }),
                    )
                    ],
                ),
                ),
            ),
            ),
        ),
        );
    }
    }

Answer 1

Anything that's within a widget's build() method can trigger anytime — this is, you shouldn't rely on anything critical that could have impact on it. For example, opening a keyboard or closing, is enough to trigger multiple calls to build() on a widget.

Your FutureBuilder is just a widget on your tree, and because of that, anytime it rebuilds (for example, whenever you type on the TextField), it will call your getDataArray() because it doesn't actually really knows if that has already been called or not.

If you just want it to be called once, you can assign it to a state member and assign it to your FutureBuilder. That will be preserved as long as that state exists on the widget tree.

You can for example assign it on initState() if you want to call it only per state lifecycle or at didChangeDependencies() for example, if you want to refresh that call anytime a dependency changes.

 class Pagina3State extends State<Pagina3> {
  late final Future myFuture;

  @override
  void initState() {
     myFuture = getDataArray();
  }

  @override
   Widget build(BuildContext context) {
       
       child: FutureBuilder(
              future: myFuture,
      )
   }
}

Answer 2

As suggested by Miguel, you should assign your future to a variable outside of build() scope so it is only run once.

Note that since Dart 2.0 you can use lazy initialization with late final variables to write this in a even shorter way:

 class Pagina3State extends State<Pagina3> {
   late final Future myFuture = getDataArray();

   @override
   Widget build(BuildContext context) {
       child: FutureBuilder(
              future: myFuture,
      )
   }
}

Answer 3

That's because you are using setstate in your textfield action and it rebuild everything. I faced with similar problem with one of my apps and used a bool to avoid it, I named it firstRun, if it is true I called my future function in future builder if it's not I made it null like below ode sample. But I am not sure that is best way to do it, also you need to make this bool false in somewhere (in initstate perhaps);

bool firstRun = true;

 @override
    Widget build(BuildContext context) {...
                            ...
                             onChanged: (valor) {
                        firstRun = false;
                        setState(() {
                            _input = valor;
                        });
                        },
                      .....
                     FutureBuilder(
                            future: firtRun ? getDataArray() : null,
                            builder: (...