Trabajar con API programables adaptables en Flutter

La traducción del artículo se preparó la víspera del inicio del curso Flutter Mobile Developer .



También lo invitamos a inscribirse en un
seminario web abierto sobre el tema "Cómo escribir una aplicación Flutter usando Redux" . En el webinar, los participantes, junto con un experto, analizarán las características principales de Redux y escribirán una pequeña aplicación usándola, además de discutir qué tan bien Redux escala en el futuro. ¡Únete a nosotros!






Mi artículo anterior Parsing Complex of JSON (JavaScript Object Notation) en Flutter recibió una gran cantidad de comentarios positivos de las personas que comenzaron a usar Flutter. Y una de las preguntas más frecuentes (FAQ) más populares de los principiantes fue: "¿Cómo hacer lo mismo con las solicitudes de API?"





Tu deseo se ha hecho realidad, 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



.





Sin formato, solo una cadena (Mapa).
, (Map) .

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



() ().





Publicar objeto para enviar con solicitud HTTP POST
Post- http POST-

, 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».








All Articles