Premiers pas avec Flutter GetX – Gestion de l’état

Introduction

Lors du démarrage d’une nouvelle application Flutter, il est crucial de choisir la bonne approche de gestion de l’état. Ce blog vise à simplifier cette décision pour vous. Dans ce tutoriel sur la gestion de l’état Flutter avec GetX, je vais vous présenter GetX, un framework Flutter robuste.

ObtenirX

La gestion des états facilite le transfert de données au sein d’une application, déclenchant des mises à jour d’état et reconstruisant l’interface en conséquence. Ce processus est particulièrement critique dans les applications complexes, où les mises à jour d’état inefficaces peuvent devenir coûteuses. Flutter propose des widgets avec état pour gérer l’état, mais ils comportent certaines limitations et sont coûteux à gérer en termes de ressources, de performances et de consommation de mémoire.

Pour remédier à ces limitations, nous pouvons utiliser GetX pour la gestion des états dans Flutter. GetX est une solution robuste et légère qui propose également les solutions ci-dessous :

– Gestion de l’État
– Injection de dépendances
– Gestion des itinéraires

Pourquoi GetX

Application Counter utilisant Getx State Management

Dans ce tutoriel, je vais prendre l’exemple d’une application de compteur en séparant la logique de l’interface utilisateur et la logique métier à l’aide d’un contrôleur et du Obx widget étape par étape.

class CounterRepository {
  CounterRepository();

  final Rx count = 0.obs;
  final int _value = 1;

  void increment() => count.value += _value;

  void decrement() => count.value -= _value; 
}

Get.lazyPut() vous permet d’initialiser votre contrôleur lorsque cela est nécessaire, par exemple lorsque votre écran devient visible pour l’utilisateur, et supprime le contrôleur lorsque votre écran ne fait plus partie de la pile de widgets.

void main() {
  // Creating an instance of CounterRepository for dependency injection via Getx
  Get.lazyPut(() => CounterRepository());
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Getx Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const CounterScreen(),
    );
  }
}

Création d’un écran de compteur contenant un texte numérique, un bouton pour naviguer vers un autre écran et un bouton flottant pour contrôler le comportement d’incrémentation. Le widget texte est enveloppé dans Obx, lui permettant de récupérer la valeur de la variable observable. Sans Obx, la valeur resterait inchangée. La valeur d’incrément est initialisée dans le contrôleur à 0 qui sera la valeur initiale affichée au moment de l’exécution.

class CounterScreen extends StatelessWidget {
  const CounterScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final CounterRepository repo = Get.find();

    return Scaffold(
      appBar: AppBar(
        title: const Text('Counter'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () => {Get.to(() =>SecondScreen())},
              child: const Text('Open New page'),
            ),
            const SizedBox(height: 16),
            Obx(
              () => Text(
                '${repo.count.value}',
                style: Theme.of(context).textTheme.headlineMedium,
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed:repo.increment,
        child: const Icon(Icons.add),
      ),
    );
  }
}

Le deuxième écran est parcouru lorsque nous cliquons sur le bouton utilisant la fonction de gestion d’itinéraire de Getx Accéder à cette fonction fonctionne de manière similaire à Navigateur.de mais sans avoir à utiliser le contexte. Ici aussi, le widget texte est intégré à Obx, ce qui lui permet d’écouter les modifications et de les mettre à jour en conséquence. Puisque nous utilisons le même objet de Contre-Repo en les obtenant de la gestion des dépendances getx, les données d’incrémentation seront également conservées dans SecondScreen. Nous pouvons utiliser la fonction de décrémentation pour apporter des modifications à la valeur réelle en utilisant l’instance de CounterController fournie par Getx en utilisant Obtenir.find().

class SecondScreen extends StatelessWidget {
  const SecondScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final CounterRepository repo = Get.find();

    return Scaffold(
      appBar: AppBar(
        title: const Text('Counter'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () => {Get.back()},
              child: const Text('Go to previous Screen'),
            ),
            const SizedBox(height: 16),
            Obx(
              () => Text(
                '${repo.count.value}',
                style: Theme.of(context).textTheme.headlineMedium,
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed:repo.decrement,
        child: const Icon(Icons.remove),
      ),
    );
  }
}

Principales caractéristiques:

• • Variables réactives (Rx) : Transformez facilement des variables en observables à l’aide de .obs.
  • Widget Obx : Mises à jour réactives de l’interface utilisateur avec un minimum de code.
  • Ouvriers: Gérez les tâches asynchrones, notamment les anti-rebonds, les intervalles et les événements ponctuels.
  • Gestionnaire d’état simple (GetBuilder) : Solution légère pour gérer efficacement plusieurs mises à jour d’état.
  • État Mixin : Une approche rationalisée de la gestion de l’état avec différents statuts (chargement, succès, erreur).

• Avantages :

  • Haute performance: Des algorithmes et des optimisations intelligents minimisent les reconstructions et garantissent l’efficacité.
  • Contrôle granulaire : Ciblez précisément les widgets qui sont mis à jour, évitant ainsi les reconstructions inutiles.
  • Facile à apprendre: Une syntaxe intuitive et des concepts clairs rendent la gestion des états accessible.
  • Poids léger: Faible empreinte mémoire et dépendances minimales.
  • Solution globale : Gère la gestion de l’état, la navigation et l’injection de dépendances.

Ressources

• La documentation officielle peut être trouvée ici – Lien
• Code source complet ici – Lien
• Le pub Getx peut être trouvé ici – Lien

Conclusion

En conclusion, GetX se présente comme une bibliothèque polyvalente et puissante au sein de l’écosystème Flutter, offrant des solutions rationalisées pour la gestion des états, l’injection de dépendances et la gestion des routes. Sa syntaxe intuitive, ses performances efficaces et ses capacités robustes en font un choix privilégié pour les développeurs cherchant à améliorer leurs applications Flutter. Avec GetX, les développeurs peuvent obtenir une productivité accrue, une organisation du code améliorée et des performances optimisées. Alors que Flutter continue d’évoluer, GetX reste un atout précieux, permettant aux développeurs de créer des applications transparentes et réactives sur une variété de plates-formes. Que vous soyez un développeur chevronné ou nouveau sur Flutter, l’exploration des fonctionnalités de GetX peut ouvrir un monde de possibilités pour votre parcours de développement d’applications.

VOUS TROUVEZ CECI UTILE ? PARTAGEZ-LE