Premiers pas avec le package GetX dans les applications Flutter

Flutter est l'un des moyens les plus rapides de créer des applications natives véritablement multiplateformes. Il fournit des fonctionnalités permettant au développeur de créer une expérience d'interface utilisateur vraiment magnifique pour ses utilisateurs.

Cependant, la plupart du temps, pour réaliser des choses comme la navigation vers les écrans, la gestion de l'état et l'affichage des alertes, de nombreux passe-partout sont nécessaires. Ces passe-partout ont tendance à ralentir l'efficacité du développement des développeurs qui essaient de créer des fonctionnalités et de respecter leurs délais.

Prenons par exemple le passe-partout nécessaire pour naviguer vers un écran dans une application Flutter. Supposons que vous souhaitiez accéder à un écran appelé AboutScreen . vous devrez écrire :

 Navigator.push( context, MaterialPageRoute(builder: (context) => AboutScreen()), );

Il serait plus efficace et convivial pour les développeurs de faire quelque chose comme :

 Get.to(AboutScreen());

Lorsque vous devez revenir à la page précédente dans Flutter, vous devrez écrire :

 Navigator.pop(context);

Vous remarquerez que nous dépendons toujours de la propriété de contexte pour quelque chose d'aussi banal que la navigation entre les écrans. Et si à la place, on pouvait faire quelque chose comme ça :

 Get.back();

Les exemples ci-dessus sont quelques-unes des façons dont le développement d'applications dans Flutter peut être amélioré pour être plus intuitif et efficace avec moins de passe-partout. Si vous privilégiez la simplicité et l'efficacité dans la création de fonctionnalités et d'idées, dans Flutter, le package Get vous intéressera.

Qu'est-ce que GetX

Get ou GetX est un framework rapide, stable et extra-léger pour la création d'applications Flutter.

GetX est livré prêt à l'emploi avec une gestion d'état hautes performances, une injection de dépendance intelligente et une gestion des itinéraires de manière simple et pratique.

GetX vise à minimiser les passe-partout tout en fournissant une syntaxe simple et intuitive que les développeurs peuvent utiliser lors de la création de leurs applications. Au cœur de GetX se trouvent ces 3 principes :

• Performance
  GetX se concentre sur les performances de votre application en implémentant ses fonctionnalités pour consommer le moins de ressources possible.
• Productivité
  GetX souhaite que les développeurs utilisent ses fonctionnalités pour être productifs le plus rapidement possible. Pour ce faire, il utilise une syntaxe et des pratiques faciles à retenir. Par exemple, généralement, le développeur devrait se soucier de supprimer les contrôleurs de la mémoire, mais GetX prêt à l'emploi fournit une gestion intelligente qui surveille les contrôleurs de votre application et les supprime lorsqu'ils ne sont pas utilisés par défaut.
• Organisation
  GetX permet le découplage de la vue, de la logique de présentation, de la logique métier, de l'injection de dépendances et de la navigation dans votre application Flutter. Vous n'avez pas besoin de contexte pour naviguer entre les routes, vous n'êtes donc pas dépendant de l'arborescence des widgets pour la navigation. Vous n'avez pas besoin de contexte pour accéder à vos contrôleurs/blocs via un inheritedWidget , vous pouvez donc complètement dissocier votre logique de présentation et votre logique métier de votre couche de vue. Vous n'avez pas besoin d'injecter vos classes Controllers/Models/Blocs dans votre arborescence de widgets via des multifournisseurs, car ce GetX utilise sa propre fonctionnalité d'injection de dépendances, découplant complètement le DI de sa vue.

Caractéristiques de GetX

GetX est livré avec quelques fonctionnalités dont vous aurez besoin dans votre développement quotidien d'applications dans Flutter. Regardons-les :

Gestion de l'état

L'une des fonctionnalités phares de GetX est sa fonction de gestion d'état intuitive. La gestion de l'état dans GetX peut être réalisée avec peu ou pas de passe-partout.

Gestion des itinéraires

GetX fournit une API pour naviguer dans l'application Flutter. Cette API est simple et nécessite moins de code.

Gestion des dépendances

GetX fournit un moyen intelligent de gérer les dépendances dans votre application Flutter, comme les contrôleurs de vue. GetX supprimera de la mémoire tout contrôleur non utilisé pour le moment. C'était une tâche que vous, en tant que développeur, devrez faire manuellement, mais GetX le fait automatiquement pour vous.

Internationalisation

GetX fournit i18n prêt à l'emploi vous permettant d'écrire des applications avec différentes langues.

Validation

GetX fournit des méthodes de validation pour effectuer la validation des entrées dans vos applications Flutter. C'est très pratique car vous n'avez pas besoin d'installer un package de validation séparé.

Espace de rangement

GetX fournit une clé-valeur rapide, extra légère et synchrone en mémoire, qui sauvegarde les données sur le disque à chaque opération. Il est entièrement écrit en Dart et s'intègre facilement au package principal GetX.

Premiers pas avec GetX

Maintenant que vous avez vu ce qu'est GetX et les fonctionnalités et avantages qu'il offre, voyons comment le configurer dans votre application. Nous allons créer une application de démonstration pour voir la plupart des fonctionnalités que nous avons mentionnées en action. Commençons.

Créer une toute nouvelle application Flutter

Nous allons commencer par créer une toute nouvelle application Flutter via la CLI Flutter. Je suppose que votre machine est déjà configurée pour le développement d'applications avec Flutter. Donc on lance :

 flutter create getx_demo

Cela générera le code de base nécessaire à une application Flutter. Ensuite, ouvrez le projet que vous venez de créer dans l'éditeur de votre choix (nous utiliserons VS Code pour cet article). Nous exécuterons ensuite le projet pour nous assurer qu'il fonctionne correctement (assurez-vous d'avoir soit un appareil connecté, soit un émulateur/simulateur en cours d'exécution).

Lorsque l'application s'exécute, vous verrez l'application de compteur par défaut que Flutter échafaude pour vous lorsque vous créez une nouvelle application Flutter. Ce que nous allons faire est d'implémenter la même application de compteur mais avec GetX pour gérer l'état de l'application (qui est la variable de comptage).

Nous allons commencer par effacer main.dart et ne laisser que cet extrait de code :

 # main.dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); } }

À présent, notre application aurait été cassée car il n'y a plus de widget MyHomePage . Réparons ça. Avec GetX, nous n'avons pas besoin de widgets avec état et notre interface utilisateur peut également être clairement séparée de notre logique métier. Nous allons donc créer deux répertoires dans lib/ . Ces répertoires sont :

Créons le widget MyHomePage dans views/ . Le nom du fichier sera my_home_page.dart . Après l'avoir créé, ajoutez-y l'extrait de code suivant :

 import 'package:flutter/material.dart'; class MyHomePage extends StatelessWidget { final String title; MyHomePage({this.title}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'You have pushed the button this many times:', ), Text( '0', style: Theme.of(context).textTheme.headline4, ), ], ), ), floatingActionButton: FloatingActionButton( onPressed: null, tooltip: 'Increment', child: Icon(Icons.add), ), ); } }

Maintenant que nous avons le widget MyHomePage , importons-le dans main.dart . Ajoutez l'instruction d'importation en haut de main.dart sous import 'package:flutter/material.dart';

 import './views/my_home_page.dart';

Maintenant, votre fichier main.dart devrait ressembler à ceci :

 import 'package:flutter/material.dart'; import './views/my_home_page.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); } }

Lorsque vous enregistrez votre application maintenant, toutes les erreurs doivent avoir été corrigées et l'application s'exécutera. Mais vous remarquerez que lorsque vous cliquerez à nouveau sur le bouton, le compteur ne sera pas mis à jour. Si vous regardez le code views/my_home_page.dart , vous verrez que nous ne faisons que coder en dur 0 comme valeur du widget Texte et que nous transmettons null au gestionnaire onPressed du bouton. Ajoutons GetX au mélange pour que l'application soit à nouveau fonctionnelle.

Installation de GetX

Rendez-vous sur la page d'installation de GetX sur pub.dev et vous verrez la ligne de code à copier à placer dans votre fichier pubspec.yml pour installer GetX. Au moment de la rédaction de cet article, la version actuelle de GetX est 3.23.1. Nous allons donc copier la ligne :

 get: ^3.23.1

Et puis collez-le sous la section dependencies de notre fichier pubspec.yml . Lorsque vous enregistrez le fichier, get devrait être automatiquement installé pour vous. Ou vous pouvez exécuter manuellement dans votre terminal.

 flutter pub get

