A tradução do artigo foi elaborada na véspera do início do curso Flutter Mobile Developer .
Também o convidamos a se inscrever em um webinar aberto sobre o tópico "Escrevendo um aplicativo Flutter usando Redux" . No webinar, os participantes, junto com um especialista, irão analisar os principais recursos do Redux e escrever um pequeno aplicativo usando-o, bem como discutir como o Redux será dimensionado no futuro. Junte-se a nós!
Meu artigo anterior Parsing Complex of JSON (JavaScript Object Notation) no Flutter recebeu muitos comentários bons de pessoas que começaram a usar o Flutter. E uma das perguntas mais frequentes (FAQs) mais populares dos iniciantes era: "Como fazer o mesmo com solicitações de API?"
Seu desejo se tornou realidade, meu amigo.
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».