Nous allons maintenant créer une application mobile qui fait appel à une API pour afficher des images et réaliser des actions dessus. C’est une app de “Fond d’écran” comme il en existe plein, mais ce sera la vôtre :)

Vous êtes libre de faire le design que vous voulez, d’ailleurs je vous conseil d’utiliser les bibliothèque Material Design plutôt que les widgets Cupertino plus difficile à utiliser car moins documenté.

On va construire tout doucement cette app, on pourra ensuite la publier sur le PlayStore !

Itération 2 - ListView

Vous allez commencer par afficher une liste d’image depuis internet en utilisant le widget ListView

Le tableau d’image à afficher dans une liste

List<String> imageUrlListToDisplay = [
"https://picsum.photos/id/1000/800/800",
"https://picsum.photos/id/1005/800/800",
"https://picsum.photos/id/1004/800/800"
];

Résultat attendu

• Une liste d’image s’affiche sur votre application
• Les images proviennent d’internet via le tableau d’URL fourni

Ressources

• Afficher une image depuis Internet
• Créer une liste avec Flutter

Itération 3 - Utilisation d’une API 🔌

Maintenant nous allons récupérer les URL depuis Unsplash, qui est un super site avec plein d’image libre de droit si vous ne connaissez pas.

Inscription sur Unsplash pour récupérer une clé d’API

Pour la suite de l’exercice vous allez devoir vous créer un compte Unsplash pour pouvoir accéder à leur API. (Profitez en pour suivre ce super photographe https://unsplash.com/@akhu 😈)

1. C’est par ici : https://unsplash.com/developers
2. Créez ensuite une application et remplissez le formulaire
3. Récupérez votre clé d’API et testez là sur un outil comme Insomnia ou Postman

Nous n’utiliserons que l’authentification “Public” soit : https://unsplash.com/documentation#public-authentication

→ Testez sur votre client HTTP la route suivante

https://api.unsplash.com/photos/random

De retour sur Flutter

Maintenant on va faire la même chose mais avec votre application Flutter !

Résultat attendu

• Le résultat JSON de la route /photos s’affiche dans la console Flutter
• Vous êtes capable de récupérer l’URL de la première image en taille regular→ et de l’afficher dans la console
• Vous avez un modèle UnsplashImage qui représente sous forme d’objet Dart le résultat json d’une requête sur Unsplash sur les attributs qui nous intéresse
• Vous avez une instance de UnsplashImage pour chaque image de l’objet JSON

🔌 La classe Dart représentant le modèle UnsplashImage

Cette classe sera utilisée pour manipuler les image de l'API Unsplash dans votre application Flutter.

class UnsplashImage {  

  String id;
  String? description;
  String regularUrl;
  String fullUrl;
  String rawUrl; //For downloading image only
  String userName; //Attribution to the photographer
  String userProfileUrl; //Photographer's profile
  String userProfileImage; //Photographer's profile image
  int likes;
  String? blurHash; //Optional
  String? downloadLocation; //Optional
  Color? color; //Optional
  
  UnsplashImage.fromJson(Map<String, dynamic> json) { //Todo }
  }

Ressources

• 🛎 Guide → Comment faire un appel réseau avec Flutter et parser les données en retour
• Pour transformer un JSON en spécification de modèle dans un langage donné
• Sérialiser / Désérialiser du JSON en objet Dart
• Documentation Unsplash pour la route/photos

Itération 4 - GridView

Nous avons a cette étape normalement un système qui réalise une requête asynchrone à l’API d’Unsplash pour récupérer une liste d’images. Puis nous les “parsons” depuis le JSON vers un objet Dart UnsplashImage .

Nous allons exploiter ces objets pour afficher une grille d’image.

Résultats attendus

• Une GridView affiche les images sous forme d’une grille de 1 ou 2 colonnes (ou plus à vous de voir)
• Nous pouvons scroller pour afficher la suite des images
• On ne vous demande pas de faire un scroll infini, utilisez le paramètre per_page de la route d’API /photos pour décider combien d’images vous souhaitez récupérer.

Ressources

• Documentation de la Grid View avec Vidéo
• Exemple de code d’une GridView

Itération 5 - Navigation et détail

Dans cette partie nous allons travailler la navigation avec Flutter, et créer une autre page dans notre application permettant d’aller voir en détails une image avec les informations qui lui sont liées.

Au clique sur une image aller sur une autre page pour la voir en plus grand sur une page dédiée

Exemple d’un écran de détail pour une image récupérée

Résultats attendus

On ne demande pas de faire le téléchargement de l’image sur le téléphone !

• Lorsque l’on tape sur une image de la GridView on accède à un écran de détail avec l’image en plein écran
• On transmet l’objet UnsplashImage à la nouvelle vue via le Navigator
• Le système de routing par nom est utilisé pour gérer les routes et vue
• Le photographe est attribué (Photo + Nom) et on peut accéder à son profil en ligne via un bouton
• La description de la photo est affiché si elle est présente

Ressources

• Utilisation de la navigation (Flutter 1.x)
• Ouvrir une URL dans le navigateur depuis Flutter
• Gérer les cliques et les événements d’interactions
• Passer des données entre les vues
• Lifting State up & Provider

Itération 6

1. 🔥 Barre de recherche
2. 🔥🔥 Realiser le système de Topic comme sur la maquette
3. 🔥🔥 Utiliser le blur_hash
4. 🔥🔥🔥 Mettre en place Provider
5. 🔥🔥🔥🔥 Réaliser un scroll infini
6. 🔥🔥🔥🔥🔥 Pouvoir télécharger l’image sur son smartphone

Plus vous aurez de flammes plus vous aurez de points bonus.

Ressources

• Les topics sur Unsplash
• Floating App Bar pour un effet de scroll stylé
• Pour sauvegarder son image dans la galerie photo du téléphone
• Plugin Flutter pour utiliser le Blur Hash
• Un scroll infini en Flutter (exemple de code)
• 🔍 Utiliser la recherche de Unsplash