La section des dépendances de votre fichier pubspec.yml devrait ressembler à ceci :

 dependencies: flutter: sdk: flutter get: ^3.23.1

GetxController

Nous avons mentionné que GetX vous permet de séparer l'interface utilisateur de votre application de la logique. Pour ce faire, il fournit une classe GetxController dont vous pouvez hériter pour créer des classes de contrôleur pour les vues de votre application. Pour notre application actuelle, nous avons une vue, nous allons donc créer un contrôleur pour cette vue. Rendez-vous dans le répertoire controllers/ et créez un fichier appelé my_home_page_controller.dart . Cela contiendra le contrôleur pour la vue MyHomePage .

Après avoir créé le fichier, importez d'abord le package GetX en ajoutant ceci en haut du fichier :

 import 'package:get/get.dart';

Ensuite, vous allez créer une classe appelée MyHomePageController à l'intérieur et étendre la classe GetxController . Voici à quoi devrait ressembler le fichier :

 import 'package:get/get.dart'; class MyHomePageController extends GetxController {}

ajoutons l'état de comptage à la classe que nous avons créée.

 final count = 0;

Dans GetX, pour rendre une variable observable - cela signifie que lorsqu'elle change, d'autres parties de notre application qui en dépendent seront notifiées. Pour ce faire, il suffit d'ajouter .obs à la variable d'initialisation. Donc, pour notre variable de count ci-dessus, nous ajouterons .obs à 0 . Ainsi, la déclaration ci-dessus ressemblera maintenant à ceci :

 final count = 0.obs;

Voici à quoi ressemble notre fichier de contrôleur pour le moment :

 import 'package:get/get.dart'; class MyHomePageController extends GetxController { final count = 0.obs; }

Pour conclure avec MyHomePageController , nous allons implémenter la méthode d' increment . Ceci est l'extrait pour le faire:

 increment() => count.value++;

Vous remarquerez que nous devions ajouter .value à la variable count pour l'incrémenter. Nous l'avons fait parce que l'ajout de .obs à une variable en fait une variable observable et pour obtenir la valeur d'une variable observable, vous le faites à partir de la propriété value .

Nous en avons donc fini avec le contrôleur. Désormais, lorsque la valeur de count change, toute partie de notre application qui l'utilise sera automatiquement mise à jour.

Nous allons maintenant nous diriger vers notre vue et lui faire part du contrôleur que nous venons de créer. Nous le ferons en instanciant la classe de contrôleur à l'aide de la fonctionnalité de gestion des dépendances GetX. Cela garantira que notre contrôleur ne sera pas en mémoire lorsqu'il n'est plus nécessaire.

Dans views/my_home_page.dart importez le package Get ainsi que le contrôleur que vous avez créé comme suit :

 import 'package:get/get.dart'; import '../controllers/my_home_page_controller.dart';

Ensuite, à l'intérieur de la classe MyHomePage , nous allons instancier le MyHomePageController :

 final MyHomePageController controller = Get.put(MyHomePageController());

Maintenant que nous avons une instance de MyHomePageController , nous pouvons utiliser la variable d'état ainsi que la méthode. Donc, en commençant par l'état, dans GetX pour marquer une partie de votre interface utilisateur à reconstruire lorsqu'une variable d'état change, vous envelopperez cette partie avec le widget Obx . GetX fournit d'autres moyens de le faire, mais cette méthode est beaucoup plus simple et plus propre.

Pour notre application de comptage, nous souhaitons que le widget Texte soit mis à jour avec le comptage actuel. Nous allons donc envelopper le widget Texte avec le widget Obx comme ceci :

 Obx(() => Text('0',style: Theme.of(context).textTheme.headline4,),)

Ensuite, nous remplacerons la chaîne statique 0 par la variable count du MyHomePageController comme ceci :

 Obx(() => Text('${controller.count.value}', ,style: Theme.of(context).textTheme.headline4,),)

Enfin, nous appellerons la méthode d'incrémentation lorsque le floatingActionButton est pressé comme ceci :

 floatingActionButton: FloatingActionButton( onPressed: controller.increment, tooltip: 'Increment', child: Icon(Icons.add), ),

Donc, dans l'ensemble, notre fichier de vue MyHomePage devrait maintenant ressembler à ceci :

 import 'package:flutter/material.dart'; import 'package:get/get.dart'; import '../controllers/my_home_page_controller.dart'; class MyHomePage extends StatelessWidget { final String title; final MyHomePageController controller = Get.put(MyHomePageController()); MyHomePage({this.title}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'You have pushed the button this many times:', ), Obx( () => Text( '${controller.count.value}', style: Theme.of(context).textTheme.headline4, ), ) ], ), ), floatingActionButton: FloatingActionButton( onPressed: controller.increment, tooltip: 'Increment', child: Icon(Icons.add), ), ); } }

Lorsque vous enregistrez votre application ou que vous la réexécutez, l'application de compteur devrait fonctionner comme elle l'a fait lorsque nous avons créé l'application pour la première fois.

Je pense que vous avez vu à quel point la gestion d'état est intuitive avec GetX, nous n'avons pas eu à écrire beaucoup de passe-partout et cette simplicité sera plus évidente à mesure que votre application deviendra complexe. Vous remarquerez également que notre vue ne contient ni ne maintient aucun état, il peut donc s'agir d'un widget sans état. Le cerveau de la vue est à son tour une classe de contrôleur qui contiendra l'état de la vue et des méthodes.

Navigation dans GetX

Nous avons vu la gestion d'état dans GetX. Voyons maintenant comment GetX prend en charge la navigation dans votre application. Pour activer la fonction de navigation de GetX, il vous suffit d'effectuer une seule modification dans main.dart qui consiste à transformer le widget MaterialApp en widget GetMaterialApp . Faisons cela en important d'abord Get en haut de main.dart

 import 'package:get/get.dart';

Ensuite, nous apportons la modification à MaterialApp afin que notre fichier main.dart ressemble maintenant à ceci :

 import 'package:flutter/material.dart'; import 'package:get/get.dart'; import './views/my_home_page.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return GetMaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); } }

Maintenant, notre application a été configurée pour prendre en charge la navigation GetX. Pour tester cela, nous allons créer une autre vue dans le répertoire views/ . Nous l'appellerons sur about_page.dart et il contiendra le code suivant :

 import 'package:flutter/material.dart'; import 'package:get/get.dart'; import '../controllers/my_home_page_controller.dart'; class AboutPage extends StatelessWidget { final MyHomePageController controller = Get.put(MyHomePageController()); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('About GetX'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Padding( padding: const EdgeInsets.all(16.0), child: Text( 'GetX is an extra-light and powerful solution for Flutter. It combines high performance state management, intelligent dependency injection, and route management in a quick and practical way.', ), ), ], ), ), ); } }

Nous irons ensuite à MyHomePage et ajouterons un bouton qui, une fois pressé, nous dirigera vers la AboutPage . Ainsi. Le bouton doit se trouver sous le widget Obx. C'est ici:

 FlatButton(onPressed: () {}, child: Text('About GetX'))

Nous devrons également importer la AboutPage en haut du fichier MyHomePage :

 import './about_page.dart';

Pour indiquer à GetX de naviguer vers la AboutPage nous n'avons besoin que d'une ligne de code :

 Get.to(AboutPage());

Ajoutons cela au rappel onPressed du widget FlatButton comme ceci :

 FlatButton( onPressed: () { Get.to(AboutPage()); }, child: Text('About GetX'))

Lorsque vous enregistrez votre application maintenant, vous pourrez désormais accéder à la AboutPage .

Vous pouvez également choisir de remplacer la vue MyHomePage par AboutPage afin que l'utilisateur ne puisse pas revenir à la page précédente en appuyant sur le bouton de retour de l'appareil. Ceci est utile pour les écrans tels que les écrans de connexion. Pour ce faire, remplacez le contenu du gestionnaire onPressed par le code ci-dessous :

 Get.off(AboutPage());

Cela fera apparaître la vue MyHomePage et la remplacera par AboutPage .

Maintenant que nous pouvons naviguer vers le AboutPage , je pense que ce ne sera pas si mal de pouvoir revenir à MyHomePage pour ce faire, nous ajouterons un bouton dans AboutPage après le widget Padding et dans son gestionnaire onPressed nous ferons un appel à Get.back() pour revenir à la MyHomePage :

 FlatButton( onPressed: () { Get.back(); }, child: Text('Go Home') )

Snack-bar

Dans Flutter classiquement pour afficher un Snackbar, vous devrez écrire quelque chose comme ceci :

 final snackBar = SnackBar(content: Text('Yay! A SnackBar!')); // Find the Scaffold in the widget tree and use it to show a SnackBar. Scaffold.of(context).showSnackBar(snackBar);

Vous pouvez observer que nous dépendons toujours de la propriété de context . Voyons comment nous pouvons y parvenir dans GetX. Allez dans la vue MyHomePage et ajoutez un autre widget FlatButton sous le dernier bouton que nous avons ajouté. Voici l'extrait du bouton :

 FlatButton( onPressed: () { // TODO: Implement Snackbar }, child: Text('Show Snackbar'))

Affichons le message 'Yay! Génial Snackbar GetX'. Dans la fonction de gestionnaire onPressed, ajoutez la ligne de code ci-dessous :

 Get.snackbar('GetX Snackbar', 'Yay! Awesome GetX Snackbar');

Exécutez votre application et lorsque vous cliquez sur le bouton "Afficher la barre de collations", vous verrez une barre de collations en haut de votre application !

Voyez comment nous avons réduit le nombre de lignes nécessaires pour afficher un snack dans une application Flutter ? Faisons un peu plus de personnalisation sur le Snackbar ; Faisons-le apparaître au bas de l'application. Remplacez le code par ceci :

 Get.snackbar('GetX Snackbar', 'Yay! Awesome GetX Snackbar',snackPosition:SnackPosition.BOTTOM, );

Enregistrez et exécutez votre application et le Snackbar apparaîtra maintenant au bas de l'application. Que diriez-vous de changer la couleur de fond du Snackbar car il est actuellement transparent. Nous allons le changer en une couleur amberAccent de la classe Colors dans Flutter. Mettez à jour le code avec ceci :

 Get.snackbar('GetX Snackbar', 'Yay! Awesome GetX Snackbar',snackPosition:SnackPosition.BOTTOM, backgroundColor: Colors.amberAccent );

Dans l'ensemble, le code du bouton devrait ressembler à ceci :

 FlatButton( onPressed: () { Get.snackbar('GetX Snackbar', 'Yay! Awesome GetX Snackbar', snackPosition: SnackPosition.BOTTOM, backgroundColor: Colors.amberAccent); }, child: Text('Show Snackbar'))

Dialogue

GetX fournit une méthode simple pour créer AlertDialog dans Flutter. Voyons-le en action. Créez un autre bouton sous le précédent :

 FlatButton( onPressed: () { // TODO: Show alert dialog }, child: Text('Show AlertDialog'))

Appelons GetX pour afficher une boîte de dialogue d'alerte :

 Get.defaultDialog();

Cela affichera une boîte de dialogue d'alerte par défaut qui peut être ignorée en appuyant en dehors de la boîte de dialogue. Vous pouvez voir comment, dans une ligne de code, nous avons une boîte de dialogue d'alerte fonctionnelle. Personnalisons-le un peu. Changeons le titre et le message :

 Get.defaultDialog( title: 'GetX Alert', middleText: 'Simple GetX alert');

Enregistrez et exécutez votre application et vous verrez les modifications lorsque vous cliquerez sur le bouton "Afficher AlertDialog". Nous pouvons ajouter des boutons de confirmation et d'annulation comme suit :

 Get.defaultDialog( title: 'GetX Alert', middleText: 'Simple GetX alert', textConfirm: 'Okay', confirmTextColor: Colors.amberAccent, textCancel: 'Cancel');

Il existe de nombreuses façons de personnaliser la boîte de dialogue GetX et l'API est assez intuitive et simple.

Conclusion

GetX a été créé pour améliorer la productivité des développeurs Flutter lors de la création de fonctionnalités. Au lieu d'avoir à rechercher le passe-partout nécessaire pour faire des choses comme la gestion de l'état, la gestion de la navigation, etc., GetX fournit une API intuitive simple pour réaliser ces activités sans sacrifier les performances. Cet article vous présente GetX et comment commencer à l'utiliser dans vos applications Flutter.

• Vous pouvez trouver la démo ici →