đŸ“±CrĂ©ons une application mobile - Unsplash App

đŸ“±CrĂ©ons une application mobile - Unsplash App

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 :)


Une maquette d’exemple de ce que l’on va rĂ©aliser.

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

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

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

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

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