記事の翻訳は、Flutter MobileDeveloperコースの開始前夜に作成されました。
また、「Reduxを使用したFlutterアプリケーションの作成」というトピックに関するオープンウェビナーにサインアップすることをお勧めします。ウェビナーでは、参加者は専門家と一緒に、Reduxの主な機能を分析し、それを使用して小さなアプリケーションを作成し、Reduxが将来どの程度拡張できるかについて話し合います。参加しませんか！
私の以前の記事「FlutterでのJSONの構文解析（JavaScript Object Notation）」は、Flutterを使い始めた人々から多くの良いフィードバックを受け取りました。そして、初心者からの最も人気のあるよくある質問（FAQ）の1つは、「APIリクエストで同じことを行う方法」でした。
友よ、あなたの願いは叶いました。
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».