En el mundo actual, la mayoría de las aplicaciones dependen en gran medida de la obtención de información de los servidores a través de Internet. En Flutter, dichos servicios son proporcionados por el paquete http . En este artículo exploraremos lo mismo.
Para obtener datos de Internet, siga los pasos a continuación:
- Importar el paquete http
- Haz una solicitud de red usando el paquete http
- Convierta la respuesta en un objeto Dart personalizado
- Mostrar los datos en un formato adecuado
Importación del paquete http:
Para instalar el paquete http, use el siguiente comando en su símbolo del sistema:
pub get
o, si está utilizando flutter cmd , use el siguiente comando:
flutter pub get
Después de la instalación, agregue la dependencia al archivo pubsec.yml como se muestra a continuación:
import 'package:http/http.dart' as http;
Solicitando Datos:
Podemos usar el método http.get() para obtener los datos del álbum de muestra de JSONPlaceholder como se muestra a continuación:
Dart
Future<http.Response> fetchAlbum() { return http.get('https://jsonplaceholder.typicode.com/albums/1'); }
Convirtiendo la respuesta:
Aunque hacer una solicitud de red no es gran cosa, trabajar con los datos de respuesta sin procesar puede ser un inconveniente. Para facilitarle la vida, convierta los datos sin procesar (es decir, http.response) en un objeto de dardo. Aquí crearemos una clase de álbum que contenga los datos JSON como se muestra a continuación:
Dart
class Album { final int userId; final int id; final String title; Album({this.userId, this.id, this.title}); factory Album.fromJson(Map<String, dynamic> json) { return Album( userId: json['userId'], id: json['id'], title: json['title'], ); } }
Convierta http.Response en un álbum:
Ahora, siga los pasos a continuación para actualizar la función fetchAlbum() para devolver un Future<Album> :
- Use el paquete dart: convert para convertir el cuerpo de la respuesta en un mapa JSON.
- Utilice el método de fábrica fromJSON() para convertir JSON Map en Album si el servidor devuelve una respuesta OK con un código de estado de 200.
- Ejecute una excepción si el servidor no devuelve una respuesta OK con un código de estado de 200.
Dart
Future<Album> fetchAlbum() async { final response = await http.get('https://jsonplaceholder.typicode.com/albums/1'); if (response.statusCode == 200) { return Album.fromJson(json.decode(response.body)); } else { throw Exception('Failed to load album'); } }
Obteniendo los datos:
Ahora use el método fetch() para obtener los datos como se muestra a continuación:
Dart
class _MyAppState extends State<MyApp> { Future<Album> futureAlbum; @override void initState() { super.initState(); futureAlbum = fetchAlbum(); }
Visualización de los datos:
Use el widget FlutterBuilder para mostrar los datos en la pantalla como se muestra a continuación:
Dart
FutureBuilder<Album>( future: futureAlbum, builder: (context, snapshot) { if (snapshot.hasData) { return Text(snapshot.data.title); } else if (snapshot.hasError) { return Text("${snapshot.error}"); } // spinner return CircularProgressIndicator(); }, );
Código fuente completo:
Dart
import 'dart:async'; import 'dart:convert'; import 'package:flutter/material.dart'; import 'package:http/http.dart' as http; Future<Album> fetchAlbum() async { final response = await http.get('https://jsonplaceholder.typicode.com/albums/1'); // Appropriate action depending upon the // server response if (response.statusCode == 200) { return Album.fromJson(json.decode(response.body)); } else { throw Exception('Failed to load album'); } } class Album { final int userId; final int id; final String title; Album({this.userId, this.id, this.title}); factory Album.fromJson(Map<String, dynamic> json) { return Album( userId: json['userId'], id: json['id'], title: json['title'], ); } } void main() => runApp(MyApp()); class MyApp extends StatefulWidget { MyApp({Key key}) : super(key: key); @override _MyAppState createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { Future<Album> futureAlbum; @override void initState() { super.initState(); futureAlbum = fetchAlbum(); } @override Widget build(BuildContext context) { return MaterialApp( title: 'Fetching Data', theme: ThemeData( primarySwatch: Colors.blue, ), home: Scaffold( appBar: AppBar( title: Text('GeeksForGeeks'), ), body: Center( child: FutureBuilder<Album>( future: futureAlbum, builder: (context, snapshot) { if (snapshot.hasData) { return Text(snapshot.data.title); } else if (snapshot.hasError) { return Text("${snapshot.error}"); } return CircularProgressIndicator(); }, ), ), ), ); } }
Producción:
Publicación traducida automáticamente
Artículo escrito por ddeevviissaavviittaa y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA