CONSUMARE API REST CON FLUTTER

Per perseguire lo scopo di questo articolo, ci avvaliamo di JSONPlaceholder. Questo sito fornisce delle fake API da interrogare per scopi di test tra cui una classica /users in GET che restituisce una lista di 10 utenti.

Lato Flutter, ci sono numerose librerie che consentono di integrare API, ma per questo articolo sceglieremo la più classica http. Aggiungiamo, all'interno del nostro pubspec.yaml, le seguenti dipendenze:

name: rest_api_example
description: A new Flutter project.
version: 1.0.0+1

environment:
  sdk: ">=2.15.1 <3.0.0"

dependencies:
  cupertino_icons: ^1.0.2
  flutter:
    sdk: flutter
  http: ^0.13.4

dev_dependencies:
  flutter_lints: ^1.0.0
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true
    

Il passo successivo è creare una classe di costanti in cui inserire il base path delle api da invocare così come l'url che restituirà la lista di utenti. Il file constants.dart avrà la seguente struttura:

class ApiConstants {
  static String baseUrl = 'https://jsonplaceholder.typicode.com';
  static String usersEndpoint = '/users';
}

Fatto ciò, creiamo il servizio che si occuperà di invocare le api e recuperare l'HTTP response. Il metodo getUsers effettua la chiamata, ne verifica l'esito con un controllo sullo status code ed infine "deposita" il risultato all'interno della lista _model.

import 'dart:developer';
import 'package:http/http.dart' as http;
import 'package:rest_api_example/constants.dart';
import 'package:rest_api_example/model/user_model.dart';

class ApiService {
  Future<List<UserModel> getUsers() async {
    try {
      var url = Uri.parse(ApiConstants.baseUrl + ApiConstants.usersEndpoint);
      var response = await http.get(url);
      if (response.statusCode == 200) {
        List<UserModel> _model = userModelFromJson(response.body);
        return _model;
      }
    } catch (e) {
      log(e.toString());
    }
  }
}

E' ovvio che la parte di codice sopra esposta presupponga l'esistenza di un modello dati che racchiuda le informazioni sull'utente. Di conseguenza, creiamo una classe UserModel che, attraverso il metodo userModelFromJson, converta i dati forniti in response dalla nostra API.

class UserModel {

    int id;
    String name;
    String username;
    String email;
    String website;

    UserModel({
        required this.id,
        required this.name,
        required this.username,
        required this.email,
        required this.website
    });

    factory UserModel.fromJson(Map<String, dynamic> json) => UserModel(
        id: json["id"],
        name: json["name"],
        username: json["username"],
        email: json["email"],
        website: json["website"],
    );

    Map<String, dynamic> toJson() => {
        "id": id,
        "name": name,
        "username": username,
        "email": email,
        "website": website,
    };
}

L'ultima parte riguarda il rendering dei dati recuperati dal server. Nel codice sotto creiamo un oggetto di tipo List. Quindi, all'interno dell' initState, chiamiamo il service per ottenere i dati dalla nostra API. Inseriamo anche un Future.delayed nel metodo per poter simulare la risposta temporale dell'API. Quella che stiamo utilizzando è falsa, quindi è abbastanza veloce. Tuttavia, nella vita reale esse non sono poi così veloci motivo per il quale diventa doveroso mostrare un loader fintanto che  non è disponibile l'HTTP response. Una volta disponibile la risposta, ricostruiamo l'interfaccia utente per mostrare i dati. 

import 'package:flutter/material.dart';
import 'package:rest_api_example/model/user_model.dart';
import 'package:rest_api_example/services/api_service.dart';

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

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

class _HomeState extends State {
  late List? _userModel = [];
  @override
  void initState() {
    super.initState();
    _getData();
  }

  void _getData() async {
    _userModel = (await ApiService().getUsers())!;
    Future.delayed(const Duration(seconds: 1)).then((value) => setState(() {}));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('REST API Example'),
      ),
      body: _userModel == null || _userModel!.isEmpty
          ? const Center(
              child: CircularProgressIndicator(),
            )
          : ListView.builder(
              itemCount: _userModel!.length,
              itemBuilder: (context, index) {
                return Card(
                  child: Column(
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: [
                          Text(_userModel![index].id.toString()),
                          Text(_userModel![index].username),
                        ],
                      ),
                      const SizedBox(
                        height: 20.0,
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: [
                          Text(_userModel![index].email),
                          Text(_userModel![index].website),
                        ],
                      ),
                    ],
                  ),
                );
              },
            ),
    );
  }
}