arklemx / getx_todo_app

📝 GetX Todo APP

Ceci est une application mobile de gestion de tâches, développée avec Flutter et le framework GetX.

📌 Description

Le but de ce projet est de démontrer l'utilisation du pattern GetX pour la structure du code source de l'application, afin qu'il soit facilement gérable, que les fichiers ne soient pas lourds ou longs et que l'ensemble communique sans trop de mal.

🚀 Fonctionnalités de l'application

Ajout de tâches 📝

Marquer les choses à faire comme terminées ✅

Supprimer les choses à faire en faisant un slide vers la gauche 🗑️

Ajouter et supprimer des types de tâches 📌

Affichage de la liste des tâches 📋

Affichage d'un rapport sur les tâches 📊

🎨 Organisation du code

Dans ce projet, nous avons utilisé le pattern GetX pour la structure de code. Le pattern GetX est une alternative au pattern MVC (Model-View-Controller) pour la gestion d'états dans les applications Flutter.
Il est basé sur le modèle MVVM (Model-View-ViewModel) mais utilise des contrôleurs (Controllers) pour gérer l'état de l'application. Dans ce pattern, chaque page (View) de l'application a un contrôleur (Controller) qui gère l'état de la page. Le contrôleur est responsable de la logique métier, de la récupération des données et de la mise à jour de l'état de la page. Les pages sont donc passives et ne contiennent pas de logique métier.

Le pattern GetX est facile à utiliser, car il ne nécessite pas beaucoup de code boilerplate 📋, et il est également très performant, car il utilise des observables pour la mise à jour de l'interface utilisateur, et une bonne gestion des états de l'application.

De manière globale , la structure est la suivante :

Appliquée à ce projet, nous obtenons ce qui suit :

📁 app

Le répertoire qui contenir tous les dossiers de notre application.

📁 data

Dossier responsable de contenir tout ce qui est relatif aux données.

En l'occurrence, il s'agit des modèles ✏️ (Le modèle de nos tâches) , des providers 🗃️ ( qui se charge de fournir le service de stockage. Il peut aussi s'agir d'une API ) des services 🔨 (Le service de stockage de nos tâches en mémoire).

📁 modules

Chaque module se compose d'une page, de son GetXController respectif et de ses dépendances ou liaisons(Bindings). Le dossier Binding contient ici les classes pour l'injection de dépendances

Exemple : Le module home

📁 routes

Dans ce dossier nous déposons nos routes vers nos différentes pages.

Dans le fichier app_routes.dart, nous définissons des constantes pour les routes

part of 'app_pages.dart';
// DO NOT EDIT. This is code generated via package:get_cli/get_cli.dart

abstract class Routes {
  Routes._();
  static const HOME = _Paths.HOME;
  static const DETAIL = _Paths.DETAIL;
  static const REPORT = _Paths.REPORT;
}

abstract class _Paths {
  _Paths._();
  static const HOME = '/home';
  static const DETAIL = '/detail';
  static const REPORT = '/report';
}

Tandis que dans le fichier app_pages.dart, nous définissons les routes vers les pages/vues

part 'app_routes.dart';

class AppPages {
  AppPages._();

  static const INITIAL = Routes.HOME;

  static final routes = [
    GetPage(
      name: _Paths.HOME,
      page: () => const HomeView(),
      binding: HomeBinding(),
    ),
    GetPage(
      name: _Paths.DETAIL,
      page: () => DetailView(),
      binding:

🧩 global_widgets

Ce dossier contient des widgets qui peuvent être réutilisés dans de multiples modules
📁

💻 core

Ce dossier contient basiquement le cœur de l'application. C'est l'endroit où l'on définira les méthodes globalement utiles au projet, les thèmes, les classes d'Exception pour gérer les erreurs... En l'occurrence : 🛠️ utils Le dossier utils contient les extensions utiles dans tout le projet et les clés permettant de stocker nos tâches en mémoire locale.

Extrait du fichier extensions.dart : Cette extension s'applique sur tous les double et permet de créer des dimensions responsives.

extension PercentSized on double {
  double get hp => (Get.height * (this / 100));
  double get wp => (Get.width * (this / 100));
}

🔢 values

Le dossier values contient des valeurs constantes réutilisables dans toute l'application.

🤝 Contribution

Les contributions sont les bienvenues! Si vous souhaitez contribuer à ce projet, veuillez suivre les étapes suivantes:

Fork du projet

Créez une branche pour votre fonctionnalité: git checkout -b feature/nouvelle-fonctionnalité

Effectuez vos modifications et effectuez un commit: git commit -am "Ajout de la nouvelle fonctionnalité"

Poussez les modifications vers votre branche: git push origin feature/nouvelle-fonctionnalité

Créez une demande de tirage (pull request)

🙏 Crédits

Ce projet a été développé par Marcel pour démontrer l'utilisation du pattern GetX dans le développement d'applications mobiles avec Flutter, avec les sources suivantes :

Fullstack School : Dont j'ai suivi le tuto youtube afin de développer cette application.

kauemurakami : Qui propose le pattern GetX. Plus de détails sur ce pattern à l'adresse : GetX Pattern