Catégories
Plugin et site web

Premiers pas avec le package GetX dans les applications Flutter – Smashing Magazine

A propos de l'auteur

Kelvin est un fabricant de logiciels indépendant qui construit actuellement Sailscasts – une plate-forme pour apprendre le JavaScript côté serveur. Il est également rédacteur technique et…
Plus à propos
Kelvin

GetX est une solution ultra légère pour la gestion de l'état, de la navigation et des dépendances pour les applications Flutter. Dans cet article, nous examinerons ses avantages, ses fonctionnalités et comment commencer à l'utiliser 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 effectuer des tâches telles que la navigation vers les écrans, la gestion des états et les alertes d'affichage, de nombreux passe-partout sont nécessaires. Ces passe-partout ont tendance à ralentir l'efficacité du développement des développeurs qui tentent de créer des fonctionnalités et de respecter leurs délais.

Prenez par exemple le passe-partout nécessaire pour accéder à 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é du contexte pour quelque chose d'aussi courant que la navigation entre les écrans. Et si à la place, nous pouvions faire quelque chose comme ceci:

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épendances intelligente et une gestion des routes 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, en général, le développeur doit se préoccuper 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 itinéraires, 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, afin que vous puissiez complètement dissocier votre logique de présentation et votre logique métier de votre couche d'affichage. Vous n'avez pas besoin d'injecter vos classes Contrôleurs / Modèles / Blocs dans votre arborescence de widgets via plusieurs fournisseurs, car ce GetX utilise sa propre fonction d'injection de dépendances, découplant complètement la DI de sa vue.

Caractéristiques de GetX

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

Gestion d'état

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

Gestion des itinéraires

GetX fournit une API pour la navigation 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 devrez effectuer manuellement en tant que développeur, mais GetX le fait automatiquement pour vous.

Internationalisation

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

Validation

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

Espace de rangement

GetX fournit une valeur-clé 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 GetX principal.

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 commencerons 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. Alors on lance:

flutter create getx_demo

Cela générera le code de base nécessaire pour 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 que vous disposez d'un appareil connecté ou d'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 scaffold 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 commencerons par nettoyer main.dart et ne laissant 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é interrompue car il n'y a pas MyHomePage widget plus. Corrigeons ç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 à l'intérieur lib/. Ces répertoires sont:

views/ Pour tenir les écrans dans notre application.
controllers/ Pour contenir tous les contrôleurs pour les écrans de notre application.

Créons MyHomePage widget à l'intérieur 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: (
            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 nous avons le MyHomePage widget, importons-le dans main.dart. Ajoutez l'instruction d'importation en haut de main.dart ci-dessous import 'package:flutter/material.dart';

import './views/my_home_page.dart';

Maintenant votre main.dart le fichier doit 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 devraient avoir été corrigées et l'application fonctionnera. Mais vous remarquerez que lorsque vous cliquerez à nouveau sur le bouton, le compteur ne sera pas mis à jour. Si vous regardez le views/my_home_page.dart code, vous verrez que nous sommes juste du codage en dur 0 comme valeur du widget Texte et en passant null à la onPressed gestionnaire du bouton. Intégrons GetX au mix pour que l’application redevienne fonctionnelle.

Installer GetX

Rendez-vous sur la page d'installation de GetX sur pub.dev et vous verrez la ligne de code à copier pour placer dans votre pubspec.yml fichier 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 le dependencies section de notre pubspec.yml fichier. 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 pubspec.yml le fichier doit 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. Il le fait en fournissant un GetxController classe 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. Dirigez-vous vers le controllers/ répertoire et créez un fichier appelé my_home_page_controller.dart. Cela tiendra le contrôleur pour le MyHomePage vue.

Une fois le fichier créé, importez d'abord le package GetX en l'ajoutant en haut du fichier:

import 'package:get/get.dart';

Ensuite, vous allez créer une classe appelée MyHomePageController à l'intérieur et étendre le GetxController classe. 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, 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, nous devons simplement ajouter .obs à l'initialisation de la variable. Donc pour notre ci-dessus count variable, nous ajouterons .obs à 0. Donc, 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 le MyHomePageController nous mettrons en œuvre le increment méthode. Voici l'extrait de code pour ce 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 .obs à une variable en fait une variable observable et pour obtenir la valeur d'une variable observable, vous le faites à partir du value propriété.

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

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

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

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

Puis à l'intérieur du MyHomePage class nous allons instancier le MyHomePageController:

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

Maintenant, nous avons une instance du MyHomePageController, nous pouvons utiliser la variable state 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 Obx widget. 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 voulons que le widget Texte soit mis à jour avec le nombre actuel. Nous allons donc envelopper le widget Texte avec Obx widget comme ça:

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

Ensuite, nous remplacerons la chaîne statique 0 avec la variable count du MyHomePageController ainsi:

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 MyHomePage le fichier de vue 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: (
            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 le faisait lors de la création de l'application.

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

Nous avons vu la gestion des états 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 de faire une modification dans main.dart qui est de tourner le MaterialApp widget à un GetMaterialApp widget. Pour ce faire, importons d'abord Get en haut de main.dart

import 'package:get/get.dart';

Ensuite, nous faisons le changement pour MaterialApp Donc notre main.dart le fichier 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 views/ annuaire. Nous appellerons cela 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: (
            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 passerons ensuite à MyHomePage et ajoutez un bouton qui, lorsqu'il est pressé, nous dirigera vers le AboutPage. Ainsi. Le bouton doit être sous le widget Obx. C'est ici:

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

Nous devrons également importer le AboutPage au-dessus de la MyHomePage fichier:

import './about_page.dart';

Pour dire à GetX de naviguer vers le AboutPage tout ce dont nous avons besoin est une ligne de code qui est:

Get.to(AboutPage());

Ajoutons cela à la onPressed rappel du FlatButton widget comme ça:

 FlatButton(

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

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

Vous pouvez également choisir de remplacer le MyHomePage voir avec le 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 onPressed handler avec le code ci-dessous:

  Get.off(AboutPage());

Cela fera apparaître le MyHomePage l'afficher et le remplacer 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 allons ajouter un bouton dans AboutPage après le widget Padding et dans celui-ci onPressed gestionnaire, nous allons faire un appel à Get.back() pour revenir au MyHomePage:

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

Snackbar

Dans Flutter de manière conventionnelle pour afficher une 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 context propriété. Voyons comment nous pouvons y parvenir dans GetX. Allez dans le MyHomePage voir et ajouter un autre FlatButton widget 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 "Ouais! Awesome GetX Snackbar ». À l'intérieur de la fonction de gestionnaire onPressed, ajoutez la ligne de code ci-dessous:

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

Lancez votre application et lorsque vous cliquez sur le bouton «Afficher le bouton Snackbar», vous verrez un snack au-dessus de votre application!

Voyez comment nous avons réduit le nombre de lignes nécessaires pour afficher un snack-bar dans une application Flutter? Faisons encore plus de personnalisation sur le Snackbar; Faisons-le apparaître au bas de l'application. Changez le code en 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 pour le moment transparent. Nous allons le changer en un amberAccent couleur de la Colors cours à Flutter. Mettez à jour le code pour 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 cela 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 supprimé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. Modifions 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 cliquez sur le bouton «Afficher AlertDialog». Nous pouvons ajouter des boutons de confirmation et d'annulation comme ceci:

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 lorsqu'ils développent des fonctionnalités. Au lieu d'avoir à rechercher le passe-partout nécessaire pour effectuer des tâches telles que la gestion des états, 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.

Éditorial fracassant(ra, yk, il)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *