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

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

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 votre 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. đŸ”„đŸ”„đŸ”„đŸ”„ RĂ©aliser un scroll infini
  5. đŸ”„đŸ”„đŸ”„đŸ”„đŸ”„ Pouvoir tĂ©lĂ©charger l’image sur son smartphone

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


Ressources

Commentaires

Connectez vous ou devenez un membre de Async pour rejoindre la conversation.
Entrez un mail ici pour recevoir un lien de connexion, super simple âšĄïž