Flutter: obtención de datos de Internet

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:

1. Importar el paquete http
2. Haz una solicitud de red usando el paquete http
3. Convierta la respuesta en un objeto Dart personalizado
4. 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:

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:

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> :

1. Use el paquete dart: convert para convertir el cuerpo de la respuesta en un mapa JSON.
2. 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.
3. Ejecute una excepción si el servidor no devuelve una respuesta OK con un código de estado de 200.

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:

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:

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:

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: