Utiliser des packages Flutter pour avancer plus vite


Avatar de Pierre Courtois

En commençant à coder votre application, vous allez vous rendre compte que certaines idées sont parfois complexes à mettre en place. Heureusement, vous n’êtes probablement pas le seul à les avoir eues et certains membres de la communauté ont peut-être mis en ligne ce qu’on appelle des packages Flutter.


Groupes d'hommes qui travaillent sur des ordinateurs

Qu’est-ce qu’un package ?

Un package est une méthode, ou un bout de code prêt à l’utilisation, que vous allez pouvoir importer et utiliser pour votre application. Utiliser ces outils présente un énorme avantage, surtout lorsqu’on débute. En effet, ils permettent de grandement nous simplifier la mise en place de certaines fonctions où éléments visuels, qui sont parfois complexes à coder ou qui demandent beaucoup de temps. 

Par exemple, il existe des packages Flutter pour : 

  • Connecter son application à des services tiers comme Firebase ; 
  • Facilement ajouter des animations de chargement ; 
  • Ajouter de nouvelles typographies pour ses textes ou de nouveaux icônes ; 
  • Ouvrir des urls dans une nouvelle fenêtre ou appeler des numéros de téléphones ; 
  • Zoomer sur une photo lorsque l’utilisateur “pincer” l’écran, ou la faire pivoter quand il tourne son écran, etc.

Gardez en tête que les packages sont des ressources mises en ligne par la communauté Flutter. Il se peut que ceux-ci ne soient pas toujours mis à jour et finissent par ne plus fonctionner, ce qui est très embêtant quand votre application en dépend. Même s’ils sont parfois une solution miracle quand on débute (ou qu’on veut économiser du temps), apprendre soi-même à coder des fonctionnalités reste toujours la meilleure solution sur le long terme.  

Comment installer un package dans Flutter ?

Pour installer un package, rendez-vous sur le site Pub.dev ou ceux-ci sont tous regroupés. Cherchez le package qui vous intéresse et rendez-vous la section “installing”. Vous avez alors deux options d’installation proposées : 

  • Utiliser le terminal de commande et entrer flutter pub add nom_du_package ; 
  • Aller dans votre dossier pubspec.yaml (tout en bas de vos dossiers quand vous ouvrez visual studio) et coller la dépendance avec la version que vous souhaitez installer, dans les dépendances juste en dessous de la ligne cupertino_icons: ^1.0.2

Le package va alors être importé dans vos dossiers et vous allez pouvoir l’utiliser pour application. 

Boîte d’info

Parfois, des étapes supplémentaires sont nécessaires pour pouvoir installer et utiliser un package. Pensez donc bien à lire toute la documentation qui est fournie, car elle indique généralement ce que vous devez faire. 

Utiliser un package 

Vous avez importé un package, mais cela n’est pas encore suffisant pour pouvoir l’utiliser. En effet, afin de pouvoir l’utiliser sur une page en particulier, il va falloir encore l’importer sur celle-ci. Heureusement, c’est très simple, il vous suffit pour cela de coller le chemin d’import qui est indiqué dans la partie “installing” du package et qui ressemble à ça :

import ‘package:mon_package/mon_package.dart’;

Ça y est ! Vous êtes prêt à utiliser votre package

Le package n’a pas besoin d’être importé sur votre page main.dart (sauf si vous en avez besoin dessus bien-sûr), mais sur chaque page où vous comptez l’utiliser. Pensez aussi bien à utiliser la documentation qui est fournie avec le package, celle-ci explique généralement comment faire pour l’utiliser.

Les différents types de packages

Il n’y a pas à proprement parler des types de packages, mais de mon expérience, on peut les diviser en 3 catégories : 

  1. Visuels, pour ajouter des éléments visuels à votre application, comme des typos, des icônes, des animations, etc ; 
  2. Fonctionnels, qui vous permettent de réaliser des actions, comme ouvrir une url, afficher un message d’erreur qui disparait après un temps donné, etc ; 
  3. De services tiers, qui permettent de se connecter et d’utiliser les fonctionnalités de services tiers comme Firebase, votre compte Google, votre compte Apple, etc. 

Packages visuels

Voici une liste de quelques packages visuels qui pourraient vous être utiles : 

Packages fonctionnels 

Voici une liste de quelques packages visuels qui pourraient vous être utiles : 

  • url_launcher (pour ouvrir des urls dans Google chrome, des numéros de téléphone, etc) ;
  • Image_picker (pour accéder aux images du téléphone et à la caméra) ;
  • video_player (pour pouvoir lancer des vidéos depuis votre application) ; 
  • geocoding (pour se géolocaliser) ;
  • audioplayers (pour jouer plusieurs fichiers audios en même temps) ; 

Packages de services externes 

Voici une liste de quelques packages visuels qui pourraient vous être utiles : 

  • firebase Core (pour connecter votre application à Firebase et profiter de ses services) ;
  • firebase auth (pour accéder à l’outil Firebase Authentification dans lequel vous pourrez stocker les comptes de vos utilisateurs) ; 
  • cloud_firestore (pour pouvoir écrire des fonctions en back-end) ;
  • google_sign_in (pour pouvoir se connecter à votre application avec son compte Google) ;
  • sign_in_with_apple (pour pouvoir se connecter à votre application avec son compte Apple) ;

Mes packages Flutter favoris

Voici la liste de package Flutter que j’ai pu personnellement utiliser et que je peux vous recommander :

Avatar de Pierre Courtois