Flutter: obtención de datos JSON mediante HTTP

En este artículo, aprenderemos cómo obtener datos de Internet o un archivo JSON utilizando el paquete HTTP en un aleteo.

HTTP es una biblioteca componible basada en el futuro para realizar requests HTTP. Este paquete contiene un conjunto de funciones y clases de alto nivel que facilitan el consumo de recursos HTTP. Es multiplataforma y admite dispositivos móviles, de escritorio y navegador.

Implementación:

Suponemos que ya sabe cómo hacer un proyecto en un Flutter, estaremos trabajando en el código vs.

Los siguientes pasos son:

Paso 1 : cree un proyecto en código Vs y elimine el código predeterminado.

Paso 2 : antes de escribir el código, simplemente agregue el complemento HTTP en su archivo pubspec yaml .

dependencies:
 http: ^0.13.3

O simplemente puede agregar su complemento desde la terminal, simplemente escriba este comando,

flutter pub add http

Después de eso, ejecute este comando para obtener los paquetes,

flutter pub get

Paso 3: en el archivo main.dart , llame a la función main() , dentro de ella ejecute el método runApp() y asígnele una aplicación (MyApp).

Paso 4: ahora cree un widget con estado con el nombre ‘MyApp’. Un widget con estado es un widget que cambia su estado durante el tiempo de ejecución y devuelve el MaterialApp() , MaterialApp tiene tantas propiedades, pero aquí usamos solo 2 o 3, haga el debugBanner: falso ,  título: «MyApi»  y en el hogar propiedad dale un widget como quieras, le damos MyApi().

import 'package:flutter/material.dart';
import 'package:workingwithhttp2/MyApi.dart';
 
void main() {
  runApp(MyApp());
}
 
class MyApp extends StatefulWidget {
  MyApp({Key? key}) : super(key: key);
 
  @override
  _MyAppState createState() => _MyAppState();
}
 
class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "MyApi",
      debugShowCheckedModeBanner: false,
      home: MyApi(),
    );
  }
}

Ahora vamos a crear la clase MyApi, puede trabajar en el mismo archivo, pero aquí estamos trabajando en diferentes archivos para una tarea diferente, por lo que creamos un nuevo archivo MyApi.dart.

Paso 5: en el archivo MyApi.dart , cree un widget con estado MyApi y devuelva el andamio. En scaffold, hay una barra de aplicaciones y en la barra de aplicaciones tenemos un título: «Geeks for Geeks» , y en el cuerpo, tenemos un widget myApiWidget().

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
 
class MyApi extends StatefulWidget {
  MyApi({Key? key}) : super(key: key);
 
  @override
  _MyApiState createState() => _MyApiState();
}
 
class _MyApiState extends State<MyApi> {
   @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Geeks for Geeks"),
      ),
      body: myApiWidget(),
    );
  }
}

Para datos, tenemos este archivo JSON .

Paso 6: Ahora busquemos estos datos usando HTTP, creemos una función fetchUsers y llamemos a la función get por instancias HTTP. Devuelve la lista de objetos.

Future<List<dynamic>> fetchUsers() async {
  var result =
      await http.get(Uri.parse("https://randomuser.me/api/?results=20"));
  return jsonDecode(result.body)['results'];
}

Paso 7: Tenemos que llamar a fetchUers(). Pero es bueno cargar datos al inicializar nuestra APP, para eso tenemos un método   init() .

@override
void initState() {
  response = fetchUsers();
  super.initState();
}

Ohh genial, recuperamos los datos con éxito, ahora es el momento de mostrarlos.

Paso 8: Cree un myApiWidget(). 

myApiWidget() {
  return FutureBuilder(
    future: response,
    builder: (BuildContext context, AsyncSnapshot snapshot) {
      if (snapshot.hasData) {
        return ListView.builder(
          itemCount: snapshot.data.length,
          itemBuilder: (BuildContext context, int index) {
            return Card(
              child: Column(
                children: [
                  ListTile(
                    title: Text(snapshot.data[index]['name']['title'] +
                        " " +
                        snapshot.data[index]['name']['first'] +
                        " " +
                        snapshot.data[index]['name']['last']),
                    trailing:
                        Text(snapshot.data[index]['dob']['age'].toString()),
                    leading: CircleAvatar(
                      backgroundImage: NetworkImage(
                        snapshot.data[index]['picture']['large'],
                      ),
                    ),
                    subtitle: Text(snapshot.data[index]['email']),
                  )
                ],
              ),
            );
          },
        );
      } else {
        return Center(
          child: CircularProgressIndicator(),
        );
      }
    },
  );
}
myApiWidget() {
  return FutureBuilder(
    future: response,
    builder: (BuildContext context, AsyncSnapshot snapshot) {
      if (snapshot.hasData) {
        return ListView.builder(
          itemCount: snapshot.data.length,
          itemBuilder: (BuildContext context, int index) {
            return Card(
              child: Column(
                children: [
                  ListTile(
                    title: Text(snapshot.data[index]['name']['title'] +
                        " " +
                        snapshot.data[index]['name']['first'] +
                        " " +
                        snapshot.data[index]['name']['last']),
                    trailing:
                        Text(snapshot.data[index]['dob']['age'].toString()),
                    leading: CircleAvatar(
                      backgroundImage: NetworkImage(
                        snapshot.data[index]['picture']['large'],
                      ),
                    ),
                    subtitle: Text(snapshot.data[index]['email']),
                  )
                ],
              ),
            );
          },
        );
      } else {
        return Center(
          child: CircularProgressIndicator(),
        );
      }
    },
  );
}

Producción: