How to use FutureBuilder to improve Development efficiency

This article mainly introduces how to use FutureBuilder to improve development efficiency, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Common scene

Display request button user clicks button to display loading display data or error

Abstract pattern

Display request button (initial status) user clicks the button to display loading (status in request) display data or error (end status (success or failure))

Convert to programming language

The above three real situations correspond to the three states of AsyncSnapshot.

ConnectionState.none initial state ConnectionState.waiting request state ConnectionState.done complete state snapshot.hasError complete (abnormal) snapshot.hasData complete (normal)

Use FutureBuilder to handle this scenario

The protagonist of this article, FutureBuilder, is to solve this problem. It receives a Future request and a widget callback corresponding to the above situations. You can concatenate the data with the interface to avoid additional declarations of variables that are only used to pass the data.

A _ showResult variable is declared in advance to indicate whether the page triggers the request.

And encapsulates a _ fetch () network request.

Future _ fetch () async {return (await Dio () .get ("https://jsonplaceholder.typicode.com/users/1")) .data;})

The result of the request is arbitrary, regardless of whether it is an encapsulated object, map,list, as long as a Future places the Future call on the future parameter of FutureBuilder and uses _ showResult to control when the request is triggered.

FutureBuilder (future: _ showResult? _ fetch (): null,...)

Then set the widget corresponding to each Future result to the builder parameter:

FutureBuilder (... Builder: (context, snapshot) {switch (snapshot.connectionState) {case ConnectionState.none: / /-initial state return RaisedButton (onPressed: () {setState (() {_ showResult = true; / / click the button to trigger the request});}, child: Text ("start"),); case ConnectionState.waiting: / /-request state return CircularProgressIndicator () Case ConnectionState.done: / /-completed if (snapshot.hasError) {/ / exception return Text ('${snapshot.error}', style: TextStyle (color: Colors.red),);} else {/ / normal return Text (snapshot.data ["name"]);} break; default: break;} return Container ();},)

Thank you for reading this article carefully. I hope the article "how to use FutureBuilder to improve development efficiency" shared by the editor will be helpful to everyone. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!