Obtener datos desde Internet con Flutter

Flutter nos ofrece una serie de herramientas que nos facilitan la tarea de obtener datos desde Internet. En este ejemplo vamos a solicitar un post ficticio de un blog alojado en la red. Necesitaremos añadir el paquete http en el archivo pubspec.yaml. Además de modelar una clase en Dart que represente los datos retornados por la petición.

En esta ocasión asumimos que ya tienes instalado y configurado Flutter en Android Studio o Visual Studio Code.

También te puede interesar: Instalar y configurar Flutter.

Añadir el paquete http a pubspec.yaml

En primer lugar añadimos la última versión de http en la sección de dependencias del archivo pubspec.yaml.

dependencies:
  http: ^0.13.4

Y en AndroidManifest.xml incluimos el permiso de Internet:

<uses-permission android:name="android.permission.INTERNET"></uses-permission>

A continuación importamos http en nuestro archivo main.dart:

import 'package:http/http.dart' as http;

Crear una clase en Dart

Ahora creamos la clase Post, la cual nos permitirá parsear (mediante un factory constructor) un mapa JSON (userId, id, title y body) a un objeto tipo post en Dart.

class Post {
  final int userId;
  final int id;
  final String title;
  final String body;

  const Post({
    required this.userId,
    required this.id,
    required this.title,
    required this.body,
  });

  factory Post.fromJson(Map<String, dynamic> json) {
    return Post(
      userId: json['userId'],
      id: json['id'],
      title: json['title'],
      body: json['body'],
    );
  }
}

Solicitamos un post del blog con http.get

En el siguiente método fetchPost() solicitamos los datos de la red indicando que la petición es asíncrona con async y await. El método http.get() espera hasta obtener la respuesta. Si el estado de la respuesta es 200, parseamos el código JSON a un objeto post. En caso contrario lanzamos una excepción.

Future<Post> fetchPost() async {
  final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/1'));

  if (response.statusCode == 200) {
    return Post.fromJson(jsonDecode(response.body));
  } else {
    throw Exception('Error to get Post');
  }
}

Mostrar los datos del post en un Text Widget

Finalmente mostramos el contenido del post mediante los widgets Futurebuilder y Text dentro de nuestro archivo main.dart.

void main() => runApp(const App());

class App extends StatefulWidget {
  const App({Key? key}) : super(key: key);

  @override
  _AppState createState() => _AppState();
}

class _AppState extends State {
  late Future futurePost;

  @override
  void initState() {
    super.initState();
    futurePost = fetchPost();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Demo http',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Demo http'),
        ),
        body: Center(
          child: FutureBuilder(
            future: futurePost,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return Text((snapshot.data as Post).body);
              } else if (snapshot.hasError) {
                return Text('${snapshot.error}');
              }
              return const CircularProgressIndicator();
            },
          ),
        ),
      ),
    );
  }
}