La traduction de l'article a été préparée à la veille du début du cours Flutter Mobile Developer .
Nous vous invitons également à vous inscrire à un webinaire ouvert sur le thème "Ecrire une application Flutter avec Redux" . Lors du webinaire, les participants, avec un expert, analyseront les principales fonctionnalités de Redux et rédigeront une petite application en l'utilisant, ainsi que discuter de la façon dont Redux évoluera à l'avenir. Rejoignez-nous!
Mon précédent article Parsing Complex of JSON (JavaScript Object Notation) dans Flutter a reçu beaucoup de bons commentaires de la part de personnes qui se lancent dans Flutter. Et l'une des questions fréquemment posées (FAQ) les plus populaires des débutants était: "Comment faire de même avec les requêtes API?"
Votre souhait est devenu réalité, mon ami.
API, .
HTTP , JSONPlaceholder
. . .
GET : /POSTS/1
, , API. Postman . , API, HTTP , Postman.
JSON- .
. , JSON- (Parsing Complex JSON), , -. .
, (Name) (Source Type). Dart.
postFromJson
.
Post postFromJson(String str) {
final jsonData = json.decode(str);
return Post.fromJson(jsonData);
}
str
— JSON-. str
, jsonData
.
Post.fromJson
, Post
, .
, (Map
) Post.fromJson
?
factory Post.fromJson(Map<String, dynamic> json){
...
}
, Post.fromJson
Map
. .
API
-, API , , services.dart
.
String url = 'https://jsonplaceholder.typicode.com/posts';
Future<Post> getPost() async{
final response = await http.get('$url/1');
return postFromJson(response.body);
}
, !
, JSON-, . API. .
getPost()
API, url. JSON- response.body
, postFromJson
, .
Future
, Post
?
, .
. , API. . , A Future , , - . , Futures.
, , , API. async
and await
. , async
— , . async , await
(), , , . , , .
(UI) ?
, . , , , , .
?
(UI) , , API, . , API, .
, …
() (The Future of Futures) : FutureBuilder
, FutureBuilder
, (Futures). (UI).
FutureBuilder<Post>(
future: getPost(),
builder: (context, snapshot) {
return Text('${snapshot.data.title}');
}
)
FutureBuilder
, Scaffold
, .
FutureBuilder — future
builder
. future future
getPost()
, future
.
, future
getPost()
, snapshot builder. . ? ? !
: FutureBuilder
, getPost()
. , FutureBuilder
.
, . , CircularProgressIndicator
, , Text.FutureBuilder
.
if(snapshot.connectionState == ConnectionState.done)
return Text('Title from Post JSON : ${snapshot.data.title}');
else
return CircularProgressIndicator();
, , ?
if(snapshot.connectionState == ConnectionState.done) {
if(snapshot.hasError){
return ErrorWidget();
}
return Text('Title from Post JSON : ${snapshot.data.title}');
}
, snapshot.hasData
ConnectionStates
, ConnectionState.waiting
, ConnectionState.active
. , .
. . .
POST /
, GET-. , POST-?
, POST- -, .
POST- . FutureBuilder
. , .
Future<Post> createPost(Post post) async{
final response = await http.post('$url',
headers: {
HttpHeaders.contentTypeHeader: 'application/json'
},
body: postToJson(post)
);
return postFromJson(response.body);
}
http.post
3 → url
(API URL), headers
(HTTP Headers (); ) body
() ().
, post-.PostToJson(post)
post JSON, . createPost
FutureBuilder
!
(UI) .
. , , - , 200 400 statusCode, , .
, FutureBuilder?
.then()
.
createPost(post).then( (response){ } )
, API. , onPressed
.
response — , , createPost
- . , , . , .
createPost(post).then((response){
Navigate.of(context).pushNamed('dashboard');
})
, statusCode 400, . ( ).
. , . createPost
.
Future<http.Response> createPost(Post post) async{
//same as previous body
return response;
}
createPost
http.Response
. , (UI).
createPost(post).then((response){
if(response.statusCode == 200)
Navigate.of(context).pushNamed('dashboard');
else
print(response.statusCode);
})
GitHub, , : PoojaB26/ParsingJSON-Flutter
, ! , !
«Flutter Mobile Developer».
« Flutter- Redux».