L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
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 réellement 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 l'affichage des alertes, il faut beaucoup de règles standard. Ces passe-partout ont tendance à ralentir l'efficacité de développement des développeurs essayant de construire des fonctionnalités et de respecter leurs délais.
Prenons 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 (
le contexte,
MaterialPageRoute (constructeur: (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 write:
Navigator.pop (context); Vous remarquerez que nous dépendons toujours de la propriété context pour quelque chose d'aussi banal 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 logiciel rapide, stable, extra- cadre léger pour la création d'applications Flutter.
GetX est livré prêt à l'emploi avec une gestion d'état haute performance, une injection de dépendances intelligente et une gestion des itinéraires d'une manière simpliste et pratique.
GetX vise à minimiser les passe-partout tout en fournissant des solutions simples et syntaxe 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:
- Performances
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 productif 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 devrait 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. - Organization
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 uninheritedWidget. Vous pouvez donc dissocier complètement votre logique de présentation et votre logique métier de votre couche de vue. 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. Examinons-les:
State Management
L'une des fonctionnalités phares de GetX est sa fonction intuitive de gestion d'état. La gestion d'état dans GetX peut être réalisée avec peu ou pas de passe-partout.
Route Management
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. En tant que développeur, c'était une tâche que vous deviez faire manuellement, mais GetX le fait pour vous automatiquement dès la sortie de la boîte.
Internationalisation
GetX fournit i18n prêt à l'emploi vous permettant d'écrire des applications avec différents supports linguistiques. [19659038] Validation
GetX fournit des méthodes de validation pour effectuer la validation d'entrée dans vos applications Flutter. Cela est très pratique car vous n’avez pas besoin d’installer un package de validation séparé.
Stockage
GetX fournit une valeur-clé rapide, 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 de 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. On lance donc:
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 qu'un appareil est connecté ou qu'un émulateur / simulateur est 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 count).
Nous commencerons par effacer main.dart et ne laissant que cet extrait de code:
# main.dart
import 'package: flutter / material.dart';
void main () {
runApp (MyApp ());
}
class MyApp étend StatelessWidget {
// Ce widget est la racine de votre application.
@passer outre
Construction du widget (contexte BuildContext) {
retour MaterialApp (
titre: 'Flutter Demo',
thème: ThemeData (
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
accueil: MyHomePage (titre: 'Flutter Demo Home Page'),
);
}
}
À présent, notre application aurait été interrompue car il n'y a plus de widget MyHomePage . 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 dans lib / . Ces répertoires sont:
views / | Pour contenir les écrans de notre application. |
controllers / | Pour contenir tous les contrôleurs des écrans de notre application. |
Créons MyHomePage ] widget à l'intérieur de vues / . 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 étend StatelessWidget {
titre final de la chaîne;
MyHomePage ({this.title});
@passer outre
Construction du widget (contexte BuildContext) {
retour échafaudage (
appBar: AppBar (
title: Texte (titre),
),
corps: Centre (
enfant: Colonne (
mainAxisAlignment: MainAxisAlignment.center,
enfants: [
Text(
'You have pushed the button this many times:',
),
Text(
'0',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
FloatingActionButton: FloatingActionButton (
onPressed: null,
info-bulle: 'Incrémenter',
enfant: Icône (Icons.add),
),
);
}
}
Nous avons maintenant le widget MyHomePage importons-le dans main.dart . Ajoutez l'instruction import en haut de main.dart ci-dessous import 'package: flutter / material.dart';
import './views/my_home_page.dart';[19659009Oftyour ] Le fichier main.dart doit ressembler à ceci: import 'package: flutter / material.dart';
import './views/my_home_page.dart';
void main () {
runApp (MyApp ());
}
class MyApp étend StatelessWidget {
// Ce widget est la racine de votre application.
@passer outre
Construction du widget (contexte BuildContext) {
retour MaterialApp (
titre: 'Flutter Demo',
thème: ThemeData (
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
accueil: MyHomePage (titre: '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 code views / my_home_page.dart vous verrez que nous sommes juste en train de coder en dur 0 comme valeur du widget Texte et en passant null à le gestionnaire onPressed du bouton. Ajoutons GetX au mix pour que l'application soit à nouveau fonctionnelle.
Installation de GetX
Rendez-vous sur la page d'installation pour 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 la coller ensuite 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 dependencies de votre fichier pubspec.yml devrait ressembler à ceci:
dependencies:
battement:
sdk: scintillement
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 de la vue MyHomePage .
Après avoir créé le fichier, importez d'abord le package GetX en l'ajoutant en haut du fichier:
import 'package: get /get.dart';[19659009[] 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';
La classe MyHomePageController étend 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 dépendent de il sera notifié. Pour ce faire, nous devons simplement ajouter .obs à l'initialisation de la variable. Donc, pour notre variable ci-dessus count 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 étend GetxController {
décompte final = 0.obs;
}
Pour conclure les choses avec le MyHomePageController nous allons implémenter la méthode incrément . Voici l'extrait de code pour faire cela:
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 .
Donc, nous sont faits 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 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 fonction 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 ceci:
import 'package: get / get.dart';
import '../controllers/my_home_page_controller.dart';[19659009</font>Puisdanslaclasse MyHomePage nous allons instancier le MyHomePageController : final MyHomePageController controllerHome = Get.put MyHomePageController controllerHome ());
Maintenant, nous avons une instance du 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 encapsulerez 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 voulons 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,
info-bulle: 'Incrémenter',
enfant: Icône (Icons.add),
),
Donc, globalement, 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 étend StatelessWidget {
titre final de la chaîne;
contrôleur final MyHomePageController = Get.put (MyHomePageController ());
MyHomePage ({this.title});
@passer outre
Construction du widget (contexte BuildContext) {
retour échafaudage (
appBar: AppBar (
title: Texte (titre),
),
corps: Centre (
enfant: Colonne (
mainAxisAlignment: MainAxisAlignment.center,
enfants: [
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,
info-bulle: 'Incrémenter',
enfant: Icône (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 des états est intuitive avec GetX, nous n'avions pas écrire beaucoup de passe-partout et cette simplicité sera d'autant plus évidente que votre application devient 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.
Navigation dans GetX
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 d'effectuer une modification dans main.dart qui consiste à transformer le widget MaterialApp en un widget GetMaterialApp . Faisons cela en important d'abord Get en haut de main.dart
import 'package: get / get.dart';
Ensuite, nous apportons le changement à MaterialApp ainsi 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 étend StatelessWidget {
// Ce widget est la racine de votre application.
@passer outre
Construction du widget (contexte BuildContext) {
retournez GetMaterialApp (
titre: 'Flutter Demo',
thème: ThemeData (
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
accueil: MyHomePage (titre: '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';
La classe AboutPage étend StatelessWidget {
contrôleur final MyHomePageController = Get.put (MyHomePageController ());
@passer outre
Construction du widget (contexte BuildContext) {
retour échafaudage (
appBar: AppBar (
title: Texte ('À propos de GetX'),
),
corps: Centre (
enfant: Colonne (
mainAxisAlignment: MainAxisAlignment.center,
enfants: [
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 ajouterons un bouton qui, une fois pressé, nous dirigera vers la AboutPage . Ainsi. Le bouton doit être sous le widget Obx. Le voici:
FlatButton (onPressed: () {}, child: Text ('About GetX'))
Nous devrons également importer le AboutPage au-dessus du MyHomePage fichier:
import './about_page.dart';[19659009letterPourindiqueràGetXd'accéderàlapage AboutPage il suffit d'une ligne de code, soit: 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 le MyHomePage avec la 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 affichera la vue MyHomePage et remplacez-le par AboutPage .
Maintenant que nous pouvons accéder à 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 appellerons Get.back () pour revenir à MyHomePage :
FlatButton (
onPressed: () {
Revenir();
},
enfant: Texte ('Go Home')
)
Snackbar
Dans Flutter de manière conventionnelle pour afficher un Snackbar, vous devrez écrire quelque chose comme ceci:
final snackBar = SnackBar (content: Text ('Yay! A SnackBar!'));
// Trouvez l'échafaudage dans l'arborescence des widgets et utilisez-le pour afficher un SnackBar.
Scaffold.of (context) .showSnackBar (snackBar);
Vous pouvez observer que nous dépendons toujours de la propriété 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: Implémenter Snackbar
},
child: Text ('Show Snackbar'))
Affichons le message 'Yay! 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');
Exécutez votre application et lorsque vous cliquez sur le bouton "Show Snackbar" vous verrez un snack-bar 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. Modifiez le code comme suit:
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 une couleur amberAccent de la classe Colors dans Flutter. Mettez à jour le code comme suit:
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'))
Dialog
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: Afficher la boîte de dialogue d'alerte
},
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: 'Alerte GetX simple',
textConfirm: 'OK',
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 à mesure qu'ils construisent sur les 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.
(ra, yk, il)
Source link