Die Übersetzung des Artikels wurde am Vorabend des Starts des Flutter Mobile Developer-Kurses vorbereitet .
Wir laden Sie außerdem ein, sich für ein offenes Webinar zum Thema "Schreiben einer Flatteranwendung mit Redux" anzumelden . Während des Webinars analysieren die Teilnehmer zusammen mit einem Experten die Hauptfunktionen von Redux, schreiben eine kleine Anwendung und diskutieren, wie gut Redux in Zukunft skaliert. Begleiten Sie uns!
Mein vorheriger Artikel Parsing Complex von JSON (JavaScript Object Notation) in Flutter erhielt viele gute Rückmeldungen von Leuten , die in Flutter angefangen haben. Und eine der beliebtesten häufig gestellten Fragen (FAQs) von Anfängern war: "Wie mache ich dasselbe mit API-Anfragen?"
Dein Wunsch ist in Erfüllung gegangen, mein Freund.
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».