Utilisez les plugins en Flutter

Salut à toi. Bienvenue dans ce nouvel article. Les plugins jouent un rôle déterminant dans le développement d’application. Ils nous permettent d’avoir des composants déjà prêts et utiles à nos applications. Aussi, ils nous permettent de gagner un max de temps pendant la phase de développement de votre application. Dans cet article, nous verrons comment installer, configurer et utiliser les plugins en Flutter.

Les plugins, qu’est-ce que c’est ?

Les plugins, ou encore module d’extension, sont des composants logiciels ou un ensemble de code externe à une application qui peuvent être greffés à une application dans le but de lui ajouter une fonctionnalité supplémentaire. Les plugins en Flutter sont des composants qui se place au-dessus des API et services mobiles natifs (Java, Kotlin, ObjC, Swift, etc.). Par exemple en flutter, si vous avez besoin d’accéder à des fonctionnalités natives telles que accéder à la localisation du téléphone, le seul moyen de le faire est d’utiliser un plugin.

Où trouver les plugins ?

Google met à notre disposition plusieurs plugins pour nous permettre d’effectuer un très grand nombre d’action. Le site PUB.DEV est la bibliothèque de référence des plugins utilisables en Flutter.

Vous pourrez y trouver tous les plugins dont vous avez besoin pour ajouter les fonctionnalités dont vous aurez besoin dans vos applications.

Comment installer un plugin ?

L’installation d’un plugin est une tâche très simple à accomplir. Dans un projet Flutter, vous avez un fichier nommé pubspec.yaml. C’est dans ce fichier, précisément dans la section dependencies et dev_dependencies que vous aurez à ajouter les références des plugins que vous voudrez installer dans votre projet.

dependencies:
  flutter:
    sdk: flutter
    
    
dev_dependencies:
  flutter_test:
    sdk: flutter

la section dependencies concernent les plugins qui seront utilisés dans l’application. Par contre, la section dev_dependencies permet de déclarer les dépendances utiles pendant le développement sans pour autant apparaitre dans l’application conçue.

Vous n’avez qu’à copier-coller la référence du plugin en dessous de ces sections comme suit :

dependencies:
  flutter:
    sdk: flutter
  nom_plugin: version_plugin

NB: faites très attention à l’indentation de chaque ligne que vous ajouterez à ce fichier. Une mauvaise indentation peut empêcher flutter d’exécuter ce fichier pour mettre à jour les dépendances de votre projet.

Une fois que vous avez bien ajouté votre plugin, vous devez exécuter la commande, dans un terminal, qui permettra de télécharger la dépendance ajoutée au fichier :

flutter pub get

NB: certains éditeurs tels que android studio ou intellij vous permet d’exécuter cette commande grâce à une commande graphique (ou bouton) intégrée dans l’interface du logiciel. Vous pouvez valablement effectuer la même action avec ce bouton, mais notez qu’en cliquant sur ce bouton, l’éditeur exécutera la même commande pour vous. Notez également que cette action nécessite une connexion internet pour fonctionner.

Exemple avec le plugin TableCalendar

Voyons ensemble comment installer le plugin TableCalendar dans un projet Flutter pour afficher un calendrier dans une page. Rendons-nous sur la page officiel du plugin sur le site pub.dev.

Dans cette page vous avez plusieurs onglets. Notamment :

• Readme : cet onglet vous affichera la description du plugin dans son ensemble.
• Changelog : ici vous verrez le journal des modifications effectués par les éditeurs du plugin.
• Example : vous aurez ici, un exemple qui vous montre comment utiliser le plugin dans votre projet.
• Installing : cet onglet contiendra les instructions qui vous aideront à installer le plugin dans votre projet.
• Versions : cette partie listera la liste des versions publiées du plugin, de la version la plus récente à la plus ancienne avec les versions de Dart supportée pour chaque version du plugin.
• Scores : ici, vous aurez les statistiques sur le plugin. Les notes données par les usagers au plugin, la popularité du plugin, le nombre de like, etc.

Dans la section « installing », nous allons trouver la référence du plugin pour l’installer dans notre projet comme suit :

Dans cette capture, on nous montre qu’on dispose de deux méthodes pour installer un plugin. La première façon c’est d’exécuter la commande suivante dans un terminal à la racine du projet.

flutter pub add table_calendar

Ou d’ajouter la référence du plugin dans le fichier pubspec.yaml comme suit

dependencies:
  flutter:
    sdk: flutter
  table_calendar: ^3.0.8

Puis d’exécuter la commande flutter pub get dans un terminal. Vous pourrez ensuite l’utiliser dans votre projet en prenant soin de l’importer à chaque fois que vous aurez à l’utiliser.

import 'package:table_calendar/table_calendar.dart';

Voici un exemple de code

import 'package:flutter/material.dart';
import 'package:table_calendar/table_calendar.dart';

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

  @override
  State<Calendrier> createState() => _CalendrierState();
}

class _CalendrierState extends State<Calendrier> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Calendrier")),
      body: TableCalendar(
        lastDay: DateTime(2050),
        firstDay: DateTime(2000),
        focusedDay: DateTime.now(),
      ),
    );
  }
}

Conclusion

Voilà, vous savez maintenant comment installer et utiliser un plugin en Flutter. J’espère que cet article vous sera d’une grande utilité. N’hésitez pas à laisser un commentaire si vous avez aimé cet article ou si vous avez des suggestions. Peace !