El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Obtenir Dades d'Internet

Següent ►
►

En aquest tema, aprendrem com obtenir dades d'Internet utilitzant Flutter. Això és essencial per a moltes aplicacions modernes que necessiten interactuar amb serveis web per obtenir informació en temps real.

Objectius

  • Comprendre com fer sol·licituds HTTP en Flutter.
  • Aprendre a utilitzar el paquet http.
  • Gestionar les respostes de les sol·licituds HTTP.
  • Mostrar les dades obtingudes en la interfície d'usuari.

Requisits Previs

  • Coneixements bàsics de Flutter i Dart.
  • Familiaritat amb els widgets bàsics de Flutter.

Contingut

  1. Instal·lació del Paquet http

Per fer sol·licituds HTTP en Flutter, utilitzarem el paquet http. Primer, hem d'afegir aquest paquet al nostre projecte.

  1. Obre el fitxer pubspec.yaml.
  2. Afegeix la dependència http a la secció dependencies:
dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.3
  1. Executa flutter pub get per instal·lar el paquet.

  1. Fer una Sol·licitud HTTP GET

Ara que tenim el paquet http instal·lat, podem fer una sol·licitud HTTP GET per obtenir dades d'Internet.

Exemple de Codi

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Obtenir Dades d\'Internet'),
        ),
        body: DataFromInternet(),
      ),
    );
  }
}

class DataFromInternet extends StatefulWidget {
  @override
  _DataFromInternetState createState() => _DataFromInternetState();
}

class _DataFromInternetState extends State<DataFromInternet> {
  String data = "Esperant dades...";

  @override
  void initState() {
    super.initState();
    fetchData();
  }

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

    if (response.statusCode == 200) {
      setState(() {
        data = json.decode(response.body)['title'];
      });
    } else {
      setState(() {
        data = 'Error en obtenir dades';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(data),
    );
  }
}

Explicació del Codi

  1. Importacions: Importem els paquets necessaris (http i dart:convert).
  2. MyApp: Definim l'aplicació principal amb un Scaffold que conté un AppBar i el widget DataFromInternet.
  3. DataFromInternet: Aquest és un StatefulWidget que farà la sol·licitud HTTP.
  4. fetchData: Aquesta funció fa una sol·licitud GET a l'URL https://jsonplaceholder.typicode.com/posts/1. Si la sol·licitud és exitosa (codi de resposta 200), actualitzem l'estat amb el títol del post obtingut. Si no, mostrem un missatge d'error.
  5. initState: Cridem fetchData quan el widget s'inicialitza.
  6. build: Mostrem les dades obtingudes en un Text widget.

  1. Gestió d'Errors

És important gestionar els errors quan fem sol·licituds HTTP. En l'exemple anterior, ja hem afegit una gestió bàsica d'errors. Podem millorar-ho afegint més detalls sobre l'error.

Exemple de Codi Millorat

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

    if (response.statusCode == 200) {
      setState(() {
        data = json.decode(response.body)['title'];
      });
    } else {
      setState(() {
        data = 'Error en obtenir dades: ${response.statusCode}';
      });
    }
  } catch (e) {
    setState(() {
      data = 'Error en obtenir dades: $e';
    });
  }
}

  1. Mostrar Dades Complexes

En lloc de mostrar només una cadena de text, podem mostrar dades més complexes, com una llista d'elements.

Exemple de Codi

class DataFromInternet extends StatefulWidget {
  @override
  _DataFromInternetState createState() => _DataFromInternetState();
}

class _DataFromInternetState extends State<DataFromInternet> {
  List<dynamic> data = [];

  @override
  void initState() {
    super.initState();
    fetchData();
  }

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

    if (response.statusCode == 200) {
      setState(() {
        data = json.decode(response.body);
      });
    } else {
      setState(() {
        data = [];
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: data.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(data[index]['title']),
          subtitle: Text(data[index]['body']),
        );
      },
    );
  }
}

Explicació del Codi

  1. data: Ara és una llista dinàmica que conté els posts obtinguts.
  2. fetchData: Fem una sol·licitud GET a https://jsonplaceholder.typicode.com/posts per obtenir una llista de posts.
  3. ListView.builder: Utilitzem un ListView.builder per mostrar la llista de posts. Cada ListTile mostra el títol i el cos del post.

Exercicis Pràctics

  1. Exercici 1: Modifica l'exemple per obtenir dades d'una API diferent. Prova amb l'API de GitHub per obtenir informació sobre un repositori.
  2. Exercici 2: Afegeix un botó per refrescar les dades manualment.
  3. Exercici 3: Implementa una gestió d'errors més detallada que mostri un diàleg d'alerta en cas d'error.

Solucions

Exercici 1

Future<void> fetchData() async {
  final response = await http.get(Uri.parse('https://api.github.com/repos/flutter/flutter'));

  if (response.statusCode == 200) {
    setState(() {
      data = json.decode(response.body)['description'];
    });
  } else {
    setState(() {
      data = 'Error en obtenir dades';
    });
  }
}

Exercici 2

@override
Widget build(BuildContext context) {
  return Column(
    children: [
      ElevatedButton(
        onPressed: fetchData,
        child: Text('Refrescar Dades'),
      ),
      Expanded(
        child: Center(
          child: Text(data),
        ),
      ),
    ],
  );
}

Exercici 3

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

    if (response.statusCode == 200) {
      setState(() {
        data = json.decode(response.body)['title'];
      });
    } else {
      showErrorDialog('Error en obtenir dades: ${response.statusCode}');
    }
  } catch (e) {
    showErrorDialog('Error en obtenir dades: $e');
  }
}

void showErrorDialog(String message) {
  showDialog(
    context: context,
    builder: (context) {
      return AlertDialog(
        title: Text('Error'),
        content: Text(message),
        actions: [
          TextButton(
            onPressed: () {
              Navigator.of(context).pop();
            },
            child: Text('OK'),
          ),
        ],
      );
    },
  );
}

Conclusió

En aquest tema, hem après com obtenir dades d'Internet utilitzant Flutter i el paquet http. Hem vist com fer sol·licituds GET, gestionar les respostes i mostrar les dades en la interfície d'usuari. També hem après a gestionar errors i a treballar amb dades més complexes. Aquests coneixements són fonamentals per desenvolupar aplicacions modernes que necessiten interactuar amb serveis web.

◄ Anterior
◄
Següent ►
►

Curs de Desenvolupament Flutter

Mòdul 1: Introducció a Flutter

Mòdul 2: Conceptes Bàsics de Programació en Dart

Mòdul 3: Widgets de Flutter

Mòdul 4: Gestió de l'Estat

Mòdul 5: Navegació i Enrutament

Mòdul 6: Xarxes i APIs

Mòdul 7: Persistència i Emmagatzematge

Mòdul 8: Conceptes Avançats de Flutter

Mòdul 9: Proves i Depuració

Mòdul 10: Desplegament i Manteniment

Mòdul 11: Flutter per a Web i Escriptori

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats