The translation of the article was prepared on the eve of the start of the Flutter Mobile Developer course .
We also invite you to sign up for an open webinar on the topic "Writing a Flutter Application Using Redux" . At the webinar, participants, together with an expert, will analyze the main features of Redux and write a small application using it, as well as discuss how well Redux scales in the future. Join us!
My previous article Parsing Complex of JSON (JavaScript Object Notation) in Flutter received a lot of good feedback from people getting started in Flutter. And one of the most popular Frequently Asked Questions (FAQs) from beginners was: "How to do the same with API requests?"
Your wish has come true, my friend.
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